Kerangka Template Blog Responsive 2 dan 3 kolom




Kerangka Template Blog Responsive 2 dan 3 kolom
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

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect