Cara Membuat Floating Social Bookmark dengan Efek Easing

Floating Social Bookmark dengan Efek Easing-Artikel yang akan saya bahas kali ini adalah widget social media ayang akan muncul pada bagian samping kanan yang akan selalu mengikuti arah kursor naik turun. Dengan begitu setiap pengunjung menggulir halaman baik ke atas maupun ke bawah akan mengikuti.

Dengan tampilan widget ini blog akan semakin terlihat keren dan rapih namun  akan memberikan dampak yang positif karena pengunjung akan dengan mudah mengetahui jika blog ini memiliki media social dan mereka akan dengan mudah mengikuti atau follows semua media kita.

Selain dengan widget floating social bookmark, Anda juga dapat membuat widget keren lainnya yang sudah saya tulis pada halaman artikel sebelumnya, silahkan kunjungi halaman Cara Membuat Buku Tamu Tersembunyi di Samping Blog

Tutorial Bikin Floating Social Bookmark dengan Efek Easing

  • Login ke akun blogger Anda
  • Pada halaman dashboard pilih Template lalu Edit HTML
  • Cari kode ]]></b:skin>, lalu letakkan kode dibawah ini tepat diatas kode ]]></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(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-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;
}
  • Cari kode </head>, lalu letakkan kode 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>

Keterangan:

Jika pada template sudah ada kode jquery library, silahkan hapus kode jquery library

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
  • Cari kode </body>, lalu letakkan kode dibawah ini sebelum atau diatas kode </body>
<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>

Keterangan:

  • Ubah alamat https://www.facebook.com/your FB dengan alamat URL Facebook Anda
  • Ubah alamat https://twitter.com/your twitter dengan alamat URL Twitter Anda
  • Ubah alamat https://plus.google.com/your G+ dengan alamat URL Google + Anda.
  • Ubah alamat http://pinterest.com/your ID dengan alamat URL pinterest Anda
  • Ubah alamat https://www.youtube.com/user/your ID dengan alamat youtube Anda
  • Ubah alamat http://feeds.feedburner.com/your feed dengan alamat URL feedburner Anda

Terakhir jangan lupa untuk menyimpan perubahan dengan klik Simpan. Sekarang Anda tinggal lihat hasilnya, social media melayang disamping kanan blog Anda sudah terpasang. Baca Juga: Cara Pasang Widget Cek Resi Di Blogger dan Di WordPress

Selain kita harus melengkapi fitur untuk mempermudah pengunjung akses ke halaman lain, kita juga harus memperhatikan kualitas SEO pada blog, dengan mengoptimalkan SEO pada blog akan semakin besar kesempatan mendatangkan pengunjung karena setiap halaman yang dibuat akan tampil di mesin pencarian, silahkan lihat artikel Panduan Membuat Blog Dan Optimasi SEO Untuk Pemula

Baca Juga Cara Membuat toko online dengan mudah | CARA DAN KUMPULAN KERAJINAN UNIK DAN KEREN

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
Download SAMSUNG NP300E4C Drivers for Win7, WinXP, 32-bit & 64-bit

Download SAMSUNG NP300E4C Drivers for Win7, WinXP, 32-bit & 64-bit-Ingin...

Close