Membuat Menu Scroll Pada Artikel terkait

Rasanya sudah agak lama saya tidak membuat postingan tentang blogspot, pembahasan saya kali ini sebenarnya sudah lama di dunia per blogger an, tapi ga ada salahnya saya coba berikan buat sobat blogger pemula. Postingan sebelumnya, saya sudah pernah menulis tentang cara membuatartikel terkait atau related posts.

Nah, sama saja dengan yang itu, tapi akan saya tambahkan scroll down menu pada artikel terkaitnya. Ga usah panjang lebar ya, langsung aja menuju lokasi. 

1. Buka Blogger, login dengan ID sobat tentunya. 
   
2. Kemudian klik Tata Letak 
   
3. Pilih Edit HTML. 
   Lagi - lagi berhubungan dengan template, jadi saya sarankan untuk membackup templatesobat terlebih dahulu. 
   
4. Tambahkan kode berikut ini tepat dibawah <data:post.body/> 
   Jika sebelumnya sobat sudah pernah menggunakan artikel terkait, hapus saja dulu kodeartikel terkait yang lama milik sobat. 
   Dan jika sobat sudah menggunakan read more, sobat akan menemukan 2 kode<data:post.body/> 
   
5. Letakkan kode dibawah ini setelah kode <data:post.body/>yang pertama. 
   
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'> 
   <br/> 
   <br/> 
   <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 = &quot;<data:blog.homepageUrl/>&quot;; 
   var maxNumberOfPostsPerLabel = 4; 
   var maxNumberOfLabels = 10; 
   maxNumberOfPostsPerLabel = 10; 
   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> 
   
   
6. Setelah itu, letakkan kode berikut ini diatas 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);} 
   
   
7. Simpan Template.

Semoga berhasil ! Jika ada pertanyaan jangan sungkan - sungkan tanya ke saya di kolom komentar, kalau saya sempat akan saya balas. Terima kasih telah membaca artikel - artikel saya.