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
Labels: Blogger, JavaScript, jQuery, Lanjutan, Potongan
22 Comments:
ehh keknya ini cocok untuk arsips
.
ehh klo masang gituan untuk post... itu pke rss atau tidak?
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;
}
wah sangat bergunanih..
makasih mas.. :-bd
MAs, kalo yang gridnya muncul gambar gimana caranya ??
Pelajari ini: http://jsfiddle.net/tovic/7PaAY/8/embedded/result,resources,js,html,css/
ini yang saya cari mas, ketemu disini.. thanks mas taufik.. salam kenal
wah dicari-cari mutar di google malah ada didekat sini...
thanks mas taufik...
Macam mana nak pasang untuk post?
Saya tidak faham sgt.
Maaf , saya newbie.
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?? :-)
mas gimana tutorial detail nya hehe maklum mas Masih baru didunia bloging :p
⇒ http://www.google.com/search?q=membuat+list+%26+grid+post+display+pada+blogspot
Mas saya mau tanya dong.
kalau tampilan defaultnya itu yang list, bukan grid bisa gak ?
Mohon jawabannya ya
Mas tampilan blog aku kan list, bisa gak diubah jadi grid.
gmana kalo list seperti yang ada pada blog [url=http://manga.wardhanime.net/]AW Manga[/url]? bagaimana kalo yang begitu?
wah kayaknya imunya dari sini nih list dan grid di blog saya
kok post ditemplate saya ketindis ya pas klik menu grid
Kalau tidak ada screenshot bagaimana Saya bisa tahu masalahnya?
nyimak dulu kang taufik. terima kasih :)
saya coba dulu pak, terima kasih ..
mas, cara merubah default tampilan grid menjadi list mode gimana ya?
Coba ini: https://jsfiddle.net/tovic/7PaAY/30
Eh, pertanyaanmu kebalik ya?
Post a Comment
<< Home