Create auto expandable posts (or auto readmore) in blogger with image thumbnails

If we go back to the method of creating auto expandable posts it has really changed a lot.First we have to use <span class="fullpost"> tags in each posts for creating expandable posts.This method was really boring and contains lots of drawbacks.Therefore there should be new easy method for creating expandable posts and then new method is here.

This new method of creating auto readmore helps you to create all of your posts expandable from the first post of your blog.It also shows the thumbnail of the post in the front page.You dont have to use any tags for it.You just have to add some codes to your blog and the work is done.If you want to create these types of expandable posts the follow the simple steps below.

Before you perform any hack remember to backup your template so that you might restore your previous template in future.For this click download full template in your blogger Edit HTML page.

First of all search for the following code in your blog Edit HTML page.

<data:post.body>

Now in the second step replace the above code with the following block of codes.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more>></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Now in the last step paste the following block of code just above </head> in your blog.

<script type='text/javascript'>
summary_noimg = 450;
summary_img =350;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://deineshd.110mb.com/read-more_auto.js' type='text/javascript'/>
 

Now Save your Template to see the result.

Create Expand/Collapse or expandable content Script for Blogger

If you often visit Bloganol then you must have known a post titled expandable Content Script for blogger. That hack was not satisfying you may have felt so. In that hack the title background color and background color may not have matched your Sidebar title Background Color and Background Color. Beside that it may not have matched your post style, Font color and many more. Now Bloganol has upgraded that code for better expandable content.. Some credits of this hack also goes to flooble.

In the previous hack there were only two codes and the content was Initially hidden. But now CSS codes have been added and Initially hidden or Initially Visible style Codes are provided.Now without stretching this post lets start creating this Cool Blogger Hack.

Note : Before you start any hack Please backup your Template.

Step 1

After you goto your blog edit Html Page , copy the following CSS code and Paste it to the head section of your Template just before . This CSS code is Provided for two Templates. Minima and Denim. If you are Using Minima Template then Copy the Minima Code or If you are Using Denim Template then Copy the Denim Code and Paste just before ]]></b:skin>.

Denim Code

/* Expandable Content CSS Code for Denim Template
----------------------------------------------- */

.expandtitle{
background-color:$sidebarTitleBgColor;
color:$sidebarTitleTextColor;
padding-left:5px;
}

.expandcontent{
background-color: $mainBgColor;
color: $textColor;
}

Minima Code

/* Expandable Content CSS Code for Minima Template
----------------------------------------------- */

.expandtitle{
background-color:$sidebarbgcolor;
color:$sidebarcolor;
padding-left:5px;
}

.expandcontent{
background-color: $sidebarbgcolor;
color:$sidebartextcolor;
}

The purpose of using above CSS code is to match color of expandable content and you blog color.You can use your own choice color also. To use your own choice color replace the above color with your liked color code.

Step 2

Copy the following JavaScript code paste it just after ]]></b:skin> in your Template.

<!-- flooble Expandable Content header start -->
<script language="javascript">

