Download Kerangka Template Blog Responsive 2 dan 3 Kolom

Download Kerangka Template Blog Responsive 2 Kolom dan 3 Colums - Mungkin desain kerangka template resonsive sangat berguna buat anda yang ingin belajar lebih dalam lagi mengenai wdr [ web design resonsive ] , karena anda dapat mempelajari strukture template di dalamnya , supaya anda lebih menguasai materai responsive

    Namanya aja kerangka responsive , pasti di didalamnya simple sekali mode responsive yang digunakan , hal itu bertujuan supaya anda tahu dasar-dasar responsive itu seperti apa , kalau kebanyakan kode , nanti anda malahan bingung , wkwkwk .

   Kali ini saya akan memeberikan 2 kerangka , yaitu kerangka responsive dengan 2 kolom dan 3 kolom , silahkan pilih mana yang sesuai dengan selera anda , oh iya kerangka ini saya dapatkan dari blog mast taufiq yang beralamatkan dte.web.id . berikut demonya

DEMO 3 KOLOM DOWNLOAD DEMO 2 KOLOM

Apa Aja Fitur Kerangka Template Responsive

Fitur template ini sederahana sekali dan tidak terlalu ribet

<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%;}
}

Nah itulah Kerangka Template Blog Responsive 2 dan 3 Kolom , silahkan anda modifikasi kerangka template tersebut menjadi lebih baik , tapi ingat jangan hapus credit linknya ya

By Renzytoreno Brainivanaqilah