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);
})();
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...
Jadi kodenya harus dimodifikasi agar bisa diterapkan pada template:
Unknown
wah sangat bergunanih..
makasih mas.. :-bd
Arif Rahman
MAs, kalo yang gridnya muncul gambar gimana caranya ??
Taufik Nurrohman
Pelajari ini: http://jsfiddle.net/tovic/7PaAY/8/embedded/result,resources,js,html,css/
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
Taufik Nurrohman
⇒ http://www.google.com/search?q=membuat+list+%26+grid+post+display+pada+blogspot
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?
Taufik Nurrohman
Coba ini: https://jsfiddle.net/tovic/7PaAY/30
Taufik Nurrohman
Eh, pertanyaanmu kebalik ya?