Customize your blogger widget title

Posted On / 4 comments

Good day people of planet earth! During this past week I made some changes in some of my blog and I notice a blogger widget title doesn't seem to fit on my designs, that is why I usually leave it blank.

But now we can edit those widgets, by using its unique widget ID, this trick will allow you to change the color background, font color, size and even the font style of your widget title.

The steps are simple just follow the instructions and you can see good results on your blogger template. I will share how to find the the unique blogger widget ID and how to use it to style your blogger title widget.

Here is how

Before we customize our sidebar, let us first look for the ID name of your widget.

Find unique widget ID

1. Log into your blogger.com account select a blog of your choice then preview your blog. You will see a wrench icon on your blog or the blogger edit key just like this one


2. Point your mouse cursor on that image and use right click, then click on copy link address and paste it on a notepad, because we will use them later.


This is a sample on one of my widget, the link address usually look like this


http://www.blogger.com/rearrange?blogID=4286932960589248134&widgetType=HTML&widgetId=HTML16&action=editWidget&sectionId=sidebar


HTML16 is the unique widget ID so keep that in mind. HTML/ Javascripts ID are usually named HTML1, HTML2, and so on. These ID's are sensitive so use them as they are.

Customize your title widget

Now lets go customize your widget and make sure your backed up your template before proceeding in case you made some mistakes.

1. Lets use an example, I will use my "popular post" widget. Its link address will look like this one.


http://www.blogger.com/rearrange?blogID=4286932960589248134&widgetType=PopularPosts&widgetId=PopularPosts1&action=editWidget&sectionId=sidebar


2.  Open your blog template > edit HTML > use CTRL+F and look for this code ]]></b:skin> and copy the code below and paste the copied code above ]]></b:skin>.

#ID h2{
background:#575656;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:12px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}

CUSTOMIZE


  • Replace "ID" with your very own widget ID, based on our sample it will be replaced by PopularPosts1.
  • #575656 is the background color, you can change them to any color you want using this color code generator
  • 12 is the default font size but you can change them to any size you want.
  • #ffffff is the font color, change them to any color using the color code generator.

3. Hit SAVE and you are all done!


Just repeat the steps for the rest of your widget its very simple most of the time you just copy and paste. 

I hope you liked it, don't forget to share! 

Cheers!




Receive News From The Blog In Your E-mail

Sign up and receive directly in your email. Its free!! Enter your email address and then confirm to begin receiving exclusive news from Blog!


4 comments:

  1. Let`s write that letter we thought of writing "one of these days Tibia Gold, just because someone doesn't love you the way you want them to, doesn't mean they don't love you with all they have Tibia coins, don't waste your time on a man/woman, who isn't willing to waste their time on you sro gold.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Great post. I will try this in my site. Your post is realy awesome bro..


    A good tips here:
    Best ways to prevent facebook hacking

    ReplyDelete

Please read first before commenting:

1.) No spamming please

2.) Do not flood the comment box with links.

3.) To get free updates, kindly subscribe.

4.) Have fun visiting my blog.

x
Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by blogtipsntricks