Cara Membuat Related Post Dengan Scroll

Cara membuat related post pati sudah banyak dibahas di blog yang lainnya. Tapi kali ini saya akan mencoba membagikannya kepada blogger yang masih belum tahu cara memasang related post fungsi scroll. Oke Langsung saja di praktekkan ya sob..

• Pertama buka blogger.
• Kedua masuk ke template => edit template => centang expand template widget
• Lalu sobat cari kode <data:post.body/> atau <p><data:post.body/></p>
• Setelah itu letakkan kode dibawah ini tepat dibawah 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></div><script type='text/javascript'>RelPost();</script></div></b:if>

5. Jika sudah, sobat cari kode ini ]]></b:skin>

6. Lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> 

.rbbox{border: 1px solid #D8D8D8;padding: 5px;background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}.rbbox:hover{background-color: #EFFBEF;}

7. Jika sudah, yang perlu sobat lakukan adalah save template.

Untuk tulisan atau kode yang berwarna merah anda bisa menggantinya dengan Artikel Menarik Lainnya, atau apa saja terserah keinginan sobat.

Oke sob cukup sekian tutorial blog dari saya semoga bisa bermanfaat untuk blogger yang masih pemula.

Bila tutorial diatas tidak bisa , mohon berkomentar agar bisa dibetulkan.