widget jejaring sosial atraktif

1. login ke blogger > klik Design > Page element
2. Klik add Gadget dan Tambah HTML / Javascript
3. Sekarang pastekan kode berikut di bawah ini :

<style> #BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFCn0-F16nVVGuKFZeCPeYR8dqrSsGo4zM1ulUt5Zn9wezBmsMXFQGQTHh-qt9z4skCq0VheK0tL765y6DiMCVCKWxshU0RrBJBZPR6jR4sPdhGZfhK6Z1JwAGm9ILy946LOCyZU2fSY/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-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;-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;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;} #BT_social span:hover {visibility: hidden;} #BT_social span {display: block;top: 15px;position: absolute;left: 90px;} #BT_social .icon {color: #fafafa;overflow: hidden;} #BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;} #BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;} #BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;} #BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;} #BT_social li:hover .icon {width: 250px;} #BT_social li:hover .icon {background-color: #d91e76;} #BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;} #BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;} #BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;} #BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style> <br /> <ul id="BT_social"> <li><a class="icon fb" href="http://www.facebook.com/sijalupangna">Like us on Facebook</a>Like us on Facebook </li> <li><a class="icon twit" href="https://twitter.com/sijalupangna">Follow us on Twitter</a>Follow us on Twitter </li> <li><a class="icon google" href="https://plus.google.com/UserId">Follow us on Google+</a>Follow us on Google+ </li> <li><a class="icon rss" href="http://www.feedburner.com/sijalupangna">Subscribe via RSS</a>Subscribe via RSS </li> </ul>


KET:
 Setelah selesai menyisipkan kode diatas :

• Ganti "sijalupangna" dengan nama pengguna (user name) Facebook anda
• Ganti "sijalupangna" dengan nama pengguna (user name) Twitter anda
• Ganti "UserId" dengan userId Google plus anda
• Ganti "sijalupangna" dengan nama pengguna (user name) Feedburner anda

Sekarang save (simpan) template anda dan lihat hasilnya, semoga bermanfa'at....!

Original source