Go Blog Go

Cara Mengatasi Error the border attribute is obsolete

noreply@blogger.com (Go Blog Go) — Thu, 20 Jun 2013 13:21:00 +0700

Assalamu'alaikum Wr.Wb.

Cara Mengatasi Error the border attribute is obsolete Cara ini tidak berlaku apabila Mojang dan Bujang mempunyai Postingan yang sudah di Publish terlebih dahulu, karena akan tampil Warning di Validator seperti dibawah ini "the border attribute is obsolete. consider specifying img {border: 0;} in css instead. html5". Kali ini Go Blog Go akan memberikan cara lain untuk memperbaiki-nya, Postingan ini berkaitan dengan template-blogger-valid-w3c-1 dan template-blogger-valid-w3c-2. Langsung aja apabila Mojang dan Bujang memakai Widget Popular Post bawaan Blogger seperti dibawah ini contoh-nya :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
            <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
          </b:widget>

Coba cari Tag Kode :

Sekarang rubah menjadi seperti ini :

Coba Check Lagi di W3.org maka error-nya akan hilang.

Mudah-mudahan bermanfaat dan menambah pengetahuan untuk kita semua. Go Blog Go ...!!! Amiin

Wassalam,

Membuat Template Blogger Valid W3C - Bagian 1

noreply@blogger.com (Go Blog Go) — Thu, 30 May 2013 18:00:00 +0700

Assalamu'alaikum Wr.Wb.
Sesuai dengan judul-nya Membuat Template Blogger Valid W3C - Bagian 1, postingan dari Go Blog Go ini merupakan revisi dari Postingan yang lalu yaitu ~~Blogger Template Valid W3C~~ yang Saya rasa kurang mengena isi-nya mungkin pada waktu mem-posting-nya terburu-buru jadi nda karuan dech !!! Postingan tersebut sudah dihapus dan ganti-nya yang sedang Mojang dan Bujang baca ini.
Perlu penjelasan bahwasa-nya postingan ini menekan-kan bagaimana sebuah Template Blogger khusus-nya blogspot hanya akan mempunyai Error Template 1 Error dan 1 Warning. Disini Saya menjelaskan secara tahap demi tahap bagian mana saja khusus HTML-nya yang akan dibongkar pasang jadi agar mudah dipahami nanti-nya dalam mempraktekan-nya di Blog Template masing-masing.
Mohon maaf Saya tidak akan menjelaskan Cara memperbaiki yang 1 Error dan 1 Warning, anggap saja bonus Pekerjaan Rumah buat Mojang dan Bujang betul tidak !!! kan sudah hampir semua-nya dijelaskan hehehe......Sebagai bukti silahkan Cek sendiri Mojang dan Bujang Template Go Blog Go di Validator W3C jangan heran kalau Template punya Saya sudah Passed alias Tanpa Error (lihat warna hijau bukan merah lagi).
Fasilitas utama yang digunakan untuk mengetahui Berapa jumlah Error Template Mojang dan Bujang adalah menggunakan VALIDATOR.W3.ORG perlu dijelaskan juga Saya tidak akan menjelaskan keterangan tiap-tiap baris Error (terlalu ribet,lama butuh waktu ! kecuali Mojang dan Bujang kalo mau hehehe.....).
Disini Saya menggunakan Template yang masih utuh dan belum di bongkar, kalo mau silahkan.
Download
Mulai saja proses pengurangan Error Template-nya :

Untuk mengedit Template Saya biasa menggunakan Editor NOTEPAD++
Silahkan Login ke Blogger masing-masing
Kemudian buka Situs VALIDATOR.W3.ORG
Isi dengan URL Blog tinggal klik Check

Lihat awal kali pertama berapa jumlah ERROR Template Blog Anda ? (ingat kalo perlu catat...kalo sering lupa),
dan setiap dilakukan pengecekan ulang jangan ditutup Validator-nya. Contoh lihat Screen Shoot dibawah ini :

TAHAP-I
Setiap Template umum-nya selalu diawali dengan Tag seperti dibawah ini pada umum-nya yang disimpan paling atas dari Template Blog

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Mojang dan Bujang Silahkan tinggal ganti jadi Seperti dibawah ini standard HTML5 :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

jangan lupa Tag <HTML> harus sama dengan Tag penutup-nya </HTML> dan tambahkan juga Script berikut ini :

simpan diatas Tag </head>, kemudian sisipkan juga Tag berikut ini:

dibawah Tag </head>

TAHAP-II
Hapus semua Tag

<b:include name='quickedit'/>

diseluruh Template Blog gunakan Ctrl+F untuk pencarian cepat, karena Tag ini salah satu penyumbang Error terbesar

TAHAP-III
Untuk Up-load Gambar yang perlu diperhatikan sebelum posting di Publish adalah meng-hapus imageanchor="1" dan border="0" yang terdapat di dalam URL Image,dan tinggal menambahkan alt="" dengan title="" sebagai contoh dibawah ini :

<div class="separator" style="clear:both;text-align:center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9N9qxxc50rOu3g8t7hNVibgLlU9e_arPLcOZenN6ROv_y0zY9k6YjkJO7OrgKpBPvg9hSP67bMrr1-N3JtvzPT0dIyjfcyEThfjF4xBZH3XAKHqoTOHajx5gZH4tbjxNzPPQGjiZc18o/s1600/millasmall.jpg" imageanchor="1" style="margin-left:1em;margin-right:1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9N9qxxc50rOu3g8t7hNVibgLlU9e_arPLcOZenN6ROv_y0zY9k6YjkJO7OrgKpBPvg9hSP67bMrr1-N3JtvzPT0dIyjfcyEThfjF4xBZH3XAKHqoTOHajx5gZH4tbjxNzPPQGjiZc18o/s1600/millasmall.jpg" />
</a>
</div>

Jadi-nya seperti ini :

<div class="separator" style="clear:both;text-align:center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9N9qxxc50rOu3g8t7hNVibgLlU9e_arPLcOZenN6ROv_y0zY9k6YjkJO7OrgKpBPvg9hSP67bMrr1-N3JtvzPT0dIyjfcyEThfjF4xBZH3XAKHqoTOHajx5gZH4tbjxNzPPQGjiZc18o/s1600/millasmall.jpg" style="margin-left:1em;margin-right:1em;" title="milla jokovic">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9N9qxxc50rOu3g8t7hNVibgLlU9e_arPLcOZenN6ROv_y0zY9k6YjkJO7OrgKpBPvg9hSP67bMrr1-N3JtvzPT0dIyjfcyEThfjF4xBZH3XAKHqoTOHajx5gZH4tbjxNzPPQGjiZc18o/s1600/millasmall.jpg" alt="cewek cantik" title="milla jokovic"/>
</a>
</div>

Cara ini tidak berlaku apabila Mojang dan Bujang mempunyai Postingan yang sudah di Publish terlebih dahulu, karena akan tampil Warning di Validator seperti ini : "the border attribute is obsolete. consider specifying img {border: 0;} in css instead. html5". Hal ini sulit diperbaiki Error-nya, Saya sudah mencari di Mbah Google dan mencoba sendiri memperbaiki-nya tetap saja Error-nya tampil. Solusi-nya ada tapi jadi kerja 2 kali, dengan menghapus postingan yang sudah ada kemudian di Posting kembali Error-nya hilang.

