Hi, This is a useful widget to modify your blogger more colorful. You can add this widget effortless to your blogger. It look like a ribbon style menu. If you want to add this to your blogger follow instruction…
Replace RED Text With Your Links
Replace BLUE Text With Your Titles
Are you happy enjoy……………….Leave your Comments below……..
Live Demo
- Go to your Blogger
- Select Template option
- Click on Edit HTML
- Find (Ctrl+F) code ]]></b:skin>
- Copy below code and paste it before ]]></b:skin>
/* The CSS Code techtoones.blogspot.com */
.ribbon span {
background:#A81B6A;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border: 1.5em solid #A81B6A;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
- Save Your Blogger Template
- Then Go to Layout.
- Click on Add A Gadget option
- Select HTML/JavaScript from given list.
- Paste the following code inside HTML/JavaScript.
<div class='ribbon'>
<a href='Your URL Here'><span>Home</span></a>
<a href='Your URL Here'><span>About Us</span></a>
<a href='Your URL Here'><span>Tricks</span></a>
<a href='Your URL Here'><span>Make Money</span></a>
<a href='Your URL Here'><span>Widgets</span></a>
<a href='Your URL Here'><span>Advertise</span></a>
<a href='Your URL Here'><span>Contact</span></a>
</div>
Replace RED Text With Your Links
Replace BLUE Text With Your Titles
- Save it now.
Are you happy enjoy……………….Leave your Comments below……..
