Ads Top

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.

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!

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.