Cara Buat Artikel Terkait Dibawah Posting Blogspot

Cara Membuat Artikel Terkait Dibawah Postingan Blog.

Selamat Datang di Blog Mas Bambang , dipostingan kali ini gue akan membawa anda untuk mengetahui bagaimana membuat atau memasang Artikel terkait dibawah postingan blog. Kegunaan dari artikel terkait itu sendiri ialah untuk mempercantik dan memperindah blog yang anda miliki. Selain itu, kegunaan yang paling utama dari Artikel Terkait ini yaitu untuk memudahkan para pengunjung/visitor blog anda untuk mengetahui artikel-artikel yang sudah anda buat dan membaca isi dari artikel-artikel di blog anda.

( Baca Juga Cara Membuat Dan Memasang Meta Tag Di Blogspot )

Kita ambil contoh, jikalau blog anda dikunjungi oleh pengunjung yang sedang membaca artikel yang mereka cari, saat mereka telah selesai membacanya kemudian mata mereka tertarik pada sebuah judul yang menurut mereka itu bagus, pengunjung blog anda pasti akan mengklik artikel tersebut dan ibarat yang gue jelaskan diatas, ini mampu menjadi keuntungan untuk sahabat menambah pageview sobat. Maka dari itu kita wajib untuk memasang Artikel terkait ini.

Untuk membuat dan memasang related post atau artikel terkait sempurna dibawah postingan banyak banyak sekali macamnya. Ada para blogger yang suka dengan tampilan bergambar dan ada pula yang hanya menyukai tulisannya saja.

Untuk Modelnya pun cukup banyak ragamnya, ada yang berbaris kesamping dan ada pula artikel terkait yang memanjang kebawah. Untuk tutorial kali ini, gue memberika beberapa teladan Artikel terkait untuk anda coba, mari ikuti langkah-langkahnya :

( Baca Juga Cara Membuat/Menambahkan Icon Gambar Di Samping Tulisan Pada Navbar Blogspot )

A. Artikel Terkait Part I.
Berikut tahapannya :

1. Pastikan anda login terlebih dahulu ke blog anda.
2. Setelah masuk, Pilih menu Template > Edit HTML.
3. Sebelum anda melaksanakan utak atik isyarat HTML milik blog anda, gue sarankan supaya anda memBackup terlebih dahulu untuk menghindari kesalahan dan error nantinya, kemudian centang Expand Widget Templates.
4. Kemudian anda cari kode <data:post.body/> (gunakan CTRL+F untuk memudahkan pencariannya).
5. Setelah ketemu, kemudian anda perhatikan isyarat ini biasanya ada tiga bagian, jikalau memang ada tiga anda pilih kode <data:post.body/> yang kedua.
6. Langkah berikutnya ialah anda letakan script di bawah ini setelah kode <data:post.body/>.
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='margin-top: 10px;'><strong>Artikel Terkait</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <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;ardi33&#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> </div> </b:if>
7. Terakhir save dan silahkan anda lihat hasilnya.

Catatan : Jika Artikel Terkait Tidak muncul, silahkan anda Pastekan Script di kode <data:post.body/> yang 3. Dan Jika anda ingin mengganti kata "Artikel Terkait" dengan kata-kata lain yang anda inginkan, silahkan anda ganti isyarat script yang gue beri warna Biru.

( Baca Juga Cara Membuat Judul Artikel/Postingan Berada Di Tengah Blog )

B. Artikel Terkait Part II.

Berikut tahapannya :

1. Seperti biasanya, Pastikan anda login terlebih dahulu ke blog anda.
2. Setelah masuk, Pilih menu Template > Edit HTML.
3. Sebelum anda melaksanakan utak atik isyarat HTML milik blog anda, gue sarankan supaya anda memBackup terlebih dahulu untuk menghindari kesalahan dan error nantinya, kemudian centang Expand Widget Templates.
4. Kemudian anda cari kode </head> (gunakan CTRL+F untuk memudahkan pencariannya).
5. Setelah ketemu, anda letakan script di bawah ini sempurna di bawah kode </head>.haha
<script type="text/javascript"> 

//<![CDATA[ 
var relatedTitles = new Array(); 
var relatedTitlesNum = 0; 
var relatedUrls = new Array(); 
function related_results_labels(json) { 
for (var i = 0; i < json.feed.entry.length; i++) { 
var entry = json.feed.entry[i]; 
relatedTitles[relatedTitlesNum] = entry.title.$t; 
for (var k = 0; k < entry.link.length; k++) { 
if (entry.link[k].rel == 'alternate') { 
relatedUrls[relatedTitlesNum] = entry.link[k].href; 
relatedTitlesNum++; 
break;}}}} 
function removeRelatedDuplicates() { 
var tmp = new Array(0); 
var tmp2 = new Array(0); 
for(var i = 0; i < relatedUrls.length; i++) { 
if(!contains(tmp, relatedUrls[i])) { 
tmp.length += 1; 
tmp[tmp.length - 1] = relatedUrls[i]; 
tmp2.length += 1; 
tmp2[tmp2.length - 1] = relatedTitles[i];}} 
relatedTitles = tmp2; 
relatedUrls = tmp;} 
function contains(a, e) { 
for(var j = 0; j < a.length; j++) if (a[j]==e) return true; 
return false;} 
function printRelatedLabels() { 
var r = Math.floor((relatedTitles.length - 1) * Math.random()); 
var i = 0; 
document.write('<ul>'); 
while (i < relatedTitles.length && i < 20) { 
document.write('<li><a href="' + relatedUrls[r] + '">' + 
relatedTitles[r] + '</a></li>'); 
if (r < relatedTitles.length - 1) { 
r++; 
} else { 
r = 0;}
i++;} 
document.write('</ul>');} 
//]]> 
</script>
6. Langkah berikutnya ialah, cari lagi isyarat ini <data:post.body/>, lalu copy kembali script dibawah ini sempurna dibawah kode <data:post.body/>. Jika Anda menemukan ada dua atau lebih kode <data:post.body/> letakkan script dibawah isyarat yang pertama.
<b:if cond='data:post.labels'> 

<b:loop values='data:post.labels' var='label'> 
<b:if cond='data:blog.pageType == "item"'> 
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/> 
</b:if> 
</b:loop> 
</b:if> 
<b:if cond='data:blog.pageType == "item"'> 
<h4>Artikel Terkait</h4> 
<script type="text/javascript"> 
removeRelatedDuplicates(); 
printRelatedLabels(); 
</script> 
</b:if>
7. Langkah terakhir yaitu klik save dan anda lihat hasilnya.

( Baca Juga Cara Merubah Atau Mengganti Judul Dan Deskripsi Blog )

Nah...Itulah sedikit ulasan saya mengenai Cara Membuat dan memasang Artikel Terkait. Semoga artikel yang gue buat ini dapat memiliki kegunaan dan bermanfaat buat anda yang membutuhkannya. Jika berkenan, silahkan tinggalkan komentar di kolom komentar atau di chatbox. Terima kasih dan Salam Blogger.