Cara Merapikan Layout Blog

Kali ini saya akan posting bagaimana cara merapikan layout atau tata letak pada blog. Mungkin memiliki layout yang rapi tidak ada hubungannya dengan SEO atau tidak diharusakan oleh search engine seperti Google namun tidak ada salahnya anda memperbaiki tampilan layout blog anda supaya lebih enak di pandang oleh anda sendiri.

Dan masalah yang paling sering muncul dalam layout blog adalah yang pertama munculnya deretan titik-titik secara vertikal. Yang kedua adalah barisan kolom widget yang seharusnya berderet secara horizontal namun malah berderet secara verikal.

Dan ini contoh gambar dari permasalahan tersebut.

contoh layout blog yang tidak rapi

Dan ini contoh gambar setelah kita merapikan layout tersebut

contoh layout blog yang rapi

Untuk maslah yang pertama biasanya disebabkan oleh kode css “<ul> atau <li>”
Contoh css yang menyebabkan munculnya titik diatas adalah css menu dropdwon seperti dibawah ini

#menu ul, #menu li {margin:0;padding:0;text-align:left }

Untuk menghilangkan titik yang disebabkan oleh css di atas adalah sebagai berikut.
1. Cari <b:skin><![CDATA[ /*
2. Buat css yang bisa menghilangkan titik tersebut , seperti di bawah ini

#menu ul, #menu li {list-style-type :none;}

CSS ini sesuai permasalahan css yang ada di template anda.
Jika css nya seperti ini

#nav ul, #nav li {margin:0;padding:0;text-align:left }

Maka CSS untuk menghilangkan titik tersebut adalah seperti ini

#nav ul, #nav li {list-style-type :none;}

3.Taruh CSS tersebut seperti contoh di bawah ini

<b:skin><![CDATA[
......Css untuk menghilangkan titik.....
/*

Contohnya

<b:skin><![CDATA[
#menu ul, #menu li {list-style-type :none;}
/*

4. Simpan template dan lihat perubahannya.

Untuk masalah yang kedua adalah masalah footer yang yang deretannya secara vertikal.
Memang pada tampilan aslinya footer tersebut berderet secara horizontal dan rapi namun di layoutnya secara berderet secara vertikal yang membuat layout kelihatan tidak rapi dan berkesan memakan tempat.

Itu terjadi mungkin karena CSS yang menggunakan persen (%), penggunaan persen ini untuk membuat footer tersebut menjadi responsive. Solusinya untuk membuatnya layout nya rapi namun tetap responsive seperti ini.

Misalkan CSS footer tersebut seperti di bawah ini

.footer{float:left;width:30.5%;margin:10px;margin-top:7px}

Nah untuk mengatasinya langkah awalnya sama seperti menghilangkan titik di layout namun CSS yang di gunakan mengatasi masalahnya tentu berbeda.
Langsung saja caranya
1. Mencari <b:skin><![CDATA[/*
2. Membuat css untuk mengatasi masalah footer yang berderet secara vertikal tersebut.
contoh css nya seperti ini

.footer {width:253px; }

Width atau lebarnya anda ganti sesuai dengan template anda, maksudnya rubah lebarnya sampai ukuran nya pas dan berderet secara horizontal.
Dan penerapannya seperti ini

<b:skin><![CDATA[
.footer {width:253px; }
/*

Dan jika anda memiliki ke dua masalah tersebut ada di layout anda maka penerapannya seperti ini

<b:skin><![CDATA[
#menus ul, #menus li {list-style-type :none;}
.footer {width:253px; }
/*

Catatan : Lakukan penerapannya persis seperti diatas ,karena sering kali kita tidak teliti dan mengabaikan hal kecil seperti kode CSS yang ini “/*”, karena saya mengalami tersebut :) . itu aja si..

Cara Merapikan Layout Blog

4/ 5

Oleh Unknown

Unknown 00:49 5 Komentar

5 komentar

Rawins

13 April, 2015 delete

kalo rapi kan enak diliat dan betah baca bacanya walau ga ngerti maksudnya, haha..
beneran suka empet sama blog yang semrawut apalagi berantakan sama iklan obat kuat apa judi bola yang kerlap kerlip bikin cape mata