Membuat Effect Header

Membagi-bagikan inspirasi dan diuraikan dalam sebuah blog memang mengasyikan!. dan kali ini kita akan membahas tentang bagaimana memodifikasi header atau sidebar blog agar terlihat berbeda dari biasanya. Sekedar informasi bahwa blog saya ini menggunakan Template Klasik tahun 2006. saya sengaja menggunakan template ini karena lebih mudah untuk terus dan terus berimprovisasi dalam pengetahuan HTML (hyper text markup language).

Sekarang bagaimana langkah kita untuk memodifikasi header blog ? oke langsung saja!

Langkah awal :

• Masuk ke Design / Rancangan
• Klik di bagian Edit HTML

kemudian cari kode berikut ini

]]></b:skin>

gunakan control alt-F untuk memudahkan pencarian




Selanjutnya,copy paste kode berikut ini tepat diatas kode diatas

.header {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}

.header:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

.header h1 {
color: #ffff33;
float:right;
}

catatan : header h1 hanya sebuah contoh saja, tergantung header blog milik anda.

Selanjutnya tambahkan judul script diatas tadi dengan memasukan kode judul seperti dibawah ini

/* Header Content
----------------------------------------------- */

contoh judul Header ini juga tergantung jenis template anda.

Finally, hasil script tersebut adalah seperti dibawah ini

/* Header Content
----------------------------------------------- */

.header {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}

.header:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

.header h1 {
color: #ffff33;
float:right;
}

Simpan hasil modifikasi template anda dan lihat bagaimana hasilnya.

Berikan komentar anda. Trim's!.