Cara Membuat Widget Tombol Social Media Melayang (Floating Widget Button)

TutorLoad30 - Pembahasan kali ini adalah Cara Membuat Widget Tombol Social Media Melayang atau bisa disebut juga sebagai floating widget. Fungsi widget ini supaya mempermudah pengunjung untuk memfollow akun si pemilik blog di berbagai social media yang ada. Selain itu juga bisa membuat tampilan blog lebih cantik.

Floating Wdget Socmed Button

Seperti biasa, semua tutorial blogger yang saya berikan semua sudah pasti saya uji coba terlebih dahulu dan untuk Floating widget button ini juga sudah saya pasang di blog ini bisa anda lihat sendiri disamping kan... Berikut reviewnya lewat gambar.

Review

Bagaimana? tertarik untuk memasangnya juga bukan!. Buat anda yang ingin memasangnya langsung saja ikuti tutorial ini hingga selesai. 

1. Login ke Blogger.
2. Langsung menuju Template - Edit HTML.
3. Cari kode ]]></b:skin> lalu tempat kode di bawah ini tepat diatasnya.
/* Float widget social media */
.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/AVvXsEiaeAFaQm5HJNlvig_4mzXWBTFuG2v1ANHZymdrcUiC1_XViW8oFtgAy0K73B-6R1MvMZbF5ENzle3AgD8IVJUR_oBCPZTNnqSewhtVXpKF4PwCzOO0IPXcXB25mJRc0l6Yjco9VtYP5M8/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. Kemudian selanjutnya cari kode </head> , lalu letakkan kode ini tepat diatasnya.
<!-- Float widget social media start -->
<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>
<!-- Float widget social media end -->
5. Simpan kemudian keluar dari Edit HTML.

Nah kita sudah selesai menyimpan beberapa script di HTML, sekarang tinggal waktunya untuk melakukan pemasangan widgetnya seperti biasa. Buka menu Tata Letak - Tambahkan Gadget "HTML/JavaScript" , kemudian taruh kode ini di bagian konten dan untuk judul jangan di isi.

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='URL Facebook Anda' 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 Anda' 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 Anda' 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 Anda' 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 Anda' 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 Anda' rel='nofollow' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via RSS</span></span></a>
</div>

Keterangan yang berwarna coklat ganti dengan semua URL akun social media anda, lalu simpan dan lihat hasilnya.

Akhirnya selesai sudah tutorial untuk Cara Membuat Widget Tombol Social Media Melayang. Apabila ada pertanyaan atau kesulitan dalam mempraktekkannya silahkan berikan komentar anda pada kolom komentar yang sudah saya sediakan di bawah. Semoga bermanfaat ~

Tweet