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.


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="#">arieadie A</a></li>
<li><a href="#">arieadie B</a></li>
<li><a href="#">arieadie C</a></li>
<li><a href="#">arieadie D</a></li>
<li><a href="#">arieadie E</a></li>
<li><a href="#">arieadie 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

Demikian tips membuat widget unik daftar link dengan efek CSS, semoga bermanfaat.

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit