-->

Android | Anime | Hentai | Download Film | Tutorial Blogger | Tips | DLL

Andika Official

Kerangka Template Responsive 2014

Tuesday, April 29, 2014

Kerangka Template Responsive 2014

Download Kerangka Template Blogger Responsif

saya akan share kerangka template responsive dari dte.web.id agar sobat bloggerjateng bisa membuat dan desain template sendiri secara responsive.





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.
Saya 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.
  source : dte.web.id

Notice :

- Menggunakan Bahasa Sopan
- Dilarang Spam , Flood , Junk , Iklan , Sara , Sex , Dsb.
- Dilarang OOT ( Out Of Topic )
- Dilarang Menaruh Live Link