2 Tutorials in 1!

Woohoo! Two tutorials today. First one is how to have an icon next to post/sidebar titles (requested by Gymore), and the second one is how to have different backgrounds for each page of your blog (requested by Icey24635... haha I'm so awesome I memorized all those numbers after your name).

Here we goooooo!


How to have an Icon next to post/sidebar titles

I'm on the library's computer right now.... they have crappy computers that disable stuff like Paint and taking screenshots (and not to mention the WORST internet connection in the history of the world). So bear with me...

First of all you'll need to make your image. Make the dimensions about 16x16px. You can either save it as a .jpg or a .png. Upload your file to Tinypic.

Now the second step is to go to your dashboard then to Edit HTML. After that, search for this:

h2 {

And then you'll find a code like this:

h2 {
margin:1.5em 0 .75 em;
font:$headerfont;
line-height:1.4em;
...more code here

Now insert the code right underneath h2 } and right above margin:1.5em 0 .75em;

background-image:url(image link goes here);
background-repeat:no-repeat;
border: 0px;
margin-bottom:5px;
padding: 2px 2px 2px 30px;

now delete this code:

margin:1.5em 0 .75em;

and save!

If this was all too confusing for you, the final code should look  [something] like this (oh and btw the added code is bolded):

h2 {
background-image:url(image link goes here);
background-repeat:no-repeat;
border: 0px;
margin-bottom:5px;
padding: 2px 2px 2px 30px;
font:$headerfont;
line-height:1.4em;
...more code here

and you're finished!

How to have a different background for each page

This is really easy. First you'll need to make or find a background for your page and get the direct link to it.

Go to your dashboard and go to Design>Edit HTML and search (CTRL+F) for this:

</head>

Now paste the following code right above this.

<b:if cond='data:blog.url == &quot;Your Blog Page Url&quot;'>
<style>
body {
background-image: url(Direct link to your Background);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>

Now just replace the words in red with the link of the page on your blog that you want to change the background. (e.g: http://twolegersblog.blogspot.com/p/tutorials.html) And replace the words in fuchsia (or pink or whatever you want to call it) with the direct link for your background.

Remember, you can do this with all your other pages as well! Just copy and paste the code multiple times and change the page link and the background links each time.

Have fun ;)
Until next time,

PS: I know this isn't on the tutorials list yet, but once I get home I'll be sure to add it on there :P