TAHAP-IV
Dalam setiap penambahan Widget di-SideBar, ini hanya contoh seperti script recent-post dibawah ini biasanya seluruh CSS beserta jQuery-nya disatukan dihalaman HTML/Javascript hal ini perlu dihindari karena akan menyebabkan Error, biasanya Validator akan mendeteksi harus ada penambahan Tag "Scope" (Tag baru namun tetap tidak berhasil walau ditambahkan juga). Jadi pisahkan saja antara CSS dan jQuery-nya, tentu Mojang dan Bujang sudah paham dimana menempatkan CSS-nya, kalau jQuery-nya disimpan di Halaman HTML/Javascript.

<div style="margin:7px 0; float: left;">
<style type="text/css">
#rp_plus_img {
  height:287px;
  overflow:hidden;
  border:solid 0px #585858;
  padding:1px 1px 14px 1px;
  background-color:none;
}
#rp_plus_img ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
#rp_plus_img li {
  border:0; 
  margin:0; 
  padding:0; 
  list-style:none;
}
#rp_plus_img li {
  height:70px;
  padding:1px;
  list-style:none;
}
#rp_plus_img a{
  color:#3366ff;
}
#rp_plus_img .news-title {
  display:block;
  font-weight:bold !important;
  margin-bottom:5px;
  font-size:11px;
}
#rp_plus_img .news-text {
  display:block;
  font-size:10px;
  font-weight:normal !important;
  color:#282828;
  text-align:justify;
}
#rp_plus_img img {
  float:left;
  margin-right:15px;
  padding:1px;
  border:solid 1px #cccccc;
  width:60px;
  height:65px;
}
</style>
<script type="text/javascript" src="http://apa-ajaboleh.googlecode.com/files/slide_down_recent_post.js">
</script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
 rpnewsticker();
 interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 55;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script>
</ul>
</div>

Bagian-2

Membuat Template Blogger Valid W3C - Bagian 2

noreply@blogger.com (Go Blog Go) — Thu, 30 May 2013 17:59:00 +0700

Assalamu'alaikum Wr.Wb.
Sesuai dengan judul-nya Membuat Template Blogger Valid W3C - Bagian 2, posting Go Blog Go ini merupakan sambungan dari Bagian-1 ini adalah cara agar Error Template Blogspot bisa dikurangi seminim mungkin, untuk Tahap I,II dan III sudah banyak yang membahas di Dunia Maya sedangkan selebih-nya adalah hasil susah payah Saya sendiri. Silahkan dilanjut :

TAHAP-V
Pada tahap ini cari Tag

di Template Blog Anda biasa-nya ada 2 buah, kemudian ganti dengan Tag ini :

<b:if cond='data:post.id'>
<a expr:href='data:post.id'/>
</b:if>

TAHAP-VI
Cari juga Tag

di Template Blog Anda hanya ada 1 buah, kemudian ganti dengan Tag ini :

TAHAP-VII
Cari juga Tag

di Template Blog Anda hanya ada 1 buah, kemudian ganti dengan Tag ini :

TAHAP-VIII
Biasa-nya setiap Template baru selalu ada Widget Attribution bawaan Blogger seperti ini :

<b:widget id='Attribution1' locked='false' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>

    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
       <data:attribution/>
      </b:if>
    </div>

    <b:include name='quickedit'/>
  </b:includable>
</b:widget>

Kalau ada silahkan hapus saja Widget-nya

TAHAP-IX
Dalam Template Blogger yang Saya temukan paling besar penyumbang Error adalah Area Tag Posting yaitu Tag yang berada diantara <b:includable id='post' var='post'> ..... </b:includable>, seperti dibawah ini :

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>
          </b:if>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>
        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> </div>
      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>
      <div class='post-footer-line post-footer-line-3'><span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>
    </div>

Pengecualian untuk Tag :

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span></div>

Selebihnya Tag yang berjenis

semua-nya dihapus saja, Anda bisa mengganti dengan Widget dari AddThis dan ShareThis atau Anda bisa ganti dengan HTML kreasi sendiri.
Nih hasil akhir-nya melalui Screen Shoot :

Mudah-mudahan Postingan ini membawa manfaat dan berguna buat Bloggernize, Salam ... Go Blog Go...!!! Amiin

Wassalam,

Cara-1 Membuat Threaded Comments di Blogger

noreply@blogger.com (Go Blog Go) — Wed, 29 May 2013 02:36:00 +0700

Assalamu'alaikum Wr.Wb.

Cara-1 Membuat Threaded Comments di Blogger judul artikel dari Go Blog Go kali ini, sebenar-nya Saya bingung dengan pemberian judul-nya yang tujuan sebenar-nya adalah bagaimana cara Mojang dan Bujang men-Design sendiri tampilan Thread-Comment ini sesuai dengan selera masing-masing. Disini Saya hanya akan menjelaskan bagian terpenting saja yang mana dari CSS Thread-Comment ini yang boleh dibilang mudah untuk di-Oprek CSS-nya.
Saya visualisasikan langsung saja karena dianggap Mojang dan Bujang sudah tau cara menempatkan-nya dan tersedia fasilitas Threaded-Comment di Blog-nya, Mojang dan Bujang hanya tinggal lihat Screen Shoot Threaded Comments berdasarkan Nomor yang tertera :

Login Blogger
Ke Dashboard
Template -> edit HTML

Lihat bagian CSS THREADED COMMENTS-Nya apakah disimpan diatas ]]></b:skin> atau <b:includable id='threaded_comment_css'>...</b:includable>, kurang lebih CSS-nya seperti dibawah ini :

Cara Merubah #Comment h4 lihat no.1, CSS-nya dibawah ini :

#comments h4 {
font:15px "Trebuchet MS",Arial;
font-weight:bold;
color:#666 !important;
text-align:left;
text-decoration:none;
display:inline;
}

Cara Merubah .comment-content lihat no.2, CSS-nya dibawah ini :

.comment .comment-content {
color:#222;
font-weight:normal;
text-align:left;
text-decoration:none;
padding:7px;
margin-bottom:21px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}

Cara Merubah .comment-block lihat no.3, CSS-nya dibawah ini :

.comments .comment-block {
margin-left:70px;
position:relative;
padding:7px;
overflow:hidden;
border:1px solid #DDD;
}

Cara Merubah .comment-header lihat no.4, CSS-nya dibawah ini :

.comment-header {
border:1px solid #584d44;
text-decoration:none;
padding:5px;
margin-bottom:7px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
background:#332a24;
}

Cara Merubah .comments-content .user a lihat no.5, CSS-nya dibawah ini :

.comments .comments-content .user a {
color:#FF0000;
font-size: 15px;
font-weight: bold;
margin-left: 3px;
text-decoration:none
}
Untuk selanjut-nya silahkan Mojang dan Bujang ke Bab berikut-nya :

Cara-2 Selanjutnya

Cara-2 Membuat Threaded Comments di Blogger

noreply@blogger.com (Go Blog Go) — Wed, 29 May 2013 02:34:00 +0700

Assalamu'alaikum Wr.Wb.

Cara-2 Membuat Threaded Comments di Blogger, Jumpa lagi Mojang dan Bujang artikel ini kelanjutan dari Cara-1 masih seputar bagaimana cara-nya merubah CSS Threaded Comment yang jelas-nya biar Mojang dan Bujang yang belum tau bisa lebih tau cara-nya.
Cara Merubah .comments-content .datetime a lihat no.6, CSS-nya dibawah ini :

