How to add custom social media follow me buttons to your blog

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/AVvXsEho7aV1mt1vPafJUV23o3Nha_bUpqsmPW2AfeEkib-dhIZ3HrOSNrVBPRgfe4zf2_Kx611LG5KDSKEtvO5KP8i94bIKzsm_w-MAu4S4lbyxbN2r4cr3NwUkieZEV1aUHJA8PijEU06mVhE/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/#"target="blank">Follow us on Facebook</a></li>

<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/#/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/#"target="blank">Follow us on Twitter</a></li>

<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/#/"target="blank">Follow us on Pinterest</a></li>

<li data-alt="Subscribe via RSS"><a class="icon rss" href="#"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/#

https://plus.google.com/#/posts

https://www.twitter.com/#

http://pinterest.com/#

http://#

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

Technical Work

How to add custom social media follow me buttons to your blog