Cara Mudah Menambahkan dan Membuat Kolom Widget baru tampil di Bawah Header Blogger

Tutorial Blog: Cara Mudah Menambahkan dan Membuat Kolom Widget baru tampil di Bawah Header Blogger 

Hallo selamat tengah malam menjelang pagi sobat blogger, kali ini saya coba mengulas lagi tutorial blogger. Apakah template yang sobat gunakan tidak menyediakan kolom widget yang sesuai dengan keinginan sobat? Kolom widget di bawah header blog sobat tidak tersedia. Kalau pun ada hanya tersedia satu kolom, dua kolom sedangkan sobat membutuhkan yang tiga kolom? Tenang, kita bisa dengan mudah menambahkan dan membuatnya sobat. Silahkan sobat blogger simak tutorial blog dengan cara dibawah ini. Simak aja ya..

Kolom widget di bawah header ini bisa dibuat dengan mudah. Jumlahnya bisa 1, 2, atau 3 pilih sesuai keinginan sobat, atau mau pasang ketiga-tiganya juga tidak apa-apa. Untuk ukuran juga bisa diatur dengan mudah jika sobat ingin mengganti ukuran yang saya tetapkan.

Langsung sajalah cara pengaplikasiannya, gak usah panjang lebar. Mari sobat simak langkah-langkahnya:

Cara Membuat Kolom Widget di Bawah Header pada Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Cari kode ]]></b:skin>. Gunakan Tombol ctrl+F
4. Masukan kode berikut diatas kode ]]></b:skin>.

#underheader { clear:both; } .underheader-widget {
padding:0px 10px 10px 10px; }

5. Kemudian cari kode <div id='main-wrapper'> atau <div id='main-wpr'> atau sejenisnya. Setiap template memiliki elemen yang berbeda. Namun pada umumnya ditulis dengan kode <div id='main-wrapper'>. Sobat harus berusaha mencari elemen ini jika memang kode elemen pada template sobat berbeda  dengan kode elemen yang saya contohkan. Atau bisa juga sobat meletakkan kode dibawah ini sesuai pilihan letak di edit html template.
6. Pilihlah beberapa kode di bawah ini dan kemudian letakan di atas kode <div id='main-wrapper'> atau <div id='main-wpr'>.

• Satu Kolom Widget.(versi tampil kiri)

<div id='underheader'>
<div id='box1' style='width: 100%; float: left;
margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes'
style='float:left;'/>
</div>
</div> 

• Satu Kolom Widget.(versi tampil center/tengah)

<div id='underheader' style='display: flex; justify-content: center; align-items: center; width: 100%;'>
  <div id='box1' style='width: 100%; max-width: 100%; margin: 0 auto; text-align: center;'>
    <b:section class='header' id='col1' preferred='yes' style='margin: 0 auto; display: inline-block;'/>
  </div>
</div>

• Dua Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col2' preferred='yes' style='float:left;'/>
</div>
</div>

• Tiga Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col3' preferred='yes' style='float:left;'/>
</div>
</div>

#Keterangan Kode:

•  untuk ukuran sobat bisa ubah pada nilai "width".

7. Klik simpan, selesai dan sobat lihat hasilnya.
 

Berikut Contoh hasil pemasangan satu kolom widget yang telah otomatis tampil di TATA LETAK Dasbor Blogger.

 

 

Demikianlah artikel singkat saya kali ini tentang "Cara Mudah Menambahkan dan Membuat Kolom Widget baru tampil di Bawah Header Blogger" Semoga dapat diambil manfaatnya untuk para pengguna blogger semuanya. Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, semoga teman teman semua dapat berkreasi dengan tutorial yang saya tampilkan. 🙏 

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...