Thursday, August 11, 2016
Add social media shearing touch me widget for blogger
Add social media shearing touch me widget for blogger

This widget has a beautifulcurser effect and its look forced visitor to roll over the cursor and hit follow.
This widget working like a picture you can also see it at demo page.
LIVE DEMO
How to add social media shearing touch me widget to blogger?
- Log in to your blogger account.
- Click on blog title in which you want to add This.
- Go to layout and then click on Add a Gadget.
- Select "HTML/JavaScript" Widget.
- Copy the below code and paste in it.
<style>
.Subscribe-WTB h6{
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1ekUwnfSxIAr0Fyh535D00LoRPV3or523ofId4wN89Iz3RQckX00umBk_Ubb4VTckahV4Byfgt-r1IlMgD0brZ2NsWl-IVoKH86fZxOtRE3AW-Rw09QzWjogloscVztEsad7LYeGkOs/s1600/Subscribe+WTB+button.gif) no-repeat;height:50px;
margin:0px 0 0px 0;
padding:0px 10px 0px 0px;
font-size:0px;
font-family:Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff;
text-shadow:0 1px 0 #fff;
}
ul.social {
list-style: none;
margin: 02px;
overflow: hidden;
}
.social li {
float: left;
background: none !important;
padding: 0 !important;
margin: 0 4px;
}
.social li a {
display: block;
width: 50px;
height: 40px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2IZydHd4ftElXNS6BGjDEV9eJrcAGwWNqmWiGZl_vQgsgktvzVpgfTKJKNpyb-vblq4yXDRCb4P3n4R1h4BohWd5R8jpaiQLqURWSLnD5Dp-Dt-aFbkPg4rZ7dbC3954XN7l5B6kNuDU/s1600/Subscribe+WTB+Social.png") no-repeat transparent;
text-indent: -99999em !important;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
}
.social li a:hover {
padding: 0 !important;
}
.social li.rssicon a {
background-position: 0 0;
border-right: 1px solid #e6e6e6;
}
.social li.twicon a {
background-position: -50px 0;
border-right: 1px solid #e6e6e6;
}
.social li.fbicon a {
background-position: -100px 0;
border-right: 1px solid #e6e6e6;
}
.social li.gicon a {
background-position: -150px 0;
border-right: 1px solid #e6e6e6;
}
.social li.pinicon a {
background-position: -200px 0;
}
.social li.rssicon a:hover {
background-position: 0 -50px;
border-right: 1px solid #e6e6e6;
}
.social li.twicon a:hover {
background-position: -50px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.fbicon a:hover {
background-position: -100px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.gicon a:hover {
background-position: -150px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.pinicon a:hover {
background-position: -200px -50px;
}
.Subscribe-WTB{
width: 300px;
float: left;
}
.Subscribe-WTB.count{
color:#F17C18;
font-size: 14px;
font-weight: bold;
font-family: Helvetica, Arial;
height: 40px;
line-height: 40px;
vertical-align: middle;
width: 310px;
padding: 0 0px 0 4px;
margin:0;
}
.Subscribe-WTB.count span.bigcount{
color:#F17C18;
font-size: 24px;
font-family: Helvetica, Arial;
line-height: 39px;
vertical-align: middle;
margin:0px;
padding:10px 0px 0px 0;
}
.Subscribe-WTB.subicons{
border-bottom: 1px solid #e6e6e6;
margin: 0px 0 0px 0;
float: left;
width: 300px;
font-family: Helvetica, Arial; font-size: 12px;
}
</style>
<div class="Subscribe-WTB">
<h6 class=title>Subscribe Now!</h6>
<div class="count">
<span class="bigcount">
<a href="http://feeds.feedburner.com/KutebKhana"><img
src="http://feeds.feedburner.com/~fc/KutebKhana?
bg=99CCFF&fg=444444&anim=1" height="26" width="88" style="border:0"
alt="" /></a></span> <b><span style=color: #04BDFA;>Learn Pro</span><span style=color: #FB9B03;> Tricks Daily</span></b> </div>
<div class="subicons">
<ul class="social">
<li class="rssicon">
<a href="http://feeds.feedburner.com/kutebkhana" rel="nofollow"
target="_blank">Rss</a></li>
<li class="twicon">
<a href="http://twitter.com/shakeelasghar" rel="nofollow"
target="_blank">Twitter</a></li>
<li class="fbicon">
<a href="http://www.facebook.com/kutebkhana" rel="nofollow"
target="_blank">FaceBook</a></li>
<li class="gicon">
<a href="https://plus.google.com/116054827022382240041/" rel="nofollow"
target="_blank">Google+</a></li>
<li class="pinicon">
<a href="http://pinterest.com/shakeelasghar" rel="nofollow"
target="_blank">Pinterest</a></li>
</ul>
</div>
Customization!
- Change Green Highlighted color names with your own social media account names...
- Change Red Highlighted color address with your own feedburner button address....
- Now Hit Save You Are Done!!!!!!
Go to link download
alternative link download