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

  • Taufik Nurrohman

    @system of blog: Haha.. maunyaaa.. :D

  • Yopi Hasopa

    ijin download kerangka templatenya :)

  • Unknown

    @ Taufik Nurrohman : Mau Donk hehehe

  • Taufik Nurrohman

    @Yopi Hasopa: SIP!

  • 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

  • Taufik Nurrohman

  • 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

  • Sixrone 609 Community

    Mantap tuk percobaan neeh...:)
    makasie bg....

  • 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

  • Unknown

    kok bukan html 5

  • GP

    saya sudah download kerangka template ini,
    ada masalah yang saya alami mas,
    tombol 'Replay' pada komentar tidak berfungsi,
    tolong bantu saya mas, please.........................

    ini alamat blog saya:

    http://underbuilder.blogspot.com/2013/04/orang-orang-bermata-kopi.html?showComment=1370438133706#c1481085556577546080

    • GP

      alhamdulillah udah bisa mas....
      setelah kodenya saya kanibal dengan template bawaan blogger

  • 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

Komentar telah ditutup.