Sebelum masuk ke Tutorial saya akan memberikan penjelasan secara singkat terlebih dahulu. Fungsi Tombol SOSMED atau lebih tepatnya Sosial Media ini berfungsi untuk menghubungkan antara web atau blog dengan Jejaring Sosial Media Blog atau Web tersebut, jadi pengunjung akan gampang menghubungkan antara akun sosial media mereka dengan akun sosial media blog tersebut dengan begitu Pengunjung akan selalu mengetahui Update terbaru dari Blog atau web Tersebut.
Cara Memasang Widget Social Media Melayang di Blog
Untuk cara memasangkan widget tersebut terlebih dahulu kita harus menyimpan beberapa script di Editor HTML, ikuti petunjuknya dibawah ini.
- Seperti biasa, Login Ke Blogger
- Masuk Ke Editor HTML (Template >> Edit HTML)
- Copy kode berikut ini dan letakan tepat di atas kode ]]></b:skin>
- Nahh Copy lagi kode dibawah ini, dan letakan di atas kode </head>
- Save, dan Keluar dari editor HTML
.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/AVvXsEj7wpiNK35A6AdWd7kR6FSPy_Q9eAY3sX78v5TieuiUuSnLSi0C5R2kwwPr_vNCdXDKF44W8u621h5EQjwPK7tWN76orWJVT1D_TiXHknLV01Nw5trvLHV2RPj5Of34VZP5zBCbk2F6vVs/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}
<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>
Nahh Sekarang kita akan masuk ke Cara Pemanggilan Tombol Social Media tersebut dengan menggunakan Widget HTML/Javascript, Ikuti petunjuknya dibawah ini.
- Masuk Ke TATA LETAK
- ADD GADGET > Cari HTML/JavaScript,
- Copy kode berikut ini dan letakan pada kolom seperti gambar pada no 2.
- Save, dan lihatlah hasilnya.
<div class='social-buttons button-right hidden-phone hidden-tablet'> <a class='itemsocial' href='URL Facebook Sobat' 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 Sobat' 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 Sobat' 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 Sobat' 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 Sobat' 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>
Keterangan : Sesuaikan Tulisan yangg berwarna merah dengan semua akun Sosial Media sobat
Sekian Tutorial Cara Membuat Widget Tombol Social Media Melayang di Blog semoga tutorial ini bisa bermanfaat untuk semuanya. Terimakasih
