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!
Cara menambahkan:
1. Masuk ke Dasbor Blogger - Tata letak - Tambah gadget - Html/Javascript.
2. Kemudian masukkan kode dibawah ini:
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
<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/AVvXsEh6Pew6XyKZ2XGV1_ZzT597o5JEraaxh7OWXUCZ9cXBPdPamdGEarl-qvPw4bSORcyhwL0ggTph9fbJZpJieEWBqihKn2rFAam4AMbWPppF4B5lG7JbWoIgk0l-ELs7sTZJFYM4sjEufhI/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
BackLink please. Thanks! ^^
| URL |
| Code For Forum |
| HTML Code |
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 !
5 Blogger Comments
bang reques cara membuat musik kayak gitu donk
BalasHapusiya nanti di share
BalasHapusyang di footer kan
bisa sesuka hati lagunya mau apa
iya gan...! Cara nya ajah deh gan kalo lagu ny binggung banyak soal nya
BalasHapuswokee
BalasHapusmaf gan boleh minta link download lagu nya yg ada di footer
BalasHapus