Grid 12 Column Responsive

Assalamu'alaikum Wr.Wb.

WongWayang Grid 12 Column Responsive sesuai dengan judul-nya Grid 12 Column Responsive ini adalah hasil karya Saya pribadi, khusus-nya di Grid Column ini yang menggunakan perhitungan persentase yang agak ribet juga. Memang karya ini terinspirasi dari Grid-Grid karya orang luar sono seperti 960S, 1140, Skeleton, Dll. Pertama kali sih jadi pengikut sambil dipelajari Script-nya kenapa bisa demikian, setelah memahami berawal dari situlah Saya mulai membuat rumus perhitungan sendiri dan Alhamdulillah ternyata berhasil yang Saya share posting ini adalah Grid 12 Column dan masih ada 2 lagi yaitu Grid 16 Column dan Grid 24 Column.

Menurut Saya sangat jarang para Bloggernize Mojang dan Bujang tanah air membahas masalah ini, entah kenapa ??? Yang saya tau hanya segelintir Bloggernize Saehu yang bisa dihitung jari saja yang pernah membahas dan menciptakan Grid-Grid Responsive, bukan nyombong tapi ada suatu kebanggaan bisa menghasilkan karya hasil jerih payah sendiri apalagi sebagai bagian dari Bloggernize Mojang dan Bujang setanah air. Saya sudah mencoba ke 3 Grid ini baik 12,16 dan 24 Column semua berjalan dengan baik dan sudah ditest hasil-nya 100% Responsive. Share posting ini akan Saya posting secara terpisah, jadi sekarang hanya WongWayang Grid 12 Column Responsive dahulu.
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 12 Column @2012
Kreatifitas : Mochamad Taufiq Aprilyanto
Design Asli : Mochamad Taufiq Aprilyanto
WebBlog : http://wongwayang.blogspot.com
dibuat : 11, September 2012
Warning : " JANGAN MENCOBA MERUBAH PERHITUNGAN GRID KALAU TIDAK MAU TERJADI KESALAHAN !!!
       NANTI TAMPILAN WEB-BLOG AKAN TIDAK KARUAN !!! TERIMA KASIH. "
*/
/* CSS Resets */

/* Elemen Area */
.tolombong {margin:0 1.66666667%;background:#eeeeee}
 
/* Elemen Fluid Grid */
.kolom{margin:0 1.66666667%}
.wwy {width:100%;margin:0 auto;display:inline-block}

/* Elemen Grid 12 Columns */
.hiji{width:4.99%}
.dua{width:13.31333334%}
.tilu{width:21.63666668%}
.opat{width:29.96000002%}
.lima{width:38.28333336%}
.genep{width:46.60666667%}
.tujuh{width:54.93000004%}
.dalapan{width:63.25333338%}
.salapan{width:71.57666672%}
.sapuluh{width:79.90000006%}
.sawelas{width:88.2233334%}
.dualas{width:96.54666674%}
.hiji,.dua,.tilu,.opat,.lima,.genep,.tujuh,.dalapan,.salapan,.sapuluh,
.sawelas,.dualas{display:inline;float:left;overflow:hidden;margin:0 1.66666667%}

/* Elemen Spasi Kosong Sebelah Kiri >> 12 Columns */
.rukir-1{margin-left:8.98%}
.rukir-2{margin-left:18.30333334%}
.rukir-3{margin-left:26.62666668%}
.rukir-4{margin-left:34.95000002%}
.rukir-5{margin-left:43.27333336%}
.rukir-6{margin-left:51.59666667%}
.rukir-7{margin-left:59.92000004%}
.rukir-8{margin-left:68.24333338%}
.rukir-9{margin-left:76.56666672%}
.rukir-10{margin-left:84.89000006%}
.rukir-11{margin-left:93.21333334%}

/* Elemen Spasi Kosong Sebelah Kanan >> 12 Columns */
.rukan-1{margin-right:8.98%}
.rukan-2{margin-right:18.30333334%}
.rukan-3{margin-right:26.62666668%}
.rukan-4{margin-right:34.95000002%}
.rukan-5{margin-right:43.27333336%}
.rukan-6{margin-right:51.59666667%}
.rukan-7{margin-right:59.92000004%}
.rukan-8{margin-right:68.24333338%}
.rukan-9{margin-right:76.56666672%}
.rukan-10{margin-right:84.89000006%}
.rukan-11{margin-right:93.21333334%}
 
/* 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 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:1.66666667%;
padding-right:1.66666667%
}
}

@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 {
clear:both;
width:100%;
margin-left:0;
margin-right:0;
float:none;
padding-left:0 1.66666667% 0 1.66666667%
}
.tolombong {
padding-left:1.66666667%;
padding-right:1.66666667%
}
}

/* 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='dualas'> <header id='header-wrapper'> ------------------------------- Isi Header ------------------------------- </header> </div> <div class='telas'></div> </div> <div class='wwy'> <div class='dualas'> ------------------------------- Menu Utama ------------------------------- <div class='telas'></div> </div> </div> <div class='wwy'> <div class='kolom dalapan'> <div id='main-wrapper'> ------------------------------- Isi Main Wrapper ------------------------------- </div> </div> <div class='kolom opat'> <aside id='sidebar-wrapper'> ------------------------------- Isi Widget Side-Bar ------------------------------- </aside> </div> <div class='telas'></div> <div class='clear'> </div> </div> <div class='wwy'> <div class='dualas'> <footer id='footer-wrapper'> ------------------------------- Isi Footer ------------------------------- </footer> </div> </div> <div class='telas'></div> </div> </div>

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, Responsivedesigntest, Responsinator

Silahkan Download Script Asli-nya

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

Wassalam,

Grid 12 Column Responsive

0 comments:

Post a Comment