Add Beautiful Social Media Follow Widget In Blogger Blog
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.
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://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,1); background-position:0 0;}
#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,1); background-position:0 -33px;}
#abt .googleplUs{width:32px; height:32px; background-color:rgba(228,69,36,1); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,1); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,1); 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/iTsMRKOffiCiaL"target="blank">Follow Us On Facebook</a></li>
<li data-alt="Follow Us On Google+"><a class="icon googleplUs" href="https://plus.google.com/113786875906723733274/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/iTsMRKOffiCiaL"target="blank">Follow Us On Twitter</a></li>
<li data-alt="Follow Us On Pinterest"><a class="icon pinterest" href="http://pinterest.com/iTsMRKOffiCiaL"target="blank">Follow Us On Pinterest</a></li>
<li data-alt="Subscribe Via RSS"><a class="icon rss" href="http://techboymrk.blogspot.com/feeds/posts/default"target="blank">Subscribe Via RSS</a></li></ul>
Note:- Please replace highlight part of Code with you page ID.
http://www.facebook.com/iTsMRKOffiCiaL
https://plus.google.com/113786875906723733274/posts
https://www.twitter.com/iTsMRKOffiCiaL
http://pinterest.com/iTsMRKOffiCiaL
http://techboymrk.blogspot.com/feeds/posts/default
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.
Like the Post? Share with your Friends:-
