Blog Blogging, related post scrolling

Blog Blogging pada artikel ini ingin berbagi trik blogging tentang membuat related post dengan efek scrolling pada bagian bawah setiap postingan blog. Tahukah anda apabila related Post ini akan membuat sebuah Blog menjadi lebih User Friendly ? Pengaruh lainnya yaitu berkaitan dengan SEO blog, selain itu Pengunjung blog juga bisa berlama-lama surving, membaca artikel-artikel lain di dalam sebuah Blog. Related Post atau Artikel Terkait yang akan kita buat ini juga dilengkapi efek Scroll yang Cantik, sehingga pengunjung akan terpesona melihat model Artikel Terkait ini (bener gak sih ???).

Cara membuatnya adalah :

Temukan Kode ]]></b:skin> , lalu Tempatkan Kode CSS berikut diatasnya :

/* Related Post/Artikel Terkait */
.rbbox{border: 0px solid #EFFBEF;padding: 10px;
background-color: #A9E2F3;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
::-webkit-scrollbar {width:12px;height:12px;}
::-webkit-scrollbar-track {background:#D2D2D2;box-shadow:inset 1px 1px 5px #939393;border:1px solid #A9A9A9;}
::-webkit-scrollbar-thumb {background:#888;border:1px solid #464646;border-radius:2px;box-shadow:inset 2px 2px 5px 0 #B0B0B0}

Langkah berikutnya adalah :

Temukan kode <data:post.body/> lalu masukkan Kode ini di bawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='rbbox'>
<div style='margin:0; padding:1px;height:150px;overflow:auto;border:0px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
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>

Langkah terakhirnya adalah, simpan template anda dan lihatlah hasilnya.

Sumber tulisan : http://www.garudasia.com/2013/10/cara-membuat-related-post-atau-artikel.html

Get free daily email updates!

Follow us!

Anda sedang membaca artikel tentang Blog Blogging, related post scrolling dan anda bisa menemukan artikel Blog Blogging, related post scrolling ini dengan url http://fh86.blogspot.com/2015/04/blog-blogging-related-post-scrolling.html. Anda boleh menyebarluaskan atau mengcopy artikel Blog Blogging, related post scrolling ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.