Understanding Blogger Template - 3

Feb 5, 2009

The blogger template is a xhtml document which is rendered based on variables. These tutorials aims at helping to understand the blogger template and hence to experiment, learn and change it. Blogger template has mainly three types of variables one which controls the flow of the code, one which pulls data from the databases behind and the third are expressions. This variables are then distinguished with the help of following xml namespaces.


This is third in the series of the three tutorial for Blogger Template and deals mainly with the explanation of the expr: namespace and understanding its usage. The other tuts are:


  1. Blogger Template Explanation - Sections, widgets, includables, includes. b: namespace

  2. Blogger Template Explanation - Data access. data: namespace elements.

  3. Blogger Template Explanation - How to use expr: namespace - customize links.



Expr namespace is simple but its usage is very important. Expr is basically used in conjuction with data tags. For making the blogger engine aware that the xml tag attributes coming next are having data tags in them and have to be parsed. Whenever there is a tag say anchor tag, you will have attributes like href and in that case you want the href link created dynamically with help of some data say data:post.url then you will have to use href as expr:href.


Simple implementation of expr:href in the title includable.


This includable is the title section of your blog. Check the usage of expr:href with the anchor tag.


<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>


See this code below for understanding the implementaion of expr:src and over other such tags. It is being used for parsing the data tags in image img tag attributes.


<a expr:href='data:blog.homepageUrl' style='display: block'>
<img
expr:alt='data:title'
expr:height='data:height'
expr:id='data:widget.instanceId'
expr:src='data:sourceUrl'
expr:width='data:width'
style='display: block'
/>
</a>


As you can see how expr tag is applied to the attributes selectively. Wherever data was to be used expr is applied and in style where data tag is not required the expr is ommitted. Therefore the expr namespace variables are all the attributes which might have some data namespace variable inserted in it. So use expr for data tags used in any attribute values like expr:title, expr:id, expr:onClick and so on. These attributes can be for any xml tag. I have seen it in anchor a, image img, span, div, select, input, button etc., so pretty much everything.


Example Social Bookmark StumbleUpon button for Blogger.


This code listing below explains how to insert stumble upon button for blogger. Although it serves as an example on how to do this but my main focus here is on the usage of quotes. So check how the single and double quotes are used in expr:href for creating and using the url to submit and/or thumbs up the specific post correctly. It generally does not matter that you are using single or double quotes, but when your attribute has to use both of them single quotes decide the attribute opening and closing and double quotes are understood as part of attribute.

Blogger uses single quotes for attribute values, and double quotes within, so change your code as necessary. Within the attribute value, if there are extra single or double quotes as part of the original code, e.g. Javascript, you need to escape them. Also check that the ampersand '&' is converted to '&amp;'. So you might have to create your url in this way. Check more on the stumble upon post url on their site StumbleUpon http://www.stumbleupon.com Widgets and button section.


<a
rel="nofollow"
target="_blank"
expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title'
title="StumbleUpon">
<img
src="../stumbleupon.png"
title="StumbleUpon"
alt="StumbleUpon"
class="sociable-hovers"
/>
</a>



Example Social Bookmark - Add Digg to Blogger



Again although the below code listing is an example of Adding Digg to Blogger template, my focus here is on the escaping done while using javascript. Check how data:post.url is used while inserting it in the javascript variable digg_url. You can use this code to display a counter of diggs done for your post in a neat compact manner on your blog. Check out the digg documentation of this on the http://www.digg.com tools section.


<script type="text/javascript">
digg_url = &#39;<data:post.url/>&#39;;
digg_skin = 'compact';
digg_window = 'new';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>


So as you saw proper escaping of quotes is done above. Although this is not direct example of the expr: tag usage as javascript onclick or anyother such event is not used here. But you got the logic right? But if you didn't check this code listing displaying the button to add comments. This is generally found in the footer section of your post and its obviously customisable :).


<div class='post-footer-line post-footer-line-3'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a
class='comment-link'
expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>
</span>
</div>


The data:post.addCommentOnclick generates appropriate javascript based on your blog setting for example a popup window or comment post page. And data:post.addCommentUrl will generate the url pointing to the comments for the post.

This comes to the end of the three tutorials which I was intending to write on the blogger template. But If you want anything else to be added in this tutorial series let me know and I will do it.

If you have done anything interesting with the blogger template create a back-link to it in this tutorial. Please share you comments about the things discussed and add information that you feel will benefit others. Thanks for reading.

