Cara Membuat Widget Sosial Keren
RizkyYNWA - Pernah lihat widget diatas ? Mungkin bagi anda blogger yang sering blog walking ke banyak blog, suatu saat anda pernah menemukan hal yang unik dan menarik dari blog tersebut. Tak jarang kemudian anda ingin juga memiliki hal tersebut. Dalam hal ini saya akan berbagi tutorial untuk membuat widget keren, seperti yang tertera pada gambar diatas. Sebenarnya apasih gunanya mempercantik blog ? Untuk menjawab pertanyaan tersebut insyaallah akan ada pembahasan tersendiri dilain waktu.
Baiklah untuk membuat widget seperti diatas, caranya sangat mudah. Caranya Ikuti panduan dalam artikel ini.
1. Login ke blogger
2. Setelah anda login, kenudian masuk ke tab tata letak
3. Pilih tambah gadget dan pilih html/javascript
4. Lalu copy paste kode dibawah ini
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtCYArlQitLjxLMWafS_IDKOnHA2hCyoPU1fvWhRIqCTNaCpgszxAxpwIOUriyqd1KFQ0qd4HkQFQJF4bOSj9o9gJWJG9GMHwWY93BljtHfEO7oCCJCn0VA9aHnVMOtMMdGPsQ3bf3Bh8/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