Select Menu

NOMOR HP HOTLINE 08123489038

Kujang NOMOR HP HOTLINE 08123489038

Keria Kayu Gaharu

Keris Kayu Sonokeling

Cara Animasi Teks

Scroll

Iklan

» » Widget Daftar Link Unik Dengan CSS Efel
«
Next
Posting Lebih Baru
»
Previous
Posting Lama



WIDGET DAFTAR LINK DENGAN CSS EFEK

widget unik efek css


Masih seputar widget unik dengan menggunakan sedikit efek CSS agar tampilannya lebih menarik, widget ini bisa kita gunakan untuk daftar link misalnya Exchange Link. Dengan warna yang lebih berani dan stylish mungkin bisa juga anda terapkan pada template blog metro.


Untuk pemasangan di blog cukup masuk Layout >> Add Gadget >> HTML/Javascript dan masukkan kode dibawah ini :

<style scoped="scoped" type="text/css">
#vn-link {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#vn-link {
    width: 360px;
}
#vn-link ul {
    list-style: none;
    text-indent: 0px;
}
#vn-link li {
    margin-top: 0px;
    border-bottom: 2px solid #555;
}
#vn-link a {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight:bold;
    font-variant: inherit;
    text-transform:uppercase;
    padding: 0px;
    color:#fafafa;
    display: block;
    padding: 13px 50px;
    height: 16px;
    line-height: 16px;
    text-decoration: none;
    background: #FF6347;
    text-shadow: 1px 1px 1px #111;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#vn-link a:hover {
    background: #1E90FF;
    font-size: 14px;
    padding: 13px 60px;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
  
}
#vn-link a:visited {
    background:#FF6347;   
}
#vn-link a:active {
    background:#FF6347;   
}
</style>

<br />
<div id="vn-link">
<ul>
<li><a href="#">VIRLYZ NYZAM A</a></li>
<li><a href="#">VIRLYZ NYZAM B</a></li>
<li><a href="#">VIRLYZ NYZAM C</a></li>
<li><a href="#">VIRLYZ NYZAM D</a></li>
<li><a href="#">VIRLYZ NYZAM E</a></li>
<li><a href="#">VIRLYZ NYZAM F</a></li>
</ul>
</div>

Anda cukup mengganti tanda # dengan URL blog yang ingin anda tampilkan, angka 360 px adalah lebar widget sesuaikan dengan sidebar blog anda
sumber artikel :
http://samsury-sites.blogspot.com

About M Imron Pribadi

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
«
Next
Posting Lebih Baru
»
Previous
Posting Lama

Tidak ada komentar

Leave a Reply