Menambah Elemen Widget

Masih Seputar Kilometer Tip-Trik Blog nih .. kali ini eRGe coba berbagi mengenai Cara Menambah Elemen Widget tapi sebelum nya eRGe mo ngasih tau dulu ama sobat-sobat eRGe yang setia .. bahwa eRGe lagi sial banget neh ... Page Rank turun dari 3 menjadi 2, alexa nya juga divonis dari 90 an jadi 95 an .. waduh apes banget gak tau apa salah dan dosa ku (wakakaka..) tapi ya udah deh mau bilang apa emang nasib ku harus begitu (sabar aja ya Ge .. hiks.. hiks) awalnya seh senang banget karena PR 1 langsung Naek ke 3 hehehe .. kerenkan, tapi cuma 3 hari aja, gak disangka dan tak diduga akhirnya turun lagi .. busyet deh (wekekeke)

Ok deh kita langsung aja ke pokok bahasan mengenai Menambah Elemen Widget .. tips ini saya terapkan di Template yang saya pakai Black Brown Pop yang dibuat oleh Ipiet Blogger Template posting ini eRGe special kan buat Brother Yoyok, maap brot baru sekarang dipostingin request nya. maksud menambah elemen widget disini adalah membuat widget baru di bawah Header serperti kolom Iklan kalau di blog ini dan membuat Foother 3 kolom, nah untuk mempersingkat ocehan yang ntar bisa ngelantur .. jadi kita lansung aja.

Hal pertama yang kita membuat Widget baru untuk Kolom Iklan nah ini kode HTML nya

/* iklan Column */

#iklan {
width: 960px;
position: relative;
clear:both;
margin: 0 auto 10px;
color:#000;
float: left;
padding: 0;
border-bottom:2px solid #363636;
}
#leftiklan {
width: 915px;
float: left;
margin: 10px;
padding:10px 10px;
background:#000000;
border:1px solid #363636;
}
#leftiklan img {
margin: 7px 7px 7px 0px;
padding: 3px;
width : 100px;
height : 100px;
text-align: center;
border: 2px solid #790011;
}
#leftiklan img:hover {
margin: 7px 7px 7px 0px;
padding: 3px;
text-align: center;
border: 2px solid #C2FF0A;
}
/* Credits iklan */

Taruh Kode HTML tersebut diatas Kode yg kira-kira seperti dibawah ini

#outer-wrapper {
width: 940px;
margin: 0 auto 0;
padding: 10px 0 0;
line-height: 15px;
}

Selanjut nya kita kita akan membuat Footheader 3 kolom dan ini Kode HTML nya

/* bottom Column */

#bottom {
width: 940px;
position: relative;
clear:both;
margin-top:10px;
color:#000;
float: left;
padding: 0;
}
#leftbottom {
width: 287px;
float: left;
margin:0 0px 0;
padding:7px 10px;
background:#101010;
border:1px solid #363636;
}
#middlebottom {
width: 288px;
float: left;
margin:0 0px 0 6px;
padding:7px 10px;
background:#101010;
border:1px solid #363636;
}
#rightbottom {
width: 287px;
float: right;
margin:0 0px 0px 0;
padding:7px 10px;
background:#101010;
border:1px solid #363636;
}
/* Credits Column */

Lalu taruh Kode diatas dibawah kode yg kira-kira seperti dibawah ini

.main .Blog {
border-bottom-width: 0;

Untuk Pengaturan .sidebar h2, .sidebar ul dan .sidebar ul li .. sobat bisa mengikuti pengaturan yang sudah ada .. tinggal menambah kode elemen yang baru dibuat misalnya seperti di bawah ini

.sidebar h2, .topsidebar h2, .iklan h2, .bottom h2, .dianasidebar h2 {

.sidebar ul, .rightsidebar ul, .leftsidebar ul, .topsidebar ul, .bottom ul, .iklan ul, .dianasidebar ul, .diana1 ul, .diana2 ul {

.sidebar ul li, .rightsidebar ul li, .leftsidebar ul li, .topsidebar ul li, .bottom ul li, .iklan ul li, .dianasidebar, .diana1 ul li, .diana2 ul li {

kalau udah selesai .... langkah selanjut nya tambahkan kode dibawah ini

<div id='bottom'>

<b:section class='iklan' id='leftiklan' preferred='yes' showaddelement='yes'/>

</div>

dibawah kode yang kira-kira seperti ini

<div id='header'>
<div class='headerleft'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
--------------
--------------
--------------
--------------
--------------
--------------
</div>

Lumayan panjang yah cara buat nya, masih ada lagi neh .. hahaha, nah tambahkan kode dibawah ini

<div id='bottom'>

<b:section class='bottom' id='leftbottom' preferred='yes' showaddelement='yes'/>

<b:section class='bottom' id='middlebottom' preferred='yes' showaddelement='yes'/>

<b:section class='bottom' id='rightbottom' preferred='yes' showaddelement='yes'/>

</div>

Tepat diatas Kode yang kira-kira seperti ini yg merupakan batas main wrap

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

</div> <!-- end outer-wrapper -->

Nah baru selesai ... save template deh, kalau nggak ada halangan dan menurut anjuran dari dokter mudah mudahan sobat akan mempunyai elemen widget baru .. hehehe

Mudah-mudahan ada mamfaatnya bagi kita semua .. amin, sebelumnya terimakasih bagi sobat-sobat eRGe yang sudah bersedia ngasih Komentar ... salam