info kesehatan/unik/serba serbi

Thursday, 11 December 2014

cara menambah 1 kolom gadget dibawah header

cara menambah 1 kolom gadget dibawah header
Kolom gadget pada layout template blog kita berguna untuk berbagai hal, biasanya kegunaan gadget dibawah header ini untuk iklan sponsor. dengan adanya gadget dibawah header terkadang penempatan iklan sponsor kita lebih mudah terlihat dan hal ini akan menguntungkan kita. Untuk bahasan kali ini saya akan menerangkan kepada sobat bloger semua bagaimana kita dapat menambahkan 1 kolom gadget di bawah header bila memang pada template kita belum tersedia, bagi yang sudah yah ini tidak dibutuhkan lagi.
Langsung aja tanpa basa basi menuju TKP.


  •     Login ke blog sobat.
  •     Pilih tata letak ( Layout ) lihat dulu .
  •     kemudian ke template lalu Klik edit html, jangan lupa centang Expand Template Widget .

  •     Cari kode yang seperti ini:          ]]></b:skin>
  •     Kemudian tambahkan kode dibawah ini persis diatas code    :    ]]></b:skin>

    #under_header{float:left;width:100%;}

Sehingga letaknya seperti ini :

#under_header{float:left;width:100%;}
]]></b:skin>
  •     Kemudian cari kode seperti ini [ gunakan Ctrl + F untuk mempercepat pencarian ] :

    <div id='header-wrapper'>
    <b:section class='header'id='header'maxwidget="1'showaddelement="no">
    <b:widget id='header1'locked='true'title='nama blog sobat(header)'
    type='header'/>
    </b:section>
    </div>
  • Copy code dibawah ini lalu tempatkan code tersebut tepat dibawah code yang di atas
    code dibawah ini adalah code pembuatan kolom gadgetnya.
<div id='under_header'>
    <b:section class='header' id='underheader' preferred='yes'/>
    </div>
  •     Setelah anda menempatkan code diatas hasilnya akan seperti ini :
    <div id='header-wrapper'>
    <b:section class='header'id='header'maxwidget="1'showaddelement="no">
    <b:widget id='header1'locked='true'title='nama blog sobat(header)'
    type='header'/>
    </b:section>
    </div>


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

  •     Warna merah adalah kode yang harus sobat tambahkan.
  •     Klik simpan 
  •     Kemudian lihat hasilnya melalui tata letak pada layout Template sobat.

Semoga apa yang telah diterangkan di atas akan senantiasa membantu sobat, bila ada hal yang belum dimengerti silahkan kita saling membantu lewat form komentar dibawah .


Sumber