Cara Membuat Tombol Sosial Media Dengan Hover Kesamping

SosMed Widget

Posted by: Admin On: 03/07/14

Tombol Sosial Media Dengan Hover Kesamping - Jika sebelumnya saya memposting artikel widget Tombol Sosial Media Floating  , sekarang masih dengan Tombol Sosial Media yaitu Cara Membuat Tombol Sosial Media Dengan Hover Kesamping . Apakah penasaran, silahkan ikuti langkah berikut ini.

• Masuk/login ke Dashboard blogger.com
• Tata Letak
• Tambahkan Gadget
• HTML/Javascript
• Masukan semua kode dibawah ini kedalam kolom HTML Gadget

<style type='text/css'>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} 
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} 
#tbisose li{position:relative; height:40px; cursor:pointer; padding: 0 !important;} 
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:40px; border-radius:15px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUz6DyWoiPv0ikhcLbR6hJG1TdcviGydB_M7PPqtx26XFQr2Mj1vuTyAI3HWHb-2nHnKGmglzkY0KSpvlDGbTZz3_Yu4qBMQMoZ_MOpKWM_hSGQprbAO83OvQR3daDffXbR1TMr2q6ZO8/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42);box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px;
 -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
 -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; 
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:40px; color:#141414; content:attr(data-alt); line-height:32px;} 
#tbisose .icon{overflow:hidden; color:#fafafa;} 
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} 
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} 
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} 
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} 
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} 
#tbisose li:hover .icon,.touch #tbisose li .icon{width:210px;border-radius:15px 0 15px 0;} .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} 
</style>

 <ul id="tbisose"> 
<li data-alt=""><a class="icon facebook" href="#">Follow us on Facebook</a></li> 
<li data-alt=""><a class="icon twitter" href="#">Follow us on Twitter</a></li> 
<li data-alt=""><a class="icon googleplus" href="#">Follow us on Google+</a></li> 
<li data-alt=""><a class="icon pinterest" href="#">Follow us on Pinterest</a></li> 
<li data-alt=""><a class="icon rss" href="#">Subscribe with RSS</a></li></ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://tangerang-template.blogspot.com/2014/07/tombol-sosial-media-hover-samping.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Kurang lebih DEMO Hovernya seperti dibawah ini.

• Follow us on Facebook
• Follow us on Twitter
• Follow us on Google+
• Follow us on Pinterest
• Subscribe with RSS

+ Get This Widget Here

Silahkan ganti tanda pagar href="#" dengan url facebook, twitter, G plus dan RSS anda.