My Blog Dairy: header

Kalau kita lihat header pada blogger bawaan akan terlihat satu kolom panjang yang terletak di bawah Nav Bar ...emang udah dari sono nya bentuk nya kayak gitu he he..ada suatu keinginan saya untuk membagi header menjadi dua kolom akhir nya saya cari di search engine dan setelah menemukan kode html trus saya coba untuk mengobok-obok blog saya ,,awal nya sih masih rada-rada susah maklum saya masih bodoh tentang kode-kode html dan setelah membanting tulang,memeras keringat dan menghabiskan berbatang-batang rokok ahh,,,akhir nya saya berhasil juga...

Bagaimana sih bentuk header dua kolom tersebut...kira-kira seperti sobat lihat di bawah ini....yang sebelah kiri merupakan header utama yang di potong sedangkan sebelah kanan header hasil potongan...ada keuntungan yang bisa kita ambil dengan adanya dua klom header ini mungkin kita bisa meletakan tulisan,gambar,maupun kode script di samping judul blog kita..

Di dalam postingan ini header yang akan di modifikasi adalah untuk blog yang memakai templete baru jika templete sobat memakai templete lama silahkan baca artikel selanjut nya di sini.

Jika sobat berminat untuk membelah header cara nya ga terlalu ribet cukup bawa pisau dapur atau celurit terus di belah bereskan..!!! he he sorry bercanda juragan....

Ok..!!! kita langsung aja mengikutin tahapan-tahapan nya...

1. Tahap PERTAMA

seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN
Anda klik Edit HTML
sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
Jangan lupa di centang Expand Template Widget
Kalau sudah kita mulai mengobok-ngobok kode html nya

CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard) fokus pencarian pada huruf bercetak tebal

.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}

anda hapus kode di atas dan ganti (replace) dengan kode di bawah ini...

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
#header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}

2.Tahap KEDUA

Cari kode di bawah ini

Terus anda tambahkan dengan kode di bawah in...

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Hasil nya kayak di bawah ini..

<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

catatan :

Untuk yang bercetak tebal merupakan kode yang di tambahkan tambahan
Untuk yang bercetak merah angka nya bisa anda bisa ganti dengan angka 2,3,4 atau lain nya..maksud nya untuk susunan kolom kebawah.

3. Tahap KETIGA selesai dan simpan templete

Sekarang Lihat hasil nya...langsung anda kerancangan...semoga berhasil ya....jika ada kendala silahkan tinggalkan komentar nya di bawah..

XHeader, software yang dapat membantu sobat sekalian untuk membuat header website atau blog menjadi lebih Profesional. Ciri-ciri webs atau blog profesional bisa dilihat dari tampilan header blog yang terkesan simpel, stylis, dan elegan, dengan konten yang bermutu tentunya. Beda halnya dengan blog ini, dimana update masih ngikutin mood. Dengan XHeader sobat dapat berkreasi dalam menciptakan header blog sesuai selera sobat. Berikut saya jelaskan cara menggunakan software XHeader dan keunggulan yang dimiliki XHeader.

Cara menggunakan Software XHeader:

1. Seperti biasa, download dan install dulu softwarenya disini.

2. Jalankan software XHeader, akan muncul gambar seperti dibawah:

   Load from template Library: Jika sobat ingin mengedit template header yang telah
   disediakan.
   Create a blank header: Jika sobat ingin membuat header sendiri.

Load an XHF file: Melanjutkan edit template yang telah disimpan.
Load Image from Hard Disk: Membuat header dari foto atau image sendiri.

3. Jika sobat pilih Load from template library akan muncul gambar dibawah ini:

4. Pilih lebih dari 500 template header yang disesuakan dengan tema blog sobat. kemudian klik 2x atau oke dan akan muncul gambar dibawah ini:

Nah, sekarang giliran sobat untuk berkreasi dalam mengedit header yang tadi sobat pilih. sobat bisa menambahkan border, memasang tulisan beserta efek menarik, menambahkan gambar, garis, kotak, lingkaran, dan banyak lagi. Penting!! (pilih tab options >> resize header, sesuakan dengan header blog sobat).
5. Klik Save as untuk menyimpan header.

PNG memungkinkan header transparant di blog. JPG kualitas gambar bagus dengan ukuran kecil tapi tidak memungkinkan Transparant di webs atau blog sobat.

6. Selesai, sekarang masukkan gambar Header di blog sobat.

Keunggulan yang di rekomendasikan All in One Blog:

1. Sangat cocok buat blogger newbie seperti saya yang ingin membuat header cantik dengan mudah.

2. Software ini paling sering saya gunakan untuk memilih kode warna ketika sedang mengedit blog. Software ini menyediakan kode warna yang lebih lengkap menurut saya. Seperti yang terlihat pada gambar, ketika warna sudah dipilih akan muncul kode yang siap dicopy ke blog.