| Mobile| RSS

Showing posts with label Design. Show all posts
Showing posts with label Design. Show all posts

Related Post By Label Widget


A relatively easy method of increasing page views on your blog is to add a list of related posts below each article. This offers readers a ready-made reading list of other articles on your blog, which are of a similar theme or subject matter.

You will see it when you when you click on any of the post it will be shown under the post. You can see it in my blog also.

Sign in to Blogger

Dashboard --> Layout --> Html (Check Expand Widget)

Search for the following:(Use Ctrl+F for easy searching)

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

Now paste the following code right after it.


<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->

<!--
Modified by Hoctro to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->

<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/>
<div id='hoctro'>
</div>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {search10(homeUrl3, textLabel);
numLabel++;}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Note : Always back up your template before doing this or preview it before saving.

| posted in , , | [ More ]

Remove Navigation Bar from your Blog

How to Remove or Hide Navigation Bar of Blogger Blog

Please Note: Before Editing your Template, Save a copy of your current template by clicking 'Download Full Template' in 'Edit HTML' page of the Blogger 'Layout' Window and 'Preview' the changes before Saving.

| posted in , | [ More ]

Animated Banner for your Blog

This article is about creating a nice looking banner that incorporates rotating headlines of your 5 recent Blog articles. If you have submitted your Blog to different Blog Directories, you would come across some which ask for your banner. It is nothing more than a picture to represent your Blog.

| posted in | [ More ]