Membuat Teks link dengan background icon open tab

15/07/12

print this page
send email
Untuk dokumentasi CSS style kali ini saya buat adalah membuat teks link kita mempunyai icon misalkan icon pop up seperti ini , Pasti sudah pernah melihatkan Link dengan icon seperti itu disampingnya, yang berguna sebagai penunjuk link yang bisa dibuka atau harus dibuka.
Hasil akhirnya lebih jelasnya seperti ini
Seperti itu, pasti pernah melihatnya kan, jika da yang belum tahu caranya agar terpasang otomatis di tiap teks link post artikel blog kamu, berikut ini caranya, cuma sedikit menambahkan css :
.post-body a{
   padding-right: 18px;
   background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkt4TsuPJ7vRpUbMEE2zB7vhxSdpUdreT4KCrGCnTMJLg1RrRYiRf4UEj8ZHG84_aAP6RJ-yFcycyOsvDSE7V3eX6j6IJHxAni9mPJq2nWkCtd4IcmUuYpHUuyAYOUFIgIccSgYGASmHqU/s1600/link.png) no-repeat center right;
}
.separator a{ background:none;}


jika div class post-body a sudah ada cukup tambahkan saja isinya :
   padding-right: 18px;
   background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkt4TsuPJ7vRpUbMEE2zB7vhxSdpUdreT4KCrGCnTMJLg1RrRYiRf4UEj8ZHG84_aAP6RJ-yFcycyOsvDSE7V3eX6j6IJHxAni9mPJq2nWkCtd4IcmUuYpHUuyAYOUFIgIccSgYGASmHqU/s1600/link.png) no-repeat center right;


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

0 comments:

Posting Komentar

Post Your Comment !