Design, Tutorial and Tips Trik Blogger | Lostsector

- on 07.28

Design, Tutorial and Tips Trik Blogger | Lostsector

Floating Social Bookmark Efek Easing Untuk Blogger

Posted: 31 May 2013 01:35 PM PDT

Floating Social Bookmark Efek Easing Untuk Blogger - Pernah lihat floating social bookmark seperti gambar disamping tidak? Saya rasa sebagian dari anda pasti pernah melihatnya atau bahkan sekarang sedang memasangnya pada blog anda. Floating social bookmark ini sebenarnya sudah lama ada, namun baru kali ini saya sempat untuk mempostnya dan bagi anda yang ingin melihat Demonya secara langsung, silahkan klik link dibawah ini.

Lihat Demo

Bagaimana Cara Pasang Floating Social Bookmark Efek Easing di Blog?

Cara pasang floating yang satu ini adalah dengan cara melakukan edit html, namun untuk penempatannya di dalam template blogger cukuplah mudah. Berikut langkah-langkahnya!

Pertama, salin kode di bawah ini kemudian tempatkan tepat di bawah tag <b:skin><![CDATA[ atau di atas tag ]]></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;}

Janga simpan template dulu, karena masih ada 2 kode lagi yang harus dimasukkan kedalam template dan sekarang cari tag </head> dan tempatkan script di bawah ini tepat diatasnya.

<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(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>

Kode jQuery yang berwarna merah diatas tidak perlu anda ikutkan apabila didalam template ada sudah ada jQuery versi yang sama atau yang lebih terbaru, dan sekarang lanjutkan lagi dengan menempatkan kode HTML di bawah ini tepat di atas tag </body> atau di bawah tag <body>

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/usernamefacebookanda' 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/usernametwitteranda' 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/idgoogle+anda' 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/id-pinterest-anda' 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/id-youtube-anda' 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/id-feedburner-anda' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

Yang berwarna merah pada kode HTML diatas adalah username atau user ID. Silahkan anda ganti dengan username untuk masing-masing sosial bookmark yang anda miliki.

Setelah anda selesai memasukkan semua kodenya kedalam template serta mengganti user ID social bookmarknya, selanjutnya tekan tombol "Pratinjau". Setelah anda sudah berhasil atau merasa sudah pas dengan keinginan anda, berikutnya silahkan simpan template anda.

Rekomendasi!

Saya rasa untuk penjelasan tentang pemasangan Floating Social Bookmark Efek Easing Untuk Blogger ini sudah jelas, namun apabila anda masih belum paham, silahkan meninggalkan pesan pada kolom komentar yang telah saya sediakan. Terima kasih.