Blogger Hacks

Expandable Posts or Read More Hack

Here is classic way of expanding posts which takes the reader to the post page upon clicking “Read more” link.

1) Login to blogger dashboard and go to Layout->Edit Html

2) Find  and add this code before it

<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>

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

expr:id='"post-" + data:post.id' >

     
        
        

        

        

        Read More......
       
       
     

     
 
   

4)Go to Settings->Formatting-> Post Template

In Post Template copy/paste these lines and save settings

Type your summary here

Type rest of the post here

5)If you create new post you will see area where you should type summary and where to type rest of post

Remove NavBar in Blogger

If you one of these who hate blogger navbar , you came to the right place , here I will show you how to remove it.

1) Login to blogger dashboard and go to Layout->Edit Html

2)Add the following CSS   anywhere in your template between the