Widget Floating dengan JQuery

Sebagai salah seorang yang ngga ngerti bahasa Html apalagi CSS tapi punya keinginan-tahuan yang berlebih, jalan keluarnya lagi-lagi berguru sama mbah google. Bahasan yang akan saya coba koleksi tentang tutorial blogger kali ini adalah cara membuat Widget Floating menggunakan Jquery yang saya kutip dari website.nya mas adhi. Berikut ulasannya :

Cara membuat Widget Floating Social Bookmark dengan JQuery

1. Login ke akun blogger
2. Kemudian masuk pada menu Template > Edit  HTML > Lanjutkan > Kemudian centang pada " Expand Template Widget"
3. Kemudian cari (Ctrl+F) kode  ]]></b:skin> letakkan kode berikut diatas kode tersebut
Kode:
.social-buttons { position: fixed; top: 130px; 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/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/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-left #pinterest-btn span { background-position: 11px -177px; } .button-left #youtube-btn span { background-position: 11px -223px; } .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; } .button-right #pinterest-btn span { background-position: 11px -177px; } .button-right #youtube-btn span { background-position: 11px -223px; } .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 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; 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: bold; margin: 11px 40px 11px 0px; white-space: nowrap; } .button-right .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; 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: bold; margin: 11px 0 11px 40px; white-space: nowrap; } .social-buttons .social-text { color: #FFFFFF; }
4.  Selanjutnya, cari (Ctrl+F) kode </head> tambahkan kode Jquery dibawah ini, diatas 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>

   Untuk kode yang saya beri warna bisa dihilangkan apabila di template sobat telah terdapat kode itu dan klik simpan
5. Terakhir, pindah ke menu Tata Letak > Tambahkan gadget > Edit HTML > masukkan kode dibawah ini dan klik simpan setelan. Ganti alamat social bookmark sesuai dengan alamat anda. 

   <div class='social-buttons button-right hidden-phone hidden-tablet'><a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a> <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a> <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a> <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'> <span class='social-text'>Follow via Pinterest</span></span></a> <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a> <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a> </div>

6. Lihat Perubahan pada template anda

Floating Social Bookmark ini bisa juga anda lihat pada template Johny Ribet