Fancy Ribbon Display For Blogger Sidebar ~ Big Blogger Cafe

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

Also Read: Bubbles Comment For Most Widget Commented

...........................................................................................................................................................

Create Ribbon Display in Blogger

............................................................................................................................................................

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

.................................................................................................................................................

Finding The ID Widget Value

.................................................................................................................................................

Go To Blogger >> Layout
Click edit button to open your blogger widget
In the section address bar of the window blogger widget that pops up will you find a long URL http. Towards end the link of you will find the value Widgetid as below shown. Which is 13 HTML in our a case.

4. Copy this value widget in same exact form.

5. Done!next steps to Move now.

Note: This widget.

.........................................................................................................................................................................................................................

Designing The Ribbon Display With The CSS3

Go To Blogger > > Template
Backup to your template
Click Edit HTML to open your template editor
Inside the editor Ctrl + F to open a search box.
Search for ]] >< / b:skin >

Just above it following the paste style code:

/*####### FANCY Display 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 4px 6px rgb(138, 138, 138);
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 #282C2F #282C2F transparent;
}

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

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

To change the Display background color of the edit ribbon the color hexadecimal highlighted codes as i.e yellow: #282C2F Tip: you use can our generator color tool

To change the Display background color of the edit ribbon tails: #353A3D Tip: Give it a lighter slightly compared shade to the background display . example See an of below ribbon tails.Background display is but Red tails are Red lighter.

To the change text display color edit #ffffff

To the change color display of top border edit #000000; . if dont you want to the add a then border delete a border-top: 3px solid #000000;

To the change blogger width of the background ribbon display edit 338px

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

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

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

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

10. Save your blog template and are you all done!

Visit your blogger blog and Fantabulous a discover ribbon background display on your blogger sidebar! that Ain't it easy.

........................................................

Need Help

.......................................................

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