Pengikut

Salam blogger, pada kesempatan kali ini saya akan sedikit membahas mengenai Tutorial blogger, soalnya udah lama nih nggak mosting tentang tips dan trik blogger, kemaren-kemaren posting saya penuh dengan info news mulu. Nah di postingan ini saya akan sedikit membeberkan gimana caranya untuk membagi sidebar yang asalnya hanya satu kolom menjadi dua kolom. Untuk yang template blognya hanya memiliki satu sidebar seperti saya, gak usah bingung untuk ganti template, pakai aja tutorial ini.

Langkah-langkah untuk membagi sidebar menjadi dua:
1. Log in ke account blogger sobat
2. klik menu Template
3. kemudian pilih Edit Html
4. pilih lanjutkan untuk masuk ke Setup Html
5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang 
    bertuliskan "expand template widget"
6. cari kode di bawah ini
#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
                *Gunakan ctrl+f untuk mempermudah pencarian*
"Sebagai contoh; nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing-masing kolom akan kita beri margin sebesar 10px agar terdapat ruang jarak. Sehingga sekarang lebar masing-masing sidebar menjadi 117px".
7. Copy kode css dibawah ini lalu simpan dibawah kode tadi
#sidebar-wrapper2 {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
8. Ganti nilai width masing-masing kolom menjadi 117px. 
    Lalu tambahkan margin:0px 20px 0px 0px;pada bagian sidebar-
    wrapper2. Sehingga hasilnya menjadi seperti ini:
#sidebar-wrapper {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper2 {

background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;

margin:0px 20px 0px 0px;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
9. Etzz belum selesai, Sobat cari lagi kode berikut
<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’Label1′ locked=’false’ title=’kategori’ type=’Label’/>
<b:widget id=’Followers1′ locked=’false’ title=’Followers’ type=’Followers’/>
<b:widget id=’Feed1′ locked=’false’ title=’Creating Website’ type=’Feed’/>

</b:section>
</div>
10. Yang harus anda perhatikan adalah kode yang di bold karena setiap  
      template itu berbeda-beda
11. Tambahkan kode berikut ini dan letakan dibawah </div>
<div id=’sidebar-wrapper2′>
<b:section class=’sidebar’ id=’sidebar2′ preferred=’yes’>
</b:section></div>
12. Simpan Template

Nah itulah tutorial membagi sidebar menjadi dua, selamat mencoba dan semoga bisa bermanfaat buat anda semua.

Posting Komentar

  1. sekedar ngasih tau : kode css di setiap template/desig blog berbeda-beda mas :)

    BalasHapus
    Balasan
    1. makasih mas, iya memang setiap template memiliki css yg berbeda, tapi ini hanya sebagai tips buat para blogger di luar sana saja, sekali lagi saya ucapkan terima kasih atas sarannya.

      Hapus
  2. Balasan
    1. iya bro sama-sama, thank's juga buat kunjungannya oke, sukses selalu

      Hapus

  3. mantap gan, sukses tutorialny, thank infonya

    BalasHapus
  4. Kodenya beda mas bro..
    coba lihat blog saya http://adam-cyber.blogspot.com
    apa sarannya?
    thanks before.. :)

    BalasHapus
  5. success always ...
    may be useful for everything ....
    thank's

    BalasHapus
  6. nice info gan, tapi tampilan edit html sedikit di rubah oleh blooger, jadi fasailitas ctrl F nya kurang berfungsi

    BalasHapus
    Balasan
    1. Tambah keren siih gan gak perlu lagi crl+f tinggal ketik katanya di pojok kanan kotak html nya,, udah ada warnanya jadi gak terlalu pusing kalo ada salah sala, makasih salam blogger

      Hapus
  7. thanks sob udah berbagi ilmu..langsung deh saya praktekin..

    BalasHapus
  8. Nice Post Sob,,,
    ditunggu kunjungannya,,, :D

    BalasHapus
  9. wahh.. nice info nehh .. thanks ya gan...

    BalasHapus
    Balasan
    1. iya sama sama gan, thanks komentarnya okeh... salam blogger

      Hapus
  10. TOKO NABILA SHOP JUAL HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA Produk dijamin asli orginal.Dapatkan harga promo meyambut HARI NATAL TAHUN BARU Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000
    Ready Stock ! BlackBerry Curve 9360 Apollo Rp.950.000,-
    Ready Stock ! Varian Canon EOS 70D Rp.500.0000

    BalasHapus
  11. Keren sob artikelnya sangat bermanfaat, terimakasih. Akan saya coba langsung di blog saya http://vitaminrambutalami.wordpress.com/

    BalasHapus
  12. Terima jasa pembuatan website berkualitas dengan harga murah. Mulai website pribadi, company profile, toko online, dan lain-lain. Kami juga menerima jasa pembuatan software komputer / aplikasi android / website untuk skripsi dan thesis informatika. Hubungi 083834375641 / 75286D3B

    BalasHapus
  13. Angkasa Bali -Distributor Perlengkapan Kantor, Furniture Dan Interior. Seperti Meja Kantor, Kursi Kantor, Partisi Kantor, Brankas, Filling Cabinet, Locker, Rak besi, Lemari Arsip, Sofa, Elektronik, dan Sebagainya. Pemesanan Hub (085 101362248) Tel kantor 0361 8947611 - Fax 0361 8947612. Email: akb_oe@yahoo.co.id/akb_oe1@yahoo.co.id. Web: http://angkasabali.blogspot.com/
    Angkasa Bali

    Distributor Peralatan Kantor

    Jual Peralatan Kantor

    Angkasa Bali Distributor alat Kantor

    Angkasa Bali jual alat Kantor

    Angkasa Bali jual furniture Kantor

    Angkasa Bali jual furniture dan alat Kantor

    BalasHapus
  14. Halo Bossku ^^
    Segera Daftarkan ID di ibu21,com
    Menyediakan 8 Permainan Hanya Dengan 1 ID
    Serta Tersedia Promo Menarik
    Bonus Turn Over Terbesar
    Bonus Refferal Seumur Hidup
    Minimal Deposit Hanya 25Rb
    BBM : csibuqq
    WA : +855 88 780 6060
    Di Tunggu Kehadirannya Bossku ^^

    BalasHapus
  15. agen sabung ayam s128 dan sv388 terpercaya

    http://agensabungayam.logdown.com/post/7837867-kandungan-daun-jambu-biji-untuk-ayam-bangkok-aduan

    Link Official Bolavita : http://159.89.197.59/
    Telegram : +62812-2222-995
    Wechat : Bolavita
    WA : +62812-2222-995
    Line : cs_bolavita

    BalasHapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!