Cara Edit Header Template

Beberapa kawan blogger mempunyai keinginan tampil beda pada untuk template blog, biar kata lebih menarik. Hal tersebut sebenarnya juga termasuk dalam hal meningkatkan kreativitas blogging dalam merubah tampilan template. Mengapa demikian? karena beberapa kawan blogger yang suka utak-atik template tentunya tidak berhenti berkreasi dalam merubah tampilan blog agar lebih menarik...itu katanya juga bro hee :)

Selanjutnya ada pertanyaan kira-kira bagian mana yang harus dirubah. Sebenarnya dalam merubah template bawaan itu terserah pada kawan-kawan, gak ada yang ngelarang kok. Itulah para blogger yang baik hati sudah menyediakan gratis dan bebas lagi mau diapakan sesuai keinginan saudara. Ok...gak usah panjang lebar ngomongnya. Saya coba akan terangkan sedikit-demi-sedikit bagaimana cara edit template. Saya akan terangkan mulai dari Edit Header Template. Sebelumnya ane mau minta izin dulu pada para pakar dan pendahulu ane yang ahli dalam masalah pengetahuan template. Seandainya ada kesalahan tolong di kasih masukan, karena ini sangat berarti untuk menambah pengetahuan sesama blogger.

Beberapa hal perlu di perhatikan dalam edit header blog adalah perlu mengerti sedikit bagian, bagian yang harus di edit. Hal ini penting karena tidak semua bagian footer harus di edit, ditakutkan nanti malah merubah tata letaknya, baik itu tata letak tulisan bahkan bisa saja skinnya.

Baiklah...sekarang lihat dulu bagian-bagian kode Header templatenya. Salah satu (bukan salah dua ya gan, karena kalau salah satu masih dapat sembilan, tapi kalau salah dua tentunya dapat lapan...hehehee) Contohnya seperti di bawah ini.

/* Header */
#header-wrapper{
width:940px;   /*  ini ukuran besar header  */
background:#EBEBEB;  /*  ini warna header,
Anda bisa mengganti dengan background gambar seperti ini background: url (http://i445.photobucket.com/albums/qq171/etnikprogresif/images-1-1.jpg) atau ganti dengan url gambar anda  */
height:120px;  /*  ini tinggi header anda bisa meninggikan dengan memperbesar angkanya*/
margin:0;   /*  ini ukuran besar header. bila anda ingin mempunya border tinggal tambahkan bordernya menjadi seperti ini  margin:0; border:2px solid #000000 nanti bordernya berwarna hitam. anda bisa memperkecil atau memperbesar ukuran border dengan mengganti angka 2px dan mengganti warna border #000000 dengan yang lain */
-moz-border-radius:10px 10px 0 0;   /*  cetak biru garis lengkung pada sudut kolom header, kalau mau sudut lancip tinggal hapus saja semua kode berwarna biru  */
-khtml-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
}

_______bagian skin header template_______

#header h1 {
font:46px 'Josefin Sans Std Light',arial,serif;  /*  ini besar dan jenis huruf yang digunakan pada judul blog, anda bisa mengganti ukuran besar atau mau memperkecil angkanya dan huruf dengan verdana, comic georgia atau yang lainnya  */
font-weight:bold;   /*  ini menandakan kalau huruf di cetak tebal  */
letter-spacing:-3px;
margin:0;
padding:20px 485px 0 20px;
text-transform:none;
color:#A30100;    /*  ini warna huruf yang di pakai, anda bisa menggunakan warna lain sesuka anda  */
text-shadow:1px 1px 2px #E6E6E6;   /*  ini menandakan kalau huruf mempunyai bayangan, kalau anda mau memperbesar bayangannya tinggal ganti angkanya dan kode warna #E6E6E6 untuk bayangannya bisa diganti dengan yang lain. sebagian template tidak mempunyai bayangan huruf. bila anda ingin menambahkan tinggal copy dan pastekan di bawah color:#A30100 */
}
________bagian judul blog pada header template_________

#header .description {    /*  kalau kode ini tidak ada, cari kode h2, beberapa template biasanya menggunakan h1 untuk judul blog dan h2 untuk deskripsi blog anda  */
color:#A30100;    /*  ini warna huruf pada deskripsi blog. anda bisa menggantinya dengan yang lain, kalau mau ditambahkan bayangan pada hurufnya tinggal masukkan kode seperti ini  text-shadow:1px 1px 2px #E6E6E6; di bawahnya */
font:16px arial,verdana;   /*  ini besar huruf dan jenis huruf yang digunakan. anda bisa menggantinya dengan yang lain */
letter-spacing:1px;
margin:0 5px 5px;
max-width:700px;
padding:0 485px 15px 20px;
text-transform:none;
font-weight:bold;
}
_______bagian deskripsi blog pada header template________

Untuk sementara anda belajar dulu edit bagian header template pada yang cetak merah. Kalau anda sudah memahami betul bagian template anda baru, belajar edit bagian margin dan padding. Karena pada bagian tersebut anda dapat memindahkan judul dan deskripsi blog di bagian kiri, kanan, ke atas atau kebawah header nantinya. Ok...sahabat blogger semua.....sampai di sini dulu apa yang ane tau ane bagikan, semoga anda dapat berkreasi pada bagian header template saudara. Semoga bermanfaat...amin. Selamat mencoba dan sukses selalu.

Posted in: Belajar Nge-Blog