Widget Daftar Link Unik Dengan CSS Efel

WIDGET DAFTAR LINK DENGAN CSS EFEK

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.

• DEMO

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

Widget 17.09