shad0w-share

Menjadikan Homapage Dua Kolom Posting Blogspot sebenarnya anda tidak perlu repot-repot harus menambahkan atau mengedit kode template blog anda karena dengan menggunakan mesin pencari dengan kata kunci template dua kolom posting maka anda akan menemukan beberapa blog yang menyediakan template dengan homepage dua kolom posting. Jika anda tetap kesulitan menjadikan homepage dua kolom posting, untuk panduannya silahkan buka di cara membuat dua kolom posting homepage blogspot. Di artikel tersebut telah saya jelaskan secara detail dan jelas.

Seperti halnya blog ini yang memiliki tiga kolom posting di homepage, awalnya memang saya ingin meniru sebuah tampilan website yang memiliki lima kolom posting homepage dan tanpa sidebar namun setelah salah satu artikel dibuka maka sidebar pun tampil tapi karena beberapa alasan maka saya urungkan niat meniru tersebut karena takut melanggar hak cipta dari sang pemilik website itu sehingga saya biarkan sidebar tetap ada di homepage atau sesuai dengan template aslinya dan hanya beberapa poin yang masih meniru website tersebut


Selain itu, dengan memilih tampilan template seperti yang saya gunakan di blog ini, memang ada keuntungan tersendiri untuk perkembangan blog ini. Seperti yang telah saya rasakan saat ini yaitu mendapatkan PR 1 dalam waktu singkat. Kok bisa? Maaf kalau ini tetap menjadi rahasia saya :)

Jadi, menjadikan homepage dua kolom posting atau lebih menjadikan halaman depan blog tampil minimalis sehingga para pengunjung blog tidak terlalu capek untuk melakukan scrolling ke bawah. Dan itulah mengapa semua template toko online menggunakan 4 - 5 kolom di halama depannya karena mereka memiliki tujuan terhadap tampilan tersebut yaitu meningkatkan penjualan!

Terakhir, semua pilihan ada ditangan anda untuk memilih menggunakan template atau mengedit dan menjadikannya dua kolom atau lebih. Terimakasih telah membaca artikel wacana ini, Menjadikan Homapage Dua Kolom Posting Blogspot

Cara Membuat Dua Kolom Posting Homepage Blogspot ini merupakan artikel request dari mas Ibnu Syamsun dalam komentarnya disini oke mbak ane sukses menerapkan di blog ane makasih tutorialnya sangat jelas. request "membuat posting 2 kolom di hompage dong" :) Untuk membuat dua kolom posting homepage blogspot ini sebenarnya sudah ada di mesin pencari Google namun sedikit ada tambahan yang perlu saya benahi dari beberapa artikel tentang cara membuat dua kolom posting homepage blogspot agar lebih baik lagi. Berikut gambar dari hasil cara membuat dua kolom posting homepage blogspot yang telah saya buat di blog saya sendiri


