Link Dengan Background Icon

Oleh Unknown

Sunday, 14 October 2012

Bagikan :

Tweet

 

Kali ini entri saya mengulas sedikit trik modifikasi link di postingan, jadi link yang ada diselain kolom postingan nggak ada fungsinnya modifikasi kita nanti santai aja. Ya udah langsung aja berikut hasil kerja kita nantinya :

Contoh Link Modifikasi

Nah disitu kita tahu bahwa pada akhir link terdapat sebuah icon yang menandakan bahwa itu link. Jadi beda jika kamu memang memberi warna yang sama pada tulisan kamu dengan warna link aslinya. Disitulah modifikasi simple kita kali ini. Langsung aja, Cekidot,

.post-body a{
padding-right: 18px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8kKTvWR1lQGRKT_7U0NOJPRmEcG8BC2WLRTNv8906ikoZlgwReEX144Pc1a7grs5g2iHPRai8faXJ9jzwvx3alWWhO2CyguemDgAUdRYDC8Vx3echMO6PfNEUVNKDg3DI7f1AQiocEYBC/s1600/link.png) no-repeat center right;
}
.separator a{ background:none;}

 Letakkan kode diatas sebelum kode ]]></b:skin>

Namun jika pada template kamu sudah terdapat div class post-body a langsung aja tambahkan kode berikut diantara "{.....}" setelah div class post-body a template kamu.

padding-right: 18px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8kKTvWR1lQGRKT_7U0NOJPRmEcG8BC2WLRTNv8906ikoZlgwReEX144Pc1a7grs5g2iHPRai8faXJ9jzwvx3alWWhO2CyguemDgAUdRYDC8Vx3echMO6PfNEUVNKDg3DI7f1AQiocEYBC/s1600/link.png) no-repeat center right;

 Cara menambahkan icon nya ada banyak cara dengan selektor css, bisa kamu baca lebih lengkap:
hunlock.com

Tag : Tutorial Blog