Tuesday, September 1, 2009
How to highlight author comments in Blogger
This will make the blog's owner comments looks different from the visitors comments.
Step 1
Login to your Blogger account and navigate to Layout section. Then go to Edit Html subtab.
Step 2
Check the Expand Widget Templates box
Step 3
Copy this script and put it before ]]></b:skin> or copy to your CSS area.
Step 4
Then find this code
Step 5
The bold text is the code that you have to add to your script. The position must be right.
Step 6
Save your template
Your own comment will be like this post see last comment.
If you want to change comment style leave a comment I will help you to customize as you like :)
Read more
Step 1
Login to your Blogger account and navigate to Layout section. Then go to Edit Html subtab.
Step 2
Check the Expand Widget Templates box
Step 3
Copy this script and put it before ]]></b:skin> or copy to your CSS area.
.author-comments {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}
Step 4
Then find this code
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
Step 5
The bold text is the code that you have to add to your script. The position must be right.
Step 6
Save your template
Your own comment will be like this post see last comment.
If you want to change comment style leave a comment I will help you to customize as you like :)
How to display codes and scripts in your blogger posts
Want to show some piece of code in your post to your readers?
Normally when you insert some code with HTML tags in your blogger composer , it will be executed and the result will be shown instead of code.
Step 1
Login to your Blogger account and navigate to Layout section. Then go to Edit Html subtab.
Step 2
Find this code ]]></b:skin> in your template code, and above this line add CSS code below and Save your Template now
Step 3
Whenever you create new posts just include the speical Script ( CSS code , Scripts , etc ) within this div section .
That it. If you have any problem to implement it, feel free to post a comment, I will help you.
Read more
Normally when you insert some code with HTML tags in your blogger composer , it will be executed and the result will be shown instead of code.
Step 1
Login to your Blogger account and navigate to Layout section. Then go to Edit Html subtab.
Step 2
Find this code ]]></b:skin> in your template code, and above this line add CSS code below and Save your Template now
.codeview {
font-family: Arial, Helvetica, sans-serif;
color: #CC0000;
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
border-top : 2px solid #cccccc;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 2px solid #cccccc;
background-color: #FFFFFF;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
font-family: Arial, Helvetica, sans-serif;
color: #CC0000;
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
border-top : 2px solid #cccccc;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 2px solid #cccccc;
background-color: #FFFFFF;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
Step 3
Whenever you create new posts just include the speical Script ( CSS code , Scripts , etc ) within this div section .
<div class="codeview">
Insert the Special code here
</div>
Insert the Special code here
</div>
That it. If you have any problem to implement it, feel free to post a comment, I will help you.
How to show your live stats (total posts and comments on your blog)
Are you interested to show your total number of posts and comments, yes I know that you love this.
example:
So lets begin / Follow Steps
1. Log in blogger dashboard
2. Click Layout --> Page Element --> Add Gadget
3. Find HTML / JavaScript and click add.
4. Copy code below and paste there.
6. Save it.
That's it, need help or want to customize it, just leave a comment.
Read more
example:
Total Posts: 1969
Total Comments: 2455
Total Comments: 2455
So lets begin / Follow Steps
1. Log in blogger dashboard
2. Click Layout --> Page Element --> Add Gadget
3. Find HTML / JavaScript and click add.
4. Copy code below and paste there.
<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="black"><script src="http://x-ab.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://x-ab.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>
5. Replace http://x-ab.blogspot.com/ with your link.function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="black"><script src="http://x-ab.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://x-ab.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>
6. Save it.
That's it, need help or want to customize it, just leave a comment.