Berikut Cara Membuat Dua Kolom Posting Homepage Blogspot

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari Kode ]]></b:skin>
4. Letakkan kode berikut dibawah kode ]]></b:skin>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <style>
   .post {width:250px;height:400px;margin:0 20px 5px 0;overflow:hidden;float:left;}
   </style>
   </b:if>
   
   Tambahan 1 :
   
   • Jika anda ingin menambahkan background cukup memasang kodenya saja seperti berikut ini
     .post {background:#00000;width:250px;height:400px;margin:0 20px 5px 0;overflow:hidden;float:left;}
   • Atur lebar dan tinggi postingan
     width:250px;height:400px;
   • Atur jarak antar postingan
     margin:0 20px 5px 0;
   
   Tambahan 2 :
   Jika di blog anda terdapat Readmore, atur juga jumlah kata, lebar dan tinggi gambar yang terdapat didalam kode Readmore tersebut
   Contoh:
   <script type='text/javascript'>
   var thumbnail_mode = "float" ;
   summary_noimg = 250; ← perkecil angka ini
   summary_img = 250; ← perkecil angka ini
   img_thumb_height = 200; ← perkecil angka ini
   img_thumb_width = 200; ← perkecil angka ini
   </script>
   <script type='text/javascript'>
   .............
   </script>
5. Selanjutnya cari kode .post {
   Pasang auto diantara kode jarak dalam .post {
   Sebelum
   .post {margin:0.5em 0 1.5em;}
   Sesudah
   .post {margin:0.5em auto 0 1.5em;}
   
   Penambahan auto ini sebenarnya hanya tambahan saja agar jarak antar artikel sesuai. Bisa anda tambahkan, bisa juga tidak, namun untuk mengetahuinya apakah perlu menambahkan auto, silahkan preview blog terlebih dahulu dan bandingankan hasilnya antara ada dan tidak adanya auto
6. Setelah selesai. Preview blog anda terlebih dahulu dan lihat hasilnya. Jika hasilnya seperti gambar berikut ini, dimana link Posting Lama terlihat seperti gambar berikut ini
   
   
   
   
   Pada gambar diatas, link Posting Lama atau sejenisnya berada sejajar dengan artikel blog dan untuk mengembalikan ke posisi sebenarnya yaitu berada di bawah kanan, silahkan cari kode <b:include name='nextprev'/> dan tambahkan kode <div style='clear: both;'/> tepat diatas <b:include name='nextprev'/>
   Hasilnya:
   <div style='clear: both;'/>
   <b:include name='nextprev'/>
7. Preview lagi blog anda
8. Selamat! Halaman depan atau homepage blog anda sudah berubah menjadi dua kolom posting

Jika ada pertanyaan tentang cara membuat dua kolom posting homepage blogspot ini, mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Cara Membuat Dua Kolom Posting Homepage Blogspot

Cara Membuat Satu Kolom Widget Diatas Footer adalah juga sama seperti membuat satu kolom dibawah header atau diatas header dan tentunya lebih mudah dalam membuatnya. Kenapa saya mengatakan sama dalam membuat satu kolom widget diatas footer dengan diatas header? karena sama-sama dalam satu template dengan lebar template yang sama :) dan yang membedakan hanya pada tata letak saja. Silahkan anda bandingkan tata letak pada artikel yang telah saya jelaskan sebelumnya (hasil membuat satu kolom) dengan hasil setelah anda menerapkan artikel ini, cara membuat satu kolom diatas footer


Berikut Cara Membuat Satu Kolom Widget Diatas Footer

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Salin kode berikut tepat diatas kode ]]></b:skin>
#oneupperfooter{margin:10px 0;padding:2px;width:100%;}
5. Cari kode berikut ini <div id='footer'>
6. Letakkan kode berikut ini tepat dibawah <div id='footer'>
   <b:section class='footer' id='oneupperfooter' preferred='yes'/>
   Sehingga hasilnya seperti berikut ini
   <div id='footer'>
   <b:section class='footer' id='oneupperfooter' preferred='yes'/>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasil di menu Tata Letak

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Okey, semoga artikel cara membuat satu kolom widget diatas footer ini memberikan manfaat dan mudah dibuat untuk dipasang diblog anda. Terimakasih, silahkan tinggalkan komentar anda jika ada permasalahan dalam membuat satu kolom widget diatas footer

Cara Membuat Dua Kolom Widget Dibawah Postingan adalah cara yang sama ketika membuat dua kolom dibawah header atau kolom-kolom widget yang lainnya hanya perbedaann kode, perbedaan tata letak dan perbedaan cara saja. Seperti halnya fungsi dan manfaat saat membuat satu kolom widget dibawah postingan, manfaat dua kolom widget ini juga lebih maksimal karena ada link artikel yang sejajar antara kolom yang satu dengan yang lainnya (kolom kanan kiri) seperti yang terlihat pada blog saya ini, sayang kolom yng sebelah kanan masih kosong :)

Cara membuat dua kolom widget dibawah postingan ini sebenarnya ada dua cara yang bisa dilakukan yaitu kita bisa benar-benar membuat dua kolom dibawah postingan dan hasilnya bisa terlihat di menu Tata Letak, sedanghkan yang satunya lagi, kita membuat dua kolom dibawah postingan tapi hasilnya tidak terlihat di menu Tata Letak seperti yang saya gunakan pada template blog ini (nanti akan saya share juga..)


Berikut Cara Membuat Dua Kolom Widget Dibawah Postingan

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode berikut ini
   #main-wrapper {float:left;margin-right:10px;overflow:hidden;width:507px;word-wrap:break-word;}
4. Letakkan kode berikut tepat dibawah kode no.3
   #twounderposting {width:100%;float:center;margin:10px 0;padding:0px;}
   #twounderpostingleft{width: 45%;float: left;}
   #twounderpostingright{width: 45%;float: right;}
   
   • Atau jika anda tidak menemukan kode #main-wrapper karena perbedaan kode pada template, cari saja kode ]]></b:skin>
   • letakkan kode berikut tepat diatas kode ]]></b:skin>
     #twounderposting {width:100%;float:center;margin:10px 0;padding:0px;}
     #twounderpostingleft{width: 45%;float: left;}
     #twounderpostingright{width: 45%;float: right;}
5. Cari kode berikut ini
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
   </b:section>
   </div>
6. Letakkan kode berikut sebelum kode penutup pada no.5
   <div id='twounderposting'>
   <div id='twounderpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
   <b:section class='main' id='twounderpostingleft' preferred='yes' style='float:center;'/>
   </div>
   <div id='twounderpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
   <b:section class='main' id='twounderpostingright' preferred='yes' style='float:right;'/>
   </div>
   </div>
   Sehingga hasilnya akan terlihat seperti berikut ini
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
   </b:section>
   <div id='twounderposting'>
   <div id='twounderpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
   <b:section class='main' id='twounderpostingleft' preferred='yes' style='float:center;'/>
   </div>
   <div id='twounderpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
   <b:section class='main' id='twounderpostingright' preferred='yes' style='float:right;'/>
   </div>
   </div>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda
Sekian, jika ada permasalahan dalam membuat dua kolom widget dibawah postingan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Dua Kolom Widget Dibawah Postingan

Cara Membuat Satu Kolom Widget Dibawah Postingan sama halnya dengan membuat satu kolom diatas postingan, hanya beda tempat saja dan tentunya beda penempatan kode html. Membuat satu kolom widget dibawah postingan menurut saya lebih banyak keuntungannya jika meletakkannya tepat berada dibawah artike terkait artikel blog karena pada satu kolom tambahan tersebut bisa terpasang iklan (mis; AdSense) yang bisa 'menjebak' pengunjung blog untuk melakukan klik terhadap link iklan yang dikira link artikel blog, tentunya dengan sedikit trik agar mereka bisa mengklik secara valid! Membuat satu kolom widget dibawah postingan bisa anda buat dengan mengikuti beberapa cara sederhana berikut ini


Berikut Cara Membuat Satu Kolom Widget Dibawah Postingan

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode berikut ini
   #main-wrapper {float:left;margin-right:10px;overflow:hidden;width:507px;word-wrap:break-word;}
   
4. Letakkan kode berikut tepat dibawah kode no.3
   #oneunderposting {background:#ffffff;width:100%;margin:0 0 0.5em;padding:0.5em;}
   Atau jika anda tidak menemukan kode #main-wrapper karena perbedaan kode pada template, cari saja kode ]]></b:skin> dan letakkan kode #oneunderposting {background:#ffffff;width:100%;margin:0 0 0.5em;padding:0.5em;} tepat berada diatas kode ]]></b:skin>


5. Selanjutnya cari kode berikut ini
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
   </b:section>
   </div>


6. Letakkan kode berikut sebelum kode penutup pada no.5
   <b:section class='main' id='oneunderposting' showaddelement='yes'/>
   Sehingga hasilnya akan terlihat seperti berikut ini
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
   </b:section>
   <b:section class='main' id='oneunderposting' showaddelement='yes'/>
   </div>


7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak


8. Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Sekian, jika ada permasalahan dalam membuat satu kolom widget dibawah postingan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Satu Kolom Widget Dibawah Postingan

Cara Membuat Dua Kolom Widget Diatas Postingan merupakan kelanjutan dari artikel sebelumnya yaitu cara membuat satu kolom widget diatas postingan yang hanya membaginya menjadi dua kolom widget seperti yang dijelaskan pada artikel ini, cara membuat dua kolom widget diatas postingan


Berikut Cara Membuat Dua Kolom Widget Diatas Postingan

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut diatas kode ]]></b:skin>
   #twoupperposting{margin:10px 0;padding:0px;width:100%;}
   #twoupperpostingleft{width: 45%;float: left;}
   #twoupperpostingright{width: 45%;float: right;}
