Tutorial Membuat Artikel Terkait Di Blogspot

Cara Membuat Artikel Terkait - hello sobat blogger semua, kembali lagi di Tutorial Blogspot. Ga bosen kan mampir lagi di blog sederhana ini. Walaupun sederhana, blog ini akan selalu menyajikan informasi dan tutorial yang luar biasa. Dan pastinya sehabis sobat semua baca tutorial di blog ini. Sobat semua makin mahir dalam dunia blogging.

Sekedar mengingatkan saja, di blog ini juga ada artikel lainnya yang bisa sobat baca seperti Cara Membuat Blog Di Blogspot. Atau tutorial lain yang ngebahas tentang blogspot juga yaitu Cara upload foto atau gambar di Blogspot. Artikel itu semuanya menarik lo, rugi kalo ga baca. hehe :D

Sekarang kita menuju tutorialnya, kali ini Tutorial Blogspot akan membahas tentang bagaimana cara membuar artikel terkait di Blogspot. Langsung aja ya kita menuju pembahasannya. Tapi sebelum itu, lihat dulu tampilan Artikel terkait yang nanti sobat akan pasang. Gambaranya seperti screanshoot dibawah ini,

1. Pertama-tama sobat harus login dulu ke akun Blogger kalian.

2. Setelah itu, klik "Design" lalu "Edit HTML"

3. Sebelum mengedit kode HTML di blog kita, centang dulu "Expand Template Widgets"

4. Kemudian cari kode <data:post.body/> (untuk mempermudah, gunakan fungsi Ctrl+F. Lalu ketik kode <data:post.body/> tadi).

5. Setelah ketemu kode tadi, copy paste kode dibawah ini setelah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<br/>

<br/>

<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 = 9999;

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. Sampai sini belum selesai, masih ada satu kode lagi yang harus dimasukan. Sekarang sobat cari kode ]]></b:skin>

7. Setelah ketemu, pasti kode dibawah ini di atas kode ]]></b:skin> tadi

. rbbox {border: 1px solid #D8D8D8; padding: 5px;

background-color: #E0F8E0;-moz-border-radius: 5px; margin: 5px;}

. rbbox: hover {background-color: #EFFBEF;}

8. Dan yang terakhir, klik "Save Template". Nah, sekarang sampai sini sudah selesai. Dan untuk melihat hasilnya klik "View Blog".

Dan kalo sobat ingin lebih mempercantik, atau ingin merubah tampilan artikel terkaitnya. Bisa mengganti beberapa kode yang saya beri warna diatas. Coba ganti saja dengan kode warna yang lain. Tapi jika takut malah berantakan hasilnya, ya sudah biarkan saja seperti itu. hehe :D

Sedikit catatan, ketika mencari kode dan sobat menemukan ada beberapa kode seperti itu. Karena biasanya kode itu cuma ada satu. Tapi jika blog yang sudah menggunakan fitur read more seperti di blog saya ini. Maka kode tadi ada 2 atau 3. Dan tambahkan kode Artikel terkaitnya di kode yang kedua.

Segetu saja dulu ya tutorial Membuat Artikel Terkait di Blogspot. Jika ada tahapan yang tidak dimengerti bisa menginggalkan komentar di postingan ini. Selamat mencoba,

Anda sedang membaca artikel tentang Tutorial Membuat Artikel Terkait Di Blogspot dan anda bisa menemukan artikel Tutorial Membuat Artikel Terkait Di Blogspot ini dengan url http://caranol.blogspot.com/2012/04/tutorial-membuat-artikel-terkait.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Tutorial Membuat Artikel Terkait Di Blogspot ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Tutorial Membuat Artikel Terkait Di Blogspot sumbernya.

Artikel Terkait: