Bagaimana Cara Membuat Widget Share Horizontal dengan CSS

Cara Membuat Widget Share Horizontal dengan CSS | Pada postingan sebelumnya kita telah membahas tentang cara membuat menu horinzontal dengan css, kali ini kita masih bermain dengan CSS, tetapi bukan untuk membuat menu lagi, melainkan kita akan belajar blogging tentang cara membuat widget share horizontal dengan CSS.

OK, Bagaimana Cara Membuat Widget Share Horizontal dengan CSS ? Sebelumnya, sobat tahukan apa itu widget share tersebut, widget ini adalah sebagai fasilitas yang memudahkan user atau pengunjung blog kita untuk mensharing artikel yang kita buat. Tapi bentuk nya bukan vertikal, melainkan horizontal. Untuk lebih jelas tentang widget share horizontal ini, mari llihat SCREEn Short berikut ini.

Cara Membuat Widget Share Horizontal dengan CSS

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