Adding Search Engine in your Blogger

This is a simple Search Engine that lets your reader to find post in your blog. If the number of your post is many, it's very useful to have a search engine on your blog's sidebar. Here is the step by step instruction to add a simple search engine in your blog.



STEP 1
Goto "Layout -> Page Elements". Click "Add a page elements" then choose "HTML/Java Script".


STEP 2
Paste the code below into "Content" Box and replace "yourblogname" with your blog name.


<form action="http://yourblogname.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>



Read More...

Add "Read more" Link under your Blogger Post

It really makes sense if your posts are too long and you would like to shorten it. From the reader's  point of view, they would feel more comfortable to read your blog if you shorten your post and provide a "Read more..." link under each post . However, Blogger with default does not provide a way to shorten your post.  But now we can do it by using this blogger hack provided by Ramani.

STEP 1
Goto Template -> Edit HTML, tick the "Expand Widget Template"
(Note: Please remember to backup your template!)

STEP 2
Find this tag


</head>

STEP 3
Copy the following code and paste it before </head> <b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>


STEP 4
Find this div for the post-body and add the portion of code in red color.


<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


STEP 5
Goto Settings -> Formatting , Copy and paste these lines into "Post Template" text box and save the settings.

Type your summary here
<span id="fullpost">
Type rest of the post here
</span>

Read More...

Adding Post Ratings to your Blogger

This blogger hack will add a star rating on your post. I think it's very cool when someone comes to your blog, they will impressed with your blog.

Here's the step by step instruction to add post ratings to your blog. If you want to add this widget instantly, you can try the one-click installation widget provide by outbrain.

STEP 1
Goto Template -> Edit HTML, tick the "Expand Widget Template"

STEP 2
Find this code

<data:post.body/>


STEP 3
Copy the code below and paste it after that line above

<script language='JavaScript'> var OutbrainPermaLink='<data:post.url/>'; var OB_demoMode = false; var OB_Script = true; </script> <script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

STEP 4
So you code should be look like this, save the template and done.

<data:post.body/>
Code Here

Read More...