Biasanya kalau kita memasang template maka akan terdapat widget di element blog kita dan biasanya jumlah widget yang ada ya cuma segitu aja.
Nah pada kesempatan kali ini saya akan sedikit membagi ilmu tentang menambah Element Widget.
Sebenarnya element widget bisa kita tambahkan dimanapun, baik menambah element dibagian footer, atas posting, dibawah header, di atas header dll. Akan tetapi yang akan kita bahas kali ini adalah menambah atau membuat element widget dua kolom kiri dan kanan tepat dibawah header atau bisa juga diletakan dibawah menu.
Menambah atau membuat Element Widget 2 kolom kiri dan kanan akan terlihat seperti gambar dibawah ini:
Adapun cara membuat atau menambah Element Widget seperti gambar diatas adalah sebagai berikut:
- Masuk ke akun blog anda
- Setelah ada berada pada halaman Panel Blog kemudian anda Pilih " Template".
Sedang untuk antar muka blogger lama, anda masuk ke "Rancangan"
- Setelah itu pilih Menu "edit HTML" kemudian centang "Expand Template Widget".
- Untuk berjaga-jaga, anda download terlebih dahulu template Blog anda.
- Setelah itu anda cari kode: ]]></b:skin>
- Letakan kode dibawah ini tepat di atas 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;}
- Kemudian cari kode seperti ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='cadangan (Header)' type='Header'>
<b:includable id='title'>
. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
</b:includable>
</b:widget>
</b:section>
</div>
- Jika sudah ketemu, letakan kode dibawah ini tepat dibawah kode seperti di atas:
<div id='kolom-bawah-header-container'>
<div id='kolom-bawah-header1' style='width:
480px; float: left; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='kolom-bawah-header2' style='width:
480px; float: right; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
- Jika anda menginginkan Element Widget berada dibawah menu maka, letakan kode di atas tepat di bawah kode menu. Biasanya kode menu akan terlihat seperti ini:
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li class='selected'><a href='/'>Home</a></li>
. . . . . . . . .
. . . . . . . . .
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
- Sesuaikan lebar dengan lebar blog anda, lebar saya beri tanda tulisan yang berwarna merah, misal blog anda mempunyai lebar 900px maka tinggal dibagi dua.
- Langkah terakhir simpan dan lihat hasilnya.
Sekian tutorial membuat widget 2 kolom kiri dan kanan tepat dibawah header.
Semoga bermanfaat bagi anda semua...
Judul : Cara menambah widget 2 kolom kiri dan kanan dibawah header
Deskripsi : Biasanya kalau kita memasang template maka akan terdapat widget di element blog kita dan biasanya jumlah widget yang ada ya cuma segitu aj...