Membuat Related Post Lebih Indah dengan Fungsi Scroll

Tutorial related post atau artikel terkait yang akan dijelaskan, yaitu membuat related post dengan fungsi scroll dan dengan tampilan yang lebih menarik. Dengan fungsi scroll ini artikel terkait dalam jumlah yang banyak akan lebih tersusun rapi, tidak memanjang ke bawah.

Dengan begitu, related post ini akan meningkatkan perhatian pembaca terhadap artikel-artikel terkait yang ada. Tentunya hal ini akan berpengaruh terhadap pageview yang juga akan berpengaruh terhadap alexa rank.


Ini contohnya
 

• Berikut adalah langkah-langkahnya:

1. Log in ke akun blog Anda.
2. Pilih menu Layout (Tata Letak) » Edit HTML.
3. Beri tanda centang pada tulisan Expand Widget Templates.
4. Cari kode berikut:

 <p><data:post.body/></p>

Note: Tekan ctrl+f pada keyboard

    5.  Copy-paste kode berikut di bawah kode tadi.

<b:if cond='data:blog.pageType == "item"'>  <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 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; 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('albri').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> <script type="text/javascript">RelPost();</script> </DIV> </b:if><br />

    6.  Setelah itu, copy-paste kode berikut di atas kode ]]></b:skin>. (Tekan ctrl+f)

/*-----------------------------
kode related post optimal
visit http://www.ateonsoft.com
------------------------------*/
.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.  Copy-paste kode berikut dan paste di atas kode </head>  (Tekan ctrl+f)

<SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>

   8. Terakhir Simpan