How to customize blogger widget title Background adding CSS

Colorful header also plays a great role in attracting people’s attention towards a particular subject. Good design will draw more attention...

Colorful header also plays a great role in attracting people’s attention towards a particular subject. Good design will draw more attention to you visitor. At the beginning of the designing I also had to suffer a lot to get the proper design. But finally I did it by myself, but forget this entire story. You are going to learn an easy trick to make your own very easily.

How to add CSS in blogger:

  1. How to and where to add css.
  2. Changing blogger widget title background color

Steps required to do this:

  1. Login to your blogger account.
  2. Now click on the view blog option.
  3. Go to your blog page and look for a tool image and right click on it and “copy link address”.
  4. Paste this link on a notepad and search for “widgetID”.We are going to apply css on this "wiggetID"
  5. Now go to blogger template->> Edit HTML->>and Check the expand widget template and press ctrl+F from your keyboard to search for “]]</b:skin>”.[Before modifying template HTML code, backup your template]
  6. Now add the following css code above the “]]</b:skin>” code.
    #ID h2{
    background:#A52A2A;
    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;
    }

    To modify background: replace #A52A2A with your own color code. Get color code form Here.
    To change text color : replace #ffffff with your own color code.
    You can also change font-size: here I have used 12 pixel.
  7. Save the template. Finally you have done it.

Using this technique you can use multiple colors in your different widget. If you find this tutorial helpful and want to get more tutorials like that then like my facebook page and feel free to comment if you have any doubt.

Related

Blogger tips and Tricks 7853083199631309424

Post a Comment

emo-but-icon

Search Here

Popular query

Follow Us

Ads By Google

Get free Update

Enter your email address:

E-mail verification is must for complete subscription

Delivered by FeedBurner

Circle AFS on Google Plus!

Follow AFS Google+ page
 

Side Ads

DMCA protected
Information, images and the content on this blog is Copyright ©AFS2011-2018. Please do not copy Any content for commercial purpose else we have to take a legal action. Thanks !!

Total Pageviews

Recent

free counters
 

Connect Us

Speech by ReadSpeaker

item