Join Us !!
Rabu, 20 Maret 2013

Widget Follow Us On

0 komentar
Read More → Baiklah pada kesempatan kali ini saya akan membahas tentang Widget. Widget yang ingin saya bahas ialah membuat "FOLLOW US ON"
Widget ini banyak dimintai karena cukup keren, ok langsung saja kita bahas


Cara membuat Widget FOLLOW US ON

1. Pertama masuk Blog kalian
2. Setelah itu pilih Tata Letak
3. Pilih lah Add Gadget
4. Setelah itu pilih Htmln java script
5. Masukkan kode dibawah ini dengan menekan tombol Ctrl+C


<style> 
#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:38px; 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:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi4ZXOMoLhDdCE2dgwFnY2ZOoL1t_R138PFBCC23WFqXpmkbrFjayO5mUAUPDZQ6v0cN1LohsHN2lBDzQAPgxSseq6FBcuj_kMMaCRNQoGCsYxsCg3BrugrU7ZBIg5lAobV3iQK0is9F0/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; 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:38px; 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;} 
.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="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li> 
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li> 
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li> 
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li> 
<li data-alt="Subscribe with RSS"><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://pranotobudihutomoblog.blogspot.com/" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Ganti lambang #  dengan URL nya
Anda Baru Saja Membaca Artikel Tentang Widget Follow Us On ,Anda Boleh Menyebarluaskan / Mengcopy Paste Artikel Widget Follow Us On Ini Bermanfaat Buat Anda , Namun Saya Mohon Untuk Mencantumkan Link Widget Follow Us On Sebagai SumberNya.

Leave a Reply