Cara Merapihkan Tata Letak Elemen Blog Yang Tidak Teratur

Oleh Syafdillah

21 Februari 2016

Tata letak atau Layout, yang merupakan interface blogger untuk menambah atau menghilang gadget. Pada awalnya layout ini memiliki tampilan yang rapih, namun setelah ada editing pada template yang dilakukan untuk menambahkan atau menghilangkan bawaan dari template aslinya, istilah di-OPREK. Jadi template yang sudah di-OPREk alias di OTAK-ATIK. Maka tampilan layout menjadi acak-acak, seperti ini :

Ada beberapa cara untuk mengatasinya:

1. Cari kode seperti ini <b:skin><![CDATA[, lalu copy kode dibawah ini tepat dibawah kode <b:skin><![CDATA[
   
   

   body#layout .outer-wrapper {width:970px}
   body#layout .content-wrapper {width:970px}
   body#layout #header {width:300px;float:left;margin-top:30px}
   body#layout #header2 {width:500px;float:right}
   body#layout .main-wrapper {width:550px}
   body#layout .sidebar-wrapper,.sidebar1-wrapper {width:300px;float:right}
   body#layout #footer {width:970px}
   .footer {width:215px;float:left}
   body#layout ul {display: none}

   
   Hasilnya template yang tadinya memiliki tata letak yang tidak rapih menjadi rapih, seperti ini :
   
   
   
   

   Sekedar info saja, setelah rapih tata letak atau layout templatenya biasa Anda hapus kode CSS di atas.

   Kode mengatasi layot blogger yang acak-acakan di atas, belum tentu cocok dengan template blog Anda. Soalnya, kode template 'kan kadang suka beda-beda.

   Intinya sih, kode atau elemen utama template terdiri dari:

   1. Outer-Wrapper
   2. Header-Wrapper
   3. Main-Wrapper
   4. Sidebar-Wrapper
   5. Footer-Wrapper
   
   

   Nah, sesuaikan saja dengan nama-nama itu. Cari yang mirip-mirip, juga soal tanda di depannya, titik (.) apa pagar (#).

   Cara pertama ini saya dapat dari sobat owner www.blogromeltea.blogspot.com
2. Cari kode seperti ini <b:skin><![CDATA[, lalu copy kode dibawah ini tepat dibawah kode <b:skin><![CDATA[
   
   

   #header-wrapper, #outer-wrapper, #footer-wrapper {width:970px}
   #header-left {width:200px;float:left}
   #header-right {width:729px;float:right}
   #main-wrapper {width:650px;float:left}
   #sidebar-wrapper {width:300px;float:right}
   .footer {width:315px;float:left}

   
   Jika di tata letak blog ada titik-titik yang berjajar ke bawah, seperti gambar pertama di atas, bisa juga gunakan kode body#layout ul {display: none;} lalu paste di atas kode ]]></b:skin>
   Cara kedua ini saya dapat dari sobat owner www.kangismet.net
3. Copy kode di bawah ini :
   
   

   body#layout ul{list-style-type:none;list-style:none}
   body#layout ul li{list-style-type:none;list-style:none} 
   body#layout #outer-wrapper{overflow:visible;width:1000px} 
   body#layout #header{float:left;width:240px}
   body#layout #header2{float:right;width:240px}
   body#layout .add_widget{width:240px}
   body#layout div.widget{width:240px} 
   body#layout #sidebar-wrapper{overflow:visible;width:240px} 
   body#layout #lsidebar-wrapper {overflow:visible;float:left;width:240px;margin-right:50px;} body#layout #main-wrapper{overflow:visible;float:left;width:240px} 
   body#layout #rsidebar-wrapper{overflow:visible;float:right;width:240px} 
   body#layout #myGallery{display:none}
   body#layout .featuredposts {display:none} 
   body#layout .fp-slider{display:none}
   body#layout #navcontainer {display:none} 
   body#layout .menu-secondary-wrap{display:none} 
   body#layout .menu-secondary-container{display:none} 
   body#layout #skiplinks{display:none} 
   body#layout .feedtwitter{display:none} 
   body#layout div.section{font-family:sans-serif;margin:0 auto 2px;padding:0 0 10px 0;position:relative;overflow:visible} 
   body#layout .section-columns{margin:0} .section{width:100%}

   
   Lalu paste di bawah kode seperti ini :
   
   /*
   Blogger Template Style
   Name
   Author
   ....
   */
   
   atau paste di atas kode seperti ini :
   
   /* Variable Definitions
   .......
   */
   
   Jika terjadi penumpukan pada elemen gadget, maka kita harus menggunakan pemisah agar tidak bertumpuk dengan kode <div class='clear'/> yang diletakkan antar elemen gadget, seperti ini contohnya:
   
   

   <div id="header">
   .......................
   .......................
   </div>
   
   <div class='clear'/>
   
   
   <nav id='menu'>
   <ul>
   <li><a href='/'>Home</a></li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
   <li><a href='#'>Sitemap</a></li>
   <li><a href='#'>Privacy Policy</a></li>
   </ul>
   </nav>
   
   <div class='clear'/>
   
   <div class='content-wrapper'>

   
   Cara ketiga ini saya dapat dari sobat owner www.premiumbloggertemplates.com

Ayo Like Facebooknya

Tag : Blogging