.comments .comments-content .datetime a {
color:#B0ED00;
font-size:10px;
float:right;
text-decoration:none
}

Cara Merubah .comment .comment-actions a lihat no.7, CSS-nya dibawah ini :

.comments .comment .comment-actions a {
display:inline-block;
margin:0 0 5px 7px;
padding:3px 9px;
cursor:pointer;
border:1px solid #584d44;
font:12px "Trebuchet MS",Arial;
text-shadow:0 2px 0 #222;
color:#EEE !important;
line-height:19px;
text-align:center;
text-decoration:none;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
background:#332a24;
}
.comments .comment .comment-actions a:hover {
text-decoration: none;
text-shadow:0 1px 0 #222; -webkit-box-shadow:0 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:0 2px 2px rgba(0,0,0,.5);
box-shadow:0 2px 2px rgba(0,0,0,.5)
}

Cara Merubah .comments .continue a lihat no.8, CSS-nya dibawah ini :

.comments .continue a {
display:inline-block;
padding:5px;
margin:0;
text-shadow:0 2px 0 #222;
color:#EEE !important;
cursor:pointer;
border:1px solid #584d44;
font:15px "Trebuchet MS",Arial;
font-weight: normal;
text-align: center;
text-decoration: none;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
background:#332a24;
}
.comments .continue a:hover {
display:inline-block;
text-decoration:none;
text-shadow: 0 1px 0 #222;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:0 2px 2px rgba(0,0,0,.5);
box-shadow:0 2px 2px rgba(0,0,0,.5)
}

Cara Merubah .avatar-image-container lihat no.9, CSS-nya dibawah ini :

.avatar-image-container {
float:left;
vertical-align:middle;
overflow:hidden;
width:70px !important;
height:70px !important;
max-width:70px !important;
max-height:70px !important
}
.comments .avatar-image-container img {
width:50px !important;
height:50px !important;
max-width:50px !important;
max-height:50px !important;
position:relative;
padding:3px;
overflow:hidden;
border:.1em solid #DDD;
}

Sebenar-nya simple kalau Mojang dan Bujang sedikit-nya memahami CSS-nya, sedikit tambahan kalau berminat menambah CSS-nya jadi bertingkat serta Responsive tinggal menambahkan CSS berikut ini :

.comment .comment-thread.inline-thread .comment:nth-child(7){margin:0px 0px 5px 30%;}
.comment .comment-thread.inline-thread .comment:nth-child(6){margin:0px 0px 5px 25%;}
.comment .comment-thread.inline-thread .comment:nth-child(5){margin:0px 0px 5px 20%;}
.comment .comment-thread.inline-thread .comment:nth-child(4){margin:0px 0px 5px 15%;}
.comment .comment-thread.inline-thread .comment:nth-child(3){margin:0px 0px 5px 10%;}
.comment .comment-thread.inline-thread .comment:nth-child(2){margin:0px 0px 5px 5%;}
.comment .comment-thread.inline-thread .comment:nth-child(1){margin:0px 0px 5px 0%;}

@media screen and (max-device-width:480px){
.comments .comments-content .comment-replies{
margin-left:0 }
}

Semoga artikel ini membawa manfaat dan berguna buat Bloggernize...Salam. Go Blog Go...!!! Amiin

Membuat Banner Breaking News

noreply@blogger.com (Go Blog Go) — Thu, 9 May 2013 22:40:00 +0700

Assalamu'alaikum Wr.Wb.

Membuat Banner Breaking News alias Berita Anyar, sekalian ada waktu kalau dibiarin suka agak malas posting. Go Blog Go akan menjelaskan bagaimana cara-nya memasang widget ini di blog Mojang dan Bujang, hampir sama dengan recent post sebenar-nya namun ini dipasang dibawah Header dan Menu Navigasi biar pengunjung langsung tau dan melihat posting terbaru sebuah blog.
Demo-nya lihat Tulisan BERITA ANYAR

Cari Kode Tag ]]></b:skin> kemudian Sisipkan Kode CSS-nya sebelum ]]></b:skin>
CSS-nya :

#bannerberita{
background-color:#333333;
width:auto;
margin:0 auto;
padding:0 auto;
height:32px;
color:#B0ED00
}
#bannerberita .seratbeja{
height:32px;
float:left;
padding:0 11px;
margin:0 auto;
font:bold 21px Arial,Sans-serif;
color:#ff0000;
text-shadow:0 1px 1px #222;
background-color:#008B8B
}

Cari Kode Tag <div id='main-wrapper'> simpan Kode HTML dibawah ini tepat diatas-nya
HTML-nya :

<div id='bannerberita'><span class='seratbeja'>BERITA ANYAR : </span>
<div style='float:left;width:auto;padding:6px 0 6px 30px;position:relative;overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("newgoblog", "newgoblogclass", 5000, "_new")
cssfeed.addFeed("Creating Website", "http://wongwayang.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(7, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

Cari Kode Tag </head> sisipkan jQuery dan CSS dibawah ini sebelum Kode Tag </head>
jQuery-nya :

Simpan Template

Selamat mencoba semoga bermanfaat !! maaf Saya tidak perlu menjelaskan lagi cara-nya karena Saya anggap Mojang dan Bujang sudah paham. Go Blog Go...!!! Amiin

Wassalam,

Banner Latest Article

noreply@blogger.com (Go Blog Go) — Thu, 9 May 2013 21:15:00 +0700

Assalamu'alaikum Wr.Wb.

Banner Latest Article judul posting kali ini dari Go Blog Go, ini hanya sebagai bumbu pemanis saja untuk tampilan blog. Style ini saya dapat dari Template Maskolis, kemudian hanya dirubah tampilan CSS-nya saja biar beda. Sekira-nya Mojang dan Bujang mau mencoba silahkan saja.
seperti ini tampilan-nya atau lihat di HomePage Go Blog Go.

Tambahkan saja Elemen CSS ini sebelum ]]></b:skin>
CSS-nya :

.beejana{
background-color:#333;
margin:0 0px 5px 0;
padding: 4px;
border:2px solid #e6e6e6;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000
}
.beejanatea{
padding:3px 7px;
font:18px Oswald;
color:#fff;
text-shadow:0 1px 0 #000
}

Cari Tag <div id='main-wrapper'> di template, kemudian tinggal Sisipkan tepat dibawah-nya.
HTML-nya :

<div id='main-wrapper'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='beejana'><div class='beejanatea'>
Latest Article <span style='color: #ccc; float:right; font:normal 14px Oswald;padding-top:2px;'>Get our latest posts by subscribing this site</span>
</div></div>
</b:if>
</b:if>

Voooaaala cuma segitu aja, thank' to Maskolis. Go Blog Go...!!! Amiin

Wassalam,

Cara Menghilangkan Border Dan Bayangan Image

noreply@blogger.com (Go Blog Go) — Thu, 25 Apr 2013 03:25:00 +0700

Assalamu'alaikum Wr.Wb.

Cara Menghilangkan Border Dan Bayangan Image atau gambar ini hanya menggunakan CSS saja tanpa jQuery, apabila Mojang dan Bujang ingin tampilan Image/Gambar-nya tanpa menggunakan Border serta bayangan Go Blog Go kali ini akan share cara-nya, karena Mojang dan Bujang hanya tinggal menambahkan CSS-nya saja.

