Subscribe for FREE Updates.

Sunday 5 May 2013

Widgets

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.

How to add social media shearing touch me widget to blogger?

  • 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/AVvXsEigy4CwIub0WTIQK-L9T_859iK_ryApKkJVjUi4pkNwX8iB2Kd5yEgZhuPqaIqozm2fGouxWwxrEsIxujrAT9knrqYQ75lWCCtF671X9hQMSbXr2QRDkmFhznCB3hCFC7f8QcN7pRbcEvg/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/AVvXsEgPe8p1OiVrJqktFK3MO7mz7aQF5VGSaW06YTxaEB6FOqsCCpwO3djkXUQpM3Dj7N1F174HnN5oC5MoX8mPCrRZWmaR2aYZaRilSlLm2zhh6wekISpNQ53qv4gJ3kqyDoXP1kou08XbnoQ/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!!!!!!

Shakeel Asghar ADMIN
Posted By: Shakeel Asghar

Shakeel Asghar is the owner and founder of kutebkhana.blogspot.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share tips with you.

Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

18 Responses to “Add social media shearing touch me widget for blogger”

Ankit said...
7 May 2013 at 01:15

Amazing gadget bro.. Keep it up.


Shakeelasghar said...
7 May 2013 at 22:48

@ Ankit
thanks bro for your nice commenting keep in touch and always keep comments.


Mohammad Fazle Rabbi said...
11 May 2013 at 16:04

nice tutorial...your blog is growing fast..wish u best of luck.


Unknown said...
12 May 2013 at 05:55

Hello Sakheel. I am using wordpress for my blog http://www.earningjournal.com . Anyway I didn't knew it earlier and it could have helped me 2 years ago when I was using blogspot.


Shakeelasghar said...
12 May 2013 at 10:21

@ Laxmi prasanna
i work on it and make it for WordPress but you can also use Slick Social Media Widget plugin for WordPress to increase your traffic...


albina N muro said...
12 May 2013 at 19:39

Most people associate social media with positive outcomes, yet this is not .... There is an increasing trend towards using social media monitoring tools that allow. instagram followers check


Shakeelasghar said...
12 May 2013 at 21:07

@ albina
i agree with your though. nice commenting keep visiting......


Unknown said...
19 December 2014 at 10:30

Social media sharing buttons are important for every blog and website for people know about our regular updates and promotions in social media websites.
Web Design Company London | Web Design London


Unknown said...
26 December 2014 at 13:51

I enjoyed reading this and viewing the selection of featured sites. Thanks for taking the time to put it all together.
Wordpress blog themes
wordpress ecommerce themes


Unknown said...
19 June 2015 at 12:25

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write
Signature:
download descargar facebook gratis para Android celular and download free descargar facebook apk en español, descargar facebook plus , descarga facebook


Unknown said...
9 July 2015 at 13:16

Thank you for that information you article.
Signature:
download baixar facebook movel, Facebook movel, baixar facebook movel. Facebook chat, baixar whatsapp gratis, fazer o download baixar whatsapp para Android, iPhone. Últimas Facebook


Unknown said...
10 July 2015 at 14:31

Unable to create the brand identity dc good to customers
descargar whatsapp para android , unblocked games at school very nice , free unblocked games 77 online to play , descargar whatsapp gratis , unblocked games 77 , unblocked games online ,


Unknown said...
15 July 2015 at 14:22

I would like to thank you for your nicely written post
Signature:
Versión en descargar facebook en español a los países hablan Español: facebook entrar agora , facebook en español para and facebook entrar direto


Unknown said...
15 January 2016 at 07:37

Great info. I love all the posts, I really enjoyed, I would like more information about this, because it is very nice., Thanks for sharing.
Signature:
i like play games happy wheels online and play happy wheels 2 games and happy wheels game , super smash flash


Suseela said...
10 June 2016 at 15:49

Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us.


SEO Company in Chennai


Blogger Bangladesh said...
24 April 2020 at 12:09

wow, Great Post ever. Knowledgeable article for Me. Your writing skills Very High. I always Loved Your writing. Please keep writing HQ articles. Please Kindly check My web:
buy tiktok followers


eCom said...
18 September 2020 at 11:52

thanks for the article! nice to know this https://bloggerborneo.com/bpjs-dan-asuransi-kesehatan-sama-sama-penting-dimiliki/


Anonymous said...
23 March 2022 at 11:55

Add Social Media Shearing Touch Me Widget For Blogger ~ Kuteb Khana >>>>> Download Now

>>>>> Download Full

Add Social Media Shearing Touch Me Widget For Blogger ~ Kuteb Khana >>>>> Download LINK

>>>>> Download Now

Add Social Media Shearing Touch Me Widget For Blogger ~ Kuteb Khana >>>>> Download Full

>>>>> Download LINK


Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. If you have a problem check first the comments, maybe you will find the solution there.


Regards,
Shakeel Asghar

Are you Awesome? Legend has it that Awesome people can and will share this post!
Add social media shearing touch me widget for blogger