You are here → Home √ Link Dengan Background Icon

Link Dengan Background Icon

Dipublikasikan oleh Ilham Bachtiar pada Thursday, August 9, 2012

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(http://4.bp.blogspot.com/-n_2FtjLWgXQ/UAIlgKf8VhI/AAAAAAAAAEI/H58UrT8JUdU/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(http://4.bp.blogspot.com/-n_2FtjLWgXQ/UAIlgKf8VhI/AAAAAAAAAEI/H58UrT8JUdU/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 Komentar:

  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

 
Copyright © 2013 Obachti 95 . Powered by Blogger . All Rights Reserved