How To Add Social Contact Icon to Blogger

How To Add Social Contact Button in Blogger

1) Log into Your Blogger Account
2) Click on Layout






















3) Add a New Gadget of HTML/JAVA Script

4) Copy the Below Code and Add the Following Code in HTML/JAVA Script Portion

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/> <style> .gvusion-socials-icons{margin:0 0 20px 0} .gvusion-socials-icons ul{margin:0;padding:0;list-style:none;margin-bottom:-5px;margin-right:-5px;overflow:hidden} .gvusion-socials-icons ul li:before{display:none} .gvusion-socials-icons ul li{margin:0;padding:0;list-style:none;float:left;width:45px;height:45px;line-height:45px;text-align:center;background:#00baff;font-size:21px;margin-right:5px;margin-bottom:5px;opacity:.9;border-radius:3px;} .gvusion-socials-icons ul li:hover{opacity:1;} .secondary-sidebar .gvusion-socials-icons ul li{width:36px;height:36px} .secondary-sidebar .gvusion-socials-icons ul li a{line-height:45px} .secondary-sidebar .gvusion-socials-icons ul li a i{font-size:20px} .gvusion-socials-icons ul li a{line-height:45px;display:block;color:#fff} .gvusion-socials-icons ul li a:hover{color:#fff} .gvusion-socials-icons ul li.home{background:#83868a} .gvusion-socials-icons ul li.facebook{background:#516ca4} .gvusion-socials-icons ul li.googleplus{background:#f20000} .gvusion-socials-icons ul li.rss{background:#f29400} .gvusion-socials-icons ul li.youtube{background:#f20000} .gvusion-socials-icons ul li.dribbble{background:#dc71a6} .gvusion-socials-icons ul li.deviantart{background:#4c5e51} .gvusion-socials-icons ul li.pinterest{background:#f20000} .gvusion-socials-icons ul li.instgram{background:#406f94} .gvusion-socials-icons ul li.tumblr{background:#395875} .gvusion-socials-icons ul li.linkedin{background:#1985bc} .gvusion-socials-icons ul li.soundcloud{background:#f60} </style> <div class="gvusion-socials-icons mom-socials-widget"> <ul> <li class="facebook"><a href="http://www.facebook.com/MY PAGE" rel="dofollow" target="_blank" title="Follow us on Facebook"><i class="fa fa-facebook"></i></a></li> <li class="twitter"><a href="http://www.twitter.com/MY PAGE" rel="dofollow" target="_blank" title="Follow us on Twitter"><i class="fa fa-twitter"></i></a></li> <li class="googleplus"><a href="https://plus.google.com/https://plus.google.com/u/0/" rel="dofollow" target="_blank" title="Follow us on Google+"><i class="fa fa-google-plus"></i></a></li> <li class="instagram"><a href="https://www.instagram.com/MY PAGE" rel="dofollow" target="_blank" title="Follow us on instagram"><i class="fa fa-instagram "></i></a></li> <li class="youtube"><a href="https://www.youtube.com/channel/mypage" rel="dofollow" target="_blank" title="Follow us on Youtube"><i class="fa fa-youtube "></i></a></li> <li class="pinterest"><a href="https://www.pinterest.com/mypage" rel="dofollow" target="_blank" title="Follow us on Pinterest"><i class="fa fa-pinterest "></i></a></li> </ul> </div>


5) Save Your Progress and Refresh Your Blog