Kerangka Template Blog Responsive 2 dan 3 kolom Kerangka Template Blog Responsive 2 dan 3 kolom - mizipediacom mizipediacom: Kerangka Template Blog Responsive 2 dan 3 kolom

KATEGORI










LIVE TV

Iklan Semua Halaman

Kerangka Template Blog Responsive 2 dan 3 kolom

Thursday, April 27, 2017



Kerangka Template Blog Responsive 2 dan 3 kolom


Bagi anda yang ingin belajar lebih jauh lagi mengenai WDR [ web design resonsive ] Mungkin desain kerangka template resonsive sangat berguna bagi kita yang ingin membuat website/ blog, anda bisa mempelajari strukture template yang terdapat di dalamnya , agar anda lebih bisa menguasai materai responsive

Hmmm namanya aja kerangka responsive , sudah tentu di didalamnya simple sekali mode responsive yang digunakan , agar hal itu bertujuan supaya anda mengerti dasar-dasar responsive itu seperti apa , jika terdapat kebanyakan kode  bisa-bisa anda nanti bisa menjadi pusing.

Saya akan memeberikan 2 kerangka responsive yaitu kerangka  dengan 2  dan 3 kolom , jadi silahkan anda memilih mana yang menurut anda sesuai dengan keinginan anda, kerangka ini saya dapatkan dari blog nya mast taufiq yang beralamatkan dte.web.id . Nah untuk demonya anda bisa lihat di bawah ini.
Fitur Kerangka Template Responsive
<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 demikian penejelasan tentang Kerangka Template Blog Responsive 2 dan 3 Kolom, jadi silahkan anda modifikasikan kerangka template tersebut sehingga menjadi lebih bagus.
Note:  jangan hapus credit linknya, hargai karya orang lain, salam blogger
Lihat Juga