Selasa, 02 April 2013

Cara Membuat Widget Berlangganan dengan Efek Melebar Pada Hover


Saya akan menyebarkan sebuah widget keren untuk berlangganan dengan blog kita. 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.
widget tombol berlangganan melebar

Cara menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Tata letak - Tambah gadget - Html/Javascript.

Langkah 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>

    Langkah 3. Sebelum menyimpan widget, ubahlah warna merah menjadi url.

    Langkah 4: Simpan widget ini dan nikmati...

    Di Posting Oleh : Moh. Naufal Sadid

    Artikel Cara Membuat Widget Berlangganan dengan Efek Melebar Pada Hover ini diposting oleh Moh. Naufal Sadid pada hari Selasa, 02 April 2013 . Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini, Kritik dan saran dapat Sobat sampaikan melalui kotak komentar. Semoga Artikel Cara Membuat Widget Berlangganan dengan Efek Melebar Pada Hover Bermanfaat .. ^_^

    Klik Untuk Memasang Widget Ini!

    0 komentar :

    Posting Komentar

    About Me

    Foto Saya
    Moh. Naufal Sadid
    Pekalongan, Jawa Tengah, Indonesia
    Lihat profil lengkapku