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:


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 

2 Responses to "Frame Responsive SEO Blogger Template Terbaru"

  1. sepertinya kurang bagus itu templatenya, agak lambat

    ReplyDelete
    Replies
    1. kalau pengen yang super cepat, cek aja SL Fastest SEo atau SEO Super Fastest...super cepat dan SEO killer Mas

      Delete

Silakan masukkan komentar Sobat di sini!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel