Hari ini saya akan membagikan trik sosial bookmark yang menempel di sebelah kanan layar monitor, widget itu akan mengikuti gerakan naik turun. Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan efek Easing tentu saja dengan penggunaan image yang lebih sedikit. Jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut, itu karena efek easing. Berikut ini langkah-langkah pembuatannya :
1. Login ke Blogger
2. Masuk ke Template >> Edit HTML (centang expand widget templates)
3. 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 sebelum
<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>
Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
5. 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>
Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai salah
6. Terakhir, Save Templates
Nah itu tutorial membuat floating social bookmark dengan efek easing. Jika masih ada yang kurang jelas silahkan berkomen di tempat yang sudah disediakan. Apapun bentuk komentar Anda akan saya hargai selama masih sopan
0 comments:
Post a Comment