Trik Menampilkan Image di Header Blog

Perkembangan yang terjadi di CSS3 membuat berbagai celah bagi blogger untuk menciptakan berbagai inovasi baru yang sebelumnya tak mungkin dilakukan. Yah …, bahkan di blogDETIK sekalipun! Salah satunya adalah menampilkan atau memasang gambar, image, thumbnail atau photo blogger di header blog dengan cara yang amat simple. CSS3 selector menjadi senjata ampuh yang sangat mujarab. :before atau :after atau kedua-duanya digunakan sekaligus maka dalam sekejap apapun gambar yang sampeyan suka bisa nongkrong disalah satu sisi header blogdetik atau blog yang lain.

Contoh Kode CSS untuk menampilkan image di header blog

<style type="text/css">
body:before{
 content:url(http://gubhugreyot.blogdetik.com/files/2011/09/celebrity6.jpg);
 position:absolute;
 padding:5px;
 top:32px;
 right:23px;
 background:#fff;
 border:2px solid #CC9933;
 border-radius:10px;
 box-shadow:4px 4px 4px #888;
}
</style>

Selain menggunakan :before, sampeyan dapat juga menggunakan :after serta merubah posisi gambar menjadi ditengah atau bahkan di sebelah kiri dengan melakukan perubahan pada pengaturan posisinya melalui perubahan nilai top dan right. Selain merubah nilai, untuk menempatkan gambar disebelah kiri maka right dapat juga diganti dengan left.

Contoh Kode CSS menggunakan :after dan left:

<style type="text/css">
body:after{
 content:url(http://gubhugreyot.blogdetik.com/files/2011/09/celebrity3.jpg);
 position:absolute;
 padding:5px;
 top:32px;
 left:23px;
 background:#fff;
 border:2px solid #CC9933;
 border-radius:10px;
 box-shadow:4px 4px 4px #888;
}
</style>

Keterangan/Catatan:

1. Sebaiknya gambar yang digunakan berukuran relatif kecil (thumnail).
2. Penggunaan before dan after memungkinkan pemasangan lebih dari satu gambar sekaligus!.
3. Untuk lebih memperindah tampilan bisa ditambahkan kode outline dan outline offset yang panduan penggunaan kode-nya ada di posting tepat sebelum posting yang ini.

Selamat Mencoba,,