Cara Membuat Artikel Terkait / Related Post dengan scroll

Cara Membuat Artikel Terkait / Related Post dengan scroll - Cara Membuat Artikel yang berkaitan - Mungkin istilah related post atau artikel terkait sudah gak asing lagi buat sobat blogger. untuk yang belum tau artikel terkait itu adalah kumpulan artikel yang berhubungan atau terkait dengan judul posting sobat,, nah untuk artikel terkait kali ini saya modifikasi dikit dengan menambahkan fungsi scroll. Dengan menambahkan fungsi scrolling pada widget related posts maka pengunjung tidak lagi merasa terganggu dengan artikel-artikel terkait yang terlalu panjang ke bawah. Apalagi widget related post ini diletakkan di bawah posting. nahh buat sobat yang terlanjur memasang widget related post lama tanpa fungsi scrolling, maka harus dihapus dulu. Bingung cara menghapusnya? Caranya lakukan dengan alur mundur (dari bawah ke atas) dengan mengikuti petunjuknya.

Contoh Artikel Terkait yang saya maksud kaya gini nihh :

Artikel Terkait

Di gambar tampak ada scroll yang bisa dinaik-turunkan untuk melihat posting-posting yang terkait. Oke, langsung saja ke  Cara Membuat Artikel Terkait / Related Post dengan scroll di bawah posting blog anda.
  1. Login ke blogger dengan id anda
  2. Klik Rancangan
  3. Pada tab menu, pilih Edit HTML
  4. Centang kotak kecil Expand Template Widget
  5. Cari kode <p><data:post.body/></p> atau <data:post.body/>
  6. Letakkan kode berikut di bawah kode tadi :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = 50;
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>
<small><p>Widget by [ <a href='http://iptek-4u.blogspot.com' target='new'>Iptek-4u</a> ]</p></small>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

7. Jika sudah, sekarang cari kode ]]></b:skin>
8. Letakkan kode berikut di atas kode tadi :

/*-- modifikasi related posts oleh http://iptek-4u.blogspot.com--*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}


9. Klik SIMPAN TEMPLATE
10. Selesai

Disana ada tulisan Related Post yang berwarna merah yang bisa diganti dengan teks favorit anda. Untuk kode warna juga demikian, sesuaikan dengan desain template anda. Sekarang coba lihat salah satu posting anda. Maka  Artikel Terkait / Related Post dengan scroll akan berada di bawah posting. Tampilannya pun lebih cantik dengan kotak yang mengelilingi widget ini. Mudah bukan, oke selamat mencoba. ^_^
Like This Article :

Baca Juga Artikel Menarik Lainnya di Bawah INI :

Rating: 4.5 | Reviewer: Fakhrian Amrullah | ItemReviewed: Cara Membuat Artikel Terkait / Related Post dengan scroll

Comment With Facebook!

+ komentar + 18 komentar

30 April 2012 19.04

mantab sob

Terimakasih Rudy Hartono atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
18 Mei 2012 14.11

sep kang bisa

Terimakasih DixyWebsite atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
20 Juni 2012 18.27

Trim Tutorialnya boss...

Terimakasih si-owner atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
28 Juli 2012 04.10

cara-membuat-artikel-terkait-related

mantap artikel'y bang,, cuman kode "data post body" diatas tidak ada di blog ku....tolong penjelasannya

Terimakasih mizwar007 atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
5 Agustus 2012 13.01

Its Works

Terimakasih Safio Wirasena atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
12 Agustus 2012 09.03

mantaf,,,
mampik k blog ane ya gan....

Terimakasih gudangbusiness atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
16 Agustus 2012 15.53

Langsung berhasil thank ya

Terimakasih Rezza Indra Rahayu atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
15 September 2012 15.56

berhasil kang....

Terimakasih prediksiangkaskor atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
25 September 2012 22.55

berhasil... tapi berat dengan script yang segitu banyak gan.. saya lepas lagi, tapi saya ucapkan thanks for sharing

Terimakasih Farhan Fikri atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
19 Oktober 2012 01.37

kog gak bisa yaaaa...

Terimakasih Arminaven Gayo atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
2 November 2012 01.47

Foto Hot ABG
www.cubicibi.com


kunjung balik y gan>>>>>>>>>>>>>>>

Terimakasih suwito senthod atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
13 November 2012 23.49

Thanks tipsnya kawan ,,
salam blogwalking ,,,

http://srezky.blogspot.com

Terimakasih Maulana Rezky atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
5 Desember 2012 14.08

udah saya praktekan gan,.
berhasill,.

makasih ya gan tutornya,.

Terimakasih YoGi VipRe atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
14 Desember 2012 15.01

THANKS INPONYA

Terimakasih HARI atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
19 Januari 2013 15.26

makasih gan tutornya..

Terimakasih rahmat kriz atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
22 Januari 2013 07.56

scirpsinya panjang banet.
makasih sob infonya

Terimakasih kumpulankoleksi2013 atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll
29 Maret 2013 17.58

mantap sob widgetnya.. salam blogger

Terimakasih Chandra Septian atas Komentarnya di Cara Membuat Artikel Terkait / Related Post dengan scroll

Posting Komentar

ExitJangan Lupa Klik Like Dan Follow ya!