Welcome to Design House Digital’s School of Design. Today, and every single day in September, we’ll have new blog posts; informative, detailed, and FREE classes that will take your digital scrapbooking to the next level. Each subject will have a new post weekly, and at the end of the month you won’t believe how much you’ve learned! Our schedule is as follows:

Today I’m going to teach you how to customize your sidebar.  I don’t know if there’s a fancy name for this technique.  We are simply going to add a single background graphic to every sidebar title.

First, create the background graphic.  I am using the basic template, so my width has to be 280 pixels.  It can be any height, really.  I’m going to make mine 50 pixels high.  I create a new graphic at 72 pixels per inch (ppi).

In Photoshop Elements, go to File > New > Blank File.  Enter a file name and the correct dimensions.  Maybe you want to make the background color transparent; it depends on the look you are going for.  Don’t forget to make sure the units are “pixels” (see screenshot).

Then, create your sidebar graphic.  You could fill the whole square/block in or do something to match a white or colored background.  I’m going to put a top border above my titles and a flower to the left.  I am using Karen Funk’s The Sweet Life Complete Collection. Tip: Don’t forget to leave lots of space for your titles!

Then I am going to save it for the web (see screenshot).  Because mine is transparent, I’m going to do a PNG-24.  You could do a jpeg as well.  You could do a gif if there aren’t a lot of colors in your graphic, but usually digi stuff is too colorful to save as a gif.

Once your sidebar graphic is ready for the web, you have to upload it to your site.  The easiest way to do that is to create a blog post with the graphic in it.  You can delete the post after you are done customizing your site.  Once your graphic has been uploaded, copy its web address.  Mine looks like this: http://1.bp.blogspot.com/-1XwVZgR7yuo/Tm67hHSomSI/AAAAAAAAALg/oJRq6rb1tBQ/s320/sidebar.png

In another tab, customize your layout.  First, set your gadget title font and color.  Go to Layout > Template Designer then Advanced > Gadgets.  Here you can choose a font and font color!  It’s so simple!

This next step is a little trickier.

You’ll need to make a CSS rule to insert your background image.  Go to Layout > Template Designer and then Advanced > Add CSS. Paste the following into the CSS, then change the URL to be your  image’s URL.  You’ll need to play with the pixels a little bit to make your text flow properly around your background image.  “height” is the height of the whole graphic; “padding” is the spacing between the edge of the graphic and the words.   You can preview the look & feel right there in the page, so it won’t be too hard to do.  The height and the first number under padding should equal the height of your graphic.  The padding numbers are referenced clockwise: top | right | bottom | left.

