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="#">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>
#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