Link Dengan Background Icon

Obachti 95

Blogger friendly sharing

Link Dengan Background Icon

Jane Doe By Jane Doe 10
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 :


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

10 comments

  1. Owh begitu ya...., saya sudah coba klik klik klik
    Makasih infonya

    ReplyDelete
  2. Sederhana tapi pas dengan apa yang di sampaikan, thanks sobat atas share ilmunya tentang membuat link dengan icon

    ReplyDelete
  3. wah wah keren juga tuh klo Linknya berbackground Icon menarik...

    ReplyDelete
  4. langsung ane coba dulu sob,, lumayan tambah bikin keren nih

    ReplyDelete
  5. wah bakalan tambah yahud tampilan blog ntar, good share sob.

    ReplyDelete

Post a Comment