Membuat Tampilan Blog Grid Dan List

Cara Membuat Post Display Grid Dan List sudah berkali-kali saya mencari artikel semacam ini di mbah google namun memang jarang orang yang membuat tutorial ini dan kebanyakan semua dalam bahasa ingris. Sehingga di kesempatan kali ini saya akan mencoba membuatnya semudah mungkin. Saya menemukan artikel ini dari salah satu master css CSS TUTS , terima kasih mas Dendy Gustiana.. saya boleh menyebarluaskan artikel ini. SNah, sebelum saya mulai, 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 lain-lain.

Demonya bisa dilihat di blog saya sendiri klik di bawah ini :

DEMO SWITCH

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 ke 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/AVvXsEhOa_VpLhDgvCyP5bGu4KXa04epzVLe6fu73XQ2Pui84giYHGfQE6kOXkDMDlOWOWUIuqlPiQMFIkRZjDlDMYd9bpod-TykPpbgolZdY10dCOn81Obe3K4MhD3Tdv_1qONiAjgmAtNjfoNn/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIR0wAZmf6Km1k99ysqEMCp3LYfoaoybsgXAv4GzxBbIfmseS8peRHWOAZmt-3vcZP4RBLd-_Xn_H7x3Afc5XBUjPds7Gro-ahpCbg1FDAbZZeBhHJPE8ip6teXPIeGMggoP9_MJis4Vq2/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>

CSS yang saya gunakan sama seperti pada DEMO jika warna kurang cocok dengan template anda silahkan ganti sesuai kreasi anda dan di harapkan anda harus teliti membuat CSS karena itu maslah yang sering terjadi yang hasilnya kurang rapi

5. Simpan template anda dan lihat hasilnya.

Mengatasi kesalahan

Kebanyakan kesalahan biasanya pada bagian CSS karena pada template anda mungkin sudah banyak yang mengedit dengan berbagai style terutama pada bagian post dan gambar post yang hasilnya tidak rapi. serta readmore yang kurang benar cara pemasangannya. jika anda mengalami kesulitan dalam penempatan dan pengaturan css silahkan diskusikan untuk menemukan solusinya. dan jangan lupa tulis URL blog anda yang akan di pasang tutorial di atas. agar saya bisa mereview dan melihat kesalahan untuk mengatasinya.

semoga bermanfaat dan mohon maaf jika banyak kekurangan.