Blog Personal tentang tips Blogging dan Internet Marketing

Cara Merapihkan Tata Letak Elemen Blog Yang Tidak Teratur

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

Share this:

Share this with short URL: Get Short URLloading short url

Berlangganan :
Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari langsung di pesan kotak masuk.

feedburner


Anda telah membaca artikel :
Cara Merapihkan Tata Letak Elemen Blog Yang Tidak Teratur
Semoga bermanfaat, Terima kasih.
Cara style text di komentar Disqus:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

Tidak ada komentar

Back To Top