Kamu ingin SOFTWARE penting dan gratis?. Dapatkan 50+ software windows dan Android kamu !
Kamu Di Bayar Hanya Untuk Nonton Video? Segera CEK DI SINI !

Membuat Header Jadi 2 Kolom

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Untuk membuat bagian header menjadi 2 kolom pada template,sebenarnya tidak harus (biasanya templates bawaan blogger pada umumnya header masih 1 kolom). Karena untuk pengguna blogspot dapat mendapatkan templates gratis dari banyak penyedia templates xml blogger. Tapi memang adakalanya saat anda menemukan templates yang anda suka dan sudah terlanjur merasa cocok namun bagian header masih 1 kolom. Padahal rasa ingin menjadikan header jadi 2 kolom. Bisa untuk menu atau tempat iklan.

Dalam keadaan seperti ini anda di tuntut untuk dapat menambah kolom di sebelah kanan header secara manual (sendiri). Bersamaan dengan waktu juga pembaharuan templates mengalami perubahan pada kode yang di pakai pada script html-nya. Sementara di antara anda masih ada yang menggunakan template lama dan ada yang menggunakan template baru. Dalam hal ini ada sedikit berbedaan kode di mana dan yang mana di letakkan kode tambahan atau yang harus dirubah atau di hapus.

Saat ini saya akan berbagi langkah untuk menjadikan header 2 kolom dengan 2 cara,untuk versi lama dan versi baru. Meski cara ini tidak menjamin dapat di terapkan pada tiap template karena beragam-nya kode html yang di gunakan,namun setidaknya dari sebagian template ada yang cocok dan ini dapat di jadikan gambaran untuk mempermudah/membatu anda merubah-menemukan kode yang yang tepat.

Cara 1 - Template Model Lama:
Tips ini saya temukan dari blog tetangga dan saya share di sini. Langkah pertama adalah dan untuk jaga-jaga anda download dulu template yang ada kalau-kalau nanti terjadi eror;

1. Masuk ke Dashboard blogger anda > Masuk ke Template atau Contoh > Klik Edit HTML di bawah gambar template > Klik expant - kotak kecil di atas kiri kolom html > cari kode;

 #header-wrapper { 

,biasaya secara lengkap akan tampak seperti di bawah (atau anda perkirakan yang mirip atau sesuai dengan yang di maksud). Biar mudah dan cepat gunakan Control+f untuk mencari;

#header-wrapper {
width:970px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:970px;
text-align:left;
margin:0;
padding:0;
}

2. Lalu rubah kode di atas/tambahi menjadi seperti di bawah;

#header-wrapper {
width:970px;
background:#fff;
margin:0px 0;
padding:0px;
}
#header {
width:350px;    
text-align:left;
margin:0;
padding:0;
float:left;      
}
#header2 {        
width:350px;
text-align:left;
margin-top:20px;
padding:0;
float:right;         
}        

Sesuaikan lebar width dengan keperluan anda.

3. Langkah berikutnya anda cari kode berikut <div id='header-wrapper'> dan lengkapnya seperti di bawah ;

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

4. Tambahkan atau ubah menjadi seperti di bawah;

<div id='header-wrapper'>
<div id='header'>      
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Arsip Fank (Header)' type='Header'/>
</b:section>
</div>
<div id='header2'> 
<b:section class='header' id='header2' preferred='yes'/> 
</div> 
</div>     

Lihatlah;
Tulisan warna MERAH adalah tambahan dan warna hijau judul blog anda.

5. Save Tempalte,silahkan lihat hasil dan semoga tidak eror dan berhasil. Cara ini saya telah coba dan berhasil untuk blog http://worlds-blogging.blogspot.com.

Cara 2 Untuk Tempalte Baru;
Tips ini saya dapat dari blog ...(maaf saya lupa),terutama untuk template bawaan Etheral-maka langkah awal juga sama masuk ke edit html >

1.Lalu cari kode berikut;

.header-inner {
  padding: 27px 0 3px;
}

.header-inner .section {
  margin: 0 35px;
}

2.Gantilah  kode di atas dengan kode di bawah ini;

.header-inner {
  padding: 20px 0 3px;
}
.header-inner .section {
  width:440px;
  padding:0 1px;
  margin: 0 0 0 33px;
}
.header-kanan {
  width:470px;
  float:$endSide;
  padding:0 1px;
  margin: 0 33px 0 0;
}

Silahkan anda sesuaikan dengan lebar header blog anda.

3. Setelah itu kemudian cari kode dibawah ini (tekan; ctrl + F): 

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

dan tempel-kan kode di bawah tepat di atas kode tadi :

<div class='header-kanan'>
<b:section class='header' id='header2' maxwidgets='1' preferred='yes'>
<b:widget id='LinkList100' locked='true' title='' type='LinkList'/>
</b:section>
    </div>

Nanti jadinya adalah gedget BlogRoll atau Link List. Anda dapat merubah-nya sendiri. Pada element ini hanya akan muncul element tanpa ada link Add Gedget / Tambah Element.

Klik Simpan/Save. Jika muncul peringatan yang memberitahukan bahwa widget id=LinkList100 tidak tersedia pilih opsi "Pertahankan Widget". 

Semoga bermanfaat dan tidak gagal,untuk panduan lengkapnya anda juga dapat mencari di blog yang lain agar lebih terbantu mengatasi masalah. Dalam post ini saya juga bukan ahli karena hanya berbagi,hanya saya telah mencobanya dan berhasil. Untuk cara ke 2 ini hasilnya dapat anda lihat blog ini (bila tak di rubah) :

Silahkan berbagi dengan tombol share di bawah,mungkin orang lain lebih membutuhkan artikel ini:


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَاٰلَمِين
Jika anda merasa artikel ini manfaat,silahkan sempatkan waktu sebentar untuk berbagi.

Dapatkan Dengan Gratis Artikel Baru Dari ArsipFank Langsung ke email anda,Silahkan masukkan Email Valid dan klik Setuju:


Powered by Blogger.