5. Cari kode <div id='main-wrapper'>
6. Letakkan kode berikut ini tepat dibawah kode <div id='main-wrapper'>
   <div id='twoupperposting'>
   <div id='twoupperpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
   <b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:center;'/>
   </div>
   <div id='twoupperpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
   <b:section class='main' id='twoupperpostingright' preferred='yes' style='float:right;'/>
   </div>
   </div>
   
   Sehingga hasilnya seperti ini
   
   <div id='main-wrapper'>
   <div id='twoupperposting'>
   <div id='twoupperpostingleft' style='width: 45%; float: left; margin:0; text-align: left;'>
   <b:section class='main' id='twoupperpostingleft' preferred='yes' style='float:center;'/>
   </div>
   <div id='twoupperpostingright' style='width: 45%; float: right; margin:0; text-align: left;'>
   <b:section class='main' id='twoupperpostingright' preferred='yes' style='float:right;'/>
   </div>
   </div>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section>
   <b:section class='main' id='mainbottom' showaddelement='yes'/>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Kode diatas bekerja di template blog saya dan setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Alangkah senangnya saya jika anda berkenan untuk meninggalkan komentar anda dalam artikel cara membuat satu kolom widget diatas postingan ini karena saya akan menjadi Follower blog anda. Terimakasih telah membaca artikel ini, Cara Membuat Dua Kolom Widget Diatas Postingan

Cara Membuat Satu Kolom Widget Diatas Postingan adalah kita akan menambahkan beberapa kolom yang lebarnya sejajar dengan kolom postingan atau artikel blog. Kita tidak hanya bisa membuat satu kolom widget diatas postingan saja tapi selama lebar postingan blog anda mencukupi untuk dipasang kolom, maka anda bisa membuatnya lebih dari satu kolom widget. Dua kolom widget, tiga kolom widget bahkan penempatannya tidak hanya bisa dipasang diatas postingan saja, dibawah area tersebut juga bisa ditambahkan beberapa kolom. Dan pada artikel ini, kita akan membahas cara membuat satu kolom widget diatas postingan


Berikut Cara Membuat Satu Kolom Widget Diatas Postingan

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut diatas kode ]]></b:skin>
   .upperposting{width: 100%;padding:10px 0px 10px 10px;background:#fff;margin:0px 0px 10px 0px;text-align:left;}
   .upperposting .widget{}
5. Cari kode <div id='main-wrapper'>
6. Letakkan kode berikut ini tepat dibawah kode <div id='main-wrapper'>
   <b:section class='upperposting' id='upperposting' preferred='yes'/>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Selanjutnya jika ada permasalahan dalam mengikuti panduan ini, silahkan tinggalkan komentar untuk artikel ini, Cara Membuat Satu Kolom Widget Diatas Postingan

Cara Membuat Tiga Kolom Widget Dibawah Header ini sudah tidak ada uraian khusus lagi, cara membuatnya juga sama dengan membuat dua kolom widget dan kita langsung saja pada penerapan dari artikel ini, yaitu cara membuat tiga kolom widget dibawah header


Berikut Cara Membuat Dua Kolom Widget Dibawah Header

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut diatas kode ]]></b:skin>
   #triunderheader {clear:both;} .triwidget {}
5. Cari kode <div id='main-wrapper'>
6. Letakkan kode berikut ini tepat diatas kode <div id='main-wrapper'>
   <div id='triunderheader'>
   <div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
   <b:section class='header' id='kolom1' preferred='yes' style='float:left;'/>
   </div>
   <div id='kolom2' style='width: 35%; float: center; margin:0; text-align: left;'>
   <b:section class='header' id='kolom2' preferred='yes' style='float:center;'/>
   </div>
   <div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>
   <b:section class='header' id='kolom3' preferred='yes' style='float:right;'/>
   </div>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Semoga artikel cara membuat tiga kolom widget dibawah header ini bermnafaat. Jika ada permasalahan dalam memasang kode, silahkan tinggalkan komentar anda di artikel ini, cara membuat tiga kolom widget dibawah header

