Membuat Switch List dan Grid Pada Home Page Display

Blog anda akan terasa lebih menarik lagi jika menampilkan atau mendisplaykan Switch List dan Grid di bagian Home Page nya atau halaman depan blog. Ada dua jenis tampilan yang umum kita lihat pada halaman depan sebuah blog, yaitu tampilan Grid dan tampilan List.

Namun, ada juga blog yang memilih keduanya. Di samping bisa ditampilkan dalam mode List juga dapat ditampilkan dalam mode Grid. Bagi yang tertarik bisa mengikuti langkah sederhana berikut.

 @font-face {
    font-family:'PT Sans Narrow';
    font-style:normal;
    font-weight:400;
    src:local('PT Sans Narrow'),local('PTSans-Narrow'),
url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}
/* CSS Untuk Tombol Switch*/
.switch {
 border-bottom:5px solid #CC0000;
 height:35px;
 color:#444;
 margin:0 10px;
 padding:5px 9px;
 text-transform:uppercase;
}
.switch-left {
 width:360px;
 float:left;
 margin:0 auto;
 padding-top:5px;
 font:20px PT Sans Narrow;
 text-shadow:1px 1px 0 #000;
 color:#AAA;
}
.switch-right {
 width:120px;
 float:right;
 margin:0 auto;
 padding-top:10px;
}
.switch a {
 border:1px solid #999;
 font:11px Arial;
 padding:3px 8px 3px 25px;
 text-transform:none;
 color:#aaa;
}
a.bar_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXX3ouKMWnMBYLyT4SX4dNZ2E330moF8X_2oXKCpEhS2PeMIzabVe4duNBMmv3usvDhnfb95ydZihFb-5qPnVRl1AOFXms2-sB2PHezMRlgyzpvUwHnvjJExdL_YA92nm90byGtMlnm_4-/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj13TlAEr3a2oFruwYRPH2ynA3ADN52abjlNaeybPRCcoZV59ufGrQZVQlxYD1HbLfzG9NsprXNgHewkm7UZxHv8l2B3J8VE50mCNsWlec-MdhR97rE7rMj2q4PB-V5jIYqnXUlHI4oSWOZ/s1600/listed.gif) no-repeat 3px center;
}
.switch a.active {
 background-color:#aaa;
 border:1px solid #999;
 color:#111;
 cursor:default;
}
/* CSS Bar untuk bagian grid */
.bar {
    background-color:rgba(0,0,0,0.3);
    border:1px solid #000;
    box-shadow:0 0 0 1px #333;
    -moz-box-shadow:0 0 0 1px #333;
    -webkit-box-shadow:0 0 0 1px #333;
    -o-box-shadow:0 0 0 1px #333;
    display:inline;
    float:left;
    height:160px;
    list-style:none;
    margin:10px 0 0 9px;
    overflow:hidden;
    padding:2px 3px 5px;
    position:relative;
    text-align:center;
    width:160px;
}
.bar h3 {
    height:30px;
    border:0 none;
    line-height:8px;
    margin:0 5px 5px;
    padding:2px;
    text-shadow:1px 1px 0 #000;
}
.bar h3 a {
    font:14px PT Sans Narrow;
    text-align:center;
    line-height:16px;
}
.bar h3 a:hover {
    color:#c1541a;
}
.bar .post-body {
    background:none;
    height:245px;
    overflow:hidden;
    width:167px;
    padding:0;
    margin:0 0 .3cm;
}
.bar img {
    float:left;
    height:110px;
    margin:0 18px;
    width:110px;
} 

  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://css3-tutsplus.googlecode.com/svn/trunk/personal/switch-display.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {
    var $box=jQuery(".post"),
        $bar=jQuery("a.bar_view");
    $dat=jQuery("a.dat_view");
    $dat.click(function () {
        $box.removeClass("bar");
        jQuery(this).addClass("active");
        $bar.removeClass("active");
        jQuery.cookie("dat_style", 0);
        return false
    });
    $bar.click(function () {
        $box.addClass("bar");
        jQuery(this).addClass("active");
        $dat.removeClass("active");
        jQuery.cookie("dat_style", 1);
        return false
    });
    if(jQuery.cookie("dat_style")==0) {
        $box.removeClass( "bar");
        $dat.addClass("active")
    } else {
        $box.addClass("bar");
        $bar.addClass("active")
    }
});
//]]>
</script>  

 <b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='switch'>
  <div class='switch-left'>
    <span style='color: #CC0000;'>Recent</span> Post
  </div>
  <div class='switch-right'>
    <a class='bar_view' href='#'>Grid</a>
    <a class='dat_view' href='#'>List</a>
  </div>
</div>
</b:if>
 </b:if> 

Carilah kode seperti ini di editor html blognya

<b:section class='main' id='main'>

Kemudian ubah menjadi seperti ini

<b:section class='main' id='main' showaddelement='yes'>

Selanjutnya copy script HTML di atas lalu paste tepat di atas kode 

<b:section class='main' id='main' showaddelement='yes'>.

Lalu cari lagi kode seperti ini

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>

dan ubah menjadi seperti ini

<div class='post bar hentry uncustomized-post-template' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>

Berikutnya copy kode JQuery di atas lalu paste di antara tag <head>...</head>. Kemudian kode CSS nya di atas diletakkan di antara kode tag <b:skin> ... </b:skin> atau di antara tag <style> ... </style>.