Kamis, 18 Desember 2014

Cara terbaru membuat Header Menjadi dua Kolom

Cara terbaru membuat Header Menjadi dua Kolom. 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 pasti caranyapun juga berbeda.
Adapun caranya adalah sebagai berikut:
  • Pertama. Anda login terlebih dahulu, kalau sudah login silahkan langsung ke Template, 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 mencari 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;}

Kemudian 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: 75px; /* untuk mengatur tinggi header (height) */} 
#header {
width: 600px; /* untuk mengatur lebar header kiri - title, description, image sesuaikan panjangnya */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 300px; /* mengatur lebar header kanan sesuaikan panjangnya */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}
  • Kedua. Cari kode di bawah ini 
<div class='region-inner header-inner'>
Terus anda tambahkan dengan kode di bawah in...
<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Maka 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. 

  • Langkah Terakhir simpan templete
Sekarang lihat hasilnya langsung anda kerancangan...semoga berhasil ya....jika ada kendala silahkan tinggalkan komentar nya di bawah.

Tidak ada komentar:

Posting Komentar