Cara Membuat Widget Share di Sidebar dengan CSS

Cara Membuat Widget Share di Sidebar dengan CSS - Balik lagi nih, Fahmi abis Experimen kecil-kecilan malah jadi Widget Share.
Tapi gak apa-apalah sedikit-sedikit lama-lama menjadi bukit siapa tahu aja nanti fahmi bisa bikin experimen yang "WOW" hahaha...

Widget Share tentunya sangat penting untuk menshare segala artikel anda ke Sosial Bookmark tersebut, banyak lho web-web besar yang pasang widget share, entah dia boleh copas atau buat sendiri. Contohnya saja seperti G+, Facebook, Twitter hehehe...

ok deh kali ini Fahmi mau coba bikin yang namanya "Cara Membuat Widget Share di Sidebar dengan CSS". Contohnya seperti apa?, nanti link Demonya ada dibawah langsung aja nih tutorial Cara Membuat Widget Share di Sidebar dengan CSS dibawah ini :

1. Langkah pertama ke Rancangan.
2. Tambah Widget/Gadget.
3. Pilih HTML/Javascript.
4. Kalau udah silahkan copypaste code dibawah ini :
   

   <style>
   #sosial{
   background:#fff;
   border:solid 1px #ddd;
   padding:10px;
   height:auto;
   width:200px;
   border-radius:5px;
   font-family: Courier New, Courier, monospace;
   font-size:15px;
   color:#000;
   letter-spacing:-1px;
   }
   #sosial li{
   list-style:none;
   line-height:25px;
   }
   #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;
   border-radius:5px;
   background:url(http://www.insidefacebook.com/wp-content/themes/inside-facebook/img/icons/facebook_16.png)no-repeat left;
   }
   #sosial .facebook:hover{
   width:180px;
   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;
   border-radius:5px;
   background:url(http://asiancorrespondent.com/wp-content/themes/asiancorrespondent/images/small_twitter.png)no-repeat left;
   }
   #sosial .twitter:hover{
   width:180px;
   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;
   border-radius:5px;
   background:url(http://mattleifer.info/wordpress/wp-content/themes/coraline-child/images/google-plus-logo.png)no-repeat left;
   }
   #sosial .gplus:hover{
   width:180px;
   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;
   border-radius:5px;
   background:url(http://cdn2.iconfinder.com/data/icons/feedicons-v2/subscribe_16.png)no-repeat left;
   }
   #sosial .subs:hover{
   width:180px;
   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;
   }
   </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>
   </div>

5. Kalau sudah di Copy paste'kan lah didalam HTML/Javascipt tersebut, jangan lupa di Save.
6. DEMO disini

Sedikit Tambahan : Silahkan ganti beberapa Url Facebook, Twitter, Google +, dan Subscribe di HTML diatas dengan Url Facebook, Twitter, Google + , dan Subscribe anda.

Demikianlah sedikit ulasan saya mengenai Cara Membuat Widget Share di Sidebar dengan CSS, semoga dapat berguna dan bermanfaat.