Partner

The Masked Man | Free Download EDHO-XP - Free Download All EDHO-XP - Free Download All

Widget Berlangganan Dengan Background Melebar Pada Hover

aduh udah lama gak share tutorial blogger heheheh,. Widget CSS3 ini seperti sebuah daftar link berwarna dan dapat memperlebarkan background ketika mouse berada diatasnya. Widget ini tersedia untuk ditambahkan 4 social link termasuk: Facebook, Twitter, Google+, dan Pinterest serta 1 link berlangganan untuk RSS. kalo mau tinggal pasang ok!

widget tombol berlangganan melebar

Cara menambahkan:

1. Masuk ke Dasbor Blogger - Tata letak - Tambah gadget - Html/Javascript.
2. Kemudian masukkan kode dibawah ini:
<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://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/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="http://www.facebook.com/halaman fan page facebook/">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="http://twitter.com/username/">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/alamat profil google+/">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="Alamat profil Pinterest">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/alamat feed rss">Subscribe with RSS</a></li>
</ul>

3. Sebelum menyimpan widget, ubahlah warna merah menjadi url.
4: Simpan widget ini dan nikmati...

Sumber : http://gemarhtml.blogspot.com/2012/10/widget-berlangganan-dengan-efek-melebar.html

About EDHO-XP Author

Nama gue Edo Cosma. Nama asli gue Ahmad Dhoifullah . Gue orang nya sedikit pendiam dan pemalu. Apa lagi gue masih menduduki kelas 8 / 2 SMP tepatnya di sekolah SMPN 3 BATANGHARI sekolang yang berada di kotaku. Ini blog hanya percobaan dan iseng aja kok sob. Salam kenal yah sob !


Baca Juga Yang dibawah Ini :

Facebook Comments
5 Blogger Comments


5 Comment For » Widget Berlangganan Dengan Background Melebar Pada Hover

  1. bang reques cara membuat musik kayak gitu donk

    BalasHapus
  2. iya nanti di share :D
    yang di footer kan
    bisa sesuka hati lagunya mau apa :D

    BalasHapus
  3. iya gan...! Cara nya ajah deh gan kalo lagu ny binggung banyak soal nya

    BalasHapus
  4. maf gan boleh minta link download lagu nya yg ada di footer

    BalasHapus

Maaf bila Komentar yang belum terbalas /yang request belum bisa terpenuhi karena Admin lagi sibuk banget

- No Spam,No Flood,No Junk,No Iklan,No Sara,No S*x,
- Jangan Ngemis Tempalte Punya EDHO-XP ! karena buatnya susah payah ! baca Disclaimner !
- Dilarang Promosi Agan/Aganwati, Pertamax, Pertamina dsb.
- Gunakan Bahasa yang efektif
- Anda Sopan Kami Segan
- Komentar Alay LANGSUNG admin delete

THANKS!

EDHO-XP Author

Ahmad Dhoifullah
Nama gue Ahmad Dhoifullah, gue salah satu anak kreatif dari komunitas yaitu :DeezClan. Gue benci banget orang yang ngemis tempate hasil karya orang. Entah apa tujuan nya. Plagiat ? Out dari dunia maya. View more about me

Recent Comments

@Dhoooes : Online Peoples