20 comments:

Post a Comment
Tashfeen Mahmud said...

This was a great series. Thank you, and keep up the good work!

Tuan Anh said...

Nice post, thank you very much.

Dan @ J Squad said...

Thank you very much. Even though I don't get it, I feel like I am on my way!

How would I change the text of my post comment button on an existing template?

That would be very helpful.

J said...

@Dan

Hi Dan, Thanks for reading this post.

Your question -
How can I change the "Post a Comment" text?

Answer -
1. Read what I have mentioned in the first tutorial about backing up and how to upload modified layout.

2. In the downloaded xml template file search for <data:postCommentMsg/> . When found replace all of this tags with the text you want to show. for e.g. replace this tag above with "Your thoughts". And your thoughts will appear in place of "post comment" or whatever text is there.

Let me know if you still face problem.

Dan @ J Squad said...

Hi J,

I know about what you just mentioned.

I am talking about the button you click to post a comment.

The button says "Post Comment"

I want to change what the clickable button says...


Thank you for your quick response!

J said...

I think I explained it clear last time. Let me be more clear this time :).

Find this in the template ...

<a class='commentpost-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

change it to this...

<a class='commentpost-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Your Thoughts</a>

This will change the clickable button text from "Post a comment" to "Your thoughts"

Dan @ J Squad said...

I appreciate you trying to help. I tried to post some code, this post would not accept it.


I am tired and need some sleep.. I tried what you suggested, found similar code... nothing worked.:-(


Thank you for trying.:-)

Dan

Web Design Quote said...

Hello... I like your blog and the way you explain all the things that was really a good efforts. Now i can understand the templates and its type as well.Keep up the good work.

Karachi Hotel said...

Its a very good effort. Thanks for sharing some very useful techniques of programming.

tink3rkid said...

can u tell me how u got the Digg-Widget in ur sidebar

Anonymous said...

Your blog keeps getting better and better! Your older articles are not as good as newer ones you have a lot more creativity and originality now keep it up!

Ibn Hanif said...

Bhavya, Thanks for the info.

Anonymous said...

Yes there should realize the opportunity to RSS commentary, quite simply, CMS is another on the blog.

Anonymous said...

brinkka2011 says: Very effectively written information. Will probably be beneficial to anybody who usess it, together with myself. Keep up the great work – for certain ill check out more posts.

Anonymous said...

brinkka2011 says: Ive been meaning to read this and just never received a chance. Its an issue that Im really interested in, I just started reading and Im glad I did. Youre a good blogger, 1 of the best that Ive seen. This blog absolutely has some data on subject that I just wasnt aware of. Thanks for bringing this stuff to light.

Anonymous said...

Ця стаття дає світло, в якому ми можемо спостерігати реальність.

Anonymous said...

Usually dislike any form of commenting, but whenever you read a great post sometimes you just need to get out of those lazy techniques. This is such a post!

Sreedhar Pillai said...

I am trying the REACTIONS buttons in a BLOGGER template to work at http://lastingrose.blogspot.co.uk/ but
cant the reactionsUrlto update and increase the score.

The original code has expr:scr

allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/

However I use as suggested by

style="margin-bottom: -4px; margin-top: -2px;" width="90" height="19"

allowtransparency="true" class="reactions-iframe" name="reactions"

src="http://www.blogger.com/blog-post-reactions.g?options=%5BCAN'T

AGREE,+AGREE,+LIKE,+RECOMMEND,+STUPID,+HILARIOUS,+SERIOUS%5D&textColor=%23ffffff#<$BlogI

temPermalinkURL$>" frameborder="0" scrolling="no">

escaped

<iframe style="margin-bottom: -4px; margin-top: -2px;" width="90"

Any help will be very much appreciated.

height="19" allowtransparency="true"

class="reactions-iframe" name="reactions"

src="http://www.blogger.com/blog-post-reactions.g?options=%5BCAN'T

AGREE,+AGREE,+LIKE,+RECOMMEND,+STUPID,+HILARIOUS,+SERIOUS%5D&textColor=%23ffffff#&lt

;$BlogItemPermalinkURL$>" frameborder="0"

scrolling="no"></iframe>

Anonymous said...

I needed to thank you for this very good read!!

I certainly enjoyed every bit of it. I have you book marked
to check out new stuff you post…

Take a look at my blog post engagement ring mountings