Aug 17, 2011

Filled Under:

How to Make Dropdown - Scroll Down Related Posts in Blogger

Well, it's been long time enough I didn't posting an article post related with Blogging Tips since the last one :). Anyway this time I will share with you How to make or to add Dropdown - Scroll Down Related Posts in you Blog-Blogspot or the custome domain name you hosted on Blogspot. Back a few months ago, you might have seen in the earlier post, I have posted an article titled how to make the common related posts. However that post have a little problem if you keep adding more articles because the more you post so many articles in the same label/catagory it will be wild and it will feed your page into the bottom, and it's not looks good. But don't worry, because soon, you will know how to make dropdown - scroll down related post in the same label. So, just follow the simple instruction below:



Step 1. Login to your Blogger account

Step 2. Go to "Design" > "Edit HTML"

Step 3. Don't forget to "Download Full Template" for backup.

Step 4. Use CTRL+F and find this code <data:post.body/>

Step 5. Then you copy and paste this below that code::

<!-- START Related posts bloggerclick.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = 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;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>
<!-- END Related posts -->

If you found there's two <data:post.body/>, you should choose the first one.

Step 6. Now use CTRL+F and find this code ]]></b:skin>

Step 7. Then you copy and paste this above that code:

.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);}

Please note: For those who already used "Related posts", it's better for you to remove the previous one to use this tips, so that you won't mess up. Then you can check how it looks like, as you can see in the screenshot below:

4 comments:

  1. Hi, this plug-in can't show all post in lable :((

    ReplyDelete
  2. @interviewquestions: Thank you, hopes it's usefull for you to apply on your blog. Enjoy!

    ReplyDelete
  3. @Hai Hoang: It's should worked on your blog, please double check, and make sure you put the code in the first <data:post.body/>

    ReplyDelete