Ticker

6/recent/ticker-posts

Floating Social Bookmark Jquery

Abe Nick Ogos 15, 2015



Floating Social Bookmark, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar perlahan-lahan,.Berikut dibawah ialah langkah-langkah untuk membuatnya :


  1. Login ke Blogger
  2. Pergi ke Template >> Edit HTML  
  3. Letakkan kode  di bawah ini diatas ]]></b:skin>  :



.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJrtm3a1ZmTv3iGs0vyiBKAX8LNiB56R6VlzkWqQsdHjHfr5fslfBS2EOl1NpYToKZNxGtb3IxO0c7syf6TQXuXHmhCXM5OYQTmuW-JpzqE1ApyvkOc3OsqmXCfnmxrhCEVNcz0wxDxeg/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.   Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode ini                   sebelum </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 jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.

   5.   Seterusnya membuat widget tersebut, letakkan kode HTML di bawah ini sebelum </body> atau letak di dalam kotak HTML di Layout blog 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>
Gantikan tulisan semua laman diatas, dengan ID Anda.

  6.    Terakhir sekali Preview dan Save Templates.

Catat Ulasan

3 Ulasan