Empower your community and drive traffic with Comments, Blog rating

Install SezWho on Blogger by Modifying New Template

This page carry instructions for modifying new blogger template, for classic template click here.

Sezwho now supports precise layout on Blogger platform. The precise layout not only adds flexibilty to lay SezWho elements where needed but also provides a way to pick and choose the specific SezWho UI features a user wants to have.

Installation Steps:

Sign into your Blogger and click on "View Blog"

Click on "Customize".
Go to the edit page and open the edit template page and check the "Expand widget template".

Before making any changes, please make sure that you take a backup of your existing template. This would be useful if you make a mistake in the process of editing the template and want to revert back to your working version.
Let's add scripts that will fetch SezWho JS and CSS files. The script is added to the head section of the template. Find the "<head>" tag and place the script right after it.

The SezWho JS and CSS file fetching script to be added is:

<script id="sz_embedded_script" src="http://sezwho.com/widgets/profile/js_output/BG/default/2.0/2.0/blogger/{Your Blog Key}"></script>
<link href='http://sezwho.com/widgets/profile/css_output/BG/default/2.0/2.0/blogger/{Your Blog Key}.css' id='szProfAndEmbedStyleSheet' media='screen' rel='stylesheet' type='text/css'/>

where {Your Blog Key} can be accessed from your SezWho account page.

Steps 4-6 are to enable SezWho on comments.

Now we will add an avatar for the comment author. Find the "<b:if cond='data:comment.authorUrl'>" tag and place the script for the avatar just after it.

The script to get comment author avatar is:

<img class='cpEmbedImageUserh' expr:id='"sz_image_link:"+data:comment.id' expr:src='"http://image.sezwho.com/getpic8.php?buid="+data:comment.authorUrl' onerror='this.src="http://s3.amazonaws.com/sz_users_images/noimg.gif"' onmousedown='javascript:SezWho.Utils.cpProfileEventHandler(event);' onmouseout='javascript:SezWho.DivUtils.cancelPopUp();' onmouseover='javascript:SezWho.Utils.cpProfileEventHandler(event);'/>

This should place the comment author avatar just before the author name. If you want to turn off the profile popup on mouseover, you can remove the onmouseover event handler from the img element.
Now we will add a comment author profile "Who am I?" link. Look for the "<data:comment.author/>" followed by a "</a>" and place the script just after it.

The script to get comment author link is:

(<a expr:id='"sz_profile_link:"+data:comment.id' href='javascript:void(0);' onmousedown='javascript:SezWho.Utils.cpProfileEventHandler(event);' onmouseout='javascript:SezWho.DivUtils.cancelPopUp();' onmouseover='javascript:SezWho.Utils.cpProfileEventHandler(event);'>
Who am I?
</a>)

This would place the "Who am I?" link next to the name of the author. You can change the link text "Who am I?" to anything else you like.
Time to add the ratings and score bar to the comment. Find the "commentDeleteIcon" followed by a "</span>" tag. Place the script after the "</span>" tag.

The script to add the ratings and score bar is:

<table class='cpEmbedPageTable' style='width: auto'>
<tr>
<td class='cpEmbedPageTableCell'>
<span class='cpEmbedPageCommFooterCS'>
<a href='javascript:void(0)' onmousedown='SezWho.DivUtils.activateRatingsHelpDIV(event);'>Rate this</a>:
</span>
</td>
<td class='cpEmbedPageTableCell'>
<ul class='cpEmbedCommScoreUl' expr:id='"cpEmbedCommScore:"+ data:comment.id' onmousedown='SezWho.Utils.ScoreDisplay.update(event)' onmousemove='SezWho.Utils.ScoreDisplay.cur(event)' title='Rate this'>
<li class='cpEmbedCommScoreLi' expr:id='"cpEmbedCommScoreLi:"+ data:comment.id' style='border: 0pt none ! important; margin: 0px ! important; padding: 0px ! important; width: 50%; list-style-image: none ! important; list-style-position: outside ! important; list-style-type: none ! important' title='2.5'/>
</ul>
</td>
<td class='cpEmbedPageTableCell'>
<span class='cpEmbedCommScoreSpan' expr:id='"cpEmbedCommScoreSpan:"+ data:comment.id' title='2.5'>2.5</span>
<span class='cpEmbedCommCountSpan' expr:id='"cpEmbedCommCountSpan:"+ data:comment.id' title='2.5'/>
</td>
</tr>
</table>

