Cara Menciptakan Related Post Dengan Scroll

BOS TUTORIAL - Cara Membuat Related Post Dengan Scroll. Masih kelanjutan dari Membuat Related Post Pada Blog. Apa itu related post atau artikel terkait silahkan baca disini.

Kali ini kita akan membicarakan wacana Cara Membuat Related Post Dengan Scroll. Kenapa memakai Scroll? Agar dapat menghemat tempat, dengan begitu akan terlihat ramping.

Seperti yang saya paparkan sebelumnya, bahwa Cara Membuat Related Post Dengan Scroll akan menampilkan Label / Kategori sejumlah yang kita inginkan. Dan akan dibagi menurut Label / Katergori. Misalnya dalam postingan anda ada 3 atau lebi kategori, maka Cara Membuat Related Post Dengan Scroll akan menampilkan maksimal 3 kategori. Anda dapat merombaknya sesuai impian anda.

Contoh Cara Membuat Related Post Dengan Scroll - Sumber : Kumpulan Adsen Blogspot

Langsung saja yah, Inilah Cara Membuat Related Post Dengan Scroll
1. Seperti biasa, buka akun blogger kawan
2. Masuk ke Elemen Template, piluh Edit HTML
3. Carilah instruksi <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F untuk mempermudah pencarian
4. Apabila anda menemukan 2 instruksi tersebut, anda pilih yang pertama.
5. Sudah ketemu belum nih, bila sudah Copy lah instruksi script dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</Script>
</Div>
<script type="text/javascript">RelPost();</script>
</Div>
</b:if>

6. Lalu tempatkan (paste) instruksi tersebut sempurna di bawah kode <div class='post-footer-line post-footer-line-1'>.
7. Simpan template blog anda. Lalu lihat hasilnya.
8. Selesai.

Catatan :

• <h2>Artikel Terkait:</h2> dapat anda ganti sesuai impian anda ( misal : Related post, artikel yang berafiliasi dll ) atau anda juga dapat menghapusnya.
• <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> yaitu tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb yaitu tebal batasnya, solid yaitu jenis batasnya dan #ccc yaitu warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah instruksi 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jikalau tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
• maxNumberOfPostsPerLabel = 100; yaitu jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; yaitu jumlah label terkait yang ingin ditampilkan

Demikianlah postingan mengenai Cara Membuat Related Post Dengan Scroll. Sama menyerupai yang ada di Kumpulan Adsen Blogspot. Silahkan lihat pola balasannya disini.

Tambahan : Pilih salah satu yah Related Post yang anda suka. Jangan gunakan semuanya secara bersamaan, akan mensugesti loading blog.

Tweet

Subscribe to receive free email updates: