Cara Membuat Widget Follow us Keren di Blog

Disini saya akan membahas tentang bagaimana cara membuat widget Follow Us, sekarang mari kita coba membuat widget follow us sosial media yang keren. Untuk hasil yang akan kita buat nanti sama persis seperti gambar screenshot dibawah. Dalam widget ini akan ada 5 icon sosial media yang meliputi facebook, twitter, Google+, Pinterest, dan RSS. Jadi fungsi dari widget ini adalah untuk memudahkan para pengunjung mengikuti akun sosial media kalian.

1. Pertama silahkan login kedalam akun blogger kalian masing-masing.
2. Masuk ke tata letak > tambah widget > pilih html/java script.
3. Sekarang tambahkan kode ini didalamnya.

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .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/AVvXsEh7RH7H1xgo_IQYCXaxrYuYxAUP6zpGdhU5OeJegpkYFFgawAkIcSkSgPsMUIiGuSEV-dRqlbAYpsE5Lt8s6WD67gfzijuMXn-eKDShpFBaWF4OMJmbTZbIYuCIpQ-nhMPf_kghSjkpAl8/s800/sprites.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;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook">
<a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter">
<a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+">
<a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest">
<a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS">
<a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://mohammadrobih.blogspot.com/2013/12/cara-membuat-widget-follow-us-keren-di.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Catatan :
Ganti kode atau pager(#) yang berwarna merah dengan URL akun kalian.
Ganti kode berwarna merah yang pertama dengan URL facebook kalian.
Ganti kode berwarna merah yang kedua dengan URL twitter kalian.
Ganti kode berwarna merah yang ketiga dengan URL google+ kalian.
Ganti kode berwarna merah yang keempat dengan URL pinterest kalian.
Ganti kode berwarna merah yang terakhir dengan URL rss kalian.

Tweet