Download Kerangka Template Blogger Responsif
Tabel Konten
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:
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
@sahadena http://web-kreation.com/demos/Sliding_login_panel_jquery/
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...
Taufik Nurrohman
http://screenqueri.es/
Unknown
wah terimakasih banyak mas..
Klik Template
Menarik....!!! :-bd :-bd
Ijin Share di blog ane ya gan..??
http://klik-template.blogspot.com
Taufik Nurrohman
:-d :-d :-d :-d :-d :-d :-d
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 "}"
Taufik Nurrohman
Yang penting ID-nya tidak ada yang sama.
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 masalahoverflow: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