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

  • Arif Rahman

    MAs, kalo yang gridnya muncul gambar gimana caranya ??

  • 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?? :-)

  • Abdul Sajid

    mas gimana tutorial detail nya hehe maklum mas Masih baru didunia bloging :p

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

  • Dika Ramadanu

    mas, cara merubah default tampilan grid menjadi list mode gimana ya?

Komentar telah ditutup.