You should place the ratings bar whereever you like but typically the ratings bar is placed in or before the footer of the comment. This needs to be done only once in any template.

After all the above steps are accomplished you should see a comment page that looks like this:

Steps 7-9 are to enable SezWho on posts.

Now we will add an avatar for the post author. Look for "<data:top.authorLabel/>" tag and place the avatar script after it.

The script to get post author avatar is:

<img class='cpEmbedImageAuthor' expr:id='"sz_image_link_post:"+ data:post.id' expr:onmousedown='"javascript:void SezWho.Utils.cpProfileImgClickHandler(" + data:post.id + ",P)"' onerror='this.src="http://s3.amazonaws.com/sz_users_images/noimg.gif"' onmouseout='javascript:SezWho.DivUtils.cancelPopUp();' onmouseover='javascript:SezWho.Utils.cpProfilePostEventHandler(event)' src='http://s3.amazonaws.com/sz_users_images/noimg.gif'/>

This should place the author avatar next to the author name. If you want to turn off the profile popup on mouseover, you can remove the onmouseover event handler from the img element.
Now we will add a post author profile "Who am I?" link next to the author name. Look for "<data:post.author/>" tag and place the profile link script after it.

The script to get post author profile link is:

(<a class='cpEmbedPageProfileLink' expr:id='"sz_author_link_post:"+ data:post.id' href='javascript:void(0);' onmousedown='javascript:void SezWho.Utils.cpProfilePostEventHandler(event);' onmouseout='javascript:SezWho.DivUtils.cancelPopUp();' onmouseover='javascript:SezWho.Utils.cpProfilePostEventHandler(event)'>
Who am I?
</a>)
Now lets add the ratings and score bar to the post. If you are not interested in ratings for the posts, please skip this step. Find the "<div class='post-footer'>" tag and place the script after it.

Following script will add rating and score bar:

<table class='cpEmbedPageTable' style='width: auto'>
<tr>
<td class='cpEmbedPageTableCell'>
<span class='cpEmbedPagePostFooterCS'>
<a href='javascript:void(0)' onmousedown='SezWho.DivUtils.activateRatingsHelpDIV(event);'>
Rate this
</a>:
</span>
</td>
<td class='cpEmbedPageTableCell'>
<ul class='cpEmbedPostScoreUl' expr:id='"cpEmbedPostScore:"+ data:post.id' onmousedown='SezWho.Utils.ScoreDisplay.update(event)' onmousemove='SezWho.Utils.ScoreDisplay.cur(event)' title='Rate this'>
<li class='cpEmbedPostScoreLi' expr:id='"cpEmbedPostScoreLi:"+ data:post.id' style='border: 0pt none ! important; margin: 0px ! important; padding: 0px ! important; width: 50%; list-style-image: none ! important; list-style-position: outside ! important; list-style-type: none ! important' title='2.5'/>
</ul>
</td>
<td class='cpEmbedPageTableCell'>
<span class='cpEmbedPostScoreSpan' expr:id='"cpEmbedPostScoreSpan:"+ data:post.id' title='2.5'>2.5</span>
<span class='cpEmbedPostCountSpan' expr:id='"cpEmbedPostCountSpan:"+ data:post.id' title='2.5'/>
</td>
</tr>
</table>

After enabling SezWho on posts, a post must look like this:

If you are having difficulty modifying your template, you might want to check out the SezWho Support Forum or email us.