How to Make Related Post (Related Post) with Scroll

How to Make Related Post (Related Post) with Scroll

See after this post, there was someone related post with scroll function as well ...^^
, directly to the tutorial How to Make Related Post (Related Post) with Scroll,

  • Log in to blogger
  • Open design / Design
  • Select Edit HTML
  • Check the "Expand Widget Templates"
  • Then look for the code <p> <data:post.body/> </ p> (use Ctrl + F)
  • After the meet, enter the following code under the code <p> <data:post.body/> </ p> earlier


<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>




  • Then find this code ]]></ b: skin>
  • And place the following code on it


/ *-- Related Post with Scroll --* /
. Rbbox {border: 1px solid # D8D8D8; padding: 5px;
background-color: # E0F8E0;-moz-border-radius: 5px; margin: 5px;}
. Rbbox: hover {background-color: # EFFBEF;}





  • Note:
    •  background-color: # E0F8E0; code  # E0F8E0 is color coded boxes bacgkround related post. Buddy can change the code (See: Stock Color code )
    • . Rbbox: hover {background-color: # EFFBEF;} code  # EFFBEFis color coded boxes bacgkround related post at the time highlighted by the mouse (hover). Buddy can change the code (See: Stock Color code )



    2 comments:

    Tutorial Blog said...

    nice,,i will need this tutorial when my posts are too many..btw if i wanna make the background transparent, what code that i must add to that code,,,thanks bro...
    btw, maybe you should check your grammar,,,hehe
    nice, bro..

    Internet tips and share info said...

    ok gan ... :)

    hahaha maklum gan pake google translate....hahahahha...
    soalnya ane grammar lum bener ....:)

    thanks for comment....

    Post a Comment

    :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

    My List Post