Stylish Horizontal Social profile button for Blogger
We need to add a beautiful widget for showing all our social sites profiles so that people can be in touch. There are many widget. In past i have shared a beautiful all in one blogger widget
This widget will be horizontal and it is very useful in the blogger side bar and in footer area. so if your template need a beautiful social sharing widget, i will recommend you to use this gadget.
Also read : Face book like box in Blogger
 |
Benefits :
- Simple and cute look
- Color changes when ever mouse goes on it
- Horizontal in size which makes easy for Bloggers to use it side bar areas.
How to install it :
- Go to Blogger Dashboard
- Click on layout
- Click on add a gadget and select add html/javascript widget
- Paste the following code and click on save
/*——–Touch Me Sharing Widget by a1bloggerseo——*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://farhankayni.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=”http://feedburner.google.com/fb/a/mailverify?uri=a1bloggerseo” rel=’external nofollow’ target=’_blank’></a>
<!–Google Plus–>
<a class=’googleplus’ href=”https://plus.google.com/u/0/102186620539628606324″ rel=’external nofollow’ target=’_blank’></a>
<!–Facebook–>
<a class=’facebook’ href=”http://www.facebook.com/a1bloggerseo” rel=’external nofollow’ target=’_blank’></a>
<!– Twitter –>
<a class=’twitter’ href=”http://www.twitter.com/ersnjy” rel=’external nofollow’ target=’_blank’ ></a></div>
How to Customize :
- Change a1bloggerseo(Which is after uri=) with your own feedburner id.
- Change google+ profile https://plus.google.com/u/0/102186620539628606324 with your owns.
- Change http://www.facebook.com/a1bloggerseo with your own facebook profile.
- Change http://www.twitter.com/ersnjy with your own twitter profile id.
You have done. if you have any issue kindly ask to me in the comment section.
Leave a Reply