Mecha versi 2.6.4 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

Unknown

mntep bang, Bikin Template yang desain Hampir 100% CSS3 bang, mngkin bagus

Yopi Hasopa

ijin download kerangka templatenya :)

Unknown

@ Taufik Nurrohman : Mau Donk hehehe

Unknown

Mantep kang Download dulu ye ^_^

Anonim

mas mau tanya, kalo blog yang Magic Mansory itu buatan mas bukan?
trus klo ia, boleh tau cara bikin panel di bagian atasnya kya gmana?? :D

Anonim

mas klo template saya di bikin responsivenya gmana?? udah di coab malah jadi hancurr ~x(

Taufik Nurrohman

@miretahutempe Lain kali kalau mau mengedit dibackup dulu mas... Untuk mengubah fixed template menjadi responsif itu memang agak susah, karena kita harus memulai mengubah elemen luar menjadi persentase, kemudian masuk ke dalam sedikit demi sedikit dan mengubah semua ukurannya menjadi persentase. Selain itu, sudut pandang persentase itu sangat berbeda dengan piksel, jika kita masih terbiasa dengan piksel, memahami persentase menjadi sedikit sulit T_T

EM

mas kalo pengen liat demo template magis masonry gimana?

Unknown

Mas ijin donlot ya buat belajar. Lihat blog sampean jadi ngiler saya. Bagus banget E \o/ membuat saya penasaran pengen belajar nih :D

Bayu Handono

owh saya baru mengerti mas, saya coba ganti semua elemen yg tadinya ukuran px menjadi % ternyata bisa. :D

Unknown

kang, reply komentar untuk template ini koq ga berfungsi yah ???.. :'(

Unknown

@Umar Azmar. MF, S.Sy Itu kerena komentarnya mengunakan slide panel, atau ada kesalahan dalam memasukan slide panel dalam templete hingga membuat thread comment anda bermasalah, itu cuma menurut saya saja dan mungkin tidak benar. mungkin menurut mas taufik lain lagi kerena dia yang membuatnya jadi yach lebih tau tentang itu. maaf saya cuma mencoba memantu sedikit kasian admin dilontar mulu sama pertanyaan heheeeee

Taufik Nurrohman

@Suwardi Unggit Mungkin bukan itu maksudnya mas hehe...

@Umar Azmar. MF, S.Sy: Seingat Saya saat itu Saya membuat template ini saat Saya belum begitu familiar dengan fitur thread-comment Blogger yang baru. Saya coba jadi kok ⇒ http://proyek-13.blogspot.com/2012/02/lorem-ipsum.html?showComment=1335619363421#c3052708051178300091

Kalau fitur thread-comment tidak jalan pada template yang didownload, coba saat template telah berhasil diupload, pada bagian bawah editor HTML template biasanya terdapat link/tombol Kembalikan template widget ke default. Nah, klik saja link itu untuk mengeset widget posting menjadi default.

Oya, terimakasih sudah membantu menjawab 0:) 0:) 0:)

Unknown

:D yaaahhhhh ketahuaaaann deh :D :D :D

Unknown

aq makenya yg 3 kolom kang :D

coretan piggirdesa

Nuwun sewu badhe nderek download, menawi dipun keparengaken (nanging mpun kasep kulo copy rumiyin) he.. he.,

arimjie blog

mas saya coba pakai kerangka di atas (2kolom), sy menghadapi masalah nih terhadap menu balas pada komentar... sepertinya gak berfungsi.. bgmana mengatasinya yah mas.. udah mondar-mandir nyari tutor tapi gak ada yang tepat... ato sy yang gak ngerti yah... heheh.. tolong yah mas bro.. ini alamat blog sy mas http://arimjie.blogspot.com

Unknown

@arimjie blog cara sederhana yang ini aja kawan saya sudah coba dan succes http://biografiart.blogspot.com/2012/03/costom-reply-threaded-comments.html. Sekalian buat saudara umar juga heheeeee. maaf mas taufik saya masukan link di sini. kalau mas taufik mau bisa di buat diblog ini tutornya biar pertanyaan yang sama tidak terulang lagi itu cuma saran saja sih mas....

Unknown

@arimjie blog Selamat mencoba kawan saya udah coba mengunakan templete mas taufik yang 2 kolom dan sukses kok tapi sayang blognya udah saya ganti modelnya jadi ndk bisa nunjukin buktinya..

arimjie blog

bro tutornya masih kurang

tapi udah fix bro, dapat dari tutor tetangga lain ternyata mesti direplace dari b:include nya....

Anonim

mantap gan, sangkyu buat sharingnya, ane lgi coba buat template juga nih gan,,,

