Link Dengan Background Icon

Link Dengan Background Icon - 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/AVvXsEibyrkHTOimfeaAZS-L1cXsvqND0-0NMYTc8oR2InJwJEGQM5GiiAbcwFeluRglKrRBRfVbzaseK2xShlSLwUTtZq7CWVG-bL9MCm7QmdCjBrCmhTjHqD1R-KQJ9zKXMz0pmb6goIdVcole/s1600/link.png) no-repeat center right;
}
.separator a{ background:none;}

Letakkan kode diatas sebelum kode penutup CSS template kita, bagi yang belum tahu kode penutup CSS bagaimana kodenya seperti ini ]]></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/AVvXsEibyrkHTOimfeaAZS-L1cXsvqND0-0NMYTc8oR2InJwJEGQM5GiiAbcwFeluRglKrRBRfVbzaseK2xShlSLwUTtZq7CWVG-bL9MCm7QmdCjBrCmhTjHqD1R-KQJ9zKXMz0pmb6goIdVcole/s1600/link.png) no-repeat center right;

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