Showing posts with label shearing. Show all posts
Showing posts with label shearing. Show all posts

Thursday, August 11, 2016

Add social media shearing touch me widget for blogger

Add social media shearing touch me widget for blogger


Now today I am shearing a beautiful touch me social media widget for blogger and website. This gadget is prearranged using buttons from popular services like pintrest, Google, twitter, facebook, and Rss…
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&amp;fg=444444&amp;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

Read more »