Semakin kita pintar, semakin banyak yang harus kita pelajari.

Blog Teman
kirim sapaan untuk menjadi blog teman.
Featured Blog
Featured

Menambahkan Kolom pada Blog

Hai teman-teman!! Kembali saya akan membagikan hasil “try and error” saya. Kali ini adalah tentang menambahkan kolom pada fasilitas blog UNIKOM.
 
Secara default, template yang disediakan baik yang custom maupun yang standar hanya terdapat 2 kolom saja, 1 kolom untuk artikel (kolom yang besar) dan 1 kolom lagi untuk Widget blog (kolom yang kecil). Tampilannya seperti berikut :
1
Kali ini saya akan menambahkan satu kolom kecil di sisi sebelahnya. Jadi, nantinya kolom yang berisi artikel akan berada di tengah, dan kolom di sisi kanan dan kirinya akan berisi widget. Inilah langkah-langkahnya :
 
  • Seperti biasa, masuklah ke menu “Edit Blog”, kemudian klik “Pilih Template”, kemudian klik “[EDIT]” atau langsung klik link http://kampus.unikom.ac.id/apps/go/blog/m/template/mod/custom/ untuk langsung menuju ke editor custom template.
  • Pada kotak “Edit CSS”, di bagian /* WRAP */ tepat dibawah #wrap { ubahlah nilai width dari 980px menjadi 1180px.
  • Masih pada kotak “Edit CSS”, carilah bagian /* POSISI WIDGET */ kemudian ganti kode berikut
/* POSISI WIDGET */
#content_widgets{
                width:300px;
                float:right;
}
 
dengan kode berikut :
 
/* POSISI WIDGET */
#content_widgets_kanan{
                width:250px;
                float:right;
}
#content_widgets_kiri{
                width:250px;
                float:left;
}
 
1
  • Selanjutnya, pada kotak “Edit HTML”, di bagian konten <div id=”content”>,  letakkan kode <div id=”content_widgets_kiri”></div> di atas kode <div id=”content_main”></div> dan <div id=”content_widgets_kanan”></div> di bawah kode <div id=”content_main”></div>. Kalau bingung, lihat gambar berikut :
1
  • Setelah itu, klik “Simpan” untuk menyimpan perubahan pada template blog.
1
  • Jika sudah, lakukan “reload” pada blog, dan hasilnya akan seperti gambar berikut :
1
 
OK. Kali ini cukup sampai di sini, semoga bermanfaat dan silahkan dikembangkan sendiri sesuai dengan keinginan. Selamat mencoba dan tetaplah bersama saya... :D
 
Format Lainnya : PDF | Google Docs | English Version
Diposting pada : Kamis, 24 Februari 11 - 00:06 WIB
Dalam Kategori : BLOG, TUTORIAL
Dibaca sebanyak : 2853 Kali
Rating : 1 Bagus, 0 Jelek
Tidak ada komentar pada blog ini...
Anda harus Login terlebih dahulu untuk mengirim komentar
Facebook Feedback
Daftar Blog Lainnya
Kategori
Posisi
Alexa Rank