Cara Membuat Dua Kolom Widget Dibawah Header merupakan kelanjutan dari artikel sebelumnya yaitu membuat satu kolom widget diatas dan dibawah header yang pada artikel selanjutnya akan dibahas cara membuat tiga kolom widget dibawah header. Cara membuat dua kolom widget dibawah header ini juga sama ketika anda membuat kolom-kolom yang lain yang masih berada di area header blog serta memiliki fungsi dan kegunaan yang sama.


Berikut Cara Membuat Dua Kolom Widget Dibawah Header

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:skin>
4. Salin kode berikut tepat diatas kode ]]></b:skin>
   #twounderheader { clear:both; } .twounderheader-widget { padding:0px 10px 10px 10px; }
5. Cari kode <div id='main-wrapper'>
6. Pasang kode berikut tepat diatas kode <div id='main-wrapper'>
   <div id='twounderheader'>
   <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>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Semoga artikel cara membuat dua kolom widget dibawah header ini bermnafaat. Jika ada permasalahan dalam memasang kode, silahkan tinggalkan komentar anda di artikel ini, cara membuat dua kolom widget dibawah header

Cara Membuat Satu Kolom Widget Dibawah Header masih sama dengan ketika anda membuat satu kolom widget diatas header dan bedanya hanya terletak pada penempatan saja. Seperti yang telah saya jelaskan pada artikel sebelumnya, cara membuat satu kolom widget dibawah header ini juga memberikan manfaat bagi anda untuk memasang beberapa konten yang ingin anda tampilkan dibawah header apalagi jika anda membuat dua atau tiga kolom widget. Silahkan anda pelajari cara membuat satu kolom widget dibawah header berikut ini


Cara Membuat Satu Kolom Widget Dibawah Header

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari kode ]]></b:sin>
4. Letakkan kode berikut diatas kode ]]></b:sin>
   #oneunderheader{margin:10px 0;padding:1%;width:100%;}
5. Cari kode berikut ini
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
   </div>
6. Letakkan kode berikut ini tepat dibawah kode </div> pada no.5
   <div id='oneunderheader'>
   <b:section class='header' id='oneunderheader' preferred='yes'/>
   </div>
   
   Sehingga hasilnya seperti berikut ini
   
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
   </div>
   <div id='oneunderheader'>
   <b:section class='header' id='oneunderheader' preferred='yes'/>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Semoga artikel cara membuat satu kolom widget dibawah header ini bermnafaat. Jika ada permasalahan dalam memasang kode, silahkan tinggalkan komentar anda di artikel ini, cara membuat satu kolom widget dibawah header

Cara Membuat Satu Kolom Widget Diatas Header seperti yang terlihat pada gambar dibawah (panah merah) telah saya buat khusus untuk anda dengan cara yang mudah, anda bisa membuat satu kolom widget diatas header blog anda dengan mengikuti panduan cara membuat satu kolom widget diatas header. Dengan adanya tambahan satu kolom widget diatas header akan memberikan tambahan ruang dalam blog anda yang nantinya bisa anda gunakan untuk memasukkan konten-konten diluar topik blog anda atau dari dalam topik blog anda sendiri. Apalagi jika di area header blog ditambahkan lagi dua kolom atau tiga kolom widget maka anda akan lebih leluasa dalam memasukkan atau memasang konten-konten yang anda sukai.


Berikut Cara Membuat Satu Kolom Widget Diatas Header

1. Masuk ke akun blogger anda
2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
3. Cari Kode ]]></b:skin>
4. Letakkan kode berikut diatas kode ]]></b:skin>
   #oneupperheader{margin:10px 0;padding:1%;width:100%;}
5. Cari kode berikut ini
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
   </div>
6. Letakkan kode berikut ini tepat dibawah <div id='header-wrapper'>
   <b:section class='header' id='oneupperheader' preferred='yes'/>
   Sehingga hasilnya seperti berikut ini
   <div id='header-wrapper'>
   <b:section class='header' id='oneupperheader' preferred='yes'/>
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
   </div>
7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Sekian, jika ada ide lain dalam membuat satu kolom widget diatas header, mari kita diskusikan bersama dengan meninggalkan komentar di artikel ini Cara Membuat Satu Kolom Widget Diatas Header