• INFO DAFTAR CUG
  • WA:085200000285
  • PIN: D703CC94

Cara Membuat Widget/Kolom/Elemen Dibawah Header/Diatas Postingan

 

Advertisement
Solusi Nelpon SMS Paket Internet Telkomsel Murah - KLIK DISINI

Karena kepengtingan dan kebutuhan tertentu, Arminaven membutuhkan tambahan elemen dibawah header. Widget yang ada diatas postingan blog ini bisa menjadi tempat iklan atau script yang lain sesuai dengan kebutuhan sang pemilik blog. Setelah surfing di internet akhirnya arminaven menemukan cara bagaimana menambahkan widget diatas postingan ini. Sebagai informasi, Arminaven bukanlah ahli dalam blog hanya saja mencoba terus menggali informasi tentang belajar blogging melihat besarnya manfaat yang didapatkan dari ngeblog, apa saja manfaat blog itu? Minimal memiliki passive income. Kita fokuskan pembahasan kepada cara membuat widget dibawah header ya :)
Cara Membuat Widget/Kolom/Elemen Dibawah Header/Diatas Postingan

Cara Menambah Elemen, Widget Dibawah Header
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.

Tambahan: Jika sobat bingung dengan apa kode sejenis "main-wrapper" yang digunakan pada template Blog sobat, beginilah cara mengetahuinya.
1. Masuk ke bagian Tata Letak.
2. Sentuhkan kursor pada tulisan edit yang terdapat di kolom posting.

Cara Membuat Widget/Kolom/Elemen Dibawah Header/Diatas Postingan
Dapat diketahui widget id pada kolom posting adalah "blog1".
3. Masuk ke bagian Template >> klik Edit HTML.
4. Dengan tombol ctrl+F cari kode "blog1".


Maka dapat diketahui bahwa kolom posting (blog1) itu terdapat di posisi <div id='main-wrapper'>

6. Pilihlah beberapa kode di bawah ini dan kemudian letakan di atas kode <div id='main-wrapper'> atau <div id='main-wpr'> atau kode yang baru sobat temukan yang digunakan di template sobat.
  • Satu Kolom Widget.
<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>
  • 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, untuk ukuran sobat bisa ubah pada nilai "width".

7. Klik simpan, selesai dan sobat lihat hasilnya.
Contoh hasil pemasangan dua kolom widget.
Cara Membuat Kolom Widget di Bawah Header
Semoga bermanfaat.
Referensi ; http://regibrader-free.blogspot.com/2013/04/cara-membuat-kolom-widget-di-bawah.html

DAFTAR CUG SEKARANG | KLIK DISINI

Cara Membuat Widget/Kolom/Elemen Dibawah Header/Diatas Postingan 4.5 5 Unknown Cara Membuat Widget/Kolom/Elemen Dibawah Header/Diatas Postingan, Menambah elemen dibawah header blogspot, membuat kolom dibawah blog Karena kepengtingan dan kebutuhan tertentu, Arminaven membutuhkan tambahan elemen dibawah header . Widget yang ada diatas postingan blog in...


1 comment:

1.Jangan lupa koment yah kawan,untuk mempererat silaturrahim, NO CAPTCHA berkomentarnya.
2.Silahkan kawan becanda,asal dengan etika.
3.Komentar Dengan Moderasi untuk menghindari SPAMMER. Yang mau pasang Link,gunakan NAME/URL. Link LIVE otomatis terhapus
4. Yang gak punya akun maka silahkan berkomentar sebagai "Anonim"
5.Gunakan media komentar ini sebagai sarana saran, masukan serta request :)
6.Terimakasih kunjungan dan komentarnya kawan,Mohon maaf jika belum bisa berkunjung balik

J-Theme