Today I am going to teach you how to add a awesome social widget for blogger. You can use it for your social media or for some other things. to add this to blogger follow the steps given below
How to add this to blogger
- Go to layout>add a gadget>Html/javascript
- Paste the following code
<style type="text/css"> @charset "utf-8";/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- http://www.entypo.com/ ---------- *//* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before { font-family: 'entypo', sans-serif;}
/* ---------- GENERAL ---------- */
body { background: #fffdf0; font: 100%/1.5em sans-serif; margin: 0;}
a { text-decoration: none;}
ul { list-style: none; margin: 0; padding: 0;}
.container { height: 3em; left: 50%; margin: -1.5em 0 0 -6em; position: absolute; top: 50%; width: 12em;}
/* ---------- SOCIAL ---------- */
.social { position: relative; height: 3em; width: 13.5em;}
.social li { display: block; height: 4em; line-height: 4em; margin: -2.2em; position: absolute; -webkit-transition: -webkit-transform .7s; -moz-transition: -moz-transform .7s; -ms-transition: -ms-transform .7s; -o-transition: -o-transform .7s; transition: transform .7s; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); text-align: center; width: 4em;}
.social a { color: #fffdf0; display: block; height: 4em; line-height: 4em; text-align: center; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: 4em; }
.social li:hover { -webkit-transform: scale(1.3,1.3) rotate(45deg); -moz-transform: scale(1.3,1.3) rotate(45deg); -ms-transform: scale(1.3,1.3) rotate(45deg); -o-transform: scale(1.3,1.3) rotate(45deg); transform: scale(1.3,1.3) rotate(45deg);}
.facebook { background: #155b9d; left: 0; top: 0%;}
.twitter { background: #1a9ec4; bottom: 0; left: 25%;}
.dribbble { background: #d05f8f; left: 50%; top: 0%;}
.behance { background: #3f7aa3; bottom: 0; left: 75%;}
.linked-in { background: #157f9d; left: 100%; top: 0%;} </style>
<html lang="en"><head>
<meta charset="UTF-8"> <title>Social Section</title>
</head><body>
<div class="container"> <ul class="social">
<li class="facebook"><a href="#" class="entypo-facebook"></a></li> <li class="twitter"><a href="#" class="entypo-twitter"></a></li> <li class="dribbble"><a href="#" class="entypo-dribbble"></a></li> <li class="behance"><a href="#" class="entypo-behance"></a></li> <li class="linked-in"><a href="#" class="entypo-linkedin"></a></li>
</ul>
</div> </body></html>
EmoticonEmoticon