Frame Responsive SEO Blogger Template Terbaru

Frame Responsive merupakan template dasar yang masih bisa dilakukan modifikasi terpadu. Makna terpadu di sini karena Frame Responsive template karya Kang Ismet ini memang ditujukan untuk dikembangkan lebih lanjut. Itu artinya, template ini masih dalam "kerangka template" saja.

Sa;ah satu tujuan keberadaan template ini, menurut Kang Ismet karena memang ingin dijadikan rujukan dasar dalam pembuatan template responsive selanjutnya. Seperti halnya Blogku Blogger Template karya Mas Sugeng yang memang digunakan untuk salah satu blog milik Mas Sugeng sendiri. Berikut penampakannya:

Demo | Download

Fitur:

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)

Untuk mempermudah pemahaman kita dalam melakukan modifikasi sentuhan akhir guna menyempurnakan template ini, silakan sobat lihat panduan beliau di bawah ini:

<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