shad0w-share

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 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 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 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