Go Blog Go

Grid 16 Column Responsive

Posted by Go Blog Go Posted on 4:41 PM with No comments
Assalamu'alaikum Wr.Wb.

WongWayang Grid 16 Column Responsive sesuai dengan judul-nya Grid 16 Column Responsive ini adalah hasil karya Saya selanjut-nya setelah postingan kemaren Grid 12 Column Responsive,masih menggunakan perhitungan persentase dalam hal Grid Column-nya. Nah Mojang dan Bujang Template WebBlog Saya ini menggunakan Grid 16 Column Responsive, mau lihat hasil-nya silahkan Resize Pramban-nya(Tulisan pojok kanan bawah).
Responsive Grid 16 Column
Grid 16 Column Responsive ini sudah berjalan dengan baik dan sudah ditest hasil-nya 100% Responsive. Share posting ini tidak berbeda dengan WongWayang Grid 12 Column Responsive hanya penambahan 4 Column saja. 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 16 Column @2012
Kreatifitas : Mochamad Taufiq Aprilyanto
Design Asli : Mochamad Taufiq Aprilyanto
WebBlog : http://wongwayang.blogspot.com
dibuat : 13, 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 1.25%;background:#eeeeee}
 
/* Fluid Grid */

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

/* Grid 16 Columns */

.hiji{width:3.75%}
.dua{width:10%}
.tilu{width:16.25%}
.opat{width:22.5%}
.lima{width:28.75%}
.genep{width:35%}
.tujuh{width:41.25%}
.dalapan{width:47.5%}
.salapan{width:53.75%}
.sapuluh{width:60%}
.sawelas{width:66.25%}
.dualas{width:72.5%}
.tilulas{width:78.75%}
.opatlas{width:85%}
.limalas{width:91.25%}
.geneplas{width:97.5%}
.hiji,.dua,.tilu,.opat,.lima,.genep,.tujuh,.dalapan,.salapan,.sapuluh,
.sawelas,.dualas,.tilulas,.opatlas,.limalas,.geneplas{display:inline;float:left;overflow:hidden;margin:0 1.25%}

/* Spasi Kosong Sebelah Kiri >> 16 Columns */
.rukir-1{margin-left:7.5%}
.rukir-2{margin-left:13.75%}
.rukir-3{margin-left:20%}
.rukir-4{margin-left:26.25%}
.rukir-5{margin-left:32.5%}
.rukir-6{margin-left:38.75%}
.rukir-7{margin-left:45%}
.rukir-8{margin-left:51.25%}
.rukir-9{margin-left:57.5%}
.rukir-10{margin-left:63.75%}
.rukir-11{margin-left:70%}
.rukir-12{margin-left:76.25%}
.rukir-13{margin-left:82.5%}
.rukir-14{margin-left:88.75%}
.rukir-15{margin-left:95%}

/* Spasi Kosong Sebelah Kanan >> 16 Columns */
.rukan-1{margin-right:7.5%}
.rukan-2{margin-right:13.75%}
.rukan-3{margin-right:20%}
.rukan-4{margin-right:26.25%}
.rukan-5{margin-right:32.5%}
.rukan-6{margin-right:38.75%}
.rukan-7{margin-right:45%}
.rukan-8{margin-right:51.25%}
.rukan-9{margin-right:57.5%}
.rukan-10{margin-right:63.75%}
.rukan-11{margin-right:70%}
.rukan-12{margin-right:76.25%}
.rukan-13{margin-right:82.5%}
.rukan-14{margin-right:88.75%}
.rukan-15{margin-right:95%}
 
/* 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:1.25%;
padding-right:1.25%
}
}

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

/* 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='geneplas'> <header id='header-wrapper'> ------------------------------- Isi Header ------------------------------- </header> </div> <div class='telas'></div> </div> <div class='wwy'> <div class='geneplas'> ------------------------------- Menu Utama ------------------------------- <div class='telas'></div> </div> </div> <div class='wwy'> <div class='kolom sapuluh'> <div id='main-wrapper'> ------------------------------- Isi Main Wrapper ------------------------------- </div> </div> <div class='kolom genep'> <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='geneplas'> <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, Responsivedesigntest, Responsinator.

Silahkan Mojang dan Bujang Download Script Asli-nya

DOWNLOAD

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

Wassalam,
Labels:

0 comments:

Post a Comment

Catatan :
1.Untuk menyisipkan Kode, gunakan Tag <i rel="code">Kode Anda Di-Sini...</i>
2.Untuk menyisipkan Kode Panjang, gunakan Tag <i rel="pre">Kode Anda Di-Sini...</i>
3.Untuk menyisipkan Kode Gambar, gunakan Tag <i rel="image">URL Gambar Anda Di-Sini...</i>
4.Untuk menyisipkan Catatan, gunakan Tag <b rel="quote">Catatan Anda Di-Sini...</i>

NB: Sebelum menyisipkan Kode, konversi terlebih dulu Kode-nya agar bisa tampil di Kolom Komentar

Subscribe to:Post Comments (Atom)
 
Powered by : Blogger
Copyright © 2011. Go Blog Go - All Rights Reserved
Template Created by Go Blog Go Published by Wong Wayang