Login ke Blogger
Dashboard -> Template -> Edit HTML (jangan lupa back-up dahulu template-nya)
Klik -> Expand Widget Template
Cari Kode Tag ]]></b:skin>
Tempatkan Kode CSS tambahan berikut ini sebelum Kode Tag ]]></b:skin>

.post-body img, .post-body .tr-caption-container, .Profile img,
.Image img, .BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important; }

Apabila menggunakan cara diatas CSS-nya tidak berjalan dengan baik, Anda dapat menggunakan Alternatif lain yaitu (mengenai cara-nya sama dengan diatas) :
Cari Kode CSS seperti dibawah ini (Template Blogger Baru)

border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.1);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.1);
box-shadow: 1px 1px 5px rgba(0,0,0,.1);

Anda tinggal menghapus Kode CSS tersebut, jangan lupa Save Template-nya.

Yang simple dan mudah saja namun bermanfaat. Go Blog Go...!!! Amiin

Wassalam,

Membuat Gradasi Blur Di Halaman Blog

noreply@blogger.com (Go Blog Go) — Wed, 24 Apr 2013 01:29:00 +0700

Assalamu'alaikum Wr.Wb.

Membuat Gradasi Blur Di Halaman Blog apa bisa ? jawab-nya bisa hanya dengan menggunakan CSS saja tanpa embel-embel jQuery. Go Blog Go kali ini akan share kepada Mojang dan Bujang cara penerapan-nya di Blog, namun perlu diketahui bahwa-nya sebelum diterapkan harus ada terlebih dahulu perubahan warna dasar, arti-nya Blog Mojang dan Bujang mempunyai warna dasar template-nya apa ? Hitam, Biru, Putih Dsb. Jadi Anda hanya tinggal merubah warna dasar dari CSS-nya agar sesuai dengan Halaman Blog Anda.

Login ke Blogger
Dashboard -> Klik Template -> Edit HTML (jangan lupa back-up dulu template-nya)
Saran : gunakan selalu Editor Notepad+ dalam mengedit supaya mudah tinggal Copy Paste saja
Cari Kode Tag ]]></b:skin> , kemudian sisipkan kode CSS dibawah ini diatas Kode Tag ]]></b:skin>

html:before{
content:'';
position:fixed; /* posisi tetap tidak berubah */
z-index:5; /* posisi gradasi diatas halaman */
bottom:0; /* posisi bawah di set ke 0 */
width:100%; /* ukuran lebar 100% */
height:100px; /* ukuran tinggi gradasi blur di halaman blog */
background:transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,#FFFFFF)); /* pengaturan perubahan warna */
background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,#FFFFFF 100%);
background:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,#FFFFFF 100%);
background:-ms-linear-gradient(top,rgba(255,255,255,0) 0%,#FFFFFF 100%);
background:-o-linear-gradient(top,rgba(255,255,255,0) 0%,#FFFFFF 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent',endColorstr='#FFFFFF',GradientType=0);
background:linear-gradient(top,rgba(255,255,255,0) 0%,#FFFFFF 100%);
}

Keterangan :
Yang perlu Mojang dan Bujang rubah yaitu Kode Warna : #FFFFFF dan rgba(255,255,255,0)
silahkan sesuai dengan warna dasar Template Blog-nya.

Klik Simpan Template

Simple dan Mudah bukan, nda banyak ini itu untuk menghasilkan sesuatu yang Fantastis semoga bermanfaat. Go Blog Go ...!!! Amiin

Wassalam,

Cara Memasang Lazyload Di Blog

noreply@blogger.com (Go Blog Go) — Sat, 20 Apr 2013 14:16:00 +0700

Assalamu'alaikum Wr.Wb.

Cara Memasang Lazyload Di Blog, sesuai dengan judul-nya Go Blog Go hanya ikut meramaikan saja sebab sudah banyak situs yang share Lazyload ini, fungsi yang sebenar-nya dari Script hanya menunda waktu pemuatan gambar terutama Blog yang banyak gambar-nya contoh-nya Google. Saya lihat ada beberapa Lazyload yang sudah dimodifikasi dari asli-nya namun tidak mengurangi kinerja-nya.

Login ke Blogger
Masuk ke Dashboard -> Template -> Edit HTML
Saran : "Gunakan Notepad+ untuk mengedit-nya biar lebih mudah jadi Anda tinggal Copy Paste saja"
Cari Kode Tag </head>, kemudian sisipkan Script Lazyload-nya sebelum </head>

<script src='http://wongwayang.googlecode.com/files/lazyload.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
    $('img').lazyload({
        placeholder : "http://2.bp.blogspot.com/-sJ-tZahntLI/T9coeqmdqMI/AAAAAAAADUQ/ztxIT1Fht4g/s1600/grey.png",
        effect      : "fadeIn",
        threshold   : 500
    });
});
</script>

Klik Simpan Template

Mau mencoba silahkan Mojang dan Bujang. Go Blog Go...!!! Amiin

Wassalam,

Edit HTML Baru Blogspot

noreply@blogger.com (Go Blog Go) — Thu, 11 Apr 2013 19:50:00 +0700

Assalamu'alaikum Wr.Wb.

Edit HTML Baru Blogspot tanpa terasa sudah 2 kali Go Blog Go mengalami perubahan dan pergantian tampilan Blogspot, yang pertama saat Dashboard berubah menjadi lebih Familier yang kedua baru-baru Blogspot mengubah tampilan Edit HTML tepatnya pada tanggal 9 April 2013 dini hari sekitar jam 2.00 saat Saya akan mengedit template agak terkejut karena edit HTML-nya menjadi lain tampilan-nya lebih keren dengan adanya Fitur SyntaxHighlight serta nomor urut, juga pengeditan langsung terhadap Widget Sidebar di template dan beberapa Fitur lain-nya silahkan di coba sendiri bagi yang belum mencoba-nya. Maju terus Blogspot...

Jump to Widget

Demikian informasi dari Saya. Go Blog Go...!!! Amiin

Wassalam,

Cara Membuat Static Page Pada Template Blogger

noreply@blogger.com (Go Blog Go) — Sat, 6 Apr 2013 23:46:00 +0700

Assalamu'alaikum Wr.Wb.

Cara Membuat Static Page Pada Template Blogger sesuai judul-nya Go Blog Go kali ini akan share posting seperti apa dan bagaimana cara-nya ?

Trick ini menggunakan Tag Kondisional, jadi membuat halaman muka tampilan page-nya di minimalist bisa 2 atau lebih sesuai dengan keinginan Anda :
daripada menghabiskan waktu langsung saja ke cara membuat-nya :

Login ke Blogger (pakai Akun Anda)
Dashboard -> Template -> Edit HTML
Jangan lupa di Back-Up dulu template Mojang dan Bujang
Masukkan Kode Tag Kondisional berikut ini sesudah Kode Tag ]]></b:skin> :

Ini hanya sebagai contoh, karena masing-masing Template tentu-nya berbeda

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#main-wrapper {
width:30%;
padding-left:1%;
}
h2.date-header, .post-timestamp, .post-body, .post-footer, .feed-links {
display:none;
}
.post h3 {
font: normal 12px Arial;
margin: 0 0 0 2px;
padding: 4px 6px 4px 15px;
line-height: 1.3em;
position: relative;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
font-weight: normal
}
.post h3 strong, .post h3 a:hover {
color: #FF8000;
}
.post {
border: none;
}
.post {
border-bottom: 1px solid #ccc;
text-align: left;
margin: 0px;
padding: 0px;
}
#blog-pager {
font: normal 11px Oblique;
text-align: left;
margin: 6px 0 1px 0;
padding: 7px 0 7px 0;
}
</style>
</b:if>
</b:if>

