temen temen ane gan

Transaksi Murah

bebas

Transaksi Murah

bebas

Rabu, 19 September 2012

Cara menambah widget 2 kolom kiri dan kanan dibawah header

Menambah atau membuat Element Widget 2 kolom kiri dan kanan akan terlihat seperti gambar dibawah ini:

Cara menambah widget 2 kolom kiri dan kanan dibawah header

Adapun cara membuat atau menambah Element Widget seperti gambar diatas adalah sebagai berikut:
  1. Masuk ke akun blog anda
  2. Setelah ada berada pada halaman Panel Blog kemudian anda Pilih " Template".
    Sedang untuk antar muka blogger lama, anda masuk ke "Rancangan"
  3. Setelah itu pilih Menu "edit HTML" kemudian centang "Expand Template Widget".
  4. Untuk berjaga-jaga, anda download terlebih dahulu template Blog anda.
  5. Setelah itu anda cari kode: ]]></b:skin>
  6. Letakan kode dibawah ini tepat di atas kode ]]></b:skin>

    #kolom-bawah-header-container { border: .3px dotted #cccccc;}

    .kolom-bawah-header { margin: 0 10px 0 10px; padding:5px;
    color: #666666; line-height: 1.5em; font-size:12px;}

    .kolom-bawah-header h2 {
    padding-bottom:.15em; text-align:center;
    font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
    color:#333333;
    line-height:1em; letter-spacing:.1em;
    border-bottom: 1px solid #cccccc;}

    .kolom-bawah-header ul { list-style:none; margin:0 0 0; padding:0 0 0;}

    .kolom-bawah-header ul li {
    background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
    margin:0 0 0; padding-left: 16px;
    padding-bottom: 0.5em; line-height:1.2em;}

    .kolom-bawah-header .widget {margin:0 0 .5em; padding:0 0 1em;}

  7. Kemudian cari kode seperti ini :

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='cadangan (Header)' type='Header'>
    <b:includable id='title'>

    . . . . . . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . .

    </b:includable>
    </b:widget>
    </b:section>
    </div>

  8. Jika sudah ketemu, letakan kode dibawah ini tepat dibawah kode seperti di atas:

    <div id='kolom-bawah-header-container'>
    <div id='kolom-bawah-header1' style='width: 480px; float: left; margin:0; '>
    <b:section class='kolom-bawah-header' id='kolom-bawah-header-1' preferred='yes' style='float:left;'>
    </b:section>
    </div>
    <div id='kolom-bawah-header2' style='width: 480px; float: right; margin:0; '>
    <b:section class='kolom-bawah-header' id='kolom-bawah-header-3' preferred='yes' style='float:right;'>
    </b:section>
    </div>
    <div style='clear:both;'/>
    </div>

  9. Jika anda menginginkan Element Widget berada dibawah menu maka, letakan kode di atas tepat di bawah kode menu. Biasanya kode menu akan terlihat seperti ini:

    <div id='menuwrapperpic'>
    <div id='menuwrapper'>
    <ul id='menubar'>
    <li class='selected'><a href='/'>Home</a></li>
    . . . . . . . . .
    . . . . . . . . .
    </ul>
    <br class='clearit'/>
    </div>
    <div style='clear:both;'/>
    </div>

  10. Sesuaikan lebar dengan lebar blog anda, lebar saya beri tanda tulisan yang berwarna merah, misal blog anda mempunyai lebar 900px maka tinggal dibagi dua.
  11. Langkah terakhir simpan dan lihat hasilnya.

0 komentar:

Posting Komentar