Tuesday, November 30, 2010 ❣

BLOG TUTORIAL : How to replace sidebar widget's title with an image?

Hello everyone!
Some people has been asking me how did i replace my sidebar title with an image. 
So this tutorial is for YOU! :D 

 photo blogstar-1.jpg
 photo twitter.jpg
 photo popular.jpg
 photo NUFFNANG.jpg
 photo labels.jpg
 photo footprints.jpg
 photo followers.jpg
 photo flashback.jpg

Look at my sidebar! Pretty, no? HAHA! 

Anyway, it's so simple and! Only 3 steps.

1. Prepare an image. Make it pretty! :) Maybe around 35x180 or so. Just play around with the size so that it fits your sidebar.

2. Upload your image to an image hosting website. I'll always go for Photobucket. But you can use any website you want. Just remember to get the direct link!

3. Go to Design > Edit HTML
Okay. So the first thing you should do is Expand Widget Templates. Its on the top right of your html code.


Now you have to search for id='BlogArchive1' (this is for Archives gadget)
Just click Ctrl + F and paste this code there.


You will find this set of codes (or something similar to it)
<b:widget id='BlogArchive1' locked='false' title='Archives' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>

Found it?

Okay now...
<data:title/> is your sidebar title data tag. To use an image, replace it with <img src="YOURI_IMAGE_URL"/>

So your final code will look a little something like this
<b:widget id='BlogArchive1' locked='false' title='Archives' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/><img src='YOURI_IMAGE_URL'/></h2>

To look for other sidebar widgets just search id='YOUR SIDEBAR TITTLE'
Example : I'm looking for my twitter sidebar id='Twitter'

Any questions, just ask me :)

No comments :

Post a Comment

Funny you scrolled all the way down here :P Hehehe. Have a great day ahead ❤