Semoga share ini bisa bermanfaat dan berguna, salam blogger. Go Blog Go...!!! Amiin

Wassalam,

CSS Transition

noreply@blogger.com (Go Blog Go) — Wed, 6 Mar 2013 12:34:00 +0700

Assalamu'alaikum Wr.Wb.

CSS Transisi mempunyai fungsi untuk mengubah durasi suatu nilai dari nilai awal suatu tampilan menuju nilai titik akhir suatu tampilan. Dalam perkembangan-nya CSS Transisi ini bisa dipergunakan untuk Media Queries seperti WebBlog Go Blog Go ini.

Sintaks CSS Transisi :

div {
-webkit-transition: properti durasi percepatan delay;
-moz-transition: properti durasi percepatan delay;
-ms-transition: properti durasi percepatan delay;
-o-transition: properti durasi percepatan delay;
transition: properti durasi percepatan delay;
}

Untuk lebih jelas-nya Mojang dan Bujang silahkan lihat demo-nya dibawah ini :

Efek Glow :

Hover me, Bro!!

#boxs{
width:200px;
height:100px;
text-align:center;
background:#ddd;
line-height:100px;
margin:20px auto;
/* Pemberian transition pada box-shadow akan memberikan efek glow */ 
-webkit-transition: .3s box-shadow ease-in, .3s background ease-in;
-moz-transition: .3s box-shadow ease-in, .3s background ease-in;
-ms-transition: .3s box-shadow ease-in, .3s background ease-in;
-o-transition: .3s box-shadow ease-in, .3s background ease-in;
transition: .3s box-shadow ease-in, .3s background ease-in;
}

#boxs:hover{
box-shadow:0 0 30px #52A7FF;
background:#fff;
}

Efek Hover Timing/Waktu :

ease

ease-in

ease-out

ease-in-out

.timing{
width:100px;
padding:10px;
background:#fff;
margin:10px auto;
float:left;
} 
.timing:hover{
width:500px;
}
#ease{
-webkit-transition:.8s width ease;
-moz-transition:.8s width ease;
-ms-transition:.8s width ease;
-o-transition:.8s width ease;
transition:.8s width ease;
}
#ease-in{
-webkit-transition:.8s width ease-in;
-moz-transition:.8s width ease-in;
-ms-transition:.8s width ease-in;
-o-transition:.8s width ease-in;
transition:.8s width ease-in;
}
#ease-out{
-webkit-transition:.8s width ease-out;
-moz-transition:.8s width ease-out;
-ms-transition:.8s width ease-out;
-o-transition:.8s width ease-out;
transition:.8s width ease-out;
}
#ease-in-out{
-webkit-transition:.8s width ease-in-out;
-moz-transition:.8s width ease-in-out;
-ms-transition:.8s width ease-in-out;
-o-transition:.8s width ease-in-out;
transition:.8s width ease-in-out;
}

Efek Perubahan Warna :

Efek Warna

.timing{
width:100px;
padding:10px;
background:orange;
color:gray;
margin:10px auto;
float:left;
} 

.timing:hover{
width:500px;
background:grey;
color:black;
}

#bunglon {
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-ms-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
}

#bunglon:hover {
background:grey;
color:black;
width:500px;
}

Efek Delay/Menunggu :

"Look At Me"

#ngantosan {
width:180px;
padding:40px;
border:5px solid #990000;
background:#ffe046;
padding:20px;
text-align:center;
color:#000;
font-size:12px;
cursor:pointer;
-webkit-box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
box-shadow:0 0 5px #000;
-webkit-transition: all 1s ease-out 5s;
-moz-transition: all 1s ease-out 5s;
-ms-transition: all 1s ease-out 5s;
-o-transition: all 1s ease-out 5s;
transition: all 1s ease-out 5s;
}
#ngantosan:hover {
background:#bbb;
border-width:0;
color:#990000;
font-size:20px;
padding:20px;
text-align:center;
-webkit-box-shadow:0 0 0 #000;
-moz-box-shadow:0 0 0 #000;
box-shadow:0 0 0 #000;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

Saya hanya sedikit mengulas saja karena sudah banyak yang membahas CSS Transition ini, disini hanya cara pelaksanaan-nya. Go Blog Go...!!! Amiin

Wassalam,

Fungsi Pseudo Elemen Lainnya

noreply@blogger.com (Go Blog Go) — Mon, 4 Mar 2013 15:33:00 +0700

Assalamu'alaikum Wr.Wb.

Fungsi Pseudo Elemen Lainnya ini hanya tambahan saja dari postingan yang lalu yaitu Efek Slick yang dimana menggunakan Pseudo Elemen-nya, kini Go Blog Go akan share aja yang dimana fungsi tersebut dapat digunakan untuk Paragraf Suatu Kalimat. Ini hanya sebagian kecil saja kelebihan dari Pseudo Elemen tentu saja kelebihan lain-nya masih banyak, secara garis besar hanya yang umum saja yang sering dipergunakan.

Pseudo Elemen #paragraf:first-letter

#paragraf:first-letter {font:bold 20px Tahoma,San-serif;color:orange;}

Elemen ini dipergunakan untuk membuat Awal Kata berbeda seperti: Huruf Besar,Jenis Huruf Tertentu,Warna Huruf,Dsb.

Contoh-nya :

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Sedangkan untuk Elemen :first-line dipergunakan untuk memberi perbedaan dalam 1 baris, tidak berbeda jauh dengan Pseudo Elemen :first-letter

Pseudo Elemen #paragraf:first-line

#paragraf:first-line {font:15px Georgia,San-serif;font-style:italic;color:red;}

Contoh-nya :

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Semoga share posting yang tidak seberapa ini dapat menambah wawasan dalam dunia WebBlog. Go Blog Go...!!! Amiin

Wassalam,

CSS Skew Rotating

noreply@blogger.com (Go Blog Go) — Mon, 4 Mar 2013 11:19:00 +0700

Assalamu'alaikum Wr.Wb.

CSS Skew Rotating Style adalah CSS Skew yang dapat memanipulasi suatu Objek posisi-nya menjadi miring sedangkan CSS Rotate memanipulasi Objek dapat berputar sesuai dengan berapa derajat nilai yang diberikan.

CSS SKEW :

