Add beautiful social media follow me and subscribe for feed buttons on blogger. Following button like Facebook, Twitter, Google plus, pinterest and subscribe for RSS feed button its very useful for telling to our blog or site visitors about our social media connectivity they can connect with use by our social page for new updates.
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://lh6.googleusercontent.com/-O_eNfqyGbXY/Ua7QecE1aiI/AAAAAAAAA_M/CyeEAD56u1M/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="https://www.facebook.com/pages/Salesforce-Substance/1419350898370676"target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/+ShubhamGaurG/posts"target="blank">Follow us on Google+</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://twitter.com/shubhamgaur0702"target="blank">Follow us on Twitter</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="https://www.pinterest.com/chintuasshubham/"target="blank">Follow us on Pinterest</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://salesforcesubstance.blogspot.in"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>
|
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.
Post a Comment