Cara Membuat Post Display Grid Dan List ke Blogger

Cara Membuat Post Display Grid Dan List jarang orang yang membuat tutorial ini karena saya sendiri suka sulit untuk menemukannya di google. kebanyakan semua dalam bahasa ingris. dan kesempatan kali ini saya akan mencoba membuatnya semudah mungkin. sebelumnya kita akan mengetahui dulu apa yang di maksud dengan grid dan list. penggunaan ini untuk menambahkan style pada readmore otomatis dengan javascript plus tumbnail. tombol switch ini hanya untuk mempercantik blog anda dan bisanya Display Grid Dan List ini di gunakan untuk blog dengan konten gallery, template blog, iklan, pemasaran produk, info movies, download software dan lainnya.

GRID: Posisi default saat membuka blog maka yang akan active adalah pada display grid.
LIST : untuk melihat artikel dengan keternagan serta gambar kita hanya cukup mengklik tombol list.

Artikel Grid : Jika pengunjung buka blog kita maka pada halaman depan blog secara default yang akan tampil adalah grid dengan artikel gambar. ini akan cocok sekali jika blog anda berupa blog dengan mengutamakan sebuah gambar.
Artikel List : pengunjung akan sangat terbantu dengan list ini agar pengunjung tidak perlu secara langsung membuka artikel blog untuk melihat keterangan. cukup klik timbol list maka keterangan akan muncul. seperti pada gambar di atas.

Cara Memasang Display Grid Dan List Pada Template

1. masuk bagian edit template. centang bagian Expand Widget Templates .
2. Pasang HTML : cari kode seperti ini <b:section class='main' id='main' showaddelement='yes'> . ket : kode tersebut adalah widget post cari yang mirip saja. jika ketemu maka simpan HTML berikut di atas kode tadi.

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

keterangan : perhatikan yang di garis bawahi (no.5). ganti sesuai yang anda inginkan.
2. Sisipkan class="bar" : cari kode <div class='post hentry uncustomized-post-template'> atau <div class='post hentry'> jika sulit menemukannya gunakan ctrl+F untuk mempercepat. biasanya kode tersebut lebih dari satu. sisipkan pada semua kode tersebut. jika ketemu maka sisipkan bar pada atribut class maka hasilnya akan seperti ini.

<div class='post bar hentry uncustomized-post-template'>

atau

<div class='post bar hentry'>

3. Pasang Javascript dan jQuery. cari kode </head>.
dan simpan kode berikut di atasnya.

<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 switch
 *
 * active class active pada switch grid atau list
 * update by denddy gustiana
 * http://under-88.blogspot.com/
 * https://plus.google.com/109783772548428705949
 *
 */
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>

Catatan : script yang di garis bawahi di atas adalah plugin jquery versi 7. jika pada template anda sudah terpasang maka jangan di pasang kembali

4. Pasang CSS : karena grid ini hanya di tampilakan pada bagian home dan menggunakan tag conditional maka kita akan menaruh css di bawah ]]></b:skin> .

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
/*FONT PT Sans Narrow*/
@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/AVvXsEhhaWxPZr1Wcc_-V4eulzZ5_Hn20Df4iOmf5scfDNAGiVJj3nn_ReO9H7n7zeDcKsQ1tFSjC_fZajfMUyuAgmMOXGx6ctr8p_WK_9WVM90RemZnDXY9fVwbOy-ZHABeYmWXf3Qbzbw7UcO6/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-kHTd731DvxsY7ZFkVHz8Y4il5PoQFMdIjlGd2d1lgcq_o4Ob-1yX2CdhVB-6qcI6nPkyQhKd2QmnG8X5v5EN0A4dmlHZkeDqdi9kSqZE2-DKxl_cKcD4vknO9nBZ-DQ59xewWA_M28U/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;
}
</style>
</b:if></b:if>