1. log in ke blogger.com
2. masuk ke add gadget
3. ambil yang HTML/JavaScript
4. Salin kode css berikut ini
<style>
#sosial{
background:#fff;
border:solid 1px #ddd;
padding:10px;
height:auto;
width:100%;
border-radius:5px;
font-family: Courier New, Courier, monospace;
font-size:15px;
color:#000;
letter-spacing:-1px;
position:fixed;
bottom:0;
left:0;
z-index:999;
}
#sosial li{
list-style:none;
line-height:25px;
display:inline;
padding:15px;
}
#sosial a{
color:#000;
text-decoration:none;
}
#sosial .facebook{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://www.insidefacebook.com/wp-content/themes/inside-facebook/img/icons/facebook_16.png)no-repeat left;
}
#sosial .facebook:hover{
background:#3B5998;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
#sosial .subs a:hover, #sosial .gplus a:hover, #sosial .facebook a:hover{
color:#fff;
}
/* Twitter */
#sosial .twitter{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://asiancorrespondent.com/wp-content/themes/asiancorrespondent/images/small_twitter.png)no-repeat left;
}
#sosial .twitter:hover{
background:#51C9D4;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
/* Google Plus */
#sosial .gplus{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://mattleifer.info/wordpress/wp-content/themes/coraline-child/images/google-plus-logo.png)no-repeat left;
}
#sosial .gplus:hover{
background:#DB3636;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
/* Subscribe */
#sosial .subs{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://cdn2.iconfinder.com/data/icons/feedicons-v2/subscribe_16.png)no-repeat left;
}
#sosial .subs:hover{
background:#EA7E37;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
/* Youtube */
#sosial .youtube{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(https://images.hanover.edu/www/site/college-youtube.png)no-repeat left;
}
#sosial .youtube:hover{
background:#950000;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
/* Yahoo*/
#sosial .yahoo{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://www.findinternettv.com/images/yahoo_16.png)no-repeat left;
}
#sosial .yahoo:hover{
background:#72108A;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
#sosial .yahoo a:hover{
color:#fff;
}
/* Stumbleupon */
#sosial .stumbleupon{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://www.johnrutter.com/wp-content/themes/johnrutter/images/16x16/stumbleupon.png)no-repeat left;
}
#sosial .stumbleupon:hover{
background:#5CC04F;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
</style>
<div id='sosial'>
<li class='facebook'><a href='http://www.facebook.com/FahmiSetiawand' target='_blank'>Facebook</a></li>
<li class='twitter'><a href='http://www.twitter.com/DiaryFakta' target='_blank'>Twitter</a></li>
<li class='gplus'><a href='https://plus.google.com/u/0/106878855473022374434' target='_blank'>Google</a></li>
<li class='subs'><a href='http://alkian.blogspot.com/atom.xml' target='_blank'>Subscribe</a></li>
<li class='youtube'><a href='#'>Youtube</a></li>
<li class='yahoo'><a href='#'>Yahoo!</a></li>
<li class='stumbleupon'><a href='#'>Stumbleupon</a></li>
</div>
5. Save/SIMPAN
6. Lihat apa yang terjadi :D
Demikianlah Cara Membuat Widget Share Horizontal dengan CSS, semoga bermanfaat untuk kita semuanya. terutama anda penggila blog =))
loading...
0 blogger-facebook: