Grid 24 Column Responsive

Assalamu'alaikum Wr.Wb.

WongWayang Grid 24 Column Responsive sesuai dengan judul-nya Grid 24 Column Responsive ini adalah hasil karya Saya selanjut-nya setelah postingan kemaren Grid 12 Column Responsive dan Grid 16 Column Responsive, masih menggunakan perhitungan persentase dalam hal Grid Column-nya dan lebih rumit rumus perhitungan-nya. Sama seperti Grid 12 dan 16 Column, Grid 24 Column Responsive ini sudah berjalan dengan baik dan sudah ditest hasil-nya 100% Responsive.

Dalam WongWayang Grid 24 Column Responsive ada penambahan 8 Column dari 16 Column. Apa yang dimaksud Responsive itu sendiri, dari berbagai sumber menyatakan dimana suatu WebBlog akan menyesuaikan posisi-nya dengan Resolusi Layar tertentu dan yang menjadi ciri khas-nya suatu WebBlog Responsive adalah Mojang dan Bujang dapat melihat Scrolling Horizontal layar monitor tidak akan tampil, sebagai contoh lihat sendiri WebBlog WongWayang ini.

1. Login ke Blogger
2. Dashboard -> Klik Monetize -> Template
3. Jangan lupa back-up dahulu template-nya
4. Edit HTML -> Klik Expand Widget Template
5. Cari Kode Tag ]]></b:skin> gunakan Ctrl+f
7. Sisipkan Kode CSS berikut ini diatas Kode Tag ]]></b:skin> :

/* 
::Wong Wayang Grid 24 Column @2012
Kreatifitas : Mochamad Taufiq Aprilyanto
Design Asli : Mochamad Taufiq Aprilyanto
WebBlog : http://wongwayang.blogspot.com
dibuat : 15, September 2012
Warning : " JANGAN MENCOBA MERUBAH PERHITUNGAN GRID KALAU TIDAK MAU TERJADI KESALAHAN !!!
       NANTI TAMPILAN WEB-BLOG AKAN TIDAK KARUAN !!! TERIMA KASIH. "
*/
/* CSS Resets */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
border:0;margin:0;padding:0
}
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{
display:block
}
a img{
border:0
}
figure{
position:relative
}
figure img{
width:100%
}

/* Basic Web */
body {background:#ddd;margin:20px 0}

.panel{
padding:15px 0;
background:#efefef;
background:-moz-linear-gradient(top,#FFFFFF 0%,#F4F4F4 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFFFFF),color-stop(100%,#F4F4F4));
background:-o-linear-gradient(top,#ffffff 0%,#f4f4f4 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF',endColorstr='#F4F4F4',GradientType=0 );
box-shadow:0 2px 5px rgba(0,0,0,0.15);
-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.15);
-moz-box-shadow:0 2px 5px rgba(0,0,0,0.25);
margin:0 0 20px 0
}

/* Elemen Area */
.tolombong {margin:0 0.41666666667%;background:#eeeeee}
 
/* Fluid Grid */

.kolom{margin:0 0.41666666667%}
.wwy {width:100%;margin:0 auto;display:inline-block}

/* Grid 24 Columns */

.hiji{width:3.33333333336%}
.dua{width:7.50000000006%}
.tilu{width:11.66666666676%}
.opat{width:15.83333333454%}
.lima{width:20.00000000148%}
.genep{width:24.16666666686%}
.tujuh{width:28.33333333572%}
.dalapan{width:32.50000000026%}
.salapan{width:36.66666666672%}
.sapuluh{width:40.83333333339%}
.sawelas{width:45.00000000036%}
.dualas{width:49.16666666706%}
.tilulas{width:53.33333333376%}
.opatlas{width:57.50000000046%}
.limalas{width:61.66666666716%}
.geneplas{width:65.83333333386%}
.tujulas{width:70.00000000056%}
.dalapanlas{width:74.16666666726%}
.salapanlas{width:78.33333333345%}
.duapuluh{width:82.50000000015%}
.duahiji{width:86.66666666685%}
.duadua{width:90.83333333355%}
.duatilu{width:95.00000000025%}
.duaopat{width:99.16666666695%}
.hiji,.dua,.tilu,.opat,.lima,.genep,.tujuh,.dalapan,.salapan,.sapuluh,.sawelas,.dualas,.tilulas,.opatlas,
.limalas,.geneplas,.tujulas,.dalapanlas,.salapanlas,.duapuluh,.duahiji,.duadua,.duatilu,.duaopat{
display:inline;float:left;margin:0 0.41666666667%}

/* Spasi Kosong Sebelah Kiri >> 24 Columns */
.rukir-1{margin-left:4.58333333337%}
.rukir-2{margin-left:8.75000000007%}
.rukir-3{margin-left:12.91666666677%}
.rukir-4{margin-left:17.08333333455%}
.rukir-5{margin-left:21.25000000149%}
.rukir-6{margin-left:25.41666666861%}
.rukir-7{margin-left:29.58333333573%}
.rukir-8{margin-left:33.75000000027%}
.rukir-9{margin-left:37.91666666673%}
.rukir-10{margin-left:42.08333333334%}
.rukir-11{margin-left:46.25000000037%}
.rukir-12{margin-left:50.21666666707%}
.rukir-13{margin-left:54.58333333377%}
.rukir-14{margin-left:58.75000000047%}
.rukir-15{margin-left:62.91666666717%}
.rukir-16{margin-left:67.08333333387%}
.rukir-17{margin-left:71.25000000057%}
.rukir-18{margin-left:75.41666666727%}
.rukir-19{margin-left:79.58333333346%}
.rukir-20{margin-left:83.75000000016%}
.rukir-21{margin-left:87.91666666686%}
.rukir-22{margin-left:92.08333333356%}
.rukir-23{margin-left:96.25000000026%}

/* Spasi Kosong Sebelah Kanan >> 24 Columns */
.rukan-1{margin-right:4.58333333337%}
.rukan-2{margin-right:8.75000000007%}
.rukan-3{margin-right:12.91666666677%}
.rukan-4{margin-right:17.08333333455%}
.rukan-5{margin-right:21.25000000149%}
.rukan-6{margin-right:25.41666666861%}
.rukan-7{margin-right:29.58333333573%}
.rukan-8{margin-right:33.75000000027%}
.rukan-9{margin-right:37.91666666673%}
.rukan-10{margin-right:42.08333333334%}
.rukan-11{margin-right:46.25000000037%}
.rukan-12{margin-right:50.21666666707%}
.rukan-13{margin-right:54.58333333377%}
.rukan-14{margin-right:58.75000000047%}
.rukan-15{margin-right:62.91666666717%}
.rukan-16{margin-right:67.08333333387%}
.rukan-17{margin-right:71.25000000057%}
.rukan-18{margin-right:75.41666666727%}
.rukan-19{margin-right:79.58333333346%}
.rukan-20{margin-right:83.75000000016%}
.rukan-21{margin-right:87.91666666686%}
.rukan-22{margin-right:92.08333333356%}
.rukan-23{margin-right:96.25000000026%}
 
/* Elemen Telas Floated */
.telas {clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.telasfix:after {clear:both;content:'';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
.telasfix {display:inline-block}
* html .telasfix {height:1%}
.telasfix {display:block}

/* Elemen Pendukung */
h1{font:bold 40px;text-align:center; margin:0 auto}
p{font-size:13px;font-size:1.3rem;text-align:center;line-height:2;margin:0}
hr{border:solid #333;border-width:1px 0 0;clear:both;margin:12px 0 18px;height:0}

/* Elemen Gambar */
img,svg,video,audio,embed,object {
max-width:100%;
height:auto;
margin:0 auto;
display:block
}

8. Sisipkan pula Kode CSS Responsive Media Queries berikut ini, silahkan sesuaikan pengaturan-nya dengan kondisi template Mojang dan Bujang (ini hanyalah contoh) :

/* Media Queries Responsive untuk Mobile */
@media only screen and (min-width: 720px) and (max-width: 960px) {
html body, .wwy {
max-width:100%;
margin-left:0;
margin-right:0;
transition:all .2s linear; 
-o-transition:all .2s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear
}
h1 {font-size:250%;text-align:center}
.tolombong {
padding-left:0.41666666667%;
padding-right:0.41666666667%
}
}

@media only screen and (max-width:720px) {
html body, .wwy {
max-width:100%;
padding:0;
margin:0;
transition:all .2s linear; 
-o-transition:all .2s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear
}
h1{font-size:150%;text-align:center}
.hiji,.dua,.tilu,.opat,.lima,.genep,.tujuh,.dalapan,.salapan,.sapuluh,.sawelas,.dualas,.tilulas,.opatlas,
.limalas,.geneplas,.tujulas,.dalapanlas,.salapanlas,.duapuluh,.duahiji,.duadua,.duatilu,.duaopat {
clear:both;
width:100%;
margin-left:0;
margin-right:0;
float:none;
padding-left:0 0.41666666667% 0 0.41666666667%
}
.tolombong {
padding-left:0.41666666667%;
padding-right:0.41666666667%
}
}

/* Media Queries Print */
@media print {
* {background:transparent !important;color:black !important;box-shadow:none !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important} 
a,a:visited {text-decoration:underline}
a[href]:after { content: " (" attr(href) ")"}
abbr[title]:after { content: " (" attr(title) ")"}
.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content: ""} 
pre,blockquote {border:1px solid #999;page-break-inside:avoid}
thead {display:table-header-group} 
tr,img {page-break-inside: avoid}
img {max-width:100% !important}
@page {margin: 0.5cm}
p,h2,h3 {orphans:3;widows:3}
h2,h3 {page-break-after:avoid}
}

9. Bagi Mojang dan Bujang yang ingin menggunakan Grid Responsive ini, Saya akan berikan sedikit tata-cara-nya untuk Template Blogger:

<div id='outer-wrapper'> <div id='wrap2'> <div class='wwy'> <div class='duaopat'> <header id='header-wrapper'> ------------------------------- Isi Header ------------------------------- </header> </div> <div class='telas'></div> </div> <div class='wwy'> <div class='duaopat'> ------------------------------- Menu Utama ------------------------------- <div class='telas'></div> </div> </div> <div class='wwy'> <div class='kolom geneplas'> <div id='main-wrapper'> ------------------------------- Isi Main Wrapper ------------------------------- </div> </div> <div class='kolom dalapan'> <aside id='sidebar-wrapper'> ------------------------------- Isi Widget Side-Bar ------------------------------- </aside> </div> <div class='telas'></div> <div class='clear'>&#160;</div> </div> <div class='wwy'> <div class='duaopat'> <footer id='footer-wrapper'> ------------------------------- Isi Footer ------------------------------- </footer> </div> </div> <div class='telas'></div> </div> </div> <!-- end outer-wrapper -->

10. Save Template dan Preview
11. Coba Resize ukuran layar monitor-nya, apakah tampilan WebBlog-nya menyesuaikan dengan tampilan Layar-nya ?
12. Silahkan Uji Kelayakan Responsive WebBlog Mojang dan Bujang di Mattkersley.com , Responsivedesigntest , Responsinator.

Silahkan Mojang dan Bujang Download Sript Asli-nya

DOWNLOAD
Saya harap Mojang dan Bujang bisa lebih berkreasi, selamat mencoba sukses selalu. Go Blog Go...!!! Amiin

Wassalam,