Pin BB

Monggo diinvite ya 765cb6f6

Cara Membuat Artikel Terkait dengan Scroll Box

 

Sobat Blogger semua dalam bahasan kali ini saya akan mengulas Cara Membuat Artikel Terkait atau Related Post di blog khususnya blogspot. Artikel terkait bertujuan untuk menghubungkan tulisan atau artikel sebelumnya atau yang artikel yang sedang dibaca sesuai denga kata kunci yang dipakai, misalkan kali ini saya memposting tentang tips dan trik Cara Membuat Artikel Terkait atau related Post. Nah tulisan yang saya beri warna merah ( tips dantrik) saya akan jadikan kata kunci atau keyword tentang postingan ini, sehingga nantinya postingan lainnya yang memakai keyword tips dan trikakan terhubung dengan postingan ini sehingga si pembaca akan diarahkan dengan hal yang berhubungan dengan tips dan trik apa saja yang kita posting.

Selain dari pada itu itung itung supaya saya selalu ingat bagaimana caranya membuat kolom Artikel terkait atau related Post, maklum saya pun terus terang baru pasang kolom Artikel Terkait atau related Post di blog saya ini karena saya termasuk orang baru dalam dunia bloging. Tapi yang saya pasang di blog saya kolom Artikel terkaitnya menggunakan tumb nail seperti anda lihat di bawah postingan ini, dan kali ini saya akan menerangkan Cara membuat Artikel terkait atau related Post menggunkan Scroll Box. Untuk Artikel Terkait Menggunakan Tumb Nail akan saya bahas di postingan berikutnya.

Berikut cara Memasang Artikel Terkait atau Related Post :

1.      Masuk ke akun blogger anda
2.    Klik Desain --- >> Templet --- >> edit HTML ( note : sebelum masuk ke edit HTML terlebih dahulu templet anda harus di backup kalau kalau terjadi error, caranya klik cadangkan / pulihkan di pojok kanan atas lalu klik unduh templet lengkap dan simpan di folder khusus dan cara untuk mngunggahnya atau uploadnya tinggal di browse aja dan cari tempplet yang anda download tadi dengan catatan kalu proses pemasangan script mengalami error )
3.      Klik edit HTML ---- >> Lanjutkan ----- >> lalu beri tanda centang pada Expand Template Widget.
4.      Cari kode berikut ini dengan cara tekan ctrl + F untuk memudahlan pencarian.

<data:post.body/></b:if>
atau bila tidak ada,cari kode ini :
<data:post.body/>

5.      Bila telah ditemukan, copy dan paste kode di bawah ini persis dibawah kode <data:post.body/></b:if>. tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>
Related Post:</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>
Tulisan yang saya beri warna biru bisa anda ganti menjadi Artikel terkait atau dibiarkan juga tidak apa-apa.

6.      Setelah itu cari kode ]]></b:skin>,dan copy kode ini :

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
7.       Lalu paste kode tersebut di atas kode ]]></b:skin>
8.       Kemudia Save dan selesai. Kalau proses save berhasil berarti script Artikel Terkait berhasil anda pasang dan anda bisa mengeceknya langsung di salah satu postingan anda, kalau ada artikel yang berhubungan dengan keyword atau kata kunci postingan tersebut akan muncul satu atau beberapa artikel yang berhubungan.

Sekian semoga artikel ini bermanfaat bagi anda semua.

Posted by syamsul arifin On Tuesday, June 12, 2012 0 komentar
Jika artikel ini bermanfaat,bagikan kepada rekan melalui:

Post a Comment

Terima kasih telah membaca artikel Tips dan Trik Syamarif , Blog ini sudah dofollow silahkan tinggalkan komentar anda.
Harap tidak membuat SPAM