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
loading...

KATEGORI


HIBURAN


  • RCTI












  • VIDEO

    Iklan Semua Halaman

    loading...

    Kerangka Template Blog Responsive 2 dan 3 kolom

    Thursday, 27 April 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