Cara Merapikan Layout Blog
desain
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.
Dan ini contoh gambar setelah kita merapikan layout tersebut
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
1. Cari <b:skin>< |
| contoh layout blog yang tidak rapi |
 |
| contoh layout blog yang rapi |
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[Contohnya
......Css untuk menghilangkan titik.....
/*
<b:skin><![CDATA[4. Simpan template dan lihat perubahannya.
#menu ul, #menu li {list-style-type :none;}
/*
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[Dan jika anda memiliki ke dua masalah tersebut ada di layout anda maka penerapannya seperti ini
.footer {width:253px; }
/*
<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..