Nuansa Baru

  • Home
  • MENU1
  • MENU2
  • MENU3
  • MENU4
  • MENU5
Home » Belajar Bersama » tutorial blog » Cara Membuat Kolom Widget di Bawah Header Blog

Minggu, 01 September 2013

Cara Membuat Kolom Widget di Bawah Header Blog

Cara Membuat Kolom Widget di Bawah Header Blog


Download
Cara Membuat Kolom Widget di Bawah Header
Template yang sobat gunakan tidak menyediakan kolom widget yang sesuai dengan keinginan sobat? Kolom widget di bawah header blog sobat hanya tersedia satu kolom sedangkan sobat membutuhkan yang tiga kolom? Tenang, bisa sobat buat dengan cara ini.

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.
Oke, tak 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.
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.

<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
f
Share
t
Tweet
g+
Share
?
Toriq
08.46

Belum ada komentar untuk "Cara Membuat Kolom Widget di Bawah Header Blog"

Posting Komentar

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)
Find Us :

Postingan Populer

  • Membuat Jadwal Sholat
    Pasang Jadwal Sholat di Sidebar Blog Jadwal sholat ini dilengkapi dengan hari, tanggal, dan tahun serta jam kapan jadwal sholat t...
  • (tanpa judul)
    Quran Explorer - [Sura : 1, Verse : 1 - 7]
  • Cara Gampang Membuat Read More Otomatis di Blog
    Cara Gampang Membuat Read More Otomatis di Blog .  Banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog...
  • TUTORIAL MENGELOLA WEBSITE PRIBADI
    Membuat Kategori untuk artikel atau Berita Cara Menulis Artikel Mengelola Komentar pada website Anda Menambahkan Panel pada website Anda ...

Arsip Blog

  • ►  2014 (3)
    • ►  Februari (3)
  • ▼  2013 (7)
    • ▼  September (7)
      • Cara Membuat Permainan Catur/Chess di Blog
      • TUTORIAL MENGELOLA WEBSITE PRIBADI
      • System Security : Power On Password Required
      • Kelebihan blogspot dan wordpress
      • Perbedaan Blogspot dan Wordpress
      • Cara Membuat Kolom Widget di Bawah Header Blog
      • Belajar Dasar HTML Terlengkap Untuk Pemula
Copyright 2013 Nuansa Baru - All Rights Reserved
Template by Mas Meme - Powered by Blogger