Tuesday 30 September 2014

Cara menambah satu kolom gadged 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 class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
</div>
    </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 class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
</div>
    </div>


    <div id='under_header'>
    <b:section class='header' id='underheader' preferred='yes'/>
    </div>
  
<b:widget id='HTML2' locked='false' title='' type='HTML'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
      </b:widget>
    </b:section>
    </div>

    </header>

  •     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 .




EmoticonEmoticon