Home > Blogger, Blogging > How to Customize Your Sidebar Widget in Blogger (Blogspot)

How to Customize Your Sidebar Widget in Blogger (Blogspot)

For those of you who love to modify your Blog based on Blogger (Blogspot) CMS, here I give you more tips to enhance the appearance of your blog. This time i will share you a tips about how to customize the widget (sidebar) in your blog. Did you know that you can modify many things on widget in blogger, from adding icon beside the sidebar title, placing images beside label and change the font, color, border of the widget. I’ll give an example for the widget that I have customized follow by step by step guide how to modify it. Next, you can create your own widgets based on your own creativity.

The first thing to do you have to enter your Blogger Dashboard. Next thing you must go to Template and click Edit HTML. Click Proceed.

How to Add Icon beside Your Sidebar Title

add icon to sidebar How to Customize Your Sidebar Widget in Blogger (Blogspot)

To add the icon into the sidebar title is very easy. Just search for this code

]]></b:skin> </head>

Above the code, copy the following script

.sidebar h2 {
background:url(http://www.yourwebsite.com/folder-and-image-filename);
background-repeat: no-repeat;
background-position:left center;
height:25px;
margin:0;
padding:10px 3px 0 30px;
line-height:1.5em;
text-transform:uppercase;
letter-spacing:.2em;
}

Change Sidebar Appearance (Fonts, Color, Border, etc)

links customization How to Customize Your Sidebar Widget in Blogger (Blogspot)
You can change the Title and Content of your Sidebar. To be able to do this, you must understand a little about CSS (Cascading Style Sheets). For those who do not understand what is CSS, I recommend to learn first in W3Schools CSS website. The next thing you should do is find the ID of the widget sidebar that you use. Since each of the widget ID is different (depending on the template), then you must be creative to find the code. Normally i always using keyword search “sidebar” to find it. My blog is using the Blogger original template. The following codes are the code of my sidebar widget.

<b:section-contents id=’sidebar-right-1′>
<b:widget id=’BlogArchive1′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
<b:widget id=’LinkList1′ locked=’false’ title=’Links’ type=’LinkList’/>
</b:section-contents>

After founded the ID of Widget you want to modify, search for “/head”

  </b:template-skin>
</head>

Above this code, place the CSS code to change the appearance of your widget. In this case, I change my Links widget which has ID LinkList1. CSS code that I made are as follows:

#LinkList1 {
background:#8393ca;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #FFE25F;
}

#LinkList1 h2 {
background: url(http://vendyxiao.com/pictures/links-logo.png) no-repeat bottom left;
height:35px;
padding-top:10px;
font-size:0px;
}

#LinkList1 a:link {
color:#5F5F5F;
text-decoration:none;
}
#LinkList1 a:visited {
color:#5F5F5F;
text-decoration:none;
}
#LinkList1 a:hover {
color:$titlecolor;
text-decoration:underline;
}

pixel How to Customize Your Sidebar Widget in Blogger (Blogspot)

Incoming search terms:

  • background image sidebar blogger
  • how do i customize my sidebar on blogger
  • how to add your own sidebar labels in blogger
  • how to custoize blogger sidebar
Be Sociable, Share!
  • more How to Customize Your Sidebar Widget in Blogger (Blogspot)
  1. ddtankPS
    October 13th, 2012 at 20:13 | #1

    Why my template doesn’t have ]]>

  2. October 15th, 2012 at 11:32 | #2

    each template has different code. just search the </b:skin> and script above it

  3. Flora
    February 17th, 2013 at 11:59 | #3

    Hi! For the “adding an icon beside sidebar title,” I cannot find ]]> when I search through my HTML code. Perhaps I did something wrong?

  4. February 23rd, 2013 at 06:40 | #4

    what template do you use?

  5. January 16th, 2014 at 13:24 | #5

    Thanks for your shared.
    Can i used that code on the widget of blogger?

  1. No trackbacks yet.