Tempat tutorial blogging pemula,

Saturday, January 30, 2016

Cara Membuat Widget Related Post Fast Loading Untuk Blogspot Tanpa Javascript

2 comments :
Hari saya akan berbagi artikel tentang cara membuat  widget related post untuk template asli blogger. Related post bila kita terjemahkan ke dalam bahasa indonesia adalah artikel terkait. Seperti yang kita ketahui bahwa template bawaan dari blogger tidak terdapat widget related post, maka kita harus membuatnya sendiri. Fungsi dari related post dalam blog adalah untuk membantu pengunjung agar lebih mudah mencari posting/ artikel kita yang menyerupai atau terkait dengan sattu kategori dengan posting tersebut.
cara membuat related post sederhana fast loading untuk blogspot

Apalagi jika judul artikel yang kita buat sangat menarik dan unik, tentu para pengunjung akan merasa penasaran untuk membacanya, dan akan berlama-lama di dalam blog kita. Dengan begitu teraffic blog pun akan meningkat. Widget related post ini bisa dibilang sangat berguna dan bermanfaat, terlebih jika blog anda memiliki banyak konten artikel yang berkualitas, maka semakin memanjakan pembaca anda untuk tetap dalam blog dalam jangka wakt yang lama.

Baca : cara membuat read more pada blogger

Ada beberapa cara membuat Related Post pada blog, bisa menggunakan gambar (thumbnail) maupun tanpa gambar. Akan tetapi saya disini hanya akan memberikan tutorial membuat artikel terkait tanpa gambar. Untuk langkah dalam pembuatanya, sebagai Berikut:

Cara membuat related post dengan gambar

Pertama-tama anda masuk dalam dasbhoard blog anda, lalu klik Template dilanjutkan dengan mengklik Edit HTML.

Langkah selanjutnya cari kode <b:includable id='post' var='post'> dan anda buka kode tersebut, lalu cari <data:post.body/> dan letakkan script CSS di bawah ini tepat di bawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 7;
var maxNumberOfLabels = 7;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 4;
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;data2007&#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>
</div>
</b:if>
Catatan:
Untuk menyesuaikan jumlah posting yang ingin anda tampilakan, ganti angka 10 yang saya beri warna biru di atas untuk jumlah artikel terkait anda.
Kemudian simpan template anda dan selesai.

Baca :cara membuat menu navigasi responsive blogger

Sampai disini dulu perjumpaan kita bila ada yang mau ditanyakan silahkan berkomentar.

2 comments :

  1. Nice related posts.... Tapi....

    <script type='text/javascript'>
    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 7;
    var maxNumberOfLabels = 7;
    maxNumberOfPostsPerLabel = 10;
    maxNumberOfLabels = 4;
    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++)

    Sintaks diatas adalah kode javascript dan membentuk DOM, dan harus diletakan dibawah <data:post.body/> pula.

    Itu memblokir render dan memotong kecepatan.

    Saya sedang mencari apakah related posts dapat dibuat hanya dengan HTML-CSS?

    ReplyDelete