Add Image Icon Beside Sidebar Titles On Blogger




| 13 comments

best blogger design tipsIn this post i have a neat Blogger design tip for your blog.With just a small snippet of Html code we you can add an icon beside the titles on your Blogger sidebar gadgets.This looks great and also helps helps your sidebar appear less cluttered.You can add any icon you like the only restriction will be the size of the image you use as it needs to be similar in size to the Title Text size.So lets look at a demo i created, i have added a simple Green Star Icon beside the titles in the demo.

Live Demo - Click To See Demo : Image Icon Beside Sidebar Title

Add Image Beside Sidebar Titles Blogger


Step 1. In your Blogger dashboard click Design > Edit Html





Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Before / Above ]]></b:skin>

.sidebar h2 {
background:url(IMAGE-URL-HERE);
background-repeat: no-repeat;
background-position:left center;
padding:10px 3px 0 30px;
}

Note - You must now add the image URL for your icon.Replace IMAGE-URL-HERE with the image you want to display.

Find Images - Google image search is a quick way to locate the right size image.When you search Google images you can use the options on the left to choose the exact size you want to find.

Once your happy save you template and check out the Sidebar Icons.Be sure to check out more of our Best Blog Design Tips.

Drop Your Comments, Views And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

13 comments:

  1. Excellent just what i was looking for I'm sooooo glad i found your site.

    ReplyDelete
  2. Http://tricks2share.blogspot.com
    Very nice trick bro

    ReplyDelete
  3. I followed the instructions but the icon I want to use isn`t showing on my blog....please help!

    ReplyDelete
  4. @ Erii - If you followed the steps it works you must have gone wrong along the way I'm afraid.

    ReplyDelete
  5. i add this, but title are appear above the icon :(

    what to do?

    Regards
    Hari

    ReplyDelete
    Replies
    1. i do have the same problem before, i guess u just need to messing up with the codes a little bit more..
      maybe this will help


      .sidebar h2 {
      background:url("ur image url here") no-repeat left;
      padding-left: 30px !important;
      background-position: 0 -1px;
      }


      the code 30px is the space between the title and the icon, just increase that to give it more space

      Delete
  6. @ Harri - You can see the padding in the code is currently 10px 3px 0 30px - this is in order 10 top 3 right 0 bottom 30 left.You can increase this to give more space were needed.a

    ReplyDelete
  7. @Paul Crowe you are Genius Dear
    Thanks & Keep Sharing With Us :-)

    ReplyDelete
  8. @ Tweetypie65 - Would depend on your template but around 16x16 to 24x24 should do.

    ReplyDelete
  9. Thanks, I'm a complete novice to blogging never mind html and I found it easy to follow. Keep up the great work. PS I was searching around blogs for different ideas when I hit on your blog and up popped a wee note in the bottom right corner with just what I was looking for, magic.

    ReplyDelete
  10. How do you change your comment style yo that plz tell me and sorry for bad english I am from Pakistan

    ReplyDelete
  11. do you have any other tutorial? it works for me thanks alot!

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us