Link With Image

Web berikut menyajikan artikel mengenai CSS3 berkelas master sob. Bisa mengkomplitkan koleksi list CSS kepunyaan Beben Koben si bloglang anu ganteng kalem tea ini ;)) :D Coba tengok saja kreasi background spektakuler and boombastis ini CSS3 patterns gallery and a new pattern! Baru sebagian kecil trik itu sob yang ditawarkan. Menarik buat dibaca, melatih ketajaman akan atribut baru yg support terhadap CSS3 ;) Setelah menelaah ternyata ada yg menarik perhatian di web tersebut dalam menanamkan variasi link account yg disampingnya ada thumbnail image :D

Hasil akhir trick ini seperti link with image! Yang harus dipersiapkan yaitu gambar imut icon, dan account apa saja yg sering dipakai guna memanggil nantinya didalam postingan. Sekarang coba tengok disini memasukan gambar pada link label :-" Seperti itu tidak jauh trik dari web keren gaya punya yg akan dibahas Lea Verou :-bd

Kode CSS

Letakin diatas kode </b:skin>

a[href^="http://twitter.com"]:before,
a[href^="https://facebook.com"]:before,
a[href*="linkedin.com"]:before {
vertical-align:middle;
margin-right:5px;
}
a[href^="http://twitter.com"]:before {
content: url(http://twitter.com/phoenix/favicon.ico);
}
a[href^="https://facebook.com"]:before {
content: url(http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png);
}
a[href*="linkedin.com"]:before {
content: url(http://static01.linkedin.com/scds/common/u/img/favicon_v3.ico);
}

Untuk pemanggilan didalam postingan sobat hanya tinggal menggunakan syntax seperti biasa saja kok<a href="http://twitter.com/ACCOUNT-SOMEONE" target="_blank" title="">NAME SOMEONE</a>

<a href="http://linkedin.com/ACCOUNT-SOMEONE" target="_blank" title="">NAME SOMEONE</a>

<a href="https://facebook.com/ACCOUNT-SOMEONE" target="_blank" title="">NAME SOMEONE</a>Silahkan berkreasi dan mengacak-ngacak web "LEA VEROU"
Bye bye :-h