Add Ribbon Above the Header in Blogger

Add Beautiful Ribbon Above the Header in Blogger : Adding ribbon in blogger is very easy , it need just few steps and the game is over ! Actually adding ribbon to the header or above header or any where in blog makes the outlook of blog more sexy.You may have observed the ribbon of my blog which is a rainbow style, now how to add ribbon like that in Blogger Header or above the header follow the below steps.

LIVE DEMO

How to Add Ribbon Above the Header in Blogger

Go To Blogger >> Dashboard
Click On Template >> Edit HTML
Now Search for <head> tag and just above the head tag add the below div

<div class='ribbon'></div>

You can add this div any where in the blog (where you want to show the ribbon i.e in the head , below the head or above the head)
After adding the div save your template !

Applying CSS

Now we can apply the CSS on the above declared class(ribbon)
For Applying the CSS go to blogger dashboard again
Click On Template
This time Click on Customize >> Go To Advanced >> Click On Add CSS
And Now Copy the below CSS script and add it there

.ribbon {

width: 100%;

height: 3px;

background: url(http://oi57.tinypic.com/9k8hlf.jpg) 0 0 no-repeat;

background-size: 100%;z-index: 1;

}

.ribbon is the Class which we have declared above , if you want to change the name of the class you can do it just by changing ribbon to your desired name in both (HTML and CSS)
background property will add the image which you are using as a ribbon
For adding your own image just change the URL(http://oi57.tinypic.com/9k8hlf.jpg) to your desired image URL !
Now Click On Apply this Template
and That's it !
Checkout your Blog now a ribbon will dance above the header section.

So What's Up : After a long time i shared an article with you People hope you will love it . I was busy in exams , now i am totally free INSHALLAH will share more interesting tuts with you People , Stay Blessed !

You may also like : How To Tuts by Thats Blogging!