MUX SPARROW

Mood belajar lagi kumat, nihh.. :D Izin donlot Mas.. makasih.. btw, readme.txt-nya gokil! wkwkwkw! :p :D

Unknown

mohon pencerahannya lagi gan mengenai template yang responsive, saya masih kurang paham dan kurang mengerti mengenai template yang responsive. mengenai kerangka template resposive yang agan buat kok tampilannya masih terpotong beberapa bagian saat saya cek di http://mattkersley.com, kalau dibeberapa browser okela tampilannya ga berubah/ga ada yang kurang atau terpotong, tapi bagai mana kalau dilihat di beberapa monitor yang ukurannya lebih kecil.....????, mohon pencerahannya lagi ya gan, jika agan ga keberatan saya tunggu jawabannya di blog saya agar saya lebih mudah untuk balik lagi kesini.... dan salam kenal......... www.ibnoe.info

Asy shahid AM

template ini bisa di buat 1 kolom lagi dibawah headernya ?? trus gimana buat nambahinnya ??

Taufik Nurrohman

Bisa saja, cuma agak susah kalau dijelaskan di sini. Harus belajar CSS Float dulu. Ada banyak perhitungannya, soalnya elemen <div> berbeda dengan tabel.

Anonim

mas mau dong template yg ini proyek-10.blogspot.com :D :D

Taufik Nurrohman

Sebenarnya dulu rencananya template-template itu mau dibuat komersial, tapi karena tidak ada rencana baru ke depannya jadi Saya tutup.

Unknown

Mas mau nanyanih..
ada tidak website untuk melihat hasil dari template responsive??
misalnya klo kita sudah membuat sesuai ukuran layar smartphone tertentu/lebar layar monitor tertentu..
dan mau melihat hasilnya..
jadi bisa disesuaikan template yang dibuat dengan layar smartphone/monitor tersebut..
:) :)
trima kasih sebelumnya..
salam.. Mas...

Klik Template

Menarik....!!! :-bd :-bd
Ijin Share di blog ane ya gan..??

http://klik-template.blogspot.com

Unknown

\o/ Sipp...
Permisi, mau download juga kang...

Unknown

oiya mas, dalam pembuatan sebuah template, apakah pengaruh susunan letak tag yang satu dengan yang lain ?
atau cukup kita masukkan ?

Trims atas jawabannya... :Q

Unknown

Lho kok g muncul, padahal saya sudah pake tag {i rel="code"/}
Saya ulangi mas..Sory g bermaksud spam, supaya biar g keliahatan aneh aja...

dalam pembuatan sebuah template, apakah pengaruh susunan letak tag "{b:includable/}" yang satu dengan yang lain ?
atau cukup kita masukkan "{b:section id='blabla'}{b:widget id='hehe'/}{/b:section}"

Trims atas jawabannya... :Q lagi...

note: pingin nulis pakai "<" dan ">" tapi ada warning "HTML anda tidak bisa diterima: tag tidak tertutup... akhirnya ganti pake "{" dan "}"

Rosyd Aqbar

pak, saya mau tanya nih, kok jadinya gini ?

Unknown

download dulu ya gan,,,,

Z

ijin download dan share mas...di www.adsen-see.blogspot.com semoga selalu sukses :)

Anonim

nice post gan,langsung sedot,ane mau belajar buat template nih

M. Alex Joenaedi

Ijin download mas,,,,,,,
terimakasih banyak sudah berbagi

Unknown

mau belajar bikin template , thanks mas sangat bermanfaat :-bd

Unknown

MAS MANTAP TEMLATE RESPONSIPNYA ,, CuMN DIBAGIAN SIDEBAR pada entri populer hurupnya terpotong,, gmn mas cara mengatur jarak hurupnya!! moohon bimbingannya

Taufik Nurrohman

Kalau bukan masalah text-indent negatif berarti masalah overflow:hidden. Di sekitar situ saja masalahnya.

Unknown

Mantap kang, sy langsung sedot template responsive standardnya yang 2 kolom. Semoga berkah,.. amin..

Unknown

Saya pasang search di template ini, tapi kok ga' bisa muncul backgroundnya mas ? masalahnya dimana ya ???

Unknown

thanks mas :D ,
mau latihan bikin template sendiri nih :D

Unknown

makasih mas,, templatenya sedap.. ``@u@``

Unknown

Cara menambahkan tulisan di footernya gimana? :'(

Anonim

masih edit" template nya, thnx gan :-bd

ino

mantap ... izin download .. ...

Unknown

mksh infona kang.. saya mau belajar ahh