> > Menambah Widget Kolom

Menambah Widget Kolom

Posted on Selasa, 05 Januari 2010 by ndesain.web.id

Kadang kita ingin menambah tampilan blog kita tapi kolom widget yang ada kurang sesuai dengan keinginan kita, ada 2 cara untuk mengatasi hal ini :
  1. Mengganti Template yang lebih sesuai
  2. Menambah Kolom widget
Berikut trik blogger menambah widget kolom
Langkah Pertama
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
  • Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..
    Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
    Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

    /* -- Widgetc -- */

    #Widgetc {
    width:850px;
    clear:both;
    margin:0 auto;
    float:center;
    padding:10px 0;
    color:#333;
    background:#ffffff;
    border-top:#ffffff;
    border-bottom:#ffffff;
    }

    #Widgetc a:link {
    color:#006699;
    text-decoration:none;
    }

    #Widgetc a:hover {
    color:#c06000;
    text-decoration:underline;
    }

    #Widgetc a:visited {
    color:#808080;
    text-decoration:none;
    }

    #Widgetc h2 {
    color:#000000;
    padding:10px 0 2px 0;
    margin:0 0 10px 0;
    border-bottom:1px dotted #333;
    font-size:11px;
    font-weight:bold;
    line-height:1.4em;
    text-transform:uppercase;
    }

    #Widgetc ul {
    padding:0;
    margin:0;
    color:#333;
    }

    #Widgetc ul li {
    list-style-type:none;
    border-bottom:1px dotted #333;
    background: url("http://i864.photobucket.com/albums/ab206/kibagus/animation/Checkmark.gif") no-repeat 0px .17em; padding-left:17px;
    margin-top:2px;
    }

    #Widgetc1 {
    width:260px;
    float:left;
    padding-left:15px;
    }

    #Widgetc2 {
    width:260px;
    float:left;
    padding:0 20px 0 20px;
    }

    #Widgetc3 {
    width:260px;
    float:right;
    padding-right:15px;
    }

    Catatan :
    1. Ganti kode yang berwarna KUNING sesuai dengan lebar template blog kamu.
    2. Untuk variabel width di kode #Widgetc harus sesuai dengan lebar template blog kamu.
    3. Untuk variabel width di kode #Widgetc1, #Widgetc2, dan #Widgetc3 dapat kamu ubah dengan lebar yang kamu inginkan, tapi harus memperhatikan point nomor 2.
    4. Ganti kode yang berwarna MERAH sesuai dengan blog dan kreasi kamu.
    5. Khusus untuk kode background: url("http://i864.photobucket.com/albums/ab206/kibagus/animation/Checkmark.gif") no-repeat 0px .17em; padding-left:17px; merupakan kode untuk menambahkan icon dalam teks kamu jika menggunakan metode penomoran, baik angka maupun icon. Kalau kamu kurang suka silakan hapus kode tersebut atau ganti url dalam tanda kurung dengan icon kamu sendiri.
    6. #Widgetc { width:850px;}= lebar template kamu 850px
    7. Trik perubahan variabel width dalam kode #Widgetc1, #Widgetc2, #Widgetc3 adalah dengan memperhatikan lebar (padding) yang terpakai yakni 15px (#Widgetc1), 20px + 20px (#Widgetc2), 15px (#Widgetc3). Jadi total lebar yang telah digunakan adalah 70px.
    8. Sisa lebar (width) adalah 850px-70px = 780px.
    9. Sekarang tinggal memvariasikan 780px ke dalam 3 kolom. Sebagai contoh untuk membuat 3 kolom sama lebarnya, maka lebar (width) dalam kode #Widgetc1, #Widgetc2, #Widgetc3 masing-masing sebesar 260px.
    Langkah Kedua

    cari Kode <div id='footer-wrapper'> atau yang mirip, Copy Kode berikut diatas kode tersebut.
    ( letak di atas footer, dengan posisi 3 kolom sejajar ) atau
    cari Kode <div id='footer-wrapper'> atau yang mirip, Copy Kode berikut dibawah kode tersebut.
    ( letak di bawah footer, dengan posisi 3 kolom sejajar )


    <div id='Widgetc'>
    <b:section class='Widgetc' id='Widgetc1' preferred='yes'/>
    <b:section class='Widgetc' id='Widgetc2' preferred='yes'/>
    <b:section class='Widgetc' id='Widgetc3' preferred='yes'/>
    </div>

    * Jangan lupa disimpan.

    Sekarang coba kamu klik Lay Out --> Page Element.
    Note  =====>
    • Perlu diperhatikan bahwa penambahan kolom widget ini bisa ditambah dan dikurangi sesuai kebutuhan mulai dari 1, 2 s/d .. dst sesuai dengan lebar template blog kamu.
    • Posisi dan widget kolom yang baru ini juga bisa kamu letakan dimana saja atas/bawah/samping serta bisa juga satu diatas dan dua dibawah, kamu tinggal copy paste kode script kedua sesuai dengan letak widget yang kamu inginkan.
    <div id='Widgetc'>
    <b:section class='Widgetc' id='Widgetc1' preferred='yes'/>
    ...dst ( kamu isi sesuai dengan jumlah kode yang ada di script pertama / jumlah colom yang kamu inginkan dengan catatan lebar template blog memenuhi )
    </div>

    contoh, 1 widget colomn ( width:.....px Widgetc1, script pertama disesuaikan )
    <div id='Widgetc'>
    <b:section class='Widgetc' id='Widgetc1' preferred='yes'/>
    </div>

    contoh, 2 widget colomn ( width:.....px Widgetc2 dan Widgetc3, script pertama disesuaikan )
    <div id='Widgetc'>
    <b:section class='Widgetc' id='Widgetc2' preferred='yes'/>
    <b:section class='Widgetc' id='Widgetc3' preferred='yes'/>
    </div>

    ( bisa kamu letakkan satu diatas dua dibawah atau tiga dibawah semua tinggal kamu atur lebar colomn dan posisi script kedua )

    Sekarang kamu akan melihat ada tampilan widget baru di bawah template blog kamu dan sudah bisa menambah beberapa gadget didalamnya.
    Selamat Mencoba..!


    Category Article

    What's on Your Mind...

    Diberdayakan oleh Blogger.