Frame Responsive SEO Blogger Template Terbaru

1. Post Meta (Author,tanggal, label dan komentar)
2. Custom font Roboto.
3. Font Awesome
4. Valid HTML5
5. Markup Microdata Schema.org (di bagian posting)

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

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

Sedangkan untuk Media Queris standart silakan lihat gambarannya di bawah ini:

/* ==== 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>

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

 Bagaimana cara melakukan konversi pixel kedalam % atau sebaliknya? Berikut intipan caranya:

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

Sehingga diperoleh hasil:

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

Mudah atau ribet Sob? Yang pasti, dari Frame Responsive blogger template ini akan menambah wawasan kita dalam melakukan modifikasi desain sebuah template. Tentu hal ini cocok bagi rekan-rekan yang suka melakukan modifikasi template. Jika tidak, silakan langsung gunakan template jadi aja njeh.

Demikian informasi pagi ini. Semoga bermanfaat. Salam.
Source