Cara membuat add gadget dibawah header

Jika sahabat sebagai blogger pendatang baru (new blogger) seperti saya, kita biasanya memiliki ilmu yang pas-pasang dalam hal disain template blog. Karena itulah untuk membuat blog, tidak ada pilihan lain kecuali harus menggunakan templates standar blogger atau mendownloadnya dari beberapa situs penyedia seperti www.eblogtemplates.com, www.ourtemplates.com,www.blogspottemplates.com dan lain-lain (gratis). Di satu sisi, templates tidak semuanya menyediakan menu atau fasilitas yang kita inginkan. Contoh sederhana misalnya elemen halaman, yang dalam dunia blogging disebut gadget. Seperti kita ketahui, gadget umumnya terletak di bagian kiri dan kanan (side bar), walaupun ada juga di bagian kiri saja, di bagian kanan saja atau di bagian bawah.

Jarang kita temukan templates dengan posisi gadget di bagian atas. Sementara itu, proses modifikasi templates dalam rangka optimasi blog, kadang-kadang mengharuskan kita untuk meletakkan widget atau asesoris lainnya di bagian atas atau tepatnya di bawah header. Ambil contoh, misalnya kita ingin menambah menu navigasi (tabs menu) yang umumnya diletakkan di bagian atas (di bawah header). Sebagai blogger baru, kondisi seperti ini tentu merupakan kesulitan tersendiri. Bertitik tolak dari uraian tersebut, merupakan inspirasi bagi saya pada kesempatan ini untuk berbagi dengan sahabat blogger, khususnya blogger baru seperti saya bagaimana menambah elemen halaman (gadget) yang posisinya di bawah header. Langkahnya sangat sederhana, simple dan sangat mudah. Untuk itu, silahkan ikuti langkah-langkah sebagai berikut :

1. Masuk ke Dashboard, pilih layout dan edit HTML

2. Lakukan backup template, dengan cara Download full template

3. Gunakan Ctrl+F atau tekan F3 untuk mencari kode ]]></b:skin> kalo sudah ketemu letakkan kode dibawah ini diatas kode tadi

#under_header1{

}

#under_header2{

float:left;

width:33.33%;

}

#under_header3{

float:left;

width:33.33%;

}

#under_header4{

float:right;

width:33.33%;

}

4. Cari kode berikut ini... atau yang mirip kode dibawah ini

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='Blog Doddy (Header)' type='Header'/>

</b:section>

</div>

tambahkan kode berikut dibawah kode tadi

<div id="under_header1">

<b:section class='header' id='underheader1' preferred='yes'/>

</div>

<div id="under_header2">

<b:section class='header' id='underheader2' preferred='yes'/>

</div>

<div id="under_header3">

<b:section class='header' id='underheader3' preferred='yes'/>

</div>

<div id="under_header4">

<b:section class='header' id='underheader4' preferred='yes'/>

</div>

5. Save template, tinggal cek sudah muncul belum gadgetnya.

Tweet

Postingan terkait:

Ditulis Unknown — Tuesday, 21 February 2012 — Add Comment — Blog