Membuat Header Menjadi 2 Kolom Pada Template Default Blogger

Selamat malam pembaca blog New Surya Computer, Posting ane kali ini tentang membuat header di Template bawaan menjadi 2 kolom..Template default blogger terdiri atas satu kolom header yang letaknya di bawah elemen Favicon dan navbar. Di dalam elemen header terdapat sebuah tool yang dapat digunakan untuk mengupload gambar. Gambar yang sudah di Upload akan tersimpan di Google+ foto dan di Picasa Web Album. Foto itu akan menjadi Background Header. Itu adalah salah satu kelebihan dari menggunakan template bawaan blogger, banyak tool bermamfaat yang disediakan.

Tutorial tentang cara membagi elemen header menjadi 2 kolom ini di buat karena belum ada satupun blog yang membahas tentang hal ini (Khusus untuk template bawaan blogger). Contoh gambar untuk header dua kolom, bisa di lihat pada gambar di atas. Tanpa basa basi lagi, silahkan ikuti langkah di bawah ini!

• Sign in di blogger.com
• Pada menu drop down, pilih Template dan Edit HTML
• Letakkan kode berikut di atas kode ]]></b:skin>
   

#header, body#layout #header {width:35%;display:inline-block;float:left;padding:0px;} #header-right, body#layout #header-right {width:50%;display:inline-block;float:right;padding:0px;} #header-right .widget {margin:0;}

Cari kode di bawah ini :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Blogger Widget Generator (Header)' type='Header'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "BEHIND"'> <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --> <b:if cond='data:mobile'> <div id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> <b:else/> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> </b:if> <b:else/> <!--Show the image only--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <!--Show the description--> <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'> <b:include name='description'/> </b:if> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description'> <span><data:description/></span></p> </div> </b:includable> <b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> </b:widget> </b:section>

• Letakkan kode berikut setelah kode di atas

<b:section id='header-right' maxwidgets='1' showaddelement='no'/>
<div style='clear: both;'/>

• Terakhir, simpan template Anda.

selamat mencoba..