Cara Membuat Widget Share Horizontal Fixed dengan CSS

Cara Membuat Widget Share Horizontal Fixed dengan CSS - Setelah tadi membuat yang versi Vertikal kali ini saya coba yang versi Horizontal + Fixed Position. Tenang aja sob, demonya ada kok tapi Linknya ada dipaling bawah artikel, Berikut adalah Cara Membuat Widget Share Horizontal Fixed dengan CSS :

1. Seperti biasa anda Harus ke Rancangan
2. Tambah Gadget/Add Gadget 
3. Pilih HTML/Javascript
4. Silahkan copy code dibawah ini lalu pastekan 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>
   

5. Setelah itu Simpan dan Lihat Hasilnya.
6. Klik disini untuk Demo

Tambahan : Gantilah beberapa Url yang tercantum dengan Url yang bersangkutan dengan Facebook/Twiiter anda.

Demikianlah sedikit ulasan saya yang mengenai Cara Membuat Widget Share Horizontal Fixed dengan CSS, semoga dapat berguna dan bermanfaat.