Sunday

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.
Cara merapikan layout blog
contoh layout blog yang tidak rapi
Dan ini contoh gambar setelah kita merapikan layout tersebut 
Cara merapikan layout blog
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..

Artikel Terkait

Cara Merapikan Layout Blog
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

5 komentar

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

Reply
avatar
14 April, 2015 delete

haha obat kuat lebih serem dari judi bola

Reply
avatar
Anonymous
29 April, 2015 delete

ada baiknya dicoba dulu neh/... makasih om

Reply
avatar
13 January, 2016 delete

ga berfungsi tuh gan, dah dicoba.

Reply
avatar

-berkomentarlah dengan baik sesuai topik
-menaruh link aktif dianggap spam