Template Responsive Dasar Valid HTML5 dengan Microdata

 Yang saya maksudkan dengan template responsive dasar, yaitu kerangka template responsive yang sudah diisi dengan beberapa artikel serta widget. Kerangka utama,saya gunakan dari DTE. Sebetulnya ini adalah koleksi pribadi saya, untuk mempermudah membuat Blogger Template Responsive. Tapi sebagai dokumentasi, dan siapa tahu diantara sobat ada yang memerlukan template dasar.




Template ini saya sudah lengkapi dengan :

• Post Meta (Author,tanggal, label dan komentar)
• Custom font Roboto.
• Font Awesome.

Vitur lain yang saya tambahkan yaitu :

• Valid HTML5
• Markup Microdata Schema.org (di bagian posting)

Untuk yang lainnya seperti auto readmore, breadcrumbs dll, silahkan tergantung kreativitas sobat. Untuk memudahan pemahaman, struktur template ini sbb :

<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 1024 pixel, 740 pixel dan 570 pixel

@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;}
#sidebar-wrapper h2 {
  padding:10px 15px 10px 0;
  margin:0px 0px 10px;
}
}

@media screen and (max-width:570px) {
    #header h1 {font-size:170%;}
    .post h3 {font-size:170%;}
}

Untuk lebih detail, kalau memang diperlukan, ini adalah srandard media queries

/* ==== RESPONSIVE DENGAN MEDIA QUERIES =====*/
@media screen and (max-width: 3000px){
/* CSS styles */
}
@media screen and (max-width: 1300px){
/* CSS styles */
}
@media screen and (max-width: 1024px){
/* CSS styles */
}
@media screen and (max-width: 992px){
/* CSS styles */
}
@media screen and (max-width:880px){
/* CSS styles */
}
@media screen and (max-width:768px){
/* CSS styles */
}
@media screen and (max-width:600px){
/* CSS styles */
}
@media screen and (max-width:480px){
/* CSS styles */
}
@media screen and (max-width:320px){
/* CSS styles */
}
@media screen and (max-width:240px){
/* CSS styles */
}
</style>

Cara Konversi Pixel ke %

Sebagai tambahan, apabila sobat terbiasa dengan ukuran pixel misal seperti ini :

#wrapper {max-width:1024px}
.content {width:700px}
.sidebar {width:300px}

Cara konversi dari pixel ke persen (%) adalah :

700/1024 x 100% = 68.359375%
300/1024 x 100% = 29.296875%;

Maka setelah di konversike persen, kurang lebih CSS seperti ini :

#wrapper {max-width:1024px}
.content {width:68.35%}
.sidebar {width:29.29%}

Semoga bermanfaat...