Cara Membuat Widget Tombol Social Media Melayang di Blog

Topik Kali ini saya akan share mengenai Tutorial Cara Membuat Widget Floating Tombol Social Media di Blog, Mungkin sobat sudah tidak asing lagi melihat tombol Social Media Mengapung Pada Blog lain. Tapi pernahkah sobat berpikir bagaimana Cara Mebuatnya ? Nahh bagi sobat yang ingin Melihat tutorialnya langsung saja ikuti Tutorial Blogger dibawah ini.

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.
Sebelumnya saya pernah Share Juga Bagaimana :

• Cara Membuat Tombol Share Dibawah Postingan Valid HTML5
• Cara Membuat Widget Social Subscrebe di Blogger
• Cara Membuat Tombol Social Media Berputar

Oke sekarang masuk ke Tutorialnya.

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.

1. Seperti biasa, Login Ke Blogger
2. Masuk Ke Editor HTML (Template >> Edit HTML)
3. Copy kode berikut ini dan letakan tepat di atas kode ]]></b:skin>

.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/AVvXsEiHDFtKJ-HeVHVNaWNiyFrAivIZrYdMttr8Zbf7Crjq-biH3zAksITHGMelwRqXhyphenhyphen3H6CwUr3XkE9L-d4O9OQbRi1DfaddZz2LrTCie8IGuAKHsGf24qmtjrCAAmcEqZc4n3RJ5S4kVqFI/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}

4. Nahh Copy lagi kode dibawah ini, dan letakan di atas kode </head>

<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(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});  
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });

</script>

5. Save, dan Keluar dari editor HTML

Nahh Sekarang kita akan masuk ke Cara Pemanggilan Tombol Social Media tersebut dengan menggunakan Widget HTML/Javascript, Ikuti petunjuknya dibawah ini.

1. Masuk Ke TATA LETAK
2. ADD GADGET > Cari HTML/JavaScript,



3. Copy kode berikut ini dan letakan pada kolom seperti gambar pada no 2.

<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
4. Save, dan lihatlah hasilnya.

Sekian Tutorial Cara Membuat Widget Tombol Social Media Melayang di Blog semoga tutorial ini bisa bermanfaat untuk semuanya. Terimakasih