mas template

Membagi Sidebar Menjadi 2 Kolom di Blogspot

Sesuai dengan judul diatas, kali ini saya akan menulis artikel tentang bagaimana cara untuk membuat sidebar menjadi 2 kolom. Membagi  sidebar 2 kolom sebenarnya bukan merupakan keharusan tiap blog. tapi mengingat untuk mempercantik blog juga dapat mempersempit ruangan blog kita. dengan maksud pengunjung tidak merasa bosan dengan blog kita. 


Baiklah, kita langsung saja pada langkah-langkah pembuatannya :
1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode
#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 */
}
Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.

Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.

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.

Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.

5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti 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 */
}

#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 */
}
6. 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 */
}
7. Setelah itu, cari kode
<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>
8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.

9. Copy kode yang berwarna biru diatas lalu letakkan dibawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini.
<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>

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
10. Jika sudah klik Save Template.
11. Selesai. Klik Page Element untuk melihat hasilnya.

Demikian tadi sedikit penjelasan tentang bagaimana membagi sidebar menjadi 2 kolom, jika teman-teman unya trik lain yang lebih sederhana saya siap menggunakannya.

Semoga bermanfaat
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

22 comments:

  1. @Aquino Kasenda:
    Itu namanya sharing sexy bookmark, cara membuatnya ada disini http://www.maskolis.co.cc/2011/03/memasang-widget-sharing-is-sexy-di.html
    Terima kasih semoga bermanfaat

    ReplyDelete
  2. sekarang ane mau nanya kalo jadiin sidebar 2 kolom jadi satu gimana?

    ReplyDelete
  3. Assalamualaikum wr wb ... maskolis ...
    Bisa bantu untuk membelah sidebar blog saya gk ???

    saya pakai template Johny Simple Blog
    Cek >> http://arieagustomi.blogspot.com/

    Plisss

    ReplyDelete
    Replies
    1. ke http://ah-shared.blogspot.com gan, ntr ane ksh tau :v

      Delete
  4. terus kalo buat ngilangin menu slide gimana gan,kan blog ane pake tamplate 3 kolom sidebar kiri,main post,sidebar kanan terus kalo di klik artikelnya sidebar kiri ilang jadinya cuma 2 kolom mainpost sama sidebar kanan doank,,,,mohon di tinjau di
    http://arry21.blogspot.com
    mksh sblumnya

    ReplyDelete
  5. Kalau untuk ditemplate modifikasi cara gampang saya kurang ngerti bang maskolis,,.. sudah berapakali saya coba tapi belum berhasil...

    Visit me http://www.odingk.com

    ReplyDelete
  6. HTML nya beda Mas.... Saya pakai template blog ini, saya jg pengen bagi sidebar buat pasang alexa. Minta template yg blog ini aja Mas kalo boleh. Kirim ke aris.nugroho@outlook.com .
    Terima kasih maskolis.

    ReplyDelete
  7. mas kolis kq kagak bisa ya
    padah ane sudah coba terus membuat tu
    tapi selalu gagal mas , sudah saya coba 10 kali mas
    ne mas blog ane http://ijalsiizal.blogspot.com
    mohon di koreksi mas templatenya ane

    ReplyDelete
  8. mas punyaku bisa tpi kok cuman bagi 2 yah
    pikirku sesuai gambar
    1 atas
    bawahnya dibagi 2 gitu
    gimana caranya mas

    ReplyDelete
  9. thx info'y sob
    http://duniagame7.blogspot.com/

    ReplyDelete
  10. Bagaimana ya menambahkan kolom pada template johny wuzz. kolomnya hanya 1 membuat sisi kanan terlihat kosong,,

    ReplyDelete
  11. Kalau template murni bawaan blogger, element2 di atas koq tidak ada ya Mas? ada solusi....

    ReplyDelete
  12. Produk di Jamin Asli.
    ELECTRONIC SOLUTION-SHOP.
    Menawarkan harga Promo , Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi Tam .Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya,
    Berminat Hub: Hotline/sms: 0857-7087-2865 ATAU KLIK WEBSET RESMI KAMI http://electronicsulution-shop.blogspot.com
    BlackBerry>Samsung>Nokia>Apple>Acer>Toshiba
    Led tvlg>Led tv Samsung>Nikon>Canon>DLL

    Dijual,
    Ready Stock !
    Blackberry Bold 9780
    Harga Promo Rp.1.500.000,-
    Ready Stock !
    BlackBerry Bold Curve 9300,
    Harga promo Rp.1.000.000,-
    Ready Stock !
    BlackBerry Torch 9800
    Rp.1.600.000,-
    Ready Stock !
    BlackBerry Z10
    Rp.3.500.000,-
    Ready Stock !
    BlackBerry Q 10
    Rp.4.000.000,-
    Ready Stock !
    Samsung Galaxy S3 Mini
    Rp. 2.700.000,-
    Ready Stock !
    Samsung Galaxy Ace
    Rp.1.400.000,-
    Ready Stock !
    Samsung Galaxy S2
    Rp.2.500.000,-
    Ready Stock !
    Samsung Galaxy S4
    Rp.4.500.000,-
    Ready Stock !
    Nokia 808 Pure View
    Rp.4.200.000,-
    Ready Stock !
    Nokia Lumia 820
    Rp. 2.700.000,-
    Ready Stock !
    Nokia Lumia 920
    Rp.3.400.000,-
    Ready Stock !
    Nokia Lumia 620
    Rp. 1.500.000,-
    Ready Stock !
    Apple iPhone 5G 16GB
    Rp.4.100.000,-
    Ready Stock !
    Apple iPhone 4G- 32GB
    Rp.3.500.000,-
    Ready Stock !
    Apple iPhone 3G-16GB
    Rp.2.900.000,-
    Ready Stock !
    Apple iPhone 4S-64GB
    Rp.4.000.000,-
    Ready Stock !
    Acer Aspire one 756
    Rp.1.400.000,-
    Ready Stock !
    Acer Aspire E1-471G
    Rp.2.800.000,-
    Ready Stock !
    Acer Aspire S5 Ultrabook Core 17
    Rp.7.000.000,-
    Ready Stock !
    Toshiba Satellite C800D-1006
    Rp.2.500.000,-
    Ready Stock !
    Toshiba Satellite C800D-1003
    Rp.1.500.000,-
    Ready Stock !
    Toshiba Satellite L840-1045XR
    Rp.3.700.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5100
    Rp 3.500.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5710
    Rp. 4.000.000,-
    Ready Stock !
    Led TV Lg 39 inch LN5100
    Rp. 3.000.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F5000
    Rp. 2.100.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F4000
    Rp.1.500.000,-
    Ready Stock !
    Nikon D5100+18-15Kit
    Rp 3.500.000,-
    Ready Stock !
    Nikon D3000 Kit 18-15mm VR
    Rp. 1.500.000,-
    Ready Stock !
    Nikon D3200 Kit 18-105mm VR
    Rp 3.100.000,-
    Ready Stock !
    Canon Eos 600D Kit EF-S 18-135mm
    Rp.3.800.000,-
    Ready Stock !
    Canon Eos 70D Kit EF-S 18-55mm is stm
    Rp.4.700.000,-
    Ready Stock !
    Canon Eos 600D Body
    Rp.2.500.000,-


    Kami melakukan Pengiriman barang lewat Tiki atau Jne ,Pos,Cargo,bagi luar kota,Ongkir ditanggung pembeli
    Berkat Anda Usaha Kami Jadi Semakin Lancar,Terima kasih telah berbelanja di Electronic Solution-Shop.

    Nikmati berbagai keuntungan berbelanja di sini.
    *Barang berkualitas dan harga relatif lebih murah
    *Dapat diantar ke seluruh indonesia
    *Keamanan di jamin karna setiap pengiriman di sertai asuransi proses cepat dan sederhana
    Barang di jamin 100% original baru dan bergaransi resmi.
    Selamat Berbelanja ! ! !

    ReplyDelete
  13. kode sidebar-wrapper nya ada banyak nih.. gimana nih..?

    ReplyDelete
    Replies
    1. kode yang warna biru dan disekitarnya juga banyak kode warna biru

      Delete
  14. terimakasih .,.,,.,. sangat membantu,.,.,.

    ReplyDelete
  15. terimakasih mas,... mampir blog saya www.simbahsport.blogspot.com

    ReplyDelete
  16. mas Kolis tolong dicek blog saya www.kaosanaknonbranded.blogspot.com, tiap test order email ga bisa muncul invoicenya, masuk ke anaknusantara.com ..... tq

    ReplyDelete
  17. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam 1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  18. gimana gan cara membuat kolom menjadi dua?

    Bergabunglah dengan kami di www.senang77.net
    Tempat bermain POKER paling FAIR, AMAN DAN TERPERCAYA!!
    Nikmati bonus turn over 0.3% setiap Minggunya
    Hanya di www.senang77.net anda dapat merasakan KENYAMANAN

    bermain POKER
    BUKTIKAN!!

    ReplyDelete
  19. maaf itu maksudnya sidebar yang sudah ada di bagi dua gitu kan...
    lalu kalau mau menambahkan sidebar di bawahnya dan sidebar di bawahnya ini baaru di bagi 2 kolom itu bagaimna bos...

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger