Sunday, June 26, 2011
Araya
Label dalam blog adalah sesuatu hal yang wajib. Label bisa juga diartikan sebagai pengkategorian posting. Tujuannya untuk memudahkan pengunjung mencari artikel yang berhubungan. Maka dari itu jangan lupa memberi label sesuai dengan materi posting. Nah label bisa ditaruh di sidebar atau sebagai menu.
Cuma sayangnya ketika label di klik, pastinya halaman akan memuat semua postingan dalam label tersebut. Kalau jumlah posting dalam satu label tersebut banyak tentunya akan membuat loading blog jadi berat. Agar halaman bisa menampilkan posting dengan jumlah tertentu maka kita perlu sedikit menambahkan kode pembatas seperti dibawah ini :
+
"?max-results=5"
Angka 5 adalah banyaknya posting yang muncul pada halaman ketika label di klik. Anda bisa merubahnya sesuai dengan selera.
Bagi Anda yang sudah memasang label pada widget sidebar dalam bentuk list atau berikut cara menambahkan kode pembatasnya :
1. Masuk ke Akun Blogger Anda
2. Klik Ranncangan / Design > Edit HTML
3. Klik Download Template Lengkap terlebih dahulu untuk antisipasi jika terjadi eror
4. Centang Expand Template Widget
5. Cari kode seperti dibawah ini ( gunakan Ctrl + F atau tekan F3 untuk memudahkan pencarian )
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
6. Tambahkan kode pembatas +
"?max-results=5"
7. Sehingga hasilnya akan seperti di bawah ini
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=5"'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=5"'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
Untuk yang menggunakan label dalam bentuk cloud silakan cari kode berikut, letaknya dibawah kode label list :
<b:loop
values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
Maka hasilnya akan tampak seperti di bawah ini.
<b:loop
values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=5"'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=5"'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
Cara diatas untuk label yang dipasang di widget sidebar blog, baik label dalan bentuk list maupun cloud. Untuk label di menu navigasi breadcrumbs dan post footer line jika di klik masih akan menampilkan semua poting. Anda juga bisa membatasi banyaknya posting yang muncul pada kedua link label tersebut. Caranya sama dengan diatas, cari kode seperti dibawah ini :
<div
id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> > <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> > </b:if>
</b:loop>
</b:if> > <a expr:href='data:post.link'><data:post.title/></a>
</div>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> > <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> > </b:if>
</b:loop>
</b:if> > <a expr:href='data:post.link'><data:post.title/></a>
</div>
Tambahkan kode pembatasnya, maka
hasilnya seperti di bawah ini.
<div
id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> > <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=5"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> > </b:if>
</b:loop>
</b:if> > <a expr:href='data:post.link'><data:post.title/></a>
</div>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> > <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=5"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> > </b:if>
</b:loop>
</b:if> > <a expr:href='data:post.link'><data:post.title/></a>
</div>
. Cari kode seperti ini di bawah ini atau yang mirip dengan
kode tersebut, yaitu kode untuk label pada post footer line.
<div
class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>
Kemudian tambahkan kode pembatasnya, maka jadinya akan
seperti di bawah ini.
<div
class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=5"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=5"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>
Klik tombol SIMPAN TEMPLATE.
