Membuat Multi Kolom Blog

membuat multi kolom blog

kesempatan kali ini mau sedikit mengulas perihal blog design. Pernah mengunjungi blog yg menggunakan wordpress? saya yakin jawabannya pernah bahkan sering. Jika jawabanya mirip itu, tentunya sering juga dong memperhatikan layout atau desain dari templatenya. Nah jikalau saya sendiri sering memperhatikan bahwa template wordpress dibagian footer nya sering kali dibentuk menjadi multi kolom, ada yg dibentuk jadi dua kolom, tiga kolom, dan ada juga yg hingga empat kolom. Mungkin bagi yg sedikit kritis bakal muncul pikiran atau bahkan pertanyaan “apakah dapat template blogger bab footer nya dibentuk menjadi multi kolom?” Saya tegaskan jawabanya ialah “bisa”. mau tau Caranyanya? ya udah baca dech hingga tuntas.

Untuk menciptakan bab footer menjadi multi kolom tidaklah sulit mirip yg teman bayangkan (so pinter niye), hanya sedikit trik yg perlu dilakukan maka nanti bakal tercipta footer blog yg multi kolom. supaya lebih untuk mempermudah pemahaman perihal trik ini, saya sarankan teman untuk mempraktekannya seCaranya langsung, Caranyanya buatlah satu buah blog untuk percobaan (jangan pada blog utama), ini untuk menghindarkan hal-hal yg tidak diinginkan terhadap blog sobat.

Persiapan pertama yg Musti di perhitungkan ialah berapa lebar kolom keseluruhan yg mau kita pecah menjadi multi kolom. selanjutnya yaitu berapa kolom yg mau di buat? kemudian berapa jarak antara kolom yg satu dengan kolom yg lainnya? Jika kita melihat terhadap banyaknya template, tentu saja tidak bakal menemui titik temu atau kata yg sama dalam hal persiapan hal di atas tadi, nah supaya semuanya menjadi seragam maka saya bakal mengambil pola dengan menggunakan template minima yaitu template orisinil yg di sediakan oleh blogger.com dengan pilihan warna putih. Banyaknya kolom yg bakal kita buat ialah sebanyak tiga kolom.

setelah saya perhatikan, template minima orisinil mempunyai lebar kolom sebesar 660px atau 660 pixel, alasannya kolom yg bakal kita buat sebanyak tiga kolom, maka seCaranya perhitungan matematika ialah mirip ini –> 660px : 3 = 220px. bakal tetapi apabila menggunakan angka tersebut maka goresan pena yg tersimpan antara kolom yg satu dengan yg lainnya bakal bertabrakan sehingga menjadi tidak sedap untuk di pandang mata. Untuk mengatasi duduk perkara ini maka perlu menambahkan jarak sela antar kolom, instruksi pembuat jarak sela ialah padding, misalkan ambil pola besar padding yg bakal saya gunakan ialah sebesar 10 pixel. hasil dari perhitungan yg kita pakai ialah kolom yg bakal di buat ialah sebesar 205px (205 pixel). supaya sedikit tampak lebih cantik, bakal saya tambahkan pula instruksi UL LI sehingga sebuah link yg bakal tercipta melalui instruksi ini bakal berubah warna background yg cantik, nanti lihat contohnya dech…

Eh… sudah buat belum blog minima nya? buat donk supaya lebih Mudah untuk di pahami… atau sudah siapp…. bener sudah siap?… kita mulaiiiiii…

Langkah #1 :

# Hal pertama yg Musti di ingat ialah jangan mencentang kotak kecil di samping goresan pena expand widget template alasannya jikalau teman mencontengnya maka bakal keluar instruksi widget yg bikin pusing kepala, jadi sekali lagi Jangan mencontengnya.

# Tambahkan instruksi berikut persis di atas instruksi ]]> :

/* bottom
—————————- */

#bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;

}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom { /* yg ini nih instruksi kolom kiri */
width: 205px;
float: left;
padding-left:10px;
}

#center-bottom { /* kalo yg ini instruksi kolom tengah */
width: 205px;
float: left;
padding-left:10px;
}

#right-bottom { /* kalo yg ini instruksi kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}

# Tuju bab body yaitu pada bab bawah instruksi template, dan cari instruksi yg mirip mirip ini :

# Copy paste instruksi berikut persis di atas instruksi yg atas tadi :

# Jangan lupa akhiri dengan mengklik tombol Simpan Template.

# Selesai.

Langkah #2 :

# Klik sajian Elemen Halaman.

# Lihat apakah kolom yg tadi dibentuk sudah tampak atau belum? jikalau sudah, klik link Tambah sebuah Elemen Halaman, klik tombol TAMBAHKAN KE BLOG di bawah goresan pena Feed, untuk sekedar mencoba, silahkan isikan dengan alamat berikut :

http://template-unik.blogspot.com/atom.xml

atau

http://rubrik-elektronik.blogspot.com/atom.xml

atau juga yg ini :

http://kolom-tutorial.blogspot.com/atom.xml

Jangan lupa untuk klik tombol SIMPAN

# Silahkan lihat risikonya apakah sudah sukses atau belum? jikalau belum sukses coba lihat lagi lanhkah-langkah di atas, barangkali ada yg terlewatkan. Jika sudah sukses, ucapkan terima kasih kepada kang rohman

Masih kurang percaya dengan yg saya tulis, bolehlah lihat pola jadinya. Silahkan klik di sini! atau jikalau ingin melihat aplikasi lain dari instruksi di atas dapat di lihat di sini!

Pembuatan kolom yg mirip di atas, kebanyakan di gunakan untuk Recent Post atau juga Recent Comments. Untuk menciptakan Recent Posts atau juga Recents Comments bakal saya bahas pada postingan berikutnya.

Selamat bereksperimen !

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: