Blogger Hack

Here you will find great blogger hacks  which are useful to bloggers using the Blogger platform. Enjoy!

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  </head >and add this code before it

<pre>
&lt;b:if cond=’data:blog.pageType != “item”‘&gt;
&lt;script type=”text/javascript”&gt;

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(’span’);
for (var i = 0; i &amp;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 &amp;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 &amp;lt; spans.length; i++) {
if (spans[i].id == “fullpost”) {
spans[i].style.display = ‘none’;
found = 1;
}
if ((spans[i].id == “showlink”) &amp;amp;&amp;amp; (found == 0))
spans[i].style.display = ‘none’;
}
}

&lt;/script&gt;
&lt;/b:if&gt;
</pre>

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

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

In Post Template copy/paste these lines and save settings

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

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 <style> tags.

#navbar-iframe

{

height:0px; visibility:hidden; display:none;

}