Showing posts with label me. Show all posts
Showing posts with label me. Show all posts
Sunday, August 21, 2016
Add Cool Social Media Sharing Touch Me Widget For Blogger
Add Cool Social Media Sharing Touch Me Widget For Blogger

This widget should be working like the picture above or you can see it at demo page.
DEMO HERE
How To Add Cool Social Media Sharing Touch Me Widget To Blogger?
1. Go To Blogger Dashboard > Layout.
2. Choose "Add a Gadget".
3. Select HTML/JavaScript.
4. Copy and paste below code inside it:
<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class=touchme>
<!--RSS-->
<a class=rss href="YOUR RSS LINK" rel=external nofollow target=_blank></a>
<!--Google Plus-->
<a class=googleplus href="YOUR GOOGLE PROFILE LINK" rel=external nofollow target=_blank></a>
<!--Facebook-->
<a class=facebook href="YOUR FACEBOOK LINK" rel=external nofollow target=_blank></a>
<!-- Twitter -->
<a class=twitter href="YOUR TWITTER LINK" rel=external nofollow target=_blank ></a>
</div>
Note:
- Replace YOUR RSS LINK with your Feed burner link.
- Replace YOUR GOOGLE PROFILE LINK with your Google+ URL
- Replace YOUR FACEBOOK LINK with your Facebook URL
- Replace YOUR TWITTER LINK with your Twitter Profile URL
5. Save it and you are done.
Thanks to MyBloggerTricks for this code.
Have a nice day. Do not forget to share and comment. =)
Go to link download
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
Subscribe to:
Posts (Atom)