Mecha versi 2.6.3 sudah dirilis!

List & Grid Post Display

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
  4. Eksternal 
List & Grid Post Display

Membuat tampilan artikel berbentuk daftar atau grid berdasarkan tombol perintah dengan jQuery Masonry sebagai pembangun grid dan bantuan JavaScript Cookie sebagai pengingat sesi:

HTML 

<nav id="view">
    <a href="#" class="grid">Grid</a>
    <a href="#" class="list">List</a>
</nav>
<div id="main">
    <article> ... </article>
    <article> ... </article>
    <article> ... </article>
    <article> ... </article>
</div>

CSS 

#view {
  display:block;
  width:95%;
  margin:10px auto;
}

#view a {
  display:inline-block;
  background-color:darkblue;
  padding:2px 7px;
  text-decoration:none;
  color:white;
}

#view a.active {background-color:darkred}

#main {
  width:98%;
  margin:10px auto;
}

article {
  display:block;
  background-color:black;
  font:normal 11px Arial,Sans-Serif;
  color:white;
  padding:10px 15px;
  margin:0 10px 10px;
}

/* Grid mode */
article.grid {
  float:left;
  width:100px;
}

jQuery 

(function() {

    var $container = $('#main'),
        $article = $container.find('article'),
        $gridNav = $('#view .grid'),
        $listNav = $('#view .list');

    // Functions...
    function gridMode() {
        $article.addClass('grid');
        $gridNav.addClass('active');
        $listNav.removeClass('active');
        $container.masonry({
            itemSelector: ".grid",
            isAnimated: true,
            isFitWidth: true
        });
        createCookie('grid', null, 7000);
        return false;
    }
    function listMode() {
        $article.removeClass('grid');
        $gridNav.removeClass('active');
        $listNav.addClass('active');
        $container.masonry("destroy");
        eraseCookie('grid');
        return false;
    }

    // Initialize...
    // If the `grid` cookie reads
    if (readCookie('grid')) {
        gridMode();
        eraseCookie('grid');
    } else {
        listMode();
    }

    // By user...
    $listNav.click(listMode);
    $gridNav.click(gridMode);

})();

Eksternal 

Lihat Demo

22 Komentar

abang ichal

ehh keknya ini cocok untuk arsips
.
ehh klo masang gituan untuk post... itu pke rss atau tidak?

Taufik Nurrohman

Tergantung kreativitas. Mengingat dalam kerangka kolom artikel Blogger umumnya terdiri dari kode ini...

<div id="main">
<div class="post hentry"> ... </div>
<div class="post hentry"> ... </div>
<div class="post hentry"> ... </div>
</div>

Jadi kodenya harus dimodifikasi agar bisa diterapkan pada template:

var $container = $('#main'),
$article = $container.find('.post');
.post.grid {
float:left;
width:200px;
}

Unknown

wah sangat bergunanih..
makasih mas.. :-bd

Unknown

ini yang saya cari mas, ketemu disini.. thanks mas taufik.. salam kenal

Anonim

wah dicari-cari mutar di google malah ada didekat sini...
thanks mas taufik...

Unknown

Macam mana nak pasang untuk post?
Saya tidak faham sgt.
Maaf , saya newbie.

Unknown

maaf mas untuk implementasinya di blogger gimana ya??

satu lagi nih mas, tapi maaf keluar jari pembahasan, kalo mau bikin postnya cuma tampil gambarnya aja tanpa snippet gitu gimana mas?? :-)

Fajri Alhadi

Mas saya mau tanya dong.
kalau tampilan defaultnya itu yang list, bukan grid bisa gak ?
Mohon jawabannya ya

Arbi

Mas tampilan blog aku kan list, bisa gak diubah jadi grid.

Anonim

gmana kalo list seperti yang ada pada blog AW Manga? bagaimana kalo yang begitu?

Unknown

wah kayaknya imunya dari sini nih list dan grid di blog saya

Unknown

kok post ditemplate saya ketindis ya pas klik menu grid

Taufik Nurrohman

Kalau tidak ada screenshot bagaimana Saya bisa tahu masalahnya?

Kang Rian

nyimak dulu kang taufik. terima kasih :)

Kang Rian

saya coba dulu pak, terima kasih ..

Komentar telah ditutup.