Mecha versi 2.6.3 sudah dirilis!

Download Kerangka Template Blogger Responsif

Tabel Konten
  1. Fitur 
Download Kerangka Tema Blogger Responsif

Selama ini Saya pikir masalah yang sering terjadi adalah mereka ingin menciptakan tema responsif tetapi masih belum begitu mengerti/merasa pusing dengan media queries. Berikut ini Saya telah membuat dua buah tema dasar Blogger dengan media queries yang Saya buat dari kerangka Minima dengan tampilan sesederhana mungkin. Harapan Saya kalian bisa dengan senang hati memodifikasi tema ini tanpa harus merasa pusing terhadap media queries:

Demo Tema 2 Kolom Demo Tema 3 Kolom Download

Seiring berjalannya waktu, lama-kelamaan pasti kalian akan segera mengerti :)

Fitur 

Kerangka dasar HTML5. Ya, begitulah kira-kira:

<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 740 piksel dan 570 piksel:

@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%;}
}

Internet Explorer dan Firefox akan menampilkan lebar elemen dengan sangat tepat (mungkin semacam pembulatan). Namun Chrome dan Opera sepertinya memiliki peraturan yang cukup ketat mengenai persentase. Saya sengaja memberi warna yang berbeda-beda pada setiap blok elemen untuk melihat penyimpangan yang terjadi. Coba buka blog-blog tersebut pada browser yang berbeda dan perhatikan celah-celah yang muncul pada sisi-sisi sidebar dan artikel.

Cara termudah untuk mengatasi itu adalah dengan menyamakan semua warna kolom sehingga celah tidak akan tampak menggaris.

81 Komentar

Anonim

Ijin download mas taufiq ,pengen belajar membuat template responsive dengan kerangka ini nih :D

Unknown

Keren mas taufik, saya sudah sering banget design template menggunakan Kerangka Template dari Mas Taufik.

Unknown

Saya sudah menggunakan kerangka template ini untuk mendesign template, mantab banget thanks banget mas Taufik! Good job :-bd

Unknown

Makasih banyak mas atas kerangka templatenya ngebantu banget :)

Kidu Hac Otnatus

makasih gan... izin download dan obrak-abrik ya :)

Ervan

keren,
Tampilan gelap yang elegan dong waks :p

Unknown

mas saya masih belajar tapi saya ada sedikit masalah dan bingung mau tanya dimana soalnya tidak ada artikel yang sesuai dengan yang ingin saya tanyakan. jadi intinnya saya mencoba menahkan kode <b:template-skin>...</b:template-skin> pada kerangka template tapi muncul error
kode lengkapnya seperti ini
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>
<![CDATA[/*
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]>
</b:skin>
<b:template-skin>
<b:variable default='1200px' name='content.width' type='length' value='1200px'/>
<![CDATA[
#outer-wrapper {
width:$(content.width)
}
]]>
</b:template-skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</body>
</html>

Unknown

reupload gan link google coid

Giri Diwa Adam

izin tarik gan :) thankyou : )
Sankyuuu,Arigatouu,Nee

Giri Diwa Adam

Gan Numpang Tanya , Gomenasai Sebelumnya Itu Ada Auto readmorenya nggak ?? Kalau Nggak ada bisa ente Jelasin Cara nambah Auto Readmorenya ? Makasih Sebelumnya. ^_^

Taufik Nurrohman

Enggak mas, untuk menambah fitur read more mas bisa cari caranya menggunakan fitur pencarian di blog ini.

Unknown

Udh dapet Readmorenya gan , Makasih , Kunjungi Blog saya :https://tutsinfo11.blogspot.co.id/

Cuman Android

Hallo mas taufik, saya mau tanya tntng template tsb nih, kalo ingin memunculkan objek tanpa perlu menempatkan di dua tempat gimana ya caranya ?.

Maksud saya begini, kyk di framework template itu klo mau memunculkan objek di bawah postingan (contoh : artikel terkait) kan harus di bagian desktop dan, mobile.

nah bisa gak di satu bagian aja, tapi artikel terkaitnya tetap muncul di bagian desktop dan mobile ?

soalnya berat jg klo menempatkan 2 objek sama di beda tempat

makasih mas :)

Tomi

Mas, ijin download yak, mau belajar...hehe