Cara menambah gadget 4 kolom dibawah header

Cara menambah gadget dibawah atau diatas header memang sudah banyak artikel yang mengulas tentang hal ini. Selain itu saya juga sudah pernah publikasikan cara menambah gadget tepat pada bagian header menjadi 2 bagian, bila anda belum baca artikelnya silahkan anda baca DISINI.

Berbeda dengan cara - cara diatas, kali ini saya akan berikan cara menambahkan gadget 4 kolom dibawah header, yang hasilnya akan tampak seperti berikut :

Dan pada bagian Elemen Laman, akan tampak seperti berikut :

Melihat gambar diatas tentu cara ini lebih sangat berguna sekali bila kita pasang pada blog kita, dan dengan cara ini kita dapat memanfaatkanya sebagai tempat seperti daftar isi, recent post, daftar link, atau bisa kitaa gunakan sebagai area iklan ataupun terserah kebutuhan anda..... OK...!!.

Bila anda berminat dengan cara ini, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</header>

Catatan :Setiap template biasanya berbeda kodenya. Bila tidak menemukan kode seperti diatas, anda bisa lihat contoh pada template yang berbeda dengan ciri mirip seperti berikut :

  <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>

7. Lalu letakkan kode dibawah ini, setelah kode seperti diatas  :

  <div id='kolom-bawah-header-container'>
<div id='kolom-bawah-header1' style='width: 225px; float: left; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='Bawah header 1' type='Text'/>

</b:section>
</div>
<div id='kolom-bawah-header2' style='width: 225px; float: left; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='Bawah header 2' type='Text'/>
</b:section>
</div>

<div id='kolom-bawah-header4' style='width: 225px; float: right; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-4' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Bawah header 4' type='Text'/>
</b:section>
</div>

<div id='kolom-bawah-header3' style='width: 225px; float: right; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-3' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Bawah header 3' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Catatan :
Anda bisa ganti kode berwarna merah pada kode diatas, itu adalah nilai lebar setiap gadgetnya. Silahkan anda sesuaikan dengan lebar template milik anda.

8. Kemudian anda cari lagi kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

9. Copy kode dibawah ini dan paste atau letakkan kode dibawah ini, sebelum kode ]]></b:skin>:

#kolom-bawah-header-container { border: .3px dotted #cccccc;}

.kolom-bawah-header { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}

.kolom-bawah-header h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}

.kolom-bawah-header ul { list-style:none; margin:0 0 0; padding:0 0 0;}

.kolom-bawah-header ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}

.kolom-bawah-header .widget {margin:0 0 .5em; padding:0 0 1em;}

9. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Judul: Cara menambah gadget 4 kolom dibawah header; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara membuat efek shadow pada kotak dan gambar Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi ... readmore
• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore
• Cara membuat Bar mengambang atau Floating Bar on Top pada blogFloating Bar sering kali kita jumpai ketika kita membuka blog atau merefressnya kembali. Floating Bar tersebut seperti pop up, biasanya berisi iklan teks, banner, a ... readmore
• Thread Comments Stylish dengan CSS Modifikasi Thread Comments Blogger Dengan CSS, ini pernah saya bahas dan kali ini saya akan membagikan yang versi duanya yang lebih stylish yang kebetulan saya ... readmore
• CSS LISTSeperti halnya HTML List, fitur css List juga berfungsi untuk membuat sebuah List atau tanda pada daftar. Dalam hal ini ada tiga macam bentuk yang bisa kita gunakan ... readmore