Membuat Widget Iklan Atau Patner Link Dengan Efek CSS

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
Previous
Next Post »

5 komentar

Click here for komentar
October 16, 2014 at 6:39 PM

thanks infonya , sma ijin nyoba

Reply
avatar
October 18, 2014 at 11:23 PM

silahkan mumpung gratis.... :d

Reply
avatar
Adit Rahmana
admin
October 19, 2014 at 4:19 AM

mau tanya gan, nanti tempat iklannya itu disebelah mana ya?

Reply
avatar
October 23, 2014 at 11:30 PM

wah bagus ini gan.. ijin nyoba ya heheh

Reply
avatar
October 25, 2014 at 11:19 PM

wah widget iklannya keren gan, kapan-kapan ane coba deh :D

Reply
avatar
Thanks for your comment