Cara Membuat Related Post Dengan Fungsi Scroll

Terasa kurang rasanya jika melihat blog atau website yang sudah senior begitu bagus dan menarik. Dan itu memicu penasaran saya bagai mana cara membuatnya. Ternyata ketika saya konsultasikan pada mbah gugel begitu banyak yang mau berbagi ilmu tentang hal yang ditanyakan. Baiklah di sini saya ingin berbagi tentang membuat related post atau artikel terkait sekaligus dalam fungsi scroll agar tidak terlalu menjuntai ke bawah (kepanjangan). Berikut langkah-langkahnya:

1. Meluncur ke Blogger--->Layouts--->Edit HTML
2. Centang bagian Expand Template Widget
3. Cari kode berikut ini:
   
   
   <data:post.body/>
4. Kemudian paste kode berikut di bawah kode tadi:
   
<b:if cond='data:blog.pageType == &quot;item&quot;'> <strong>.::Artikel Menarik Lainnya::.</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; 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;ardi33&#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. Kalau sudah tinggal copy kode berikut dan paste di bawah kode]]></b:skin>:
.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);}
6. Simpan dan lihat deh hasilnya...

.::Related Posts: