Cara Membuat Widget Sosial Keren

<style type='text/css'>
#saye{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#saye a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#saye p{position:relative; height:38px; cursor:pointer; padding: 0 !important;list-style:none;}
#saye .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:1.5px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/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;}
#saye p:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#saye .icon{overflow:hidden; color:#fafafa;}
#saye .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#saye .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#saye .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#saye .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#saye .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#saye p:hover .icon,
.touch #saye p .icon{width:97%;}
.touch #saye p .facebook, #saye p:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #saye p .twitter, #saye p:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #saye p .googleplus, #saye p:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #saye p .pinterest, #saye p:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #saye p .rss, #saye p:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<div id="saye">
<ul>
<p data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/pridonlot" data-alt="Follow us on Facebook">Ikuti Saya di Facebook</a></p>
<p data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/jasri_DM">Ikuti Saya di Twitter</a></p>
<p data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/103434496702173116380">Ikuti Saya di Google+</a></p>
<p data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/jasridm/">Ikuti Saya di Pinterest</a></p>
<p data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/Pri-donlot">Update melalui RSS</a></p>
</ul>
</div>

5. Setelah itu edit font warna merah sesuai dengan milik sobat. Klik simpan

Nah bagaimana, mudah bukan? Untuk melihat artikel tips blogging lainnya sobat bisa lihat di sini. Untuk melihat demo dari widget diatas, kunjungi pri donlot