// Expandable content script from flooble.com
// Promoted by bloganol.blogspot.com
// For more information please visit:
// http://www.flooble.com/scripts/expand.php
// Copyright 2002 Animus Pactum Consulting Inc.
//----------------------------------------------
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else {
return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d =
getObject(divId);
if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<!-- flooble Expandable Content header end -->

This is the most important code of this hack . If do do a simple mistake in the above code the whole hack will fail . So please copy this code as it is .

Step 3

Now Paste the following code to your blog By adding a new Html Page from your blog Layout Page.

<div class="expandtitle">
<table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr><td>  Title Here  </td><td

align="right"></div>


[<a title="show/hide" id="exp1209796610_link" href="javascript:
void(0);" onclick="toggle(this, 'exp1209796610');">&#8722;</a>]</td></tr></table></div>

<div id="exp1209796610" style="padding: 3px;" class="expandcontent">

Your Content Here.

</div>
</td></tr></table>

See the above code clearly and replace Title here with your Content Title and Replace Your Content here with your Content.

Step 4

Now two options come for you to make your expandable content Initially visible or Initially Hidden . If you like to display your expandable content Initially Hidden then paste the following code with the code from Step 3 or if you like to display it initially visible then Skip this step.

<script language="javascript">toggle(getObject('exp1209796610_link'),
'exp1209796610');</script>

Step 5

Save your Template. Oh! one thing I forgot to say that if you like to create more than one expandable content in your blog then you should not have to perform this hack from step 1 again and again . Once you Install this hack in your blog from next time you can create other expandable content by customizing the code from step 3 and Pasting it to your blog.

By using this hack you can add as much page Elements in your blog as you like beside this your blog will also look more clear and attractive. I hope you enjoy this hack and will enjoy more using it. If you like this post or Problem with this post then please Leave us a comment on this post. Or if you like to promote this post then please Link to this post in your blog.

Expandable Content Script for Blogger

I was very excited to use expandable content in my blog.It searched it for an hours and finally found it on the site named Flooble.This site contains multiple of Blogger Scripts,Blogger hacks and Many More.i think this is the greatest Hacks on this Site.They said they spent Full Two days to Build This Script.Now without wasting the time lets start creating This Hack on your blog.

The installation has Mainly two Parts . First is to put the Following Code Between <head> and </head> of your Template.Once you Paste the code in your Template you donot need to paste it again and again when you add more widgets.

<!-- flooble Expandable Content header start -->
<script language="javascript">
// Expandable content script from flooble.com
// Promoted by bloganol.blogspot.com
// For more information please visit:
// http://www.flooble.com/scripts/expand.php
// Copyright 2002 Animus Pactum Consulting Inc.
//----------------------------------------------
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else {
return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d =
getObject(divId);
if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<!-- flooble Expandable Content header end -->

And the second step is to Paste the following code to Your blog by adding a New page Element.But remember Don't write The title in when you add the Code.

<!-- flooble Expandable Content box start -->
<div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE;
"><table border="0" cellspacing="0" cellpadding="2" width="100%"
style="background: #000000; color: #FFFFFF; "><tr><td>Title Here</td><td
align="right">
[<a title="show/hide" id="exp1209796610_link" href="javascript:
void(0);" onclick="toggle(this, 'exp1209796610');"
style="text-decoration: none; color: #FFFFFF; ">−</a>]</td></tr></table>
<div id="exp1209796610" style="padding: 3px;">Content Here</div>
</div><noscript><a href="http://www.flooble.com/scripts/expand.php">this
expanable content box is made using a
free javascript from flooble</a> | <a href="http://perplexus.info/">logic
problems, math puzzles</a>
</noscript>
<script language="javascript">toggle(getObject('exp1209796610_link'),
'exp1209796610');</script>
<!-- flooble Expandable Content box end -->

In the above code Replace Title Here with your Widget Title and Replace Content Here with your Widget Code and see how my Livetraffic Code looks Like.

<!-- flooble Expandable Content box start -->
<div style="border: 1px none #000000; padding: 0px; background: #ffffff;
"><table border="0" cellspacing="0" cellpadding="2" width="100%"
style="background: #e6e6e6; color: #000000; "><tr><td>Live Traffic
Feed</td><td align="right">
[<a id="exp1209792360_link" style="text-decoration: none; color:
#000000; " href="javascript: void(0);" title="show/hide"
onclick="toggle(this, 'exp1209792360');">−</a>]</td></tr></table>
<div id="exp1209792360" style="padding: 3px;">
<script
src="http://feedjit.com/serve/?bc=FFFFFF&tc=494949&brd1=ffffff&lnk=494949&hc=336699&ww=180"
type="text/javascript"></script><noscript><a
href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript></div>
</div><noscript>
<noscript><a href="http://www.flooble.com/scripts/expand.php">this
expanable content box is made using a
free javascript from flooble</a> | <a
href="http://www.flooble.com/scripts/">free javascripts</a>
</noscript>
<script language="javascript">toggle(getObject('exp1209792360_link'),
'exp1209792360');</script>
<!-- flooble Expandable Content box end --></noscript>

Not satisfied?Then Visit Flooble Expandable Content Script Creator page.