.miring {
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

.miring:hover {
  -webkit-transform:skew(20deg,0deg);
  -moz-transform:skew(20deg,0deg);
  -ms-transform:skew(20deg,0deg);
  -o-transform:skew(20deg,0deg);
  transform:skew(20deg,0deg);
}

Seperti yang Mojang dan Bujang ketahui semua berdasar kepada Elemen skew(Xdeg,Ydeg) sedangkan untuk Elemen rotate(Nilai-Derajat deg)

CSS ROTATE :

.putar {
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}

.putar:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

Kadang Saya tidak habis pikir kenapa dengan CSS ini begitu Amazing, so terima kasih buat orang-orang Genius yang telah menciptakan karya yang besar ini. Go Blog Go...!!! Amiin

Wassalam,

CSS Jump Up Down

noreply@blogger.com (Go Blog Go) — Mon, 4 Mar 2013 09:24:00 +0700

Assalamu'alaikum Wr.Wb.

CSS Jump Up Down Style share posting Go Blog Go kali ini bagaimana membuat suatu objek yang dituju akan bergeser ke Atas atau ke Bawah jadi seperti melompat saat mouse berada tepat diatas objek-nya, seperti Mojang dan Bujang ketahui bahwa efek ini terjadi karena ada-nya Eleman Transition dan Transform yang menjadi kunci utama, untuk lebih jelas-nya silahkan simak sendiri sama Mojang dan Bujang :

CSS Jump UP :

.jump-up {
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.jump-up:hover {
-webkit-transform:translate(0px,30px);
-moz-transform:translate(0px,-50px);
-ms-transform:translate(0px,-50px);
-o-transform:translate(0px,30px);
transform:translate(0px,-30px);
}

Perlu diketahui juga bahwa yang menentukan Efek Jump ini terjadi adalah dari :hover dimana posisi X=0 sedangkan Y=bernilai, nah Mojang dan Bujang silahkan ber-eksperimen untuk mendapatkan hasil yang diinginkan.

CSS Jump Down :

.jump-down {
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.jump-down:hover {
-webkit-transform:translate(0px,-30px);
-moz-transform:translate(0px,50px);
-ms-transform:translate(0px,50px);
-o-transform:translate(0px,-30px);
transform:translate(0px,30px);
}

CSS Objek Bergeser Ke Arah Kanan :

CSS Objek Bergeser Ke Arah Kiri :

Ck...ck...ck...ck !!! Mojang dan Bujang walau simple dan mudah dengan sedikit kreatifitas bisa dikembangkan lebih lagi CSS ini ya. Go Blog Go...!!! Amiin

Wassalam,

CSS Bulat Dan Segitiga Style

noreply@blogger.com (Go Blog Go) — Tue, 26 Feb 2013 12:04:00 +0700

Assalamu'alaikum Wr.Wb.

CSS Bulat Dan Segitiga Style share posting kali ini merujuk bagaimana cara-nya Mojang dan Bujang membuat Efek Segitiga dan Lingkaran Bulat, Saya akan menjelaskan seperti apa dan bagaimana cara-nya Efek ini bisa tercipta dengan hanya CSS. Tentu saja nanti-nya Mojang dan Bujang dipersilahkan untuk ber-kreasi sesuka hati apabila sudah tau dan mengerti CSS-nya.

LINGKARAN BULAT MEMAKAI CSS :

BULAT

#buled {
background-color:#ff0000;
font: 20px Arial,Sans-serif;
text-align: center;
width: 75px; /* menentukan lebar bulatan */
height: 75px; /* menentukan tinggi bulatan */
padding: 30px;
-webkit-border-radius: 50%; /* pemberian nilai radius bulat */
-moz-border-radius: 50%;  
border-radius: 50%;
}

Ketika mencoba tanpa elemen width dan height hasil-nya menjadi lonjong, elemen width dan height ini adalah penambahan dari Saya karena awal-nya lingkaran bulat tidak dapat terbentuk dengan sempurna.

SEGITIGA MEMAKAI CSS :

Dasar pembuatan Efek Segitiga ini berasal dari 1(satu) Deklarasi seperti contoh diatas, namun tersirat dalam pikiran bagaimana menciptakan hanya segitiga saja seperti contoh dibawah ini :

Simple dan mudah kalau sudah tau rahasia-nya kunci sebenar-nya hanya pada elemen border-color : read green blue yellow, coba lihat sendiri sama Mojang dan Bujang dengan mengubah nilai-nya saja menjadi tranparent, script contoh segitiga diatas jadi-nya seperti ini :

.tiga{
width:0;
height:0;
border-width: 55px;
border-style: solid;
border-color: red transparent transparent transparent;
}

Bagaimana dengan Segitiga yang menghadap Kanan, Bawah dan Kiri. Mojang dan Bujang dapat mencoba sendiri biar lebih mengerti yang hasil-nya seperti dibawah ini :

Segitiga ke-Kanan

Sigitiga ke-Atas

Sigitiga ke-Kiri

Voaaalaa !!! Cuma segitu Mojang dan Bujang walau simple dan mudah tapi efek yang dihasilkan menurut Saya fantastis. Go Blog Go...!!! Amiin

Wassalam,

CSS Fade-In dan Fade-Out

noreply@blogger.com (Go Blog Go) — Tue, 26 Feb 2013 12:03:00 +0700

Assalamu'alaikum Wr.Wb.

CSS Fade-In dan Fade-Out share posting Go Blog Go kali ini yang akan ditampilkan masih berkutat tentang CSS. Mungkin Mojang dan Bujang sudah pada tau fungsi elemen Fade-in dan Fade-out ini, Saya hanya sekedar sharing aja terutama mengenai Efek yang dihasilkan terhadap suatu objek misal-nya Photo/Image karena kedua elemen tersebut menghasilkan Efek yang berkebalikan.

Efek Fade-In CSS

.fade-in {
-webkit-transition:opacity 1s ease-out;
-moz-transition:opacity 1s ease-out;
-ms-transition:opacity 1s ease-out;
-o-transition:opacity 1s ease-out;
transition:opacity 1s ease-out;
opacity:0.2;
}

.fade-in:hover {
opacity:1;
}

Efek Fade-Out CSS

.fade-out {
-webkit-transition:opacity 1s ease-out;
-moz-transition:opacity 1s ease-out;
-ms-transition:opacity 1s ease-out;
-o-transition:opacity 1s ease-out;
transition:opacity 1s ease-out;
}

.fade-out:hover {
opacity:0.2;
}

Singkat aja share postingan-nya, kalo panjang ntar membosankan. Go Blog Go...!!! Amiin

Wassalam,

Efek Slick dengan CSS

noreply@blogger.com (Go Blog Go) — Thu, 21 Feb 2013 01:34:00 +0700

Assalamu'alaikum Wr.Wb.

Efek Slick dengan CSS, efek ini untuk Saya begitu mengagumkan tanpa sengaja ketika berkunjung ke Net.tutsplus menemukan Efek Slick nama-nya. Efek ini menggunakan Pseudo-Element :before dan :after yang menghasilkan efek bayangan dari Area Objek utama-nya yang terlihat seolah Objek tersebut melayang, seperti membuat bayangan kiri dan kanan seolah Area Objek melipat hal inilah yang menarik untuk di pelajari,< namun saat itu kendala yang muncul adalah Script CSS yang diberikan tidak komplit hanya dasar saja itupun tidak berfungsi, akhir-nya Saya coba ngotak ngatik CSS-nya sampai akhir-nya berhasil menciptakan Efek Slick seperti yang diharapkan bahkan dapat dikembangkan lagi terlihat fantastis. Disini Mojang dan Bujang, Go Blog Go hanya akan memberikan dasar utama CSS Slick ini, selanjut-nya silahkan kembangkan sendiri oleh Mojang dan Bujang untuk lebih kreatif. Untuk melihat salah satu hasil real-nya Mojang dan Bujang dapat melihat Akhir Area Main Posting ini menggunakan Efek Slick dengan bayangan ke-Tengah.

Dasar Utama CSS Slick dengan Pseudo-Element

.box:before,.box:after { /* efek bayangan sisi kiri & kanan objek */
    z-index:-1;
    position:absolute;
    content:" ";
    bottom:15px;
    left:10px;
    width:50%;
    height:18px; /* mengatur tinggi ukuran dasar bayangan */
    top: 68%; /* mengatur jarak bayangan ke atas atau ke bawah */
    -webkit-box-shadow:0 8px 7px rgba(0,0,0,.7); /* mengatur tipis tebal bayangan */
    -moz-box-shadow:0 8px 7px rgba(0,0,0,.7);
    box-shadow:0 8px 7px rgba(0,0,0,.7);
    -webkit-transform:rotate(-2.5deg);
    -moz-transform:rotate(-2.5deg);
    -o-transform:rotate(-2.5deg);
    -ms-transform:rotate(-2.5deg);
    transform:rotate(-2.5deg);
}

.box:after { /* efek bayangan sisi kiri & kanan objek */
    right:10px;
    left:auto;
    -webkit-transform:rotate(2.5deg);
    -moz-transform:rotate(2.5deg);
    -o-transform:rotate(2.5deg);
    -ms-transform:rotate(2.5deg);
    transform:rotate(2.5deg);
}

Contoh lain-nya yang telah Saya buat (hanya Image Screen Shoot) :

Efek Bayangan Objek Kiri Bawah

Efek Bayangan Objek Kanan Bawah

Efek Bayangan Objek Ke-Tengah

Hanya beberapa screen shoot yang Saya tampilkan, sebenar-nya ada 10 yang telah Saya coba dengan berbagai Variatif CSS.

Selamat berkreasi, jadikan yang sudah ada untuk menjadi lebih baik. Go Blog Go...!!! Amiin

Wassalam,

CSS Box Shadow

noreply@blogger.com (Go Blog Go) — Wed, 20 Feb 2013 01:19:00 +0700

Assalamu'alaikum Wr.Wb.

CSS Box Shadow adalah suatu deklarasi bagaimana menciptakan efek bayangan suatu area sama seperti hal-nya dengan CSS Border Radius, CSS Box Shadow memiliki Properti disetiap Pramban yang dipergunakan dan memiliki fungsi menciptakan efek bayangan keluar dan kedalam dari objek area, yaitu :

-webkit-box-shadow (Properti Safari dan Chrome)
-moz-box-shadow (Properti Modzilla Firefox)
box-shadow (Properti W3C)

Deklarasi Css Box Shadow Outset

-webkit-box-shadow: 7px 7px 5px #cccccc; -moz-box-shadow: 7px 7px 5px #cccccc; box-shadow: 7px 7px 5px #cccccc;

Deklarasi Css Box Shadow Inset

-webkit-box-shadow: inset 7px 7px 5px #cccccc; -moz-box-shadow: inset 7px 7px 5px #cccccc; box-shadow: inset 7px 7px 5px #cccccc;

Dalam penulisan nilai deklarasi tidak harus selalu bernilai Positif namun nilai Negatif pun bisa dipergunakan untuk menciptakan efek bayangan kebalikan-nya.
Penerapan Secara Langsung
CSS-nya

#box { -webkit-box-shadow: 7px 7px 5px #cccccc; -moz-box-shadow: 7px 7px 5px #cccccc; box-shadow: 7px 7px 5px #cccccc; }

HTML-nya

<div id='box'>.......</div>

Penerapan Secara Tidak Langsung
HTML-nya

<div style='-webkit-box-shadow: 7px 7px 5px #cccccc;-moz-box-shadow: 7px 7px 5px #cccccc;box-shadow: 7px 7px 5px #cccccc;'>.......</div>

Beberapa Contoh Deklarasi CSS Box Shadow serta Penerapan-nya terhadap Objek Area :

Deklarasi CSS Box Shadow	Keterangan Demo
box-shadow: 10px 10px 7px #222; -moz-box-shadow: 10px 10px 7px #222; -webkit-box-shadow: 10px 10px 7px #222;	Efek Shadow-1
box-shadow: inset 10px 10px 7px #222; -moz-box-shadow: inset 10px 10px 7px #222; -webkit-box-shadow: inset 10px 10px 7px #222;	Efek Shadow-2
box-shadow: 10px 5px 7px #222; -moz-box-shadow: 10px 5px 7px #222; -webkit-box-shadow: 10px 5px 7px #222;	Efek Shadow-3
box-shadow: 0px 10px 7px #222; -moz-box-shadow: 0px 10px 7px #222; -webkit-box-shadow: 0px 10px 7px #222;	Efek Shadow-4
box-shadow: 10px 0px 7px #222; -moz-box-shadow: 10px 0px 7px #222; -webkit-box-shadow: 10px 0px 7px #222;	Efek Shadow-5
box-shadow: 0px 0px 7px #222; -moz-box-shadow: 0px 0px 7px #222; -webkit-box-shadow: 0px 0px 7px #222;	Efek Shadow-6
box-shadow: 0px 0px 20px #222; -moz-box-shadow: 0px 0px 20px #222; -webkit-box-shadow: 0px 0px 20px #222;	Efek Shadow-7
box-shadow: 10px 5px 0px #222; -moz-box-shadow: 10px 5px 0px #222; -webkit-box-shadow: 10px 5px 0px #222;	Efek Shadow-8
box-shadow: -10px -5px 0px #222; -moz-box-shadow: -10px -5px 0px #222; -webkit-box-shadow: -10px -5px 0px #222;	Efek Shadow-9
box-shadow: inset 10px 5px 7px #222; -moz-box-shadow: inset 10px 5px 7px #222; -webkit-box-shadow: inset 10px 5px 7px #222;	Efek Shadow-10
box-shadow: inset 0px 10px 7px #222; -moz-box-shadow: inset 0px 10px 7px #222; -webkit-box-shadow: inset 0px 10px 7px #222;	Efek Shadow-11
box-shadow: inset 10px 0px 7px #222; -moz-box-shadow: inset 10px 0px 7px #222; -webkit-box-shadow: inset 10px 0px 7px #222;	Efek Shadow-12
box-shadow: inset 0px 0px 7px #222; -moz-box-shadow: inset 0px 0px 7px #222; -webkit-box-shadow: inset 0px 0px 7px #222;	Efek Shadow-13
box-shadow: inset 0px 0px 20px #222; -moz-box-shadow: inset 0px 0px 20px #222; -webkit-box-shadow: inset 0px 0px 20px #222;	Efek Shadow-14
box-shadow: inset 10px 5px 0px #222; -moz-box-shadow: inset 10px 5px 0px #222; -webkit-box-shadow: inset 10px 5px 0px #222;	Efek Shadow-15
box-shadow: inset -10px -5px 0px #222; -moz-box-shadow: inset -10px -5px 0px #222; -webkit-box-shadow: inset -10px -5px 0px #222;	Efek Shadow-16
box-shadow: 5px 5px 0px red, 10px 10px 0px green, 15px 15px 0px blue, 20px 20px 0px yellow, 20px 20px 3px black; -moz-box-shadow: 5px 5px 0px red, 10px 10px 0px green, 15px 15px 0px blue, 20px 20px 0px yellow, 20px 20px 3px black; -webkit-box-shadow: 5px 5px 0px red, 10px 10px 0px green, 15px 15px 0px blue, 20px 20px 0px yellow, 20px 20px 3px black;	Efek Shadow-17

Efek Shadow-1 Kanan Bawah Tebal

Efek Shadow-2 Inside

Efek Shadow-3 Tipis Ke Bawah Tebal Ke Kanan

Efek Shadow-4 Tebal Ke Bawah

Efek Shadow-5 Tebal Ke Sebelah Kanan

Efek Shadow-6 Tipis Merata

Efek Shadow-7 Tebal Merata

Efek Shadow-8 Blok Tipis Ke Bawah Tebal Ke Kanan

Efek Shadow-9 Blok Tipis Ke atas Tebal Ke Kiri

Efek Shadow-10 Kedalam Kiri dan Kiri Atas

Efek Shadow-11 Kedalam Atas

Efek Shadow-12 Kedalam Sebelah Kiri

Efek Shadow-13 Kedalam Tipis Merata

Efek Shadow-14 Kedalam Tebal Merata

Efek Shadow-15 Kedalam Sebelah Kiri dan Atas Block

Efek Shadow-16 Kedalam Sebelah Kanan dan Bawah Block

Efek Shadow-17 Bertumpuk (Pelangi)

Semoga bermanfaat untuk mojang dan bujang. Go Blog Go...!!! Amiin

Wassalam,

CSS Border Radius

noreply@blogger.com (Go Blog Go) — Wed, 20 Feb 2013 00:37:00 +0700

Assalamu'alaikum Wr.Wb.

CSS Border Radius adalah sebuah deklarasi dari suatu properti yang bertujuan untuk membuat sudut melengkung sesuai dengan nilai yang diberikan. Sedangkan properti CSS Border Radius sendiri ada beberapa macam disesuaikan dengan Pramban yang digunakan, misal-nya sebagai berikut :

-webkit-border-radius (Properti Safari dan Chrome) -moz-border-radius (Properti Modzilla Firefox) border-radius (Properti W3C)

keterangan ke 3 Properti tersebut :

-webkit-border-radius : Jika Pramban Safari dan Chrome tidak bisa membaca border-radius maka Properti ini dipakai
-moz-border-radius : Jika Pramban Modzilla Firefox tidak bisa membaca border-radius maka Properti ini dipakai
border-radius : Standar dasar Properti CSS Border Radius

Untuk memperjelas lihat contoh sebagai berikut, silahkan Mojang dan Bujang untuk mencoba melihat-nya dengan Pramban yang berbeda.

Properti W3C
VALUE	PROPERTI
border-radius: 10px 10px 10px 10px;	border-radius: 10px;
border-radius: 10px 10px 10px 10px;	border-top-left-radius: 10px;
border-radius: 10px 10px 10px 10px;	border-top-right-radius: 10px;
border-radius: 10px 10px 10px 10px;	border-bottom-right-radius: 10px;
border-radius: 10px 10px 10px 10px;	border-bottom-left-radius: 10px;

Properti Safari Dan Chrome
VALUE	PROPERTI
-webkit-border-radius: 10px 10px 10px 10px;	-webkit-border-radius: 10px;
-webkit-border-radius: 10px 0px 0px 0px;	-webkit-border-top-left-radius: 10px;
-webkit-border-radius: 0px 10px 0px 0px;	-webkit-border-top-right-radius: 10px;
-webkit-border-radius: 0px 0px 10px 0px;	-webkit-border-bottom-right-radius: 10px;
-webkit-border-radius: 0px 0px 0px 10px;	-webkit-border-bottom-left-radius: 10px;

Properti Modzilla Firefox
VALUE	PROPERTI
-moz-border-radius: 10px 10px 10px 10px;	-moz-border-radius: 10px;
-moz-border-radius: 10px 0px 0px 0px;	-moz-border-radius-topleft: 10px;
-moz-border-radius: 0px 10px 0px 0px;	-moz-border-radius-topright: 10px;
-moz-border-radius: 0px 0px 10px 0px;	-moz-border-radius-bottomright: 10px;
-moz-border-radius: 0px 0px 0px 10px;	-moz-border-radius-bottomleft: 10px;

Semoga bermanfaat dan berguna, serta bertambah ilmu pengetahuan-nya. Go Blog Go...!!! Amiin

Wassalam

CSS Border

noreply@blogger.com (Go Blog Go) — Tue, 19 Feb 2013 02:50:00 +0700

Assalamu'alaikum Wr.Wb.

CSS Border adalah salah satu elemen yang sangat penting dalam pembuatan sebuah Website, Go Blog Go akan share posting CSS Border hanya untuk mengingat dan ditulis agar tidak lupa. Bagi Mojang dan Bujang yang belum tau silahkan kalau mau mempelajari-nya.
Dalam Properti Border terdapat 3 deklarasi, yaitu:

border-width (menentukan tipis atau tebal-nya border ukuran yang digunakan: pixel,thin,medium dan thick(tebal))
border-style (type style yang digunakan)
border-color (menentukan warna border type jenis-nya Hex, RGB atau secara langsung ditulis nama warna-nya)

Contoh-nya :

border: border-width border-style border-color border: 2px dotted #ff0000

Penerapan-nya Secara tidak langsung
CSS-nya

<style type='text/css'> #garis { border-width: 2px; border-width: dotted; border-width: #ff0000; } </style>

HTML-nya

<div id='garis'>........</div>

Penerapan-nya Secara langsung
HTML-nya

<div style='border-width: 2px;border-width: dotted;border-width: #ff0000;'>........</div>

Beberapa Contoh dari Style Border :

Border dengan style Solid

Border dengan style Dashed

Border dengan style Dotted

Border dengan style Outset

Border dengan style Inset

Border dengan style Double

Border dengan style Ridge

Border dengan style Groove

Dari deklarasi border, Mojang dan Bujang dapat menentukan deklarasi untuk border atas,kanan,bawah dan kiri

DEKLARASI	KETERANGAN
border-top: 2px dotted #ff0000	garis atas
border-right: 2px dotted #ff0000	garis kanan
border-bottom: 2px dotted #ff0000	garis bawah
border-left: 2px dotted #ff0000	garis kiri

DEKLARASI	KETERANGAN
border-top-width: 2px;	tebal garis atas
border-right-width: 2px;	tebal garis kanan
border-bottom-width: 2px;	tebal garis bawah
border-left-width: 2px;	tebal garis kiri
border-top-style: 2px;	tipe garis atas
border-right-style: 2px;	tipe garis kanan
border-bottom-style: 2px;	tipe garis bawah
border-left-style: 2px;	tipe garis kiri
border-top-color: 2px;	warna garis atas
border-right-color: 2px;	warna garis kanan
border-bottom-color: 2px;	warna garis bawah
border-left-color: 2px;	warna garis kiri

Sebagai keterangan tambahan :
border-width: 4px 2px 7px 0px; sama dengan border-width: atas kanan bawah kiri;, hal ini berlaku pula untuk border-style dan border-color.

Dengan penjelasan yang singkat ini mudah-mudahan Mojang dan Bujang dapat lebih mengerti tentang CSS Border. Go Blog Go...!!! Amiin

Wassalam,

Sumber :w3.org dan w3schools.com

Grid 24 Column Responsive

noreply@blogger.com (Go Blog Go) — Mon, 18 Feb 2013 16:42:00 +0700

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'> </div> </div> <div class='wwy'> <div class='duaopat'> <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.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,

Grid 16 Column Responsive

noreply@blogger.com (Go Blog Go) — Mon, 18 Feb 2013 16:41:00 +0700

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).

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'> </div> </div> <div class='wwy'> <div class='geneplas'> <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 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,

Grid 12 Column Responsive

noreply@blogger.com (Go Blog Go) — Mon, 18 Feb 2013 16:40:00 +0700

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,