Saturday, January 30, 2016
Cara Membuat Widget Related Post Fast Loading Untuk Blogspot Tanpa Javascript
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.
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:
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 == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 7;
var maxNumberOfLabels = 7;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 4;
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('data2007').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>
</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.
Sampai disini dulu perjumpaan kita bila ada yang mau ditanyakan silahkan berkomentar.
Subscribe to:
Post Comments
(
Atom
)
tutorial Seputar Blogging, Widget, Seo dll
ReplyDeleteArtikel Rewrite
Cara Membuat Author Box Untuk Sidebar
Cara Memasang Social Share Button Floating Vertikal di Blog
Cara Memasang Komentar Facebook di Blogger
Menampilkan dan Menyembunyikan Widget Blogger Hanya di Halaman Tertentu
Menghilangkan Link Gambar pada Postingan dengan JavaScript
Ebook Panduan Ternak Adsense Lengkap
Tutorial Blogger untuk Pemula 2019
Cara Membuat Backling Berkualitas [ SEO ] dengan ANCHOR TEXT
Panduan Memasang Notifikasi Adblock di Blogger
Kunjungi Juga :
Artikel Rewrite
https://artikelrewrite.blogspot.com
Nice related posts.... Tapi....
ReplyDelete<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 7;
var maxNumberOfLabels = 7;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 4;
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++)
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?