» » » » Membuat Dua Kolom Widget Di Blogspot

Membuat Dua Kolom Widget Di Blogspot

Kadang template yang kita gunakan tidak sesuai dengan impian kita, contohnya kolom widget yang disediakan hanya ada satu padahal kita membutuhkan yang dua kolom, Tutorial kali ini saya buat untuk para blogger yang ingin Membuat Dua Kolom Widget di Blognya.

Kadang template yang kita gunakan tidak sesuai dengan impian kita Membuat Dua Kolom Widget di Blogspot

Untuk mempercantik blog dengan susunan gadget yang sesuai dengan impian Sobat, dalam hal ini jumlah kolom widget, Sobat sanggup membuatnya sendiri dan terserah mau meletakkannya dimana, sanggup di bawah posting, di atas posting, di bawah header, di dalam sidebar, di bab footer ataupun di lain tempat.

Berikut Cara Membuat dua Buah Elemen Gadget/Widget :
  • Login Blogger Sobat.
  • Pilih Template > Edit HTML.
  • Ceklis / Centang Expand Widget Template.
  • Cari arahan ]]></b:skin> dengan menekan tombol CTRL+F pada keyboard.
  • Letakkan script berikut ini diatas ]]></b:skin> :
    #box-main-container {
    clear:both;
    }
    .box-column {
    padding:0px 10px 10px 10px;
    border:1px dotted $bordercolor;
    }
    *Anda sanggup mengubah padding ( jarak posisi gadget ) 0px 10px 10px 10px maksudnya ialah Jarak ( Atas, Kanan, Bawah, Kiri ).
    *Anda juga sanggup merubah border ( garis tepi widget ) dengan warna, caranya hapus $bordercolor dan ganti dengan arahan warna yang Anda inginkan.
  • Kemudian cari kode
    •   <div id='main-wrapper'>
    •   <div id='content-wrapper'>
    •   <div id='header'> atau <div id='header-wrapper'>
    •   <div id='sidebar-wrapper'>
    •   <div id='bottom'>
    Keterangan :
    *<div id='main-wrapper'> ialah posisi halaman utama anda. Biasanya digunakan untuk penempatan hidangan horizontall atau daftar isi sebuah blog.
    *<div id='content-wrapper'> ialah posisi postingan.
    *<div id='header'> ialah posisi kepala. Biasanya ditempatkan judul blog dan deskripsi blog.
    *<div id='sidebar-wrapper'> ialah posisi sidebar blog.
    *<div id='bottom'> ialah posisi paling bawah. Atau Footer Blog Anda.
    Silakan pilih salah satu, mau menempatkannya dimana.
  • Jika sudah didapat atau hampir sama dengan arahan diatas, letakkan arahan HTML di bawah ini
    <div id="box-main-container"> <div id="box1" style="float: left; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col1" preferred="yes" style="float: left;"> </b:section></div> <div id="box2" style="float: right; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col2" preferred="yes" style="float: right;"> </b:section></div>
    <div style="clear: both;"> </div></div>
    Silakan Anda letakkan di bab atas atau dibawah salah satu arahan tadi.
    *Sebagai pola saya letakkan dibawah arahan <div id='main-wrapper'>
    Kadang template yang kita gunakan tidak sesuai dengan impian kita Membuat Dua Kolom Widget di Blogspot
    *Hasilnya menyerupai gambar berikut
    Kadang template yang kita gunakan tidak sesuai dengan impian kita Membuat Dua Kolom Widget di Blogspot
  • Jika sudah simpulan klik Preview / Pratinjau dulu, gres klik Save Template / Simpan Template.
Semoga Tutorial diatas sanggup berkhasiat dan bermanfaat...
0 Komentar untuk "Membuat Dua Kolom Widget Di Blogspot"

Back To Top