This post explains how to make modifications to your New Blogger template, and also houses the latest Javascript JSON library code. This will make it easier for my others articles (and ultimately my readers) as those articles will be referring to this post on how to open the template and add new code.
I. Installing Steps
A. Accessing the "Template" tab
1. If you're from your blog, and you're logged in, click on "Customize"
2. If you're from one blog, and you want to alter the template of another blog, click on "Dashboard"
3. If you're already on "Dashboard", click on "Layout"
4. if you're already inside the Setting page, click on the "Template" tab
B. Change to "Edit HTML" page
To see the template, click on Edit HTML. By default, the template does not expose the internal structure of each widget, so what you see actually is the short form of it. This is indeed a great thing, since you can see quickly how the template is made up from, in textual form. You could also insert the complete widget code of my hack (as instructed in the referred tutorials) right from this collapsed mode.
1) Before you make any serious modifications, it's best to save a copy to your hard drive.
2) Later on, you could always upload a good template up, overriding the current template.
3) This is the toggle that switches between "collapsed" and "explanded widget templates" modes.
4) To insert a new widget, enter the code inside the pair of "b:section" tags with id='sidebar', anywhere in between any two singly "b:widget" lines. Later on, once the code is accepted, it's very easy to visually drag the widget from one place to another, in "Page Element" view.
C. To add CSS or JavaScript code:
1) The preferred place to add CSS code is right in front of the closing b:skin tag
2) The preferred place to add JavaScript code is right between the closing b:skin tag and the closing head tag.
Also, if the hack is labeled as a "JSON Hack", make sure your feed setting is either "short" or "full", but not "None". Let me elaborate on this one:
a. Make sure your feed settings look like this:
b. and not like this:
Also, make sure in "Settings"->"Archiving", "Enable Post Pages?" is set to "Yes"
II. Installing the core Javacript library object
This is the only location where the Core Library will be posted. The reason I do this instead of making a link line to an external js file is because I don't want my users to have a bad feeling of not sure what's going on with the js. I want you to be in control on when you decide to update your existing library version with this latest code.
You only need to place the code below once in your template, as the code is going to be shared among the calling widgets such as TabView, Unlimited Posts, and Unlimited Comments.
Cut and paste the code and paste it between the closing </b:skin> tag and the closing </head> tag :
<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
// "cb" is intended to be a common library, where different widgets would
// utitlize the shared operations such as getTitle, getLink, etc. from a json object.
var cb = {
// search function requires these parameters:
// 1. query: a blogger address, such as "hoctro.blogspot.com",
// 2. type: type of return data, either "comments" or "posts",
// 3. start: the start-index parameter (where to start extracting data)
// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)
// 5. func: the returned function the json object will feed.
search: function(query, type, start, increment, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/' + type + '/default?alt=json-in-script&start-index='
+ start + '&max-results=' + increment + '&callback=' + func + '&orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},
// searchLabel function return a result of posts w/ a label query
// it requires these parameters:
// 1. query: a blogger address, such as "hoctro.blogspot.com",
// 2. an array of labels
// 3. func: the returned function the json object will feed.
searchLabel: function(query, label, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) +
'?alt=json-in-script&callback=' + func + '&orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},
// getTotalResults needs the json object, and it'll return the total number of comments (or posts) of the blog.
getTotalResults: function(json) {
return json.feed.openSearch$totalResults.$t;
},
// getStartIndex gets the start index of a search inside an json object.
getStartIndex: function(json) {
return json.feed.openSearch$startIndex.$t;
},
// getLink return a href link if "name" matches the content inside "a" tags) of the link
getLink: function(entry, name) {
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == name)
alturl = entry.link[k].href;
}
return alturl;
},
// getTitle gets the title of the title of an entry of a json object.
getTitle: function(entry) {
return entry.title.$t;
},
// getContent gets the content inside an entry of a json object.
getContent: function(entry) {
return entry.content.$t;
},
// getCommentAuthor: gets the commenter name inside an entry of a json object.
getCommentAuthor: function(entry) {
return entry.author[0].name.$t;
},
// Given a json label search, this function return the decoded label.
getLabelFromURL: function(json) {
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani's Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf('/')+1);
return decodeURIComponent(label);
}
}
},
txt : function (s) {
return s + " Widget by <a href='http://hoctro.blogspot.com" + "'>Hoctro</a>";
}
};
</script>
Thank you for reading.