Sign up for PayPal and start accepting credit card payments instantly.

Menambahkan 3 Kolom Elemen Halaman dibawah Header

Category : Labels: , , ,


Menambahkan kolom dibawah header. Sebenarnya mudah untuk dilakukan. Menambahkan elemen halaman dibawah header mungkin berguna bagi anda yang sudah kehabisan tempat untuk menaruh widget-widget ataupun yang lainnya.
  • Masuk ke blog anda ► Layout ► Edit HTML. 
  • Jangan lupa untuk membackup template blog anda. Ini penting untuk mengembalikan settingan blog anda sebelumnya bila terjadi kesalahan dalam proses nantinya dengan mengklik Download Full Templates .
  • Tidak perlu untuk mencentang kotak kecil bertuliskan Expand Widget Templates. Karena akan semakin membuat bingung anda nantinya.
  • Copy kode dibawah ini
<div id='underheader-column-container'>
<div id='underheader5' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='underheader-column' id='col7' preferred='yes' style='float:left;'/>
</div>
<div id='underheader6' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='underheader-column' id='col8' preferred='yes' style='float:left;'/>
</div>
<div id='underheader7' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='underheader-column' id='col9' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

  • dan paste di  bawah kode untuk kolom benar - benar terletak dibawah header.
    <div id='header-wrapper'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Free Template (Header)' type='Header'/>
    </b:section>
        </div>
    • Lalu copy-paste kode dibawah ini diatas kode ]]></b:skin> atau dalam tag CSS anda.
    #underheader-column-container {
    clear:both;
    }
    .underheader-column {
    padding: 10px;
    }
    Kode tersebut berguna untuk mengatur tampilan atau style dari kolom anda nantinya.

    • Save Templates. Selesai
    Selamat mencoba. Semoga berhasil. :D

    Note :
    Besar kolom dalam jumlah besar dalam percent (%) kadang tidak selalu pas dengan lebar template bila dilihat di beberapa monitor dengan resolusi berbeda. Sebaiknya diganti dengan pixel (px).

    16 Komentar:

    bagus neh bwt edit tmplate. ijin save ya sob :)

    thank tipsnya n tukeran link yuk...

    Wah keren triknya!!

    @ kahfilyer : silahkan ..silahkan :D
    @ alfi : konfirmasi saja di shoutmix atau komentar di menu Tukar Link
    @ akhatam : thanks supportnya.. :D

    wah mangstabh neh triknya... ctrl-d dulu ya..

    sip tutorialnya..... suatu sat mungkin perlu

    @ randyhawai : Terima kasih.:D
    @ rio2000 : Ya.. suatu saat mungkin diperlukan.. :D

    Thanks atas info yang sangat berguna ini...

    @ Laksamana Embun : Sama - sama :D

    sangat bermafaat untuk memperbayak muatan blog itu sendiri... :)

    nice infonya sahabatku.trims

    @ kakve : yupz.. setuju
    @ belogger Prost : terima kasih kembali.. :D

    aq juga dah tak pasang, tuh d bawah 3 kolom dibawah header

    @ Rizky : Siip dech .. Okelah kalo begitu.. :D

    saya sngat ingin sekali menambahkan 3 kolom dibawah header, tp saya tak bisa menemukan code <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Free Template (Header)' type='Header'/>
    </b:section>
    </div> apa ada yang harud di ganti ???? tolong baget ya

    Post a Comment