Social Bookmark dengan efek easing

Widget ini terdapat sosial sosial media dan bookmark yang berada di sebelah kanan layar monitor,kita langsung sentuh seperti layar sentuh smartphone icon langsung bisa digerakan naik juga turun.jadi widget ini bisa memperkecil area widget yang minimalis banyak ikon untuk sekali sentuh dan pilih.
Baca juga ttng membuat daptar isi untuk blog

Ok nih cara-cara membuatnya:
1.Login ke Blogger
2.Buka ke Template Edit HTML template anda dan 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.Selanjutnya jquery dan javascript, masih diedit HTML letakkan kode berikut sebelum</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>

5.Dan masukan kode HTML di bawah ini ,sebelum</body>:
Ganti tulisan your dengan ID anda.

<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.Ahir simpan di template anda.

Terima kasih anda sudah menyimak uraian kami semoga bermanpaat juga bisa menjadi artikel yang anda cari.
NB=Lebih bijak komentar dulu tentang uraian diatas.