Membuat Border Image Style Blog

Berikut ini salah satu cara membuat tampilan blog lebih variatif dengan membuat border dengan image/gambar. Sebelum memulai sebaiknya kumpulkan dulu image yang akan dijadikan border dan upload pada picasa (sebaiknya pengguna blog blogger menggunakan picasa sebagai media storage image-nya), flickr, photobucket etc, agar mudah membuat link image nantinya, dan sebaiknya juga gunakan ekstensi/format image png (Portable Network Graphics Format) agar tampilan image lebih baik. 

Letakkan kode CSS berikut tepat diatas tag kode </body> ;

/********************body template*********************/ .content-inner{ border:15px solid transparent; padding:10px 20px; -webkit-border-image:url(alamat-gambar.png) 30 30 round; /* Safari 5 */ -o-border-image:url(alamat-gambar.png) 30 30 round; /* Opera */ border-image:url(alamat-gambar.png) 30 30 round; }

Lalu letakkan kode CSS berikut ini pada bagian header pada blog template,
/*******************header***************/ .header{ border:15px solid transparent; padding:10px 20px; -webkit-border-image:url(alamat-gambar.png) 30 30 round; /* Safari 5 */ -o-border-image:url(alamat-gambar.png) 30 30 round; /* Opera */ border-image:url(alamat-gambar.png) 30 30 round; }

Lalu letakkan kode CSS berikut ini pada bagian posting pada blog template,
/***********tubuh posting*************/ .column-center-inner{ border:15px solid transparent; padding:10px 20px; -webkit-border-image:url(alamat-gambar.png) 30 30 round; /* Safari 5 */ -o-border-image:url(alamat-gambar.png) 30 30 round; /* Opera */ border-image:url(alamat-gambar.png) 30 30 round; }

Lalu letakkan kode CSS berikut ini pada bagian sidebar pada blog template,
/*****************sidebar*******************/ .column-right-inner{ /****jika menggunakn sidebar kiri maka ganti menjadi .column-left-inner******/ border:15px solid transparent; padding:10px 20px; -webkit-border-image:url(alamat-gambar.png) 30 30 round; /* Safari 5 */ -o-border-image:url(alamat-gambar.png) 30 30 round; /* Opera */ border-image:url(alamat-gambar.png) 30 30 round; }

Note :
Alamat-gambar.png harus diganti alaman gambar Anda yang sudah di upload.

Amati, Tiru, dan Modifikasi - ATM "Belajar Berbagi"