Membuat Widget Iklan Atau Patner Link Dengan Efek CSS ~ Lubang Pengetahuan

Makin banyak nya variasi widget yang menambah blog sobat atau saya lebih tampak berwarna, dan kali ini saya akan share tentang Membuat Widget IKlan atau bisa juga di jadi kan Widget Panter Link
dengan memakai Efek CSS tentu nya

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


<style scoped="scoped" type="text/css">

#vn-link {

    margin: 5;

    padding: 5;

    font-family: Verdana, Helvetica, Arial, sans-serif;

}

#vn-link {

    width: 280px;

}

#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: 5px;

    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: #11a59c;

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

<center>

<ul>

<li><a href="#">Slot Iklan1</a></li>

<li><a href="#">Slot Iklan2</a></li>

<li><a href="#">Slot Iklan3</a></li>

<li><a href="#">Slot Iklan4</a></li>

<li><a href="#">Slot Iklan5</a></li>

</ul>

</center>

</div>

Anda cukup mengganti tanda # dengan URL blog yang ingin anda tampilkan, angka 280 px adalah lebar widget sesuaikan dengan sidebar blog anda Semoga bermanfaat ya. Pengunjung yang baik selalu tinggalkan jejak