Yang saya maksudkan dengan
template responsive dasar , yaitu kerangka template responsive yang sudah diisi dengan beberapa artikel serta widget. Kerangka utama,saya gunakan dari DTE. Sebetulnya ini adalah koleksi pribadi saya, untuk mempermudah membuat
Blogger Template Responsive . Tapi sebagai dokumentasi, dan siapa tahu diantara sobat ada yang memerlukan template dasar.
Template ini saya sudah lengkapi dengan :
Post Meta (Author,tanggal, label dan komentar)
Custom font Roboto.
Font Awesome.
Vitur lain yang saya tambahkan yaitu :
Valid HTML5
Markup Microdata Schema.org (di bagian posting)
Untuk yang lainnya seperti auto readmore, breadcrumbs dll, silahkan tergantung kreativitas sobat. Untuk memudahan pemahaman, struktur template ini sbb :
<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 1024 pixel, 740 pixel dan 570 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%;}
}
Untuk lebih detail, kalau memang diperlukan, ini adalah srandard media queries
/* ==== 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>
Cara Konversi Pixel ke %
Sebagai tambahan, apabila sobat terbiasa dengan ukuran pixel misal seperti ini :
#wrapper {max-width:1024px}
.content {width:700px}
.sidebar {width:300px}
Cara konversi dari pixel ke persen (%) adalah :
700/1024 x 100% = 68.359375%
300/1024 x 100% = 29.296875%;
Maka setelah di konversike persen, kurang lebih CSS seperti ini :
#wrapper {max-width:1024px}
.content {width:68.35%}
.sidebar {width:29.29%}
Semoga bermanfaat...