Wednesday, October 12, 2016

Cara Membuat Widget Tombol Social Media Melayang di Blog

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>
    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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtCnWZ5-OhheCmoHo-ptt22nq95jjguqChv3jPoTtFpTMj6PVgBNHqRds9wjbJBAk9blfGYCWNdHtVmEeohuZGVGGrp23s4cUOD5cdzqfoTRacrIYsDXwF2CKYdAvWs6KC-K_R4TTKd6U/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>
    5. 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>
  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.
    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
  4. Save, dan lihatlah hasilnya.

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

Go to link Download

Posted by at
Labels: , , , , , , , ,