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 :
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
Demikian tips membuat widget unik daftar link dengan efek CSS, semoga bermanfaat.
0 Response to "Widget Daftar Link Dengan CSS Efek"
Posting Komentar