Just Sharing Alls Post

Get Money

Affiliate Program ”Get Money from your Website”

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 :
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>
  4. 123456789101112131415161718192021222324252627.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(http://1.bp.blogspot.com/-zt3csy2DqGo/U661h1iTakI/AAAAAAAAAFc/v5tUjZIJDHs/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}
    
  5. Nahh Copy lagi kode dibawah ini, dan letakan di atas kode </head>
  6. 12345678910111213141516<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>
  7. 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.
  4. 123456789<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
  5. Save, dan lihatlah hasilnya.

Sekian Tutorial Cara Membuat Widget Tombol Social Media Melayang di Blog semoga tutorial ini bisa bermanfaat untuk semuanya. Terimakasih
Reaksi: 
  • Cara Membuat Widget Tombol Social Media Melayang di Blog
  • Fahmi Si Garang Garong
  • Senin, 31 Agustus 2015
  • Tidak ada komentar:
 

0 komentar:

Donasi

Jika Anda Suka Dengan Hasil Kerja Keras Saya,
++++++++++++++++++++++++++++++++++++++++++++
Dan Mau Berdonasi,
________________________________

Silahkan Kirim Ke Rek BCA : 3970005454 a/n Fahmi Permana
________________________________________

Berapapun Donasinya Akan Sangat Berarti Bagi Saya Kedepannya.
_____________________________________________________________

Terima Kasih Yang Sebanyak-Banyaknya Jika Anda Berkenan Berbagi Kebaikan Dengan Saya.
_____________________________________________________________________________________

Tulisan Ini Diketik Oleh : Fahmi Permana
***********************************