Blogger Hacks

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;

}

Best of PC Hacks

• Best Free Antivirus Software
• Free Hacking Tools
• 42 Sites Where To Submit Your Tutorials
• Free Logo Generator
• How To Become The SYSTEM User In Windows XP
• Free Blackberry Software

Related Posts

• Disable Cut, Copy and Paste in Windows
• Mobile Phone Hacking
• Know How Long You Have Been Running Your Computer
• Best Free Antivirus Software
• How to Change the Internet Explorer Window Title
• How to remote access your computer