Cara membuat widget keren di blog~ hallo teman-teman kali ini saya akan mengshare cara membuat widget sosial media yang keren, pasti kalian tidak asing dengan widget ini widget sosial media yang sangat keren ini. pasti kalian terlihat heran kenapa bisa mengapung pada blog dan terlihat keren, maka dari itu yuk mari kita simak cara membuat widget ini bisa mengapung.
tapi tunggu dulu sebelum kita simak tutor ini saya akan memberikan penjelasan yang cukup singkat mengenai fungsi widget ini. widget ini terdapat sebuah situs media sosial yang berfungsi sebagai jalan atau akses antara sosial media dengan blog kita, dengan cara ini pengunjung akan dipermudah untuk terhubung ke sosial media tapi tak hanya itu pengungjung akan selalu mengetahui updatetan terbaru dari blog atau website kita. sudah paham kan? kalo sudah ayo kita mulai simak tutorial cara membuat widget sosial media.
cara memasangnya cukup mudah
1. kita harus login ke blog kita terlebih dahulu
2. masuk ke bagian tata letak
3. lalu pilih add widget
4. tambahkan atau pilih html/javascript
5. copy dan pastekan kode dibawah ini ke widget yang tadi dipilih kita.
<style>
.social-buttons{position:fixed;top:150px;width:45px;z-index:9999}
.button-left{left:0}
.button-right{right:0}
.social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon{background-color:#33353B;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpyAIa7OPLlMML7tZ4HT5uBsfI7DBKxFcl-YgmnGAyew0PVfbIvw-jzaErgOeQUYVvHUVM4-g83NF1ssThCOkpuh-_R5EebyYuBdEcXR1hHfQxVI0DT1Dj2Mo41ulD3dSSznaKPqHX9w/s1600/mas-icons.png)}
.button-left #facebook-btn span{background-position:right 10px}
.button-left #twitter-btn span{background-position:right -35px}
.button-left #google-btn span{background-position:right -127px}
.button-left #rss-btn span{background-position:right -80px}
.button-right #facebook-btn span{background-position:12px 10px}
.button-right #twitter-btn span{background-position:11px -35px}
.button-right #google-btn span{background-position:10px -127px}
.button-right #rss-btn span{background-position:11px -80px}
.social-buttons #facebook-btn:hover .social-icon{background-color:#3B5998}
.social-buttons #twitter-btn:hover .social-icon{background-color:#62BDB2}
.social-buttons #google-btn:hover .social-icon{background-color:#DB4A39}
.social-buttons #rss-btn:hover .social-icon{background-color:#FF8B0F}
.social-buttons #pinterest-btn:hover .social-icon{background-color:#D43638}
.social-buttons #youtube-btn:hover .social-icon{background-color:#C4302B}
.social-buttons a:hover .social-text{display:block}
.button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:left;height:43px;margin-bottom:2px;width:43px}
.button-left .social-text{display:none;float:right;font-size:1em;font-weight:700;white-space:nowrap;margin:11px 40px 11px 0}
.button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px}
.button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:11px 0 11px 40px}
.social-buttons .social-text{color:#FFF}
.button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px}
.button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='URL Facebook kalian' rel='nofollow' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Facebook</span></span></a>
<a class='itemsocial' href='URL Twitter kalian' rel='nofollow' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Twitter</span></span></a>
<a class='itemsocial' href='URL Google Plus kalian' rel='nofollow' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Google</span></span></a>
<a class='itemsocial' href='URL Pinterest kalian' rel='nofollow' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow us via Pinterest</span></span></a>
<a class='itemsocial' href='URL Chanel Youtube kalian' rel='nofollow' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Youtube</span></span></a>
<a class='itemsocial' href='URL Feedburner Sobat' rel='nofollow' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via RSS</span></span></a>
</div>
6. ubahlah kode yang berwarna merah tersebut sesuai alamat url kita kemudian klik simpan dan lihat blog kalian
cukup sudah tutorial ini semoga artikel ini bermaanfaat bagi teman-teman semua. terimakasih :D
