Optimize the Read More Hack on your Blogger blog using CSS –No Internal image loading & more customization option!

Cool continue reading hack for your blogger Read more hack is pretty old Blogger hacks. So you should be wondering why am I writing a post on this? Well the reason is that although there are many tutorials on this (Even one on Google Help) I could not find one to be complete and well informative! So in most of the cases while making a “Read More” hack on blogger people face problems similar to this:

When we use the <span class=”fullpost”> hack then most of the time, while writing in bullets the things goes wrong and the front page shows the dots of the bullets
If we use JavaScript based hacks then the site load time increases heavily. Also it puts tremendous load on your browser!
If we have decided to show too many posts (say 6 or 7) then due to all the images which loads on each post, the overall site loading time increases a lot!

So in this post we shall learn how to:

Make a proper Expandable post and wrap the hidden expansion into a division element (<div>)!
Style up the “Read More” button with CSS. Make two button to open on the current page and on a new page (or Tab)…

So lets get into the work…

Setting up the Conditional Codes (both CSS and Blogger code):

This is pretty much important step! Here we shall actually insert the conditional CSS based “Read more…” button. Quite easy though! Just follow the steps:

The basic code to be inserted

Go to your Blogger Dashboard > Layout > Edit HTML and save a backup copy of your template! Now click on the “Expand Widget Template” checkbox.

Now Find the closing </head> tag on the template (do a CTRL+F search). Just before that line add the following piece of conditional CSS code:

<!--My expandable post formatting inTechgrity.com-->
<style>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
.fullpost {display:none;visibility:hidden;}
.fullpost * {display:none !important;visibility:hidden !important;}
</b:if>
</style>
<!--End my expandable post formatting-->

Now Find the following piece of code:

<data:post.body/>

Replace it with this:

<data:post.body/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <p class='expandable-post'>
        <span class='expandable-post'>
            <a class='exptab1' expr:href='data:post.url' target='_parent'>[...]Continue Reading</a>
            &amp;nbsp;&amp;nbsp;--&amp;nbsp;&amp;nbsp;
            <a class='exptab2' expr:href='data:post.url' target='_blank' title='Will open up the article on a new separate tab'>{open in a new tab}</a>
        </span>
    </p>
</b:if>

Hit Save and voila! You are done! Now your new posts should be under the following formatting
```
Post Introduction
```
```
<div class="fullpost">
```
```
Main Post
```
```
</div>
```
Also, you may edit a few previous posts (say 5 or the number of posts you wish to show on the front page) in the above manner.

Understanding the Code:

On the CSS part we have instructed the Blogger XML parser to only put the CSS definition .fullpost, .fullpost * {display:none!important;} on the front page and the archive page of your blog! This hides everything written under the <div class="fullpost"> … </div> on those pages. This is why we are going to write our posts on that manner
We have basically added two Read more buttons on the front and archive pages
Default read more button:
```
<a class='exptab1' expr:href='data:post.url' target='_parent'>[...]Continue Reading</a>
```
You can change […]Continue Reading to any Read more message you wish.

Open in a New Tab button:
```
<a class='exptab2' expr:href='data:post.url' target='_blank' title='Will open up the article on a new separate tab'>{open in a new tab}</a>
```
This actually has a target="_blank" attribute which instructs the browser to open that in the new tab! You can delete the button if you do not wish to have it! Or you can change the {open in a new tab} to any value you want!

So now that our basic insertion of the code is complete, lets do some designing work using CSS [hey! that’s my favorite! :-P]

Styling up with CSS:

Just before ]]></b:skin> the add the following piece of codes:

p.expandable-post {
    text-align: right;
    margin: 0;
    clear: both;
}
 
span.expandable-post {
    padding: 5px;
    font-size: 15px;
    font-weight: bold;
    display: block;
}
 
span.expandable-post a.exptab, a.exptab1 {
    color: #003366;
}
span.expandable-post a.exptab:hover, a.exptab1:hover {
    color: #000;
}
span.expandable-post a.exptab2 {
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    background: transparent url(http://i25.tinypic.com/anmomx.jpg) no-repeat scroll right center;
    line-height: 1.8em;
    padding: 4px 20px 0 0;
}

And now preview your template! If you have done everything correctly then the final result should look something like this…

The result of the css applied

Now that is attractive isn’t it? Well, you can do more with a little bit of knowledge on CSS! Try and play with the code! (btw, we are soon going to start a series covering as many CSS related tuts as possible very soon)…

Why is this the best method?

A good question indeed. See, unlike WordPress, we don’t actually have much control over the server site commands on blogger! Now, if we do the Read-More hack using JavaScript [JS] then it will surely put huge load on your clients browser. So basically what we have done is

Instructed the browser not to display anything between any html tag having a class “fullpost”. [Let it be a <div>, <span>, <p> anything]. This makes it sure that even if due to weird behavior of blogger editor, the class migrates into the child tags of the parent <div class=”fullpost”> … </div> its display remains also hidden.
Also,the older browsers don’t cache the images inside any hidden tag! Even if new browsers like Firefox 3 cache them, they do so after the full page load ! So, here we are also on the safer side regarding Page loading

Some tips and to do’s:

Although you will be able to write on default blogger editor with no problem, but still I recommend you to go for Windows Live writer. After writing the whole tutorial go to Source mode and wrap the main part inside the div tag as shown on the image below…

using windows live writer

You can also save a template using the Text Template Plugin. Now if you really want to use Blogger Editor only, then there also you can simply save the template.

So, that was the complete tutorial on the perfect expandable post hack on blogger! If you have any problem feel free to ask us through your comments. Also if you like it, then do share it with your friends via twitter or any social bookmarking of your choice! Keep exploring and enjoying…