Cara Membuat 3 Kolom di Bawah Header Blog - Hello friend Download Games And Software, In the article that you read this time with the title Cara Membuat 3 Kolom di Bawah Header Blog, we have prepared this article well for you to read and take information in it. hopefully the post content Article Blogging, what we write can you understand. alright, happy reading.

Judul : Cara Membuat 3 Kolom di Bawah Header Blog
link : Cara Membuat 3 Kolom di Bawah Header Blog

Cara Membuat 3 Kolom di Bawah Header Blog

Cara Membuat 3 Kolom di Bawah Header Blog - Bagaimana kabarnya sobat blogger? terasa sudah lama tidak posting, kali ini saya akan share cara menambah 3 kolom dibawah header blog. pada umumnya desain setiap template berbeda-beda, ada yang sudah memenuhi kebutuhan kita dan juga masih defaul. nah,,, sebenarnya membuat kolom pada template sesuai kebutuhan itu mudah jika sudah mengetahui caranya,,, Ok!! kebetulan saya sudah dapatkan tutorialnya buat sobat semua untuk dengan mudah menambah 3 kolom dibawah header, kurang lebihnya seperti gambar dibawah ini:

Jika sobat tertarik untuk membuat 3 kolom dibawah header, sobat Ikuti Tutorial berikut ini::

• Login ke Blogger
• Pada Dasboard klik Template >>> Klik Edit HTML
• Silahkan cari kode ]]></b:skin> (untuk lebih cepat tekan Cntrl+F)
• Letakkan kode berikut diatas kode ]]></b:skin>

* 3kolom-atas
---------------------------- */
#3kolom-atas {
width: 930px;background:#666666;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}
#kiri-atas {
width: 290px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#tengah-atas {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#kanan-atas {
width: 290px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}

• Selanjutnya, sobat Cari Kode berikut ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG KAMU (Header)' type='Header'/>
</b:section>
</div>

• Jika sudah ketemu, letakkan kode HTML dibawah ini tepat diatas kode diatas.

<div id='3kolom-atas'>
<b:section class='3kolom-atas' id='kiri-atas' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='3kolom-atas' id='tengah-atas' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='3kolom-atas' id='kanan-atas' preferred='yes' showaddelement='yes'>
</b:section>
</div>

• Simpan Template Anda dan lihat hasilnya..

Keterangan :

Jika template sudah menggunakan menu navbar letakkan kode HTML (Langkah no 6) dibawah kode navbar, Sobat bisa mencari kode navbar dibagian bawah kode header Atau jiika bingung letakkan kode langkah no.6 dibawah  <div id='content-wrapper'>

Perhatikan kode berwarna merah silahkan ubah sesuai dengan lebar kolom template sobat dan masing-masing kolom juga harus disesuaikan agar tidak saling bertabrakan, untuk warna hijau yaitu kode untuk warna background widget.

Such article Cara Membuat 3 Kolom di Bawah Header Blog

So this article Cara Membuat 3 Kolom di Bawah Header Blog this time, hopefully it can benefit you all. alright, see you in another article post.

You are now reading the article Cara Membuat 3 Kolom di Bawah Header Blog with the link address https://moresofgame.blogspot.com/2013/05/cara-membuat-3-kolom-di-bawah-header.html