Go to Blogger >> layout
Click the edit Button to open your widget
in the address bar section of the widget window that pops up you find a long http url .Towards the end of the link you
will find the widget id value as shown below.
which is html 13 in our case.
Copy this widget value in exact same from
done move to next steps now
note this widget
Designing the ribbon Background with css3
Go to Blogger > template
Backup your Template
Click edit Html to open the template editor
Inside the editor Hit Ctrl+F to open a search box
Now find out ]]></b:skin>
Copy the code paste the code above]]></b:skin> tag
Copy the Code From the below box
Copy the Code From the below box
/*####### 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.
To change the text color edit #ffffffTo change the color of border top edit #000000; if you don't want to add a border then delete border-top: 3px solid #000000;
To change the width of the ribbon background edit 338px
Now Click "jump to widget " Button Location at the top in template Editor and Select the widget
value .In our Case it was html 13 so i will select this one
Expand the code by clicking the black arrow .you will need to expand it one more time
In the Expanded code you will find this code
<h2 class='title'><data:title/></h2>
Replace it with this code
<h2 class='title'><data:title/></h2>
Save your Template and you are all done
<h2 class='title'><data:title/></h2>
Save your Template and you are all done
0 comments:
Post a Comment