Cara Membuat Widget Share Horizontal Fixed dengan CSS

Baca Juga

Daftar isi: [Tampil]

Cara Membuat Widget Share Horizontal Fixed dengan CSS - Artikel ini sudah menumpuk di Google, tetapi ini sangat berbeda dengan Widget Share yang lainnya. Kalo Widget Share yang dia mirip menu fixed. Karya ini di buat oleh FahMibLog's untuk saya sebenarnya, tapi saya share lagi disini. Kalo penasara gimana tampilan Widget Share nya, langsung saja ke CSS nya.

CSS :

1. Masukin kode dibawah ini didalam HTML/JavaScript :

<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>

2. Klik Save.

Semoga bermanfaat, thanks to FahMibLog's.