Formulir Kontak

Nama

Email *

Pesan *

Cara Membuat Floating Social Bookmark

Aizzan Blog -- Membuat floating social bookmark dengan menggunakan efek easing sekarang ini sangat banyak di cari oleh beberapa orang, tak terkecuali dengan saya yang dulunya sangat penasaran dengan salah satu widget ini, kelebihan dari widget ini adalah posisi yang tetap walaupun blog sudah kita scroll ke bawah. Langsung saja untuk melihat demo bisa klik link DEMO ini, sedangkan untuk screenshotnya bisa lihat di bawah ini :

Aizzan Blog:  Cara Membuat Floating Social Bookmark
Aizzan Blog:  Cara Membuat Floating Social Bookmark

Mungkin sobat juga sudah melihat demonya di blog saya, jika sobat ingin tutorial ini silahkan mengikuti tahapnya di bawah ini

1. Login ke blog sobat
2. Pergi ke "Template"
3. Backup template dulu sebelum mengedit HTML
4. Klik "Edit HTML"
5. Cari kode ]]></b:skin>, untuk lebih cepat tekan Ctrl + F (F3)
6. Masukan kode di bawah ini tepat di atas 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/-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;

}
7. Selanjutnya cari kode </head>, lebih cepat tekan Ctrl + F (F3)
8. Masukan kode di bawah ini tepat di atas 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>
9. Kemudian cari kode </body>, lebih cepat tekan Ctrl + F (F3)
10. Masukan kode di bawah ini tepat di atas 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 :
  • Ganti your fb dengan akun facebook sobat
  • Ganti your twitter dengan akun twitter sobat
  • Ganti your G+ dengan akun google plus sobat
  • Ganti your ID dengan akun pinterest sobat
  • Ganti your ID dengan akun youtube sobat
  • Ganti your feed dengan akun feed sobat
11. Simpan dan lihat hasilnya

Semoga artikel di atas dapat membantu dan bermanfaat buat sobat, jika ada kritik maupun saran yang dapat membangun blog ini untuk lebih baik silahkan sampaikan melalui kolom komentar di bawah artikel ini.
Previous
Next Post »
0 Komentar