loading...

Menambah Elemen di Bawah Header di Blogspot


elemen dibawah header


Menambah elemen dibawah header memang sangat diperlukan untuk membuat ruang baru seperti untuk meletakkan banner iklan,fans page,daftar isi dan macam lainnya yang kita sesuaikan dengan keperluan kita membuatnya.Elemen dibawah header menjadi sebuah tempat untuk menambah atau add gadget yang kita inginkan sesuka hati kita. 



Biasanya ada bermacam-macam cara membuat elemen dibawah header.Tapi kali ini saya mau jelaskan dengan dua versi yakni versi pertama dan kedua.Untuk mempersingkatnya langsung saja saya berikan tutorialnya agar lebih mudah dipahami. 



1.Versi Pertama ( Untuk menambah satu elemen)

  • Masuk ke Blogger anda
  • Klik "Template" dan klik Edit HTML
  • Cari kode ]]></b:skin> lalu copy kode dibawah ini diatas kode tadi

#under_header{ margin:10px 0; padding:1%; width:98%; }



  • Kemudian cari kode yang mirip atau hampir sama dengan kode dibawah ini

<div id='header-wrapper'>  <b:section class='header' id='header' maxwidget="1" showaddelement="no"> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> </b:section> </div>



  • |Setelah itu copy dan paste kode berikut ini tepat kode diatas tadi

<div id="under_header"> <b:section class='header' id='underheader' preferred='yes'/> </div>



  • |Silahkan di Pratinjau dahulu untuk mengurangi Error,jika sudah pas maka Simpan template.
  • Elemen baru akan muncuk dibawah header blog kamu.

2.Versi Kedua (Untuk menambahkan 2 atau 3 elemen dibawah header)

  • Pada blogger anda cari "Template" dan Klik EDIT HTML
  • Terlebih dahulu centang "Expand template Widget"
  • Cari kode ]]></b:skin>
  • Jika sudah dapat letakkan kode berikut diatasnya



#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}



  • Cari kode <div id='main-wrapper'> jika tidak ada cari kode ini 



<div id=’outer-wrapper’>
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′>
<b:widget id=’Header1′ locked=’true’ title=’NAMA BLOG ANDA’ type=’Header’/>
</b:section>
</div>



  • Setelah mendapatkan kode tersebut, letakkan kode berikut ini diatasnya  (Untuk 2 kolom dibawah header)



<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>




  • Dan jika ingin meletakkan 3 kolom silahkan letakkan kode ini.



<div id='box-main-container'></div>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
 



  • Silahkan simpan templatenya.Maka lihat hasilnya di blogger anda maka akan ada penambahan elemen dibawah header.
  • Jika hasilnya tidak sesuai dengan yang diharapkan maka cari kode <div id='content-wrapper'&gt dan letakkan kode diatas dibawah kode tersebut.


Sumber : Disini
Share on Google Plus

About Bgaze

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 komentar:

luvne.com ayeey.com cicicookies.com mbepp.com kumpulanrumusnya.comnya.com tipscantiknya.com