20 Menambahkan Kolom Elemen Halaman Baru Pada Sidebar

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

Setelah mempublikasikan template perdana yang saya hasilkan dari belajar otodidak desain template, beberapa teman minta diajarkan cara membuat template. maka pada postingan kali ini kita akan belajar lagi bagaimana menambahkan elemen baru pada sidebar atau membuat template dua kolom menjadi tiga kolom dengan dua kolom pada sidebar kanan.
Nah langsung saja seperti biasa template yang saya jadikan tempat eksperimen kecil adalah template default minima.
Screenshot pada elemen halaman template minima seperti berikut:
preview elemen halaman minima
Hal pertama yang perlu kita ketahui, template memiliki tiga elemen yaitu elemen header, outer dan footer. Untuk elemen outer terbagi lagi menjadi dua, yaitu elemen main untuk postingan dan elemen sidebar untuk menambahkan ragam widget.
Untuk menambahkan kolom atau elemen halaman pada sidebar kanan template blogger ikuti langkah-langkah berikut:

1. Tentukan dahulu lebar kolom atau elemen baru yang ingin kita tambahkan, misalnya lebarnya 220px agar nantinya elemen yang kita tambahkan tidak melorot maka kita perlu menambahkan pula lebar elemen header, outer dan footer dengan jumlah lebar sidebar baru yang ingin kita tambahkan.
Pada template minima lebar , ketiga elemen halaman tersebutmasing-masing 660px ditambahkan dengan 220px jadinya 880px.
Untuk merubah angka masing-masing elemen halaman tersebut Pada dasbor klik tata letak=> edit HTML
cari kode berikut:

/* Header
------------------------------------------ */
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ganti lebar/ widht menjadi seperti berikut:
membuat template tiga kolom 
Selanjutnya cari kode berikut:
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
Ganti angka widht jadi seperti berikut:
membuat template tiga kolom 
Untuk merubah lebar footer cari kode berikut:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
jadi seperti berikut:
membuat template tiga kolom
2. Sekarang kita buat kode CSS untuk sidebar baru seperti berikut:
#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

3. Cari kode berikut :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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-wrapper {
width: 220px;
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 */
}
4. Tambahkan kode elemen baru yang akan kita tambahkan dibawah kode diatas, sehingga kodenya menjadi seperti berikut:
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yang ini adalah tambahan untuk jarak sela */
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 */
}
#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
5. Berikutnya adalah menambahkan kode HTML untuk elemen sidebar baru tersebut. Untuk kode HTML sidebar sebelum penambahan kolom adalah seperti ini:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
6. Untuk kode HTML sidebar baru seperti berikut:
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
7. Selanjutnya adalah menyatukan kode sidebar baru tersebut pada kode HTML sidebar yang sebelumnya, sehingga kodenya menjadi seperti ini:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
8. Selesai. jangan lupa simpan template.
Sekarang untuk melihat hasilnya klik elemen halaman kalau dah ada tambahan kolom baru pada sidebar seperti screenshot berikut berarti berhasil:
menambahkan kolom halaman baru pada sidebar
Selamat mencoba! Semoga bermanfaat!
InsyaAllah postingan berikutnya cara menambahkan elemen halaman diatas dua kolom untuk menjawab pertanyaan seorang teman


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

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

20 komentar :

  1. wow sidebarnya bisa jadi dua,, nice sob^^
    terimakasih yah :)

    salam blogger:)

    BalasHapus
  2. @ Terimakasih apresiasix

    BalasHapus
  3. ilmu baru lagi nih buat ane...makasih sob informasi berharganya,,,ditunggu postingan hebat lainnya!

    BalasHapus
  4. @ mgm: Terimakasih apresiasinya

    BalasHapus
  5. Klaw di sebalah kiri postingan bisa?? jadi postingannya ada di tengah........

    BalasHapus
  6. @ Chomisah Noer: Bisa, insyaAllah ada masa anaa posting ukh.

    BalasHapus
  7. Oke deh nnti deh gampang heheh eh mba mau tya lagi dunk hehhehe maklum saya mash belajar gak tw apa2 deh....
    klw mau buat yg menu scrolliNg.... itu biar di pinggirannya di kasih animasi / gambar gitu gimna ea?? hehhehe

    BalasHapus
  8. @ Chomisah Nur: gpp ukh, anaa senang dijejali pertanyaan. he2 khn klu anaa g' tau anaa jd termotifasi mencari klu dpt khn nambah ilmu.

    Untuk menambahkan image animasi pada pada isi menu scrolling jika disidebar cari kode sidebar li tambahkan url image. InsyaAllah anaa posting klu masih kurang jelas ya.

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. susah bangettt se mba... hiks

    BalasHapus
  11. help me dong, kok gk jadi2 ya...

    BalasHapus
  12. @ gadis: coba belajar ngeditnya ditemplate minima dulu, klu khawatir template skrgx berantakan.

    tak apa sih langsung ditemplate asli asal jgn lupa back up, download lengkap templatex

    BalasHapus
  13. wah ukhti gak berhasil kodenya jarang ku temukan di edit html kayak misalnya yg/* Outer-Wrapper
    gtu uh susah yg lebh gamPang gmana nieh?

    BalasHapus
  14. Ukhti, oke dech boleh kasih downloadtannya plis ,, yach-yach PLIS.....ana mau sekali
    pinternya jadi UKhtio, bisa bantu aku thanks tolong yach

    BalasHapus
  15. Ukhti kasih downloadtannya yach secepatnya thanks

    BalasHapus
  16. wah ini info yg luar biasa. saya lg btuh bgnt info ni. mksh gan...

    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!