Custom Search
Ads by VADpay advertising

Google Adsense for Vietnames Headline Animator

Saturday, September 6, 2008

How To Add The Blogger “Read More” Expandable Posts Link Keeping The Representative Picture

Thanks for visiting my blog. Please leave your valuable comments for this post. If you would like to read my new posts via your email, please click on Subscribe to register. Thanks also for your rating. To know more information, please visit links below:

In the previous post, I have introduced a method to add "Read more" expandble link in your blog. All the posts change automatically to this form. However, have you regconized that, when your post has a representative picture for it, it does not appear in the home page before the icon "Read more...."? In this post, I shall show you how to display the representative picture of the post together with "Read more".

Actually I translate this post from a Vietnamese Website (by Anhvo). Vietnameses can visit this Website to read for more details!

Note: If you have used the method in the previous post, you must remove the code that you have replaced for <data:post.body/>. You should go back to the previous post to look for an exactly code for removing.

For those whose try the first time with this new method, you can follow the following steps:

1. Open the tag Edit HTML, click into Expand widget templates, find <data:post.body/> in the code (use Ctrl+F) and replace it by the following code:


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


2. Add the following code in the HEAD (<head> .... </head>) of the template:


<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;

</script>
<script src='http://vietwebguide2.googlepages.com/summary-post-v20-test.js' type='text/javascript'/>


Note that, the red codes have the meanings as follow:

summary_noimg is the number of letters in the described part for posts having no representative picture.

summary_img
is the number of letters in the described part for posts having representative picture.

img_thumb_height is the height of the representative picture (pixel).

img_thumb_width is the width of the representative picture (pixel).


Now you can try this method with your blog.

12 comments:

EasyAdsenseVn said...

Thanks for your comments again!!!
Best Regards!

Vinod_Sharma said...

This is easily the best and the easiest hack for expandable posts on the net. Thank you brother. I will tell Amanda of Blogger Buster also.

EasyAdsenseVn said...

Dear Vinod_Sharma,
Thanks for your interest! I have visited your both blogs. You have some nice poems and a very nice Blogspot design.
Thanks again!

Maria Karan said...

Vietnames rules !!!!

Hi I'm from Mexico , and FINALLY, someone make this easy, fast and WORKING !!
Thanks, thanks,thanks :)

My blog is pimpeD out thanks to YOU !!

All those gurus blog wizard, all wrong, all really hard and here you are, simple, easy .... :)

Thumps up !!!

I am so happy that i will write a post of you, your blog and tell all latinamerican taht finally someone got it right !!
Please, visit my blog ... it will be an honor !!!

EasyAdsenseVn said...

Hi Maria Karan,
very very nice comment! Thanks!
I welcome always comments on my Blog!
I have visited your website. It is really nice, however it is designed in spanish, so I can just see some beautiful pictures, read and guess something, hehe.
Thanks, thanks, thanks again :-D!!!

subi said...

You deserve a 'BIG THANK YOU VERY MUCH' for this hack. Incredibly simple and easy to implement. The best ever!

Sampath Amitash said...

Superb Post man!!!! You are great !!!!
http://udownloadme.blogspot.com/

Brix said...

hi! is there anyway that I don't have to specify the image width and height for the representative picture. I wanna keep the image's default size. Thanks. :)

María Hernández said...

Hello from Canary Islands (Spain).

This hack is simple and easy to implement. Thank you.

My blog is:
http://blogearporblogear.blogspot.com/

Aman Thind said...

best ever hack for expandable posts

cheers!!!!!

bluebigbox said...

hi EasyAdsenseVn, i would like to ask some help.
i follow ur instructions clearly but then when i view my blog it appears the full topic of my blog & in the bottom of my post it appears the shorter version that has ur script. i want to hide full topic so that the expanded post only can be seen. i dnt know what is wrong, i just follow ur instructions.

Btw,im a newbie in blogging & im trying to learn more. Hope you could help me. thanks..

divxvid said...

I can't find the right words to thank you for this hack!Wonderful EasyAdsenseVn!!
I 'll try it on to my blog today (and of course i'll put a link to your page on my blog..)It works perfectly!
I am wondering if the appearing text stay the same as in post's page (i mean "bold"-in paragraphs etc)Can you do something for this?

Thanks a million!You are the chief!!

Enter your email address:

Delivered by FeedBurner

Watch the latest videos on YouTube.com
Your Name :
Your Email :
Subject :
Message :
Image (case-sensitive):