div.sidebar h2 {
 background: url(http://1.bp.blogspot.com/-1XwVZgR7yuo/Tm67hHSomSI/AAAAAAAAALg/oJRq6rb1tBQ/s320/sidebar.png) no-repeat;
 height: 28px;
 padding: 22px 0px 0px 50px;
}

Then, select “Apply to Blog” in the upper right hand corner and you’re done!

Welcome to Design House Digital’s School of Design. Today, and every single day in September, we’ll have new blog posts; informative, detailed, and FREE classes that will take your digital scrapbooking to the next level. Each subject will have a new post weekly, and at the end of the month you won’t believe how much you’ve learned! Our schedule is as follows:

• Thursdays – Journaling From the Heart with Jen Papadimitriou
• Fridays - Photography Tips and Tricks with Lori Pickens
• Saturdays – You and Your Camera with Allison Waken & Shannon Dombkowski
• Sundays– Standout Shadows with Gennifer Bursett
• Mondays – Design Theory with Tiffany Tillman
• Tuesdays – Blogging Secrets with Mary Shaw
• Wednesdays – Maximizing Templates with Renee Fink

I’m going to teach you how to create your own blog header from scratch today. Then I’m going to show you how to insert it into Blogger (Blogspot). If you know how to make a digital scrapbook layout, a blog header will be a breeze. If you’re new to this, it should still be pretty simple.

First, you need to know what size to make your blog header. For Blogger your image needs to be 760 pixels wide, at a resolution of 72 pixels per inch (ppi). It can be any height.

Then you need to make your header. In Photoshop Elements, go to File > New > Blank File, then name your file and enter your image size and resolution (see screenshot).

Now, create your header! Do it just like you would do a digital layout. If you need tips on how to do this, visit our digi classroom. A good video on getting started with digital scrapbooking is available on our site as well.

When your header is ready, save it for the web. Go to File > Save for Web… (see screenshot).

Then select jpeg medium in the upper right hand corner of the next box (see screenshot).

Click “OK” and select a file name. It should be the name of your blog with hyphens between the words.

Now, go to Blogger and upload your new header! Go into blogger and edit the layout of your blog (see screenshot).

Then select “Edit” next to your header (see screenshot).

Select the blog header from your computer, and select the placement “Instead of title and description” (see screenshot).

Click “Save” and then “Save Arrangement” on the Layout page, and you’re done! You can look at your blog and it will have the new blog header. Enjoy!

Here’s what it looks like. This one loads my own gallery’s layouts. Your customized widget code will load ONLY your own layouts.

Go to your “My Account” page to see a sample and copy your very own customized widget code.

To Install on a Blogger Blog

To install this widget on a blogger blog, go to “Design” and then copy your own widget code and click “Add a Gadget” where you want it to go. Choose the “HTML/JavaScript” gadget and then paste the widget code into the box. Hit “Save” and you’re good to go.

I’m so excited that I get to share this widget with you! Happy blogging!

Here are the kits I used from the Design House Digital Shop:

Print papers

I printed a few sheets of Audrey’s Papers on plain white cardstock using the borderless printing option on my HP printer.

Printed sheets of Audrey Neal's Wooded Whimsy Solids

Cut in half

I trimmed each sheet to 5.5″x8.5″

Cut the sheets in half (5.5x8.5)

Score

I used my scoring tool to score a line down the middle of each piece

score the sheets at 4.25"

Fold

I folded each piece along the score line

Cut labels

I used Deena Rutter’s pennant shapes with my silhouette to cut several labels out of textured cardstock.

Cut labels with Silhouette and Shapes by Deena Rutter

Round Corners

I used a corner rounder on the bottom two corners of each card.

Thank You Card

• inked the edges of the label and stamped thank you with a Paper Trey Ink Stamp and Versafine ink
• punched holes in the label and threaded some divine twine through for added interest
• mounted with pop dots

Hybrid Thank You Card by Joscelyne Cutchens

hi Card

• die cut a pinked circle with a spellbinder die and textured cardstock
• added hi with American Crafts Thickers
• mounted the circle to the flower and then the flower to the card using pop dots

Hybrid Card by Joscelyne Cutchens

hi Card

• die cut a pinked circle with a spellbinder die and textured cardstock
• inked the edges with a foam brush
• added hi with American Crafts Thickers
• tied a bow of divine twine to a corduroy button
• mounted the button to the circle and then the circle to the card using pop dots

Thank You Card

• drew a border around the edges of the label and stamped thank you with a Paper Trey Ink Stamp and Versafine ink
• I layered a few paper flowers with a corduroy brad mounted everything with pop dots

Thank You Card

• inked the edges of the label and stamped thank you with a Paper Trey Ink Stamp and Versafine ink
• wrapped some divine twine around for added interest
• mounted with pop dots

Hybrid Thank You Card by Joscelyne Cutchens

Thank You Card

• inked the edges of the label and stamped thank you with a Paper Trey Ink Stamp and Versafine ink
• added ribbon to the card.
• punched holes in the label and threaded some divine twine through for added interest
• mounted with pop dots

Hybrid Thank You Card by Joscelyne Cutchens

I hope you’ve enjoyed these cards and will give them a  try yourself!

Aloha,

Joscie, rhymes with bossy

www.cutchens.com

I can see what search keywords people used to get to my blog, what web sites link to my blog, and who visits it. I know where people live, what web browsers they use, and how long they stay on my site. Google Analytics tells me how many people keep coming back, and how many are new. And I can find out which pages are the favorites. Truly, that’s just the tip of the iceberg of what Google Analytics can do.

I highly recommend that you add Google Analytics to your blog. It’s time consuming to set up, but not really hard. It’s a lot quicker if you already have a Google Account. And the rewards are worth the energy you spend on the initial setup.

Here’s how to set it up:

1. Log into Google Analytics

Go to https://www.google.com/analytics

Either log in with your Google account or register a new Google account. If you use Blogger, Google AdSense, Gmail, or Google Documents, you already have a Google account. If not, signing up is easy. I’ve included the form below to show you what it looks like.

Since I registered for a Google Account, I get a confirmation page. I click the link that says “Click here to continue.”

Now I get to a new Google Analytics login page. I enter my password again.

This page says I’m not fully registered yet. I have to go check my email.

Sure enough, I have the validation email in my inbox. I click the link to verify my email address.

The email link takes me to this page.

Now that I have a google account, I go to the Google Analytics login page again ( http://www.google.com/analytics/ ) and click “Access Analytics.” I’m prompted for my password yet again, and I finally get to the sign up page.

3. Set up your Google Analytics account

Since it’s my first account, I am given the new account signup form. I enter my web site’s URL, name the new account, and choose my country and time zone.

Then, I enter my last & first name & country, and hit “continue.”

Now I accept the Analytics terms and conditions.

2. Add the Google Analytics tracking code to your blog

I have finally gotten to the page where I copy and paste the code into my web site. Everybody’s tracking code is different. You will only want your tracking code to appear on your site, and you won’t want to use someone else’s tracking code.

I select & copy the tracking code.

Then, I go to my blog and paste the tracking code into the blog’s template. In Blogger, I go to “Layout” > “Edit HTML” and scroll all the way down. I paste the tracking code on the line after the “end outer-wrapper” comment.

Note: If you’re not using Blogger, you’ll get to your template code a different way, but you should still be able to get in and add the analytics tracking code. Just add it at the end of the page, before the </body> tag.

After I’ve pasted my tracking code, it looks like this:

Now, I save my Blogger template. Then I go back to the analytics page and click “Save and Finish.”

My site is all set up!! Now Google Analytics will start tracking my blog. Every day from now on will contain statistics of people who visit the site. It can’t track time that is already past, though, so be sure to set up your site as soon as possible.

3. Track your site on Google Analytics

When I hit “Save and Finish,” I am taken to the Google Analytics Overview page. This is the page I will see from now on, whenever I log into Google Analytics. To get to my site’s statistics, I just click “View Report” next to my web site’s name.

The “View Report” link takes me to my dashboard. It’s boring right now, because no traffic has been recorded. But in a day, a week, a month, and a year, it will be data-rich and full of information about my blog, who visits it, and how they get there.

I can use the same account to track a new blog, in addition to this one, by clicking “+ Add New Account” just below the day/month/year boxes in the upper right hand corner of the page.

I can also share my statistics with friends by clicking into the “User Manager” near the bottom of the page, at the center.

There’s a ton more that I can do with it. The best place to go to learn more about Google Analytics is their Conversion University, a collection of video tutorials about how to set up and use Google Analytics.

I hope this tutorial helps you. Don’t be daunted by the process – it is a lot easier than it seems, and will be worthwhile for you.

So, did you get it yet? The blog hop kit we released this week? If not, you definitely need to, because it is fresh, fun, and absolutely free!

Start here, and hop your way through the blogs… it’s the perfect way to get to know your favorite designers! Ready to see what we did?

I absolutely adored the butterfly paper, and was inspired to do a layout about my daughter, and the changes she’s going through as she grows. I clustered quite a few things around my photo, and used the alpha to spread my title across the entire page. I also used part of some word art to change the journaling tab (tucked under my photo) to read ‘Today & Always,’ which fits my subject a little better.

Heather Guenther created this stunning layout. I love the graceful curves created by the beige paper, paired with that vibrant purple. She mirrored that in the small date strip in the upper left corner, and also recolored the word love to bring it in again. The placement of her photos in the frames is just perfect… the main photo (aww, so sweet!) is set apart by the ribbon and flower, and the close-up holds its own with the interesting crop.

Layers, layers, and more layers. This fabulous layout by Karen Funk shows us there’s no reason to be afraid! By keeping the pieces small, with plenty of white space, even the busiest and boldest of patterns look great together! I also love how one of her flowers is tucked behind the main photo; it’s little touches like this that keep a layout from looking stagnant.

Tiffany Bodily assembled the petal box for a quick and easy gift. Adding the purple flowers onto each side before printing is a great way to add a bit of personalization, and a matching gift card and tag really oomphs (yes, that’s a technical term) up the presentation. And when it’s filled with chocolate? Yeah, that’s pretty much perfect.

Have you enjoyed the fruits of our blog hop as much as we enjoyed hopping for you? Want to win a gift certificate to DHD? Hop on down to the comments, and let me know the last time you hopped… Me? Well, I was hopping to get this post done, and it was still a day late! ‘Hop’e you’ll forgive me.

Fonts and Photoshop

Have you ever purchased a template, only to open it in Photoshop and get an error saying that a particular font isn’t installed in your computer? This happens to me sometimes, because I have a PC and some of the templates I use were created on a mac.

This happens when the template uses fonts that aren’t already installed on my computer. The template file itself doesn’t come with the whole font – just the name of the font. When Photoshop tries to open the file, it looks for that font already installed on my computer and can’t find it. When I double-click on that text layer, I get an error like this:

Basically, Photoshop picks a different font and uses that instead of the font that was originally in my template.

Fonts and the Web

The same thing happens on the Internet. Web pages call for specific fonts to be used, by name. If you don’t have that font installed on your computer, you can’t view that page the way the author intended it; instead, your browser – Safari, Firefox, or Internet Explorer – will pick a substitute. This is all done behind the scenes, so you won’t even know there was a font substitution.

The most popular “Web safe fonts,” or fonts that are most likely available everywhere, are:

• Arial(best for text and headers
• Verdana (best for text and headers)
• Comic Sans MS (best for text and headers)
• Georgia (best for headers)
• Times (best for headers)
• Courier (best for code samples)

Here is a more comprehensive list of web safe fonts.

Fonts in action

If you want to change a little bit of something to a different font in HTML, you can add a style=”" attribute to any tag. If there’s not a tag around the text you want to change the font of, add a span tag.

The font-family style accepts a list of fonts, separated by commas. The computer looking at the page will use the first font in the list that it recognizes. That is why there is usually a list of 3 or more fonts in any font-family style.


<span style="font-family: Courier New, Courier, Monospace">Courier in text (best for code samples)</span>



<h2 style="font-family: Courier New, Courier, Monospace">Courier in a header (best for code samples)</h2>


The above code will look like this:

Courier in text (best for code samples)

Courier in a header (best for code samples)

You can see why the Courier font isn’t very good for regular text. It’s blocky and difficult to read when you’re just trying to read what it says as English. It’s great for code samples, though, because code is meant to line up vertically – which makes it easier to read when you’re looking at a monospace type like Courier.

You can also add the font-family style directly in a CSS block. It would look something like this:


span {
    font-family: Courier New, Courier, Monospace;
}


Text in Images

If your text is embedded in an image, however, there won’t be a font substitution! What you see is what everyone sees. If you really must have a fancy font, your best bet is to put your titles into images.

Don’t get too carried away, or you’ll be sorry! It takes a lot more time to put titles into images than it does to simply type out the text. Be prepared to put a little more time and effort into your blog if you go with image titles.

The sample below was made using Melissa Esplin’s Family Tree blog kit.

I hope this helps you as you decide how to use fancy text in your blog. Happy blogging!

UP58UZCPQWYC

Firefox, newer versions of Internet Explorer, Safari, Opera, Chrome, and other web browsers will all honor a favicon link tag in your page’s header, so it’s good to add an icon tag on your page. And it’s easier than you think.

First, you need to get an icon. Most of the blog kits at Design House Digital come with icons.

For this example, I’m using a favorite icon from Melissa Esplin’s Love Song Blog Kit. I can use the file format .gif, .jpg, or .png.

First, I upload the icon to blogger as a picture gadget. This is gadget temporary; it’s just one way to get the file up onto the blogger server. I go to Layout > Page Elements > then click one of the “Add a Gadget” buttons. For detailed instructions, see this post about adding elements to a page.

Once I have uploaded it, I preview my post. I do “view source” and then CTRL+F (find) and enter part of the favicon’s file name. I highlight the favicon’s web address and copy it.

Next, I go into Layout > Edit HTML and check “Expand Widget Templates.” I want to put a new tag in the header, so I use a tag like the one below (pasting in my own favicon’s web address in there).

<title><data:blog.pageTitle/></title>
<link rel=”SHORTCUT ICON” href=”http://1.bp.blogspot.com/_1m0JRGzh46c/S567LcQrZbI/AAAAAAAAAHk/SFKzO37Kbfg/S220/lovesongBK_favicon-1.png” />

Now I just need to click “Save Template” and view my blog to see my pretty little custom favicon.

A warning: These won’t show up properly in Internet Explorer. For IE, you have to save the file in .ico format and upload it to a server somewhere. Blog sites and image hosting sites won’t allow you to upload .ico files to these sites, so you’re stuck with .jpg or .png shortcut icons unless you have your own web server.

Hope you find this helpful. Happy Blogging!

I’ve been doing professional sites for over 12 years, but I only got into setting up blogs a couple of years ago. When I do professional sites, I install the open source blogging software and on my own servers. I like it that way because I have a lot more control over the end product. I have my own ideas of how a blog should look/act, and I do fancy fun things to these blogs.

Your average blog can be done nicely on WordPress’s servers. It’s a great place to do a personal blog.

First, I go to wordpress.com and sign up for an account.

I have to fill in the standard information to get my account.

Then I fill out the information I need to make my blog.

There! My blog is started. Next, I need to get into the dashboard so I can add my custom header. First I click “Add to Dashboard” at the top of the page. Then I click “Appearance” in the left-hand menu.

To change the header, I click “Header” in the left-hand menu (it showed up when I clicked “Appearance”) and then browse to the header graphic I want to use. You will see what size header graphic they want on the page. The easiest method I found was to resize the graphic in Photoshop to the exact size they wanted before uploading it.

If you want a different size header graphic than the one you’re shown, look around at the different themes available to you. They will offer different size graphics.

I tried a couple of different file formats and found that the best format to save my header in is a non-transparent gif. Once I’d uploaded my graphic, I hit the “hide text” button and then “save changes.”

After saving, a “visit your site” link appeared at the top of the page. I clicked that to preview it:

There! I’ve set up my blog and done a custom header. That wasn’t so hard. Hope it helps you!

Background Wisdom

First I’m going to get on my soapbox about backgrounds.

Any kind of background business belongs outside of the blog text itself, not behind the blog text. This is because it’s hard to read a blog with business behind the words. Try it; visit a bunch of blogs and pay attention to the backgrounds.

The best behind-the-text backgrounds are solid colors (yes, white is best) with high contrast text. If you’re going to go with a dark background and light text, be sure the text is large enough that it’s easy to read.

If you really must have a busy background behind your text, go into Photoshop and adjust its opacity so it becomes really “soft.”

Does it matter? Yes, actually. Your readers will appreciate it – and some will stick around longer, too.

Installing a background

This is the second in a two-part series. I am starting with the blog I worked on last week. At that time, I added a custom header and custom buttons.

For this demo, I’m using a background that comes with Melissa Esplin’s Psychedelic Circus blog kit. Her kit has 10 backgrounds to choose from. I’m going to pick the yellow swirly one since that matches the yellow background in the customer header I made earlier.

This background graphic is just a little square, but that’s okay because the web browsers will automatically “repeat” it both horizontally and vertically. The browsers won’t do it automatically; they need a little instruction. We’ll do that, as well.

We have to put the link to the background graphic into the page’s CSS stylesheet. Blogger doesn’t give you an intuitive way to do that, but I’m not going to give up so easily.

First, I have to upload the graphic to Blogger’s server. To do this, I go to Layout > Page Elements > Add a Gadget (right rail) > Picture (I showed you how to do that in my first post about customizing blogger). This gadget is temporary. Once I’ve set up my background, I’m going to delete it.

I select my background and hit “Save.” I don’t bother with anything else in that box, because I’m going to throw it away. All I need is the link to the uploaded graphic.

Then I preview it so I can get the link to the graphic.

When I preview it, I see the little background box in the right rail.

I need to get the link to the background. In Firefox, I right-click on the page and choose “View Page Source.” In Internet Explorer, I right-click on the page and choose “View Source.”

Then a page that looks a lot like Notepad appears, containing the actual “HTML markup” of the page. That’s what your web browser reads in order to display the page.

In order to find the link to the background, I select Control+F (or Edit/Find up in the menu bar) and enter part of the graphic’s filename. All of Melissa’s backgrounds contain the word “psych,” so I enter that into the find window. Then I see the link to the page.

The whole “HTML tag” (the thing that makes the image show up in the page) is as follows. I’ve bolded the part that I actually need from this tag.

<img alt=” height=’144′ id=’Image4_img’ src=’http://4.bp.blogspot.com/_1m0JRGzh46c/S4mC-OWgDrI/AAAAAAAAAB0/jor1BRMVD2A/S220/DHD_melissaesplin_psychcirq_bubble-2.png‘ width=’144′/>

I highlight it and copy it (control+C) for putting into my background. I don’t close that window, so I can get back to it again quickly if case I need to.

Now that I have a link, it’s time to install it into the page’s HTML/CSS. I click “Edit HTML” in the top menu. Then I need to find the body CSS. I hit Control+F and search for “body {” to get to it. It looks like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

In order to change the background, I just have to remove the $bgcolor and paste in the URL (link) to my new background. URLs have to have the word “url” and parentheses around it, as you see here. The word repeat after it tells the browser to fill the entire background with repeated images.

body {
background: url(http://4.bp.blogspot.com/_1m0JRGzh46c/S4mC-OWgDrI/AAAAAAAAAB0/jor1BRMVD2A/S220/DHD_melissaesplin_psychcirq_bubble-2.png) repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

It’s time to preview the page. On the Edit HTML page, the preview button is below the type-in box.

When I preview it, I see that it’s not exactly what I want. The center text is flooded with the background text. It’s too hard to read; I want a white background behind the center part of my page.

So I do a Control+F and find “#outer-wrapper {” to get to that part of the CSS. I add a little line that turns its entire background white. I’ve bolded my new line below.

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background-color: white;
}

Now I preview it again.

As you can see, I’ve achieved the effect I want: the background is on the left and right edges and the center area is all white. This is very important: I have to hit the “Save Template” button below the type-in box.

I can now delete the picture gadget I added earlier to remove the little yellow box in the right rail. I go back to “Page Elements” in the menu bar, find the gadget I want to remove, and click “Edit.”

I see a “Remove” button. I click it to get rid of the gadget. I click “OK” at the prompt. Then I click “Save” to be sure the page is saved.

When I preview it again, I see that the yellow box is indeed removed.

So that’s it. I have added a background from start to finish. I hope this helps you. Happy Blogging!