Sunday, June 30, 2013

9 steps Related Posts Creating Scrolling Function

Perhaps the term related post or posts related to familiar friends. Even so, I still write down how to make scrolling function related posts. By activating the scrolling function on related posts widget so visitors no longer bothered with related articles that are too stands down. Moreover, related post widget is placed on the bottom of the post. Interested to install related posts scrolling function? But wait .. If you already installed the widget related post I've ever written a long time, then it must be removed first. Confused how to remove it? How did the backward flow (from bottom up) by following the instructions from my previous post.


In the picture there appears to be a scroll that can be hung upside down to see related postings. Okay, just to how to install related posts widget with scrolling function below your blog posts.

1. Login to blogger with your id
2. go to layout
3. On the tab menu, select Edit HTML
4. Check the small box Expand Widget Templates
5. Find <p> code <data:post.body/> </ p>
    Place the following code under the code above:
<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>

6. If so, now find the code]]> </ b: skin>
7. Place the following code under the code above:
 
.rbbox{border: 1px solid #D8D8D8;padding: 5px; background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;} .rbbox:hover{background-color: #EFFBEF;}

 8. Click the Save Template
 9. Completed

There are no Related Post article that can be replaced with your favorite text. For color codes, too, matching the design of your template. Now let's see one of your posts. Then related posts with scroll function will be under post. It looks even more beautiful with the box that surrounds this widget.  

Not easy, okay good luck.

Thank you'r review this pot artikel. Regard.

Blogger

Author: Sendi Karlita Location: Pangkalpinang, Bangka Belitung

Article 9 steps Related Posts Creating Scrolling Function, Published by Sendi Karlita on the day Sunday, June 30, 2013. Hopefully this article can add your insights. Sendi Karlita a is a writer who wants to be successful in the virtual world. Try, and keep trying. May God give consent. regards

0 comments:

Post a Comment

Enter your email address:

Delivered by FeedBurner

 

© 2013 BLOG AMAZONE ZONA - Designed by Mukund | ToS | Privacy Policy | Sitemap

About Us | Contact Us | Write For Us