Kerangka Template Blogger Responsif (HTML5)

Friday, October 12, 2012

Kerangka Template Blogger Responsif (HTML5)

Kebanyakan para blogger khususnya blogspot menginginkan template yang responsif dan SEO Friendly. Pada pencarian di mbah google, IdTutorPlus memasukkan keyword template blogger responsif dan akhirnya menemukan template yang benar-benar resposif yang pernah didapatkan.

Template ini Admin dapatkan dari DTE :] yang memberikan template secara gratis. Dan akhirnya Admin memutuskan untuk membagi kembali bagi pengunjung yang mungkin minat untuk memilikinya.

Demo Template 2 Kolom Demo Template 3 Kolom Download

Seiring berjalannya waktu, lama-kelamaan pasti kalian akan segera mengerti

Fitur

Kerangka dasar HTML5. Ya, begitulah kira-kira:

<div id='outer-wrapper'>

     <header id='header-wrapper'>
          <h1>Lorem Ipsum</h1>
     </header>

     <nav id='nav'>
          <ul>
               <li><a href='#'>Home</a></li>
               <li><a href='#'>About</a></li>
               <li><a href='#'>Archive</a></li>
               <li><a href='#'>Comments</a></li>
          </ul>
     </nav>

     <div id='main-wrapper'>
          <article class='post hentry'>
               ...
          </article>
     </div>

     <aside id='sidebar-wrapper'>
          ...
     </aside>

     <footer id='footer-wrapper'>
          ...
     </footer>

</div>

Media queries sederhana untuk ukuran layar 740px dan 570px:

@media screen and (max-width:1024px) {
    #outer-wrapper {width:100%;}
}

@media screen and (max-width:740px) {
    #main-wrapper,
    #sidebar-wrapper {
      float:none;
      display:block;
      width:auto;
      padding:5%;
    }

    #sidebar-wrapper .widget-content {margin:0 0 10px;padding:0;}
}

@media screen and (max-width:570px) {
    #header h1 {font-size:170%;}
}

Internet Explorer dan Firefox akan menampilkan lebar elemen dengan sangat tepat (mungkin semacam pembulatan). Namun Chrome dan Opera sepertinya memiliki peraturan yang cukup ketat mengenai persentase. Admin sengaja memberi warna yang berbeda-beda pada setiap blok elemen untuk melihat penyimpangan yang terjadi. Coba buka blog-blog tersebut pada browser yang berbeda dan perhatikan celah-celah yang muncul pada sisi-sisi sidebar dan artikel.

Cara termudah untuk mengatasi itu adalah dengan menyamakan semua warna kolom sehingga celah tidak akan tampak menggaris.

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini