November 27, 2014

Fancy Ribbon Backgrounds For Blogger Sidebars!

Lets make sidebar deadlines look awesome by adding cool Design.Today we will talk about customizing sidebar Headline Backgrounds in Blogger templates. If you use photoshop designs, then it can slow your site. So we will talk about a CSS3 solution to use Ribbon style backgrounds without using a any image! This allow you to create ribbon backgrounds in any platform either wordpress or Blogger. You just need to add up CSS styles. So let`s start with it.

Fancy Ribbon Backgrounds For Blogger Sidebars : eAskme
Fancy Ribbon Backgrounds For Blogger Sidebars : eAskme

Other people are reading : How To Add Google Custom Search Engine in Blogger

How to Create Ribbon backgrounds in Blogger

First of all you need to get ID of the widget:

How to find the Widget ID:

  •     Go To Blogger
  •     Go To Layout
  •     Click on edit to open any widget
  •     In URL of widget you will find widgetID like HTML13 in our case. 
  •    Copy this widget value.
widgetID

Now let`s do second step.

Also See : BluePrint Subscription Widget In Blogger

How to Design the ribbon Background with CSS3

  •     Go To Blogger
  •     Go To Template
  •     Click on "Edit HTML" 
  •     Search for ]]></b:skin>
  •     Copy Code from here and Paste it above ]]></b:skin>
Now follow below mentioned customization tips to change color of the ribbon:
  •     Change background color of ribbon by editing hexadecimal color codes highlighted as yellow i.e: #282C2F
  •     Change background color of the ribbon tails by editing #353A3D 
  •     Change the text color by edititing #ffffff
  •     Change the top border color by editing #000000; You can also delete border by deleting border-top: 3px solid #000000; 
  •     Change the width of ribbon background by editing 338px

  •     Click on "Jump to widget" and select the widget value like HTML13:
  •     Expand the code.
  •     Search for <h2 class='title'><data:title/></h2>
  •     Replace above code with this code <h2 class='title'><span><data:title/></span></h2>
  •     Click on "Save template".

Now you will see this awesome Fancy Ribbon Backgrounds For Blogger Sidebar showing on your blog.

Final Words:

So fans, friends and followers, Try this beautiful widget and see how it work for you. If yu face any issue do ask us in comments. We will be updating more widgets everyday. Subscribe us to stay updated with eAskme. Happy Blogging!