ကိုကြီးဇော် ( မုန်တိုင်း )

2. Go to Edit HTML
After landing to the Dashboard page, now pick your blog you want to
add with the related topics widget, and then, press the button
Layout/Design in that area. In the new page, Page Element, now switch
the sub-tab in the Edit HTML.

Anyway, before doing any kind of customization in your blog template,
i strongly suggest you to save your current template just in case if
later, you do something wrong with the template. Now click at the link
Download Full Template.

After clicking the Download Full Template link, you will be prompted
with the choice about where you are gonna put the xml file in your
Computer, just put it in the Desktop to make it easier if later you
want to switch back to the current template.

3.Give a tick at the Expand widget template
As you can see on the top of HTML box, there is a small box called
"Expand Widget Template". Now give a tick/check mark at that small
box.

4. Find the Code
By pressing Ctrl + F at the same time, now find the code below in your
blog template:

<p><data:post.body/></p>

5. Paste the Related Topic script
Right after locating the code on number 4 above, now block all the
script code below, and then, press Copy. After that, paste the code
among the code <p> and the code <data:post.body/></p>.

<div style='float:left;border:1px solid
#dfdfdf;margin:5px;padding:5px;width:200px;font-size:small;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>

<div class='widget-content'>

<div style='background: #dfdfdf; color: black; text-align: left;'>
<span style='font-family: Verdana,sans-serif;padding:4px;'>Related
Posts :</span>
</div>
<div class='boxx'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 1;

maxNumberOfPostsPerLabel = 5;
maxNumberOfLabels = 1;

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;data2007&#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>
</div>

</div>
</b:if>
</div>

As you can see in that script code above, there are certain
configuration that can be applied to the widget. For example, now pay
attention at the red code above.

1. The widget position can be adjusted to the right position by
replacing the code "left" to "right" on the code float:left.
2. The background of the widget title "Related Posts" can also be
customized by changing the code background:#dfdfdf, color:black for
font color, and the title "Related Posts :" to other title, such as
"Related Article".
3. The number of related articles shown can also be modified by
changing the numeral code 5 on the code var maxNumberOfPostsPerLabel.
4. The number of labels shown can be modified by changing the
numeral code 1 on the code var maxNumberOfLabels.

6. Save the Template
Now save the current changes by pressing the Save Template button.

As you can see in your article pages, the Related Posts widget has
been successfully installed to your blog template. Okay, that's it for
now. If you have any question regarding the installation of Related
Post widget in your blog, you can leave your question on the comment
section below.

Labels: Blogger-III