Wednesday, 14 November 2012

Menambah Widget Disamping Header Blog

Sering saya perhatikan pada template-template yang sekarang yaitu pada template-template blog yang memiliki SEO tinggi baik dari segi speed loading_nya, link error dan lain sebagainya itu kebanyakan tidak memiliki widget disamping header template tersebut dengan kata lain diatas khusus untuk header saja. Kemaren sempat kepikiran apakah template yang memiliki SEO tinggi emang harus begitu tanpa harus bisa memasang widget disamping headernya, kan kalau kosong gitu kelihatan sepi. Seperti template yang saya pakai sekarang ini adalah template dari blogjuragan[.]blogspot[.]com karena kelihatan terlalu sepi jadi saya lakukan sedikit modivikasi yaitu dengan menambah artikel terkait, share button dan kolom email dari feedburner, tidak lupa juga saya menambahkan widget disamping header lumayan buat pasang slot iklan dan cara yang saya lakukan adalah sebagai berikut:


Seperti biasa pada edit html template kita cari kode #header-wrapper atau keseluruhan seperti dibawah ini tapi jangan lupa sebelum diedit lakukan backup template dulu ya
#header-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fX0D3SdxfBMtnnUmD_0dvMCzc1mLMXl-2Oj6qGMD3IDRXXsugdpMzI7fVkvdjv-GOqG18GIyuOUwUekHyWuC6gSz7PXISU5S4TI45mpby9uK-XXa_q7xV0E3tPo90WIaBQdMQMIX-xhN/s1600/line.gif) repeat-x scroll left bottom;
height:119px;
width:900px;
}
#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#000000;
text-align:left;
}

jika udah ketemuan ganti keseluruhan kode tersebut dengan kode dibawah ini
#header-wrapper {
width: 900px;
margin:0 auto 0px;
background:$bgheadercolor url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fX0D3SdxfBMtnnUmD_0dvMCzc1mLMXl-2Oj6qGMD3IDRXXsugdpMzI7fVkvdjv-GOqG18GIyuOUwUekHyWuC6gSz7PXISU5S4TI45mpby9uK-XXa_q7xV0E3tPo90WIaBQdMQMIX-xhN/s1600/line.gif) no-repeat top center;
height: 90px;
}

#head-inner {
width:728px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:170px;
float:left;
padding-top:10px;
}
untuk angka-angka tergantung selera masing-masing ya...

tahap berikutnya cari kode seperti ini  <div id='header-wrapper'> kemudian ganti dengan dibawah ini
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
Kemudian simpan template anda
Rating: 5