Cara Membuat Header Menjadi 2 Kolom di Blog

TULISKAN.com - Dalam membangun struktur sebuah template, tentunya kita telah mengenal berbagai macam istilah baru yang bisa dibilang asing ditelinga kita, sebenarnya istilah tersebut juga diangkat dari bahasa inggris benda itu sendiri, seperti header, footer, sidebar, content wrapper dan lain sebagainya.

Nah, pada kesempatan kali ini saya akan memberikan langkah-langkah atau tutorial tentan bagaimana cara membuat header menjadi 2 kolom atau 2 elemen di blog, karena jika kita perhatikan pastinya header akan terasa "hampa" sekali apabila hanya dipasangkan logo atau nama blog, ada baiknya apabila kita menambahkan satu elemen lagi disebelahnya, bisa digunakan untuk memasang iklan, dll. Baik, jika anda ingin langsung membuat header menjadi 2 kolom, silahkan disimak yang berikut ini.

Cara Membuat Header Menjadi 2 Kolom di Blog

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Cari kode yang mirip seperti dibawah ini (gunakan CTRL+F).

.header-outer {

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

5. Lalu anda hapus kode tadi dan ganti dengan kode berikut.

.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; }

#tuliskancom_headerkanan {

float: right;

width: 49%; /* mengatur lebar header kanan */

margin: 20px 10px 5px 10px;

padding: 2px;}

#tuliskancom_headerkanan .widget {margin: 3px;}

6. Sekaran anda cari kode dibawah ini.

 <div class='region-inner header-inner'>

7. Lalu anda letakkan kode dibawah ini persis disebelah kode diatas.

<b:section class='tuliskancom_headerkanan' id='tuliskancom_headerkanan' maxwidgets='4' showaddelement='yes'>

8. Nanti jika di taruh disebelahnya, akan menjadi seperti di bawah ini.

<div class='region-inner header-inner'><b:section class='tuliskancom_headerkanan' id='tuliskancom_headerkanan' maxwidgets='4' showaddelement='yes'>

9. Klik "Save Template" dan Selesai.

Demikian informasi terbaru seputar tutorial dan tips trik blogging tentang Cara Membuat Header Menjadi 2 Kolom di Blog, semoga bermanfaat, dan selamat mencoba.

Share this

Author : Admin

Related Posts