Blogger Tutorials Archives - Page 2 of 6

Category: Blogger Tutorials

Highlight Author Comment in Blogspot

This trick is to give a Highlight Author Comment . This will make the blogs owner and authors comments looks different from the visitors comments. It’s very useful and interesting blogger hack tips. You can see the example in my blog. Here is what to do to make a “Highlight Author Comment” effect in Blogspot.

Login to blogger, then choose “Design –> Edit HTML”. Don’t forget to backup your template first.
Check the “Expand Widget Templates” box.

Copy this script and put it before ]]></b:skin> or copy to your CSS area.

.comment-body-author {
background: #E6E6E6;<span style="color: red;"> /* Background color*/</span>
color: #000; <span style="color: red;">/* Text color*/</span>
border-top: 1px dotted #223344;
border-bottom: 1px dotted #223344;
border-left: 1px dotted #223344;
border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; <span style="color: red;">/* Position*/</span>
}

Then Find this Code
<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>
<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>

Then Replace the above code with the below code

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<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>

Then Preview and Save your Template.

Random post with Summary widget for blogger

Hi to all you might have seen my previous Random Post widget but it was good this widget i have made has a facility to display the summary of that random post. why to display summary when the visitors visit your blog you might have not have an attractive title but your content is Rich but the earlier Random Post Only shows the title it results in loss of visitors.Again i have made it easy for all of you to install this widget.
Just Fill the Below form and enjoy your widget.

If you wish to show only title in recent post widget then use the earlier widget by clicking here.

Automatic Read More Hack with fixed pages

After a long time the most awaited Blogger feature called static pages or stand alone pages has been launched in drafts . But it has some issues with automatic expandable summaries read more trick for blogspot. With this new code you can minimize your blogger posts so that only some of your description and image appears on the homepage and the rest of all is shown when you visit that post or static page.
you might have familiar with earlier read more hack.

Just Follow this simple steps :

First log in to your blogger account.
Then click on Design Link.
Then Click on Edit HTML.
Check Expand widget content.
Then Search for below code :
</head>

Add the below code before </head> :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 300;
img_thumb_height = 130;
img_thumb_width = 160;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTagundefinedstrx,chop){
ifundefinedstrx.indexOfundefined"<")!=-1)
{
var s = strx.splitundefined"<");
forundefinedvar i=0;i<s.length;i++){
ifundefineds[i].indexOfundefined">")!=-1){
s[i] = s[i].substringundefineds[i].indexOfundefined">")+1,s[i].length);
}
}
strx = s.joinundefined"");
}
chop = undefinedchop < strx.length-1) ? chop : strx.length-2;
whileundefinedstrx.charAtundefinedchop-1)!=' ' && strx.indexOfundefined' ',chop)!=-1) chop++;
strx = strx.substringundefined0,chop-1);
return strx+'...';
}
function createSummaryAndThumbundefinedpID){
var div = document.getElementByIdundefinedpID);
var imgtag = "";
var img = div.getElementsByTagNameundefined"img");
var summ = summary_noimg;
ifundefinedimg.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTagundefineddiv.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Then Find this <data:post.body/>

Then Replace <data:post.body/> with the below code :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumbundefined&quot;summary<data:post.id/>&quot;);
</script> <span class='rmlink' style='float:right;padding-top:10px;'><a expr:href='data:post.url'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Then Click on Preview if no error occurs then just click on save.

Customization :

Now let us see how to customize the code to suit your style :

summary_noimg = 500 ;

This code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 500 characters.. you can customize it to suit ur template.

summary_img = 400 ;

If the post contains image , then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.

img_thumb_height = 130;

This tag decides the height of the thumbnail to be shown in the post. Vary the number 130 to suit your template.

img_thumb_width = 281 ;

This tag decides the width of the Thumbnail image to be shown

Changing Read More Image :

1. Find this :

http://i37.tinypic.com/351icqx.jpg

2. Change it to your desired image you want.

Having Text Instead Image :
1. Find this :

<img src=’http://i37.tinypic.com/351icqx.jpg’/>

2. And Replace it with the desired text you want to use.

How to add Attribution widget in blogger

In my previous post I told all of you that their is a new blogger widget name Attribution. As this new widget has come of our visitor named Khaled . wanted to put this widget on his blog. so he contacted through comment.If you also want anything you can do it. So now lets come to the point of to add this widget . Adding this widget is too simple .

Just Follow this simple steps :

Log in to your blogger account.
Click on the Design link.
Click on Edit HTML.
Then go to your sidebar or footer were you want to add this widget.
Their add the below code before </b:section>
<b:widget id=’Attribution1′ locked=’false’ title=” type=’Attribution’/>
Then preview it and if its ok then save it.
Then you are done.

Note if the above code doesnt work then try with below code :

<b:widget id=’Attribution1′ locked=’false’ title=” type=’Attribution’>
<b:includable id=’main’>
<div class=’widget-content’ style=’text-align: center;’>
<b:if cond=’data:attribution != ""’>
<data:attribution/>
</b:if>
</div>

<b:include name=’quickedit’/>
</b:includable>
</b:widget>
</b:section>

If you like this post then please share it with your friends and help us to grow and don’t forget to subscribe us.

Random Post Widget for Blogger

Although “Related Posts Widget” is important for all types of blogs, but in blogs where almost all the posts are similar (like blogs with articles on recipes, money-making, computer tricks or automobiles etc.), visitors usually do not mind reading some quite-unrelated posts too. So along with Related Posts widget, a “Random Posts widget” on your blog will help you to increase the number of page impressions.

Adding a Random posts widget is very easy…

Click Below button to Add the Random post Widget :

Customization :

Go to your blogger dashboard.
Then Click on the Edit Link of Random post widget.
Now Find this numofpost=6
Then Change the number from 6 to the desired number of posts you want to show.
Then Click on save button and you are done
Enjoy Random post widget.

Friends if you like it then please share it and bookmark using social networking help best2know.info to grow.

Facebook Like or Recommend Button For Blogger

Facebook has come up with a new set of Social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. You can see a demo of the like button on this page. The Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post .
Follow this Steps :
1. Login to your Blogger Account and go to Layout > Edit HTML and click on the check box which says “Expand Widget Templates”

2. Look for <data:post.body/> and immediately after that place the following code.

<!– Facebook Like button by Best2know–>
<b:if cond=’data:blog.pageType == "item"’>
<iframe allowTransparency=’true’ expr:src=’"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:450px; height:40px;’/>
</b:if>

This code will show the Like Button on Post pages only. If you want to display it everywhere, then remove the two lines of code in red.
3. Save the template and you should see the Like Button Below each of your posts.

Optional Customisations

a) Now try changing action=like to action=recommend in the code and you will see something like .
b) Try changing colorscheme=light to colorscheme=dark or colorscheme=evil
c) You can change the font by editing the font=arial parameter. You can change it to any of

font=lucida+grande
font=segoe+ui
font=tahoma
font=trebuchet+ms
font=verdana

If you liked this post, then consider “Like” ing it :)