Bismillah
Dalam sebuah blog memang banyak tutorial dan jika bahas satu persatu memang tiada habis-habisnya, tapi dengan ngeblog kita bisa berkreasi semau kita sendiri alhasil kreasikita bagus dan ditawai iklan oleh suatu produk dan banggalah kita, namun saya disini tidak membahas berbangga karena dapet duit tapi saya disini akan berbagi suatu tutorial yaitu membuat header menjadi 2 kolom, dalam kolom header biasanya kita hanya meletakkan logo blog kita dan selesai, namun dengan adanya bantuan 1 kolom lagi mungkin kita bisa gunakan untuk meletakkan iklan
Preview

Cara Membuat Header 2 Kolom

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Cari kode: ]]></b:skin> dan letakkan kode dibawah ini diatasnya
#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
Langkah 3
Kemudian cari kode yang mirip seperti ini
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Sobat (Header)' type='Header'/>
...
</b:section>
... merupakan kode yang agak panjang, jadi saya tidak menuliskannya.
Dan dibawahnya kode </b:section> pada kode diatas letakkan kode berikut
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
Contoh Penerapannya
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' Judul Blog Sobat  (Header)' type='Header'/> 
...
</b:section> 
<b:section id='header-right' showaddelement='yes'/> 
<div style='clear: both;'/>
Langkah 4
Sekarang cari kode ]]></b:template-skin>  dan letakkan kode dibawah ini diatasnya
#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}
Langkah 5



Semoga bermanfaat, selamat mencoba dan semoga berhasil

Labels:

36 Komentar:

Blogger Didi SPriady said on April 21, 2012 at 10:57 PM 

mantaf infonya.....udh dicoba,dan berhasil.

Blogger Modz Augustus said on April 25, 2012 at 2:51 PM 

boleh dicoba nih, mudah2an ane berhasil.

Anonymous Androidtan said on June 4, 2012 at 11:03 PM 

ini dia tutorial yang saya cari, terima kasih ya mas atas informasinya.

Anonymous Free Auto Back Link said on June 9, 2012 at 11:05 PM 

Mampir kunjung gan... Very nice blog...

Blogger Dani Setiadi said on June 15, 2012 at 9:02 PM 

mau tanya ni sob :-/
cara buat komentar kya kamu gimana ya sob
biar dibawah avatar ada tombol reply dan di bawah komentar ada tulisan Terimakasih xxx atas Komentar dan Kunjungannya

Blogger Muhammad Irham said on June 15, 2012 at 10:15 PM 

@Dani Setiadi kesini sob http://koderator.blogspot.com/2012/04/cara-merubah-tampilan-komentar-blogger_15.html

Blogger Dani Setiadi said on June 15, 2012 at 10:31 PM 

pageranknya keren tuhh
wah wah wah :))

Anonymous i Post said on June 17, 2012 at 7:13 AM 

wahh gan jadi betah di blog ini mantabh dah sharenya udah ane coba

Anonymous BAB said on June 24, 2012 at 4:54 PM 

keliling2 cari tutorialnya,hampir nyasar,gak pada pas. Trus mentok diblog ini.. and berhasil+kepake!thx pren cara-membuat-header-2-kolomnya!

Blogger Opick Taopik said on June 26, 2012 at 11:44 PM 

ga nemu kode ininya sob ]]>
gimana??

Blogger Muhammad Irham said on June 27, 2012 at 5:33 AM 

@Opick Taopik yg ininya aja sob b:template-skin

Blogger INDRAKA DWI | PEMULA said on June 27, 2012 at 1:08 PM 

di template ane gak ada kode ]]> gan....
gimana ?

mohon bantuannya

Blogger Muhammad Irham said on June 27, 2012 at 5:48 PM 

@INDRAKA DWI | PEMULA gak apa apa gan tetap bisa

Anonymous Wanwan Max said on July 12, 2012 at 10:50 AM 

Keren Banget infonya, makasih ya GAN !
kunjungi juga : www.andaikata.com/

Blogger Francisco Xavier said on August 2, 2012 at 2:43 AM 

gan kode yang ini ]]> punya saya gak ada itu gimana? mohon bantuannya...jika suadara berkenan tolong bantu, karna sudah lama saya pingin buat header jadi 2 kolom di blog template bawaan blogger tapi selalu gak bisa.
blog saya http://kraeng-francisco-tutorial.blogspot.com/
jika bersedia kirim ke email saya
camarada_87@rocketmail.com. trima kasih

Blogger Muhammad Irham said on August 2, 2012 at 1:39 PM 

@Francisco Xavier coba cari kode ininya saja
</b:template-skin>

Blogger Sungmin Fanz said on August 3, 2012 at 9:03 AM 

This comment has been removed by the author.

Blogger Sungmin Fanz said on August 3, 2012 at 11:00 AM 

ko' logo blog q rsk .. :( pdhl td dah cba

yah gx bsa dpke lgi donk blog q :(

Blogger Muhammad Irham said on August 3, 2012 at 11:39 AM 

@Sungmin Fanz: kan lebar kedua header tersebut bisa di sesuaikan, coba sesuaikan dulu.
Edit pada kode CSSnya

Blogger Kapten Francisco said on August 5, 2012 at 10:53 PM 

This comment has been removed by the author.

Anonymous Rezza Indra Rahayu said on August 10, 2012 at 8:29 PM 

Berhasil gan mantaappp, Thanks ya!

Blogger Alpri Andrian said on August 11, 2012 at 6:56 PM 

Thanks Gan..Sukses (y)

Blogger Bio Gizt said on September 23, 2012 at 5:33 PM 

mas,. kolom header gue kok malah ketutup bukannya sejajar, maaf banyak nanya,. aku masih newbe mohon pencerahan

Blogger Lukist Aza said on October 5, 2012 at 9:32 AM 

sob di tempat saya bisa tapi klu sdh di pasang gadgetx berada di bwh judulx, ga bisa berada di sebelah kanan judul...

Anonymous jakarta spa said on December 14, 2012 at 8:49 PM 

Udah saya coba ilmunya bro, berhasil deh kayaknya tapi belum dimanfaatkan, gimana caranya biar yang kanannya bisa lebih panjang, buat naro adsense 728x90. thx share

Blogger hunter yoba said on December 23, 2012 at 3:40 PM 

THX INFONYA
BERMANFAAT BUAT SAYA

Anonymous bike pro shop said on December 29, 2012 at 1:47 PM 

Sangat berguna dan sangat mudah untuk dimengerti dan diterapkan bro. ga ribet pokoke langsung tokcer di blog saya.

Blogger Afdi Fauzul Bahar said on February 23, 2013 at 1:56 PM 

Blogwalking Sob

Anonymous TipNet said on March 10, 2013 at 2:24 AM 

Tankiyu gan akan ane coba semoga bisa euy....

Anonymous Teknik Sipil said on March 15, 2013 at 5:11 PM 

MAKASIH INFONYA............KITA TUNGGU KUNJUNGAN BALIKNYA KE LINK KITA YA

Anonymous Poetra Sakti said on April 7, 2013 at 8:58 PM 

wah ribet banget gan template saya diedit...

Blogger bagus satrio said on August 27, 2013 at 4:33 PM 

blogwalking sob...

comment back > http://akisada-ryo.blogspot.com/2013/08/akisada-ryo-feat-zildjian.html

Anonymous prediksi bola 888 said on October 2, 2013 at 4:56 PM 

mantap gan

http://prediksibola888.blogspot.com/2013/08/cara-membuat-header-menjad-2-kolom.html

Blogger firmanu swantara said on April 10, 2014 at 5:09 AM 

sudah saya coba gan, tapi add gadget nya kok malah dibawahnya header aslinya, trims. mohon bantuan nya gan, bisa di lihat disini http://satuterbaru.blogspot.com/

Anonymous DKI Komputer said on May 20, 2014 at 4:16 PM 

Menurut orang-orang ilmu itu harus dibeli dengan uang. Terima kasih sudah berbagi ilmu secara gratis, semoga sobat akan diberikan ilmu yang berlebih.

Jika anda berkenan silahkan kunjungi blog saya : http://www.dki-komputer.blogspot.com/

Blogger Gaosur Rohim said on May 23, 2014 at 8:58 PM 

Berhasil gan. Terima kasih

Post a Comment

© 2012 - Koderator | Desain Oleh kimzigr| Classic Themplate Html5 & Css3 | Mesin Blogger