25 Menambah Dua Kolom Elemen Halaman Dibawah Sidebar Utama

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Kali ini saya ingin mengetengahkan cara menambah dua kolom elemen halaman dibawah sidebar utama.
Tidak panjang lebar lagi, berikut cara menambah elemen halaman dibawah sidebar utama yang saya jadikan tempat eksperimen blog saya lainnya yang menggunakan template default blogger yaitu minima...
Tampilan awal templateminime seperti gambar dibawah ini:

elemen halaman dasar minima
Bagaimana cara menambah elemen dibawah sidebar utama menjadi dua kolom seperti gambar dibawah ini:
menambahkan dua kolom dibawah sidebar utama
Ikuti langkah langkahnya:
Menambah elemen di bawah sidebar utama

  1. Login ke blogger dengan id anda
  2. Masuk ke menu Tata Letak
  3. Pada tab menu, klik Edit HTML
  4. Backup template anda, klik Download Template Lengkap
  5. Sekarang cari kode ini :
#sidebar-wrapper {
width: 220px;
float: $startSide;
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 220px; dan properti float: $startSide; dengan nilai sidebar anda. Misalnya:
Kalau untuk template minima 220 dibagi menjadi dua hasilnya sangat kecil karena itu anaa pilih 350, setelah dibagi dua dan memperhitungkan margin atau jarak antara kedua sidebar baru maka untuk setiap kolomnya (sidebar kanan dan kiri) lebarnya menjadi 170 dan float: right;
Maka kode diatas jadi seperti ini:
#sidebar-wrapper {
width: 350px;
float: right;
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. Sekarang tambahkan kode berikut di bawah kode tadi
#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
   8. Secara keseluruhan kodenya menjadi seperti ini :
#sidebar-wrapper {
width: 350px;
float: right;
$startSide
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 */
}
#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
   9. Sekarang kita akan membuat kode HTML untuk sidebar left dan sidebar right tersebut. Cari kode ini:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
</div>
  10. Sisipkan kode berikut di bawah <b:widget id= dan seterusnya.... :
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
  11. Sehingga secara keseluruhan menjadi seperti ini:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>
12. Nah agar sidebar yang telah dibuat tidak melorot jumlah yang kita tambahkan pada sidebar utama tadi tambahkan pula pada 3 elemen halaman template anda yaitu
  • Elemen Header
  • Elemen Outer
  • Elemen Footer
Lebar sidebar utama setelah dirubah - lebar sidebar asli = jumlah yang anda harus tambahkan pada lebar header, outer dan footer (350-220 =130).
Kode masing masing elemen seperti ini:
  • Untuk Header
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
  • Untuk Wrapper
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
  • Untuk Footer
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Tulisan berwarna merah adalah yang harus anda ganti angkanya dengan menambahkannya dengan jumlah penambahan pada sidebar utama. Dari contoh diatas maka perhitungannya 660+130=790
13. Sekarang klik tombol SIMPAN TEMPLATE
SELESAI.
Untuk melihat hasilnya klik Elemen halaman! Semoga berhasil, 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 Tips Trik Blogging

25 komentar :

  1. Mantap ne tutorialnya.... tapi saya gk pernah berhasil ngikuti tutorial ini...:((

    BalasHapus
  2. Butuh sdkt aja ketelitian dan kesabaran lho!

    BalasHapus
  3. woo lengkap n detail bangt thank buat infonya temannn

    BalasHapus
  4. sama sama, makasih kunjungan dan komentarx!

    BalasHapus
  5. ok deh nanti akan rizky coba

    BalasHapus
  6. wow, menarik akak saya tes nanti soalnya masih ada pekerjaan lain nih, oh ya apa itu berlaku untuk gagdet d paling bawah halaman ?

    BalasHapus
  7. iya, semoga berhasil.

    tidak, khn bahasanya beda. klu menambah elemen halaman diatas footer sudah anaa bahas jg, silahkan search diblog ini atau langsung klik label desain template

    BalasHapus
  8. @ petunjuk tujuh: iya, terimakasih jg apresiasinya

    BalasHapus
  9. kk klu pada template harbour gmna ya?

    BalasHapus
  10. Minta bantuan a dunk.. gmn klo pngn nambah 2 sidebar tepat di bawah posting..??
    yar tau yat blog aqu ya..?? makasih

    BalasHapus
  11. Minta bantuan a dunk.. gmn klo pngn nambah 2 elemen halaman baru tepat di bawah posting blog aqu..??
    yar tau yat blog aqu ya..?? makasih

    BalasHapus
  12. tutorial...gagal....gan...
    harap di cek dulu...

    BalasHapus
  13. @ Berbagi Kreativitas: InsyaAllah cara menambahkan dua kolom elemen halaman dibawah posting akan saya posting pada kesempatan lain. Sabar aja, untuk praktekx dah pernah sy terapkn dan berhasil tgl nunggu kesempatan bs posting tutorialx aja.

    @ SoloClix: Aih yg perlu cek saya apa SoloClix nie? Silahkan coba lagi dgn ketelitian dan sedikit kesabaran. Oke?!

    Makasih apresiasinya.

    BalasHapus
  14. Assalamualaikum, tolong dong kasih tau cara menambah sidebar di kiri...

    BalasHapus
  15. Blog Tembang Lawas sudah bisa kang tapi ada sdikit masalah widgetnya form panjang tidak bisa menyesuaikan dengan form sidebar yang baru dibuat masih ikut dengan sider bar utama, gimana neeh kang ? mohon pencerahan

    BalasHapus
  16. Salam kenal .. Sy newbe ne ...thx atas info nya dan sudah ku coba alhamdulillah sip ... your blog so good so nice ... n great content .. sukses selalu deh saling share ya ...

    BalasHapus
  17. Mohon maaf ... mau tanya .. help me ya .. di blog sy kan sidebare ada color nya ne .. kalau untuk merubah weight or heiht nya bagaimana ya ... soalnya untuk penambahan 2 kolom elemen tsb kalo merubah weight nya color e ga ngikut ... so soslusi terakhir ku bagi 2 aja deh .. help me ya .. thx sebelumnya

    BalasHapus
  18. Maizing...
    Salam Sukses Buat Admin dan Semua

    BalasHapus
  19. share nya mantap gan... trims atas ilmu nya... semoga sukses selalu.

    BalasHapus
  20. akhirnya jadi juga,,
    terima kasih tutorialnya,
    postingannya juga bagus - bagus niih :)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!