Fancy Ribbon Backgrounds For Blogger Sidebars!


Ribbon backgrounds with CSS3

Looking for a cool Design Change for your blog sidebar's Headlines instead of that dull plain text headlines? Today we will learn an interesting way of customizing the sidebar Headline Backgrounds in BlogSpot templates. You have seen Photoshop Graphic designs in Ribbon, Canopy or Curtain Style but the problem with them is that you need to have good designing skills to in order to create them further they also slow down the load time of your webpage. Therefore we are bringing forward the simplest solution by designing Ribbon style backgrounds with the help of pure CSS3 rules without using a single image! The method described below can be used to create ribbon backgrounds in any platform, may it be wordpress or Blogger. All you need to do is add up some CSS styles. We are sure this will add an extra ordinary look and feel to your online diaries! The Demo can be seen live on our blog sidebar. Its time to get into your blogger factory and be creative. Lets get started!

Create Ribbon backgrounds in Blogger

To create a ribbon background for any Sidebar widget, first we need to know the ID value of that widget. For that do the following:

Finding the Widget ID Value:
  1. Go To Blogger > Layout
  2. Click the edit button to open your widget
  3. In the address bar section of the widget window that pops up you will find a long http URL. Towards the end of the link you will find the widgetid value as shown below. Which is HTML13 in our case. 

 

widget ID

 

  4. Copy this widget value in exact same form.

  5. Done! Move to next steps now.

Note: This widget

Designing the ribbon Background with CSS3
  1. Go To Blogger > Template
  2. Backup your template
  3. click Edit HTML to open the template editor
  4. Inside the editor hit Ctrl + F to open a search box.
  5. Search for ]]></b:skin>
  6. Just above it paste the following style code:

/*####### FANCY RIBBON BACKGROUNDS BY MBT #######*/

#HTML13 h2
{
position: relative;
padding: 10px 0px 15px !important;
margin: 0px 0px 10px 27px !important;
color: #ffffff;
background-color: #282C2F;
box-shadow: 0px 2px 4px rgb(136, 136, 136);
border-top: 3px solid #000000;
background-image: none !important;
height: auto !important;
width: 338px;
}


#HTML13 h2:before
{
    content: ' ';
    position: absolute;
    width: 30px;
    height: 0;
    left: -30px;
    top: 16px;
    border-width: 20px 10px;
    border-style: solid;
    border-color: #282C2F #282C2F #282C2F transparent;
     
}

 

#HTML13 h2:after
{
    content: ' ';
    position: absolute;
    width: 30px;
    height: 0;
    right: -30px;
    top: 16px;
    border-width: 20px 10px;
    border-style: solid;
    border-color: #282C2F transparent #282C2F #282C2F;
}

 


#HTML13 h2 span:before
{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    top: 100%;
    border-width: 5px 10px;
    border-style: solid;
    border-color: #353A3D #353A3D transparent transparent;
        z-index:99999;
}


#HTML13 h2 span:after
{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 0px;
    top: 100%;
    border-width: 5px 10px;
    border-style: solid;
    border-color: #353A3D transparent transparent #353A3D;
        z-index:99999;
}

Follow these customization tips to give your ribbon any color you want:

  • To change the background color of the ribbon edit the hexadecimal color codes highlighted as yellow i.e: #282C2F    Tip: you can use our color generator tool
  • To change the background color of the ribbon tails edit: #353A3D  Tip: Give it a slightly lighter shade compared to the background. See an example of ribbon tails below. Background is Red but tails are lighter Red.

ribbon tails

  • To change the text color edit #ffffff
  • To change the color of border top edit #000000;  if you don't want to add a border then delete border-top: 3px solid #000000

ribbon top border

 

  • To change the width of the ribbon background edit 338px

    7.   Now Click "Jump to widget" button located at the top in template editor and select the widget value. In our case it was HTML13 so I will select this one:

jump to widget

 

     8.  Expand the code by clicking the black arrow. You will need to expand it one more time.

expand widget

    9. In the expanded code you will find this code:

<h2 class='title'><data:title/></h2>

Replace it with this one:

<h2 class='title'><span><data:title/></span></h2>

Here we simply enclosed the sidebar Headline with a Span tag in order to apply the ribbon tail effect. The headline could have a Tag <h2> or <h3> or even <h1> . This tag may differ in custom templates.

     10.  Save your template and you are all done!

Visit your blog and discover a Fantabulous ribbon background on your sidebar! Ain't it that easy? :)

Need Help?

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help. Peace and blessings buddies. :)

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

18 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. this is awesome...
    regards
    ansmachine.blogspot.com

    ReplyDelete
    Replies
    1. Musthafa Bro, Fancy Ribbons are very pretty look, I have must use Ribbon in my blog . I really appreciate your efforts and I will be waiting for your further write ups thanks for sharing.
      ☺☺☺ Blogging Tips ☺☺☺

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. I should have been the comment spam head of MBT :P

    ReplyDelete
  4. Classic style for sidebar background. I found it interested. Thanks MBT!

    ReplyDelete
  5. You have done a great job mustafa ahmedzai with stylized sidebar headlines tag of blogger. Which has been only possible due to your strident knowledge on Programming code.

    ReplyDelete
  6. An awesome post! I always follow your posts here!
    http://www.bloggingtopics.com/

    ReplyDelete
  7. thank's for your information.........

    http://dsnpatoman.blogspot.com/
    http://animesoft18.blogspot.com/

    ReplyDelete
  8. ASSALAMU ALAYKUM
    THANKS AND REGARDS FROM
    www.iliyas.net

    ReplyDelete
  9. Great css tricks, You done it without any image.. Pure CSS. Thanks

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

    ReplyDelete
  11. Kindly suggest me Create Ribbon backgrounds in Blogger trick will work in word press Template ?

    ReplyDelete
  12. Hi Mohammad, can you please post a tutorial for ribbon codes to blogger post images?

    ReplyDelete
  13. Sir I am the regular reader of MBT and i learn a lot of blogging tricks through this great platform but now i am facing a problem related to blog logo . So please upload a complete tutorial on " how to add logo in blog spot instead of heading " I just want to put logo on my site as you have on your site .

    ReplyDelete
  14. thanks for tutorial now i change this ribbon in my static page :)

    memberi cara

    ReplyDelete
  15. I love this tip, but is there a way to apply to all gadget titles at once without having to code for each individual title?
    Also, for the "Designing the ribbon Background with CSS3", could someone add the code to Dashboard > Template > Customize > Advanced > Add CSS instead? I've always found this to be easier than adding it to "Edit HTML" because it gives me a "live preview" of what changes to the CSS would look like.
    Thanks.

    ReplyDelete
    Replies
    1. Even I want to know how to apply to all gadget titles at once...

      Delete