Put Tagged Post Widget

 

Assalamualaikum and hai readers ^^, Today, I want to fulfill one tutorial request by a blogger on my facebook..This widget was coded by myself so, credit me with a back link if you wish to re-tutor. This tagged post can also be considered as updated version of label widget. This label post widget is floating at the top of your blog. Hanging Label widget. If you like to add the hanging label widget to your blog, follow below steps.

1. Firstly, Log into your blogger account.
2. Go to Dashboard > Layout > Add a Gadget > HTML/JavaScript
3. Copy any code below based on the style that you want and paste it on the content section of the HTML/Javascript widget.
4. If you wish to customize it first, paste it here first.Next, paste the edited code to the HTML/Javascript

<style>
a.bar {
font:12px century gothic;
text-transform:uppercase;
letter-spacing:4px;
text-align:center;
text-decoration:none;
color:#000000;
padding:2px;margin:2px;
width:140px; height:15px;
display:block;
background-color: #f7c3cc;
background-image:url(BACKGROUND WOOD);
background-size:100%;
box-shadow: 0px 3px 3px #f5adba;
background-position:100% 100%;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a.bar:hover{
background-image:url(BACKGROUND WOOD);
background-size:10%;background-position:0% 0%;
}

.border {
width:65px;height:14px;
background:transparent;margin-top:-10px;margin-bottom:-5px;
border-right:5px solid #f8b6c2;border-left:5px solid #f8b6c2;
text-align:center;
}
.rope {
width:65px;height:12px;
background:transparent;margin-top:-3px;margin-bottom:-5px;
border-right:5px solid #f8b6c2;border-left:5px solid #f8b6c2;
text-align:center;
}
</style>
<center><div style="position:fixed;top:0px;left:5px;background-image:url(TAGGED POST IMAGE); width:168px; height:61px;padding-top:35px;"></div>
<center><div style="position:fixed;top:98px;left:15px;">
<div class="border"></div>
<a class="bar" href="http://YOUR LINK.blogspot.com/search/label/LABEL NAME?&max-results=6" title="TOOLTIP TITLE" >TITLE</a><div class="rope"></div>
<a class="bar" href="http://YOUR LINK.blogspot.com/search/label/LABEL NAME?&max-results=6" title="TOOLTIP TITLE" >TITLE</a><div class="rope"></div>
<a class="bar" href="http://YOUR LINK.blogspot.com/search/label/LABEL NAME?&max-results=6" title="TOOLTIP TITLE" >TITLE</a><div class="rope"></div>
<a class="bar" href="http://YOUR LINK.blogspot.com/search/label/LABEL NAME?&max-results=6" title="TOOLTIP TITLE" >TITLE</a><div class="rope"></div>
<a class="bar" href="http://YOUR LINK.blogspot.com/search/label/LABEL NAME?&max-results=6" title="TOOLTIP TITLE" >TITLE</a>
</div></center></center>

The Notes :
Fuchsia text : Color code here
Blue text : Background image URL ( wood background )
Example :
"http://kawaiilady.blogspot.com/search/label/study?&max-results=6"title="STUDENT LIFE" >STUDY</a>

Extras : Freebies tagged post image

If you want to save the image :
Right click --> Save image as...
If you want to copy image URL :
Right click --> Copy image address / Copy image location

Size : 168 pixel x 96 pixel

     

     

     

     

I had added ads on this site, I hope you guys can help me by clicking on the ads.. Okay that's all from me. Do comment on this post.. :D