Floating Social Bookmark dengan Efek Easing
Sore sobat Blog Krizeer, pada kesempatan kali ini saya mau membahas tentang Floating Social Bookmark dengan Efek Easing. Dengan
penambahan jquery, jika Anda meletakkan cursor pada salah satu icon
social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri
Solo yang baru keluar dari keraton, itu karena efek easing yang ada
pada jquery-ui.min. Untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :
- Login ke Blogger
- Masuk ke Template >> Edit HTML (centang expand widget templates)
- Letakkan kode CSS 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(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. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut di atas tag </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(){ $('.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>
5. Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </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>
6. Terakhir simpan template
referensi dari maskolis.com
Posting Komentar untuk "Floating Social Bookmark dengan Efek Easing"