Cara Membuat Related Post yang Ada Scroll nya - Sebelumnya saya telah membahas Cara Membuat Related Post, kali ini saya akan bahas tentang Cara Membuat Related Post Dengan Scroll. Mengapa menggunakan Scroll? Agar bisa menghemat tempat, dengan begitu akan terlihat ramping alias seksi. Dengan mengaktifkan fungsi scrolling pada widget related posts maka pengunjung tidak merasa terganggu dengan artikel-artikel terkait yang terlalu kepanjangan ke bawah.
Related Post Dengan Tombol Scroll akan menampilkan Label/Kategori sejumlah yang kita inginkan. Dan akan dibagi berdasarkan Label / Katergori. Misalnya dalam postingan anda ada 3 atau lebi kategori, maka Cara Membuat Related Post Dengan Scroll akan menampilkan maksimal 3 kategori. Anda bisa menggantinya sesuai keinginan anda.
 |
| Gambar: Membuat Related Post Dengan Scroll |
Cara Membuat Related Post Dengan Scroll
Berikut ini cara membuat related post dengan tombol scroll :
1. Login ke dashboard blogger
2. Pilih Template, pilh Edit HTML
3. Cari kode <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F untuk mempermudah pencarian
4. Apabila anda menemukan 2 kode yang sama, anda pilih yang pertama.
5. Copy kode script dibawah ini.
<b:if cond='data:blog.pageType == "item"'>6. Lalu tempatkan (paste) kode tersebut tepat di bawah kode <div class='post-footer-line post-footer-line-1'> tadi.
<H2>Artikel Terkait:</H2>
<Div class='rbbox'>
<Div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<Div id='albri'/>
<Script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</Script>
</Div>
<script type="text/javascript">RelPost();</script>
</Div>
</b:if>
7. Simpan template blog anda. Lalu lihat hasilnya.
8. Selesai.
Catatan :
- <h2>Artikel Terkait:</h2> bisa anda ganti sesuai keinginan anda ( misal : Related post, artikel yang berhubungan dll ) atau anda juga bisa menghapusnya.
- <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb.
- Margin : jarak antara kotak dengan main,
- Padding : jarak antara isi artikel terkait dengan kotak,
- border : batas, 1px tsb adalah tebal batasnya,
- solid adalah jenis batasnya dan #ccc adalah warna batasnya,
- Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
- maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan
- maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
0 Response to "Cara Membuat Related Post yang Ada Scroll nya"
Post a Comment