First off, special thanks to Dan Cruz. I've been struggling for a while about the blogger templates. For those who'd seen my blog a long time ago, you'd see the series of changes that took place.
Anyway, I happen to be online in YM and Dan sent me a message. It's actually been a while since I last heard from here as well as from his blog. The topic about blog layouts came about and I mentioned the difficulty I've faced.
I've done so much experimenting that I think I almost lost it. So, I simply reverted back to one of the default blogger templates -- already forgot what that one was.
Dan mentioned that he faced the same thing before -- the reason he did not update his blog for the longest time between 2007 to 2008. Turns out he's been busy studying CSS and XML. :) He suggested that I do the same, but with a little help from the site here.
Ooh boy. How great was that site! They said you will WOW when you explore the site. Well in my case, just saw the first page and already I said WOW. :) I downloaded one of the templates there. Hence, the look that you are seeing right now -- the super-customizable Professional Template.
This won't be the final look of this blog. Afterall, there's always room for improvement. But using the templates from the site is certainly a good place to start.
Well, I'm done here. It's 4AM here and I haven't slept yet. Well, technically I slept at around 3PM yesterday up until around 7:30 PM, which in restorspect, might explain why I'm still awake at this time. :)
Anyway... I think I'm rambling in my post already. Thanks for reading! :)
Showing posts with label templates. Show all posts
Showing posts with label templates. Show all posts
Wednesday, March 11, 2009
Thursday, July 10, 2008
Blogging: Related Posts
I always wanted to include a 'Related Posts' widget at the end of each post item. Thanks to a short reprieve, I was able to finally implement this in my blogs in Blogger.
So let's start:
1. Backup the existing template. (In Blogger/Blogspot, it should be in Layout > Edit Html.
2. Within the page header (i.e., section enclosed in the <HEAD> and </HEAD> tags, insert the code below. I suggest inserting it right before the </HEAD> tag.
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break; }}}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
3. With the "Expand Widgets" checked, under the 'Blog1' widget, look for the lines:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
and replace them with the following:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
4. Save the Template.
5. Navigate to Layout --> Add Page Elements, and add an HTML/Script element, name it as "Related Posts" (or whatever) which includes the following lines of code:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
6. Return to Layout --> Edit HTML, check Expand Widgets, and look for the 'Related Posts' element you just added. It should be similar to the following:
<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
7. Insert the lines in bold below. This additional two lines ensure that the "Related Posts" widget will only load when the user is currently viewing one post only.
<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
And there you have it. Whenever you view your individual posts, you should be able to see the "Related Posts" widget somewhere in the page (depends on where you put it).
Thanks for reading!
So let's start:
1. Backup the existing template. (In Blogger/Blogspot, it should be in Layout > Edit Html.
2. Within the page header (i.e., section enclosed in the <HEAD> and </HEAD> tags, insert the code below. I suggest inserting it right before the </HEAD> tag.
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break; }}}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
3. With the "Expand Widgets" checked, under the 'Blog1' widget, look for the lines:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
and replace them with the following:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
4. Save the Template.
5. Navigate to Layout --> Add Page Elements, and add an HTML/Script element, name it as "Related Posts" (or whatever) which includes the following lines of code:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
6. Return to Layout --> Edit HTML, check Expand Widgets, and look for the 'Related Posts' element you just added. It should be similar to the following:
<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
7. Insert the lines in bold below. This additional two lines ensure that the "Related Posts" widget will only load when the user is currently viewing one post only.
<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
And there you have it. Whenever you view your individual posts, you should be able to see the "Related Posts" widget somewhere in the page (depends on where you put it).
Thanks for reading!
Tuesday, July 01, 2008
Blogging: Using Expandable Posts
I had some time to spare and I used to apply expandable posts on our blogs. For the meantime, I have applied the required changes both here and in Che's blog.
It took me a while to discover exactly how to do this. So in the spirit of sharing, I might as well include the how-to of expandable posts using the "new" blogger format.
Assumptions:
This is done using the new Blogger; hence this is not a "walkthrough" for other web publishing services, such as WordPress. Regardless of the publisher, when you get down to it, it is all HTML anyway, so while the steps may not exactly be the same (as you will see later on), the principle should be the same.
Outline of Steps:
1. Editing the Conditional CSS
2. Adding the "Read More" links
3. Adding Blog Post template
Important: Regardless of whether you are new to this or not, please BACKUP your current template. For Blogger/Blogspot, this should be in Layout -> Edit HTML, then click on Download Full Template.
Once everything is set, here we go...
Step 1: CONDITIONAL CSS
First of all, we need to define within the template the "fullpost" span class. The behavior of the fullpost class is simple: if it's an item (i.e., one blog post only), display everything; otherwise, do not display the text.
1.1. Locate the </head> tag.
1.2. Immediately above/before the tag, add / modify the following code within the <style> tags
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
1.3. Save the template.
Step 2: READ MORE LINK
You are, of course, not restricted to use the words "Read more". You can opt to use something like "Click here to read the rest of the entry" or as short as "..."
2.1. For blogger users, click on "Expand Widgets".
2.2. Locate the line <data:post.body/>
2.3. Immediately below/after the above tag, add the following code:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more...</a>
</b:if>
2.4. Save the template.
Step 3: POST TEMPLATE
Now comes the editing of the actual posts. Each post would have to include <span class="fullpost">. To make life easier, Blogger included the Post Template under Settings > Formatting, so that each new post would include the above tags.
3.1. Go to Settings > Formatting, then scroll down to Post Template.
3.2. Enter the following code:
Summary here <span class="fullpost">
The rest of the post here </span>
3.3. Save Settings.
Just be mindful of the placement of the fullpost tag within your next posts and that's it.
With this, you can highlight more of your most recent posts within the main page. I remember at one point in which I had to limit the posts displayed to five or below, depepnding on the length of my post. With this one in place, your main page will act as the "index", enabling the reader to browse through the contents of your blog without actually going through entire unwanted entries.
In case of questions, just let me know.
It took me a while to discover exactly how to do this. So in the spirit of sharing, I might as well include the how-to of expandable posts using the "new" blogger format.
Assumptions:
This is done using the new Blogger; hence this is not a "walkthrough" for other web publishing services, such as WordPress. Regardless of the publisher, when you get down to it, it is all HTML anyway, so while the steps may not exactly be the same (as you will see later on), the principle should be the same.
Outline of Steps:
1. Editing the Conditional CSS
2. Adding the "Read More" links
3. Adding Blog Post template
Important: Regardless of whether you are new to this or not, please BACKUP your current template. For Blogger/Blogspot, this should be in Layout -> Edit HTML, then click on Download Full Template.
Once everything is set, here we go...
Step 1: CONDITIONAL CSS
First of all, we need to define within the template the "fullpost" span class. The behavior of the fullpost class is simple: if it's an item (i.e., one blog post only), display everything; otherwise, do not display the text.
1.1. Locate the </head> tag.
1.2. Immediately above/before the tag, add / modify the following code within the <style> tags
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
1.3. Save the template.
Step 2: READ MORE LINK
You are, of course, not restricted to use the words "Read more". You can opt to use something like "Click here to read the rest of the entry" or as short as "..."
2.1. For blogger users, click on "Expand Widgets".
2.2. Locate the line <data:post.body/>
2.3. Immediately below/after the above tag, add the following code:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more...</a>
</b:if>
2.4. Save the template.
Step 3: POST TEMPLATE
Now comes the editing of the actual posts. Each post would have to include <span class="fullpost">. To make life easier, Blogger included the Post Template under Settings > Formatting, so that each new post would include the above tags.
3.1. Go to Settings > Formatting, then scroll down to Post Template.
3.2. Enter the following code:
Summary here <span class="fullpost">
The rest of the post here </span>
3.3. Save Settings.
Just be mindful of the placement of the fullpost tag within your next posts and that's it.
With this, you can highlight more of your most recent posts within the main page. I remember at one point in which I had to limit the posts displayed to five or below, depepnding on the length of my post. With this one in place, your main page will act as the "index", enabling the reader to browse through the contents of your blog without actually going through entire unwanted entries.
In case of questions, just let me know.
Subscribe to:
Posts (Atom)