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 title

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)

sidebar widget customization
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;
}

Related Posts Plugin for WordPress, Blogger...
Be Sociable, Share!

Leave a Reply

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