See Below Live Demo
|
How to add social media button in blogger?
Follow below steps for add social media follow button in your blog.Sign in – in your blogger account
Select your Blog in which blog you want add social media follow button.
Go to Layout Option.
In Layout option there is an Add Gadget Option Select this (see below demo image)
After select Add Gadget a popup window will be open (Add Gadget window)
Now select “HTML/JavaScript” Gadget. (See below demo image)
Now add below given JavaScript in Content Box. (See below demo image)
Copy below code and past in HTML/JavaScript Content box
|
<style>
#abt{list-style:none; text-decoration:none;
font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#abt a{text-decoration:none; font-family:trebuchet
ms,sans-serif;}
#abt li{position:relative; height:38px;
cursor:pointer; padding: 0 !important;}
#abt .facebook, .googleplus, .pinterest, .rss,
.twitter{position:relative; z-index:5; display:block; float:none; margin:10px
0 0; width:210px; height:38px; border-radius:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfwF34YeVNS5lSlqTBvavPGh4IGBqWebVuCDSzsCnKs7Gm986FwnZT0TFjus-uiYC8Q_JobaKtkDBwt4bNX6x-EJhGbJaBazhgQ8kGrJxNHNrSDtJZl6r6wY9MwTiqgpWNHxuhbCwli1Q/w35-h158-no/facebook+and+google%252B+.png)
no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28)
0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left;
text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;
line-height:32px; -webkit-transition:width .25s ease-in-out,background-color
.25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color
.25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s
ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s
ease-in-out; transition:width .25s ease-in-out,background-color .25s
ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#abt li:after{position:absolute; top:0;
left:50px; z-index:2; display:block; height:38px; color:#141414;
content:attr(data-alt); line-height:32px;}
#abt .icon{overflow:hidden; color:#fafafa;}
#abt .facebook{width:32px; height:32px;
background-color:rgba(59,89,152,0.42); background-position:0 0;}
#abt .twitter{width:32px; height:32px;
background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#abt .googleplus{width:32px; height:32px;
background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px;
background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px;
background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#abt li:hover .icon,
.touch #abt li .icon{width:210px;}
.touch #abt li .facebook, #abt li:hover
.facebook{background-color:rgba(59,89,152,1);}
.touch #abt li .twitter, #abt li:hover
.twitter{background-color:rgba(64,153,255,1);}
.touch #abt li .googleplus, #abt li:hover
.googleplus{background-color:rgba(228,69,36,1);}
.touch #abt li .pinterest, #abt li:hover
.pinterest{background-color:rgba(174,45,39,1);}
.touch #abt li .rss, #abt li:hover
.rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="abt">
<li data-alt="Follow us on
Facebook"><a class="icon facebook"
href="http://www.facebook.com/allbloggertips"target="blank">Follow us on
Facebook</a></li>
<li data-alt="Follow us on
Google+"><a class="icon googleplus"
href="https://plus.google.com/113485845055897195092/posts"target="blank">Follow
us on Google+</a></li>
<li data-alt="Follow us on
twitter"><a class="icon twitter" href="https://www.twitter.com/allbloggertips"target="blank">Follow
us on Twitter</a></li>
<li data-alt="Follow us on
Pinterest"><a class="icon pinterest"
href="http://pinterest.com/allbloggertips/"target="blank">Follow us on
Pinterest</a></li>
<li data-alt="Subscribe via RSS"><a
class="icon rss" href="http://www.allbloggertips.com/feeds/posts/default"target="blank">Follow
us on Pinterest</a></li>
</ul>
<small><div style="font-size:50%;
text-align:right;"><a href="http://www.allbloggertips.com/2013/06/social-media-follow-me-buttons-for.html"
target="_blank" title="Get This Widgets">Widget by
ABT</a></div></small>
|
http://www.facebook.com/allbloggertips
https://plus.google.com/113485845055897195092/posts
https://www.twitter.com/allbloggertips
http://pinterest.com/allbloggertips
http://www.allbloggertips.com/feeds/posts/default
Note:- Please Replace highlight part of Code with you page ID.
copy above code and modify with your page id's and past in "HTML/JavaScript" content box and save your widget.
Drag this widget for arrange the place of this widget in layout page.
Thanks I hope you like this post
