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!
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
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:
2. Add the following code in the HEAD (<head> .... </head>) of the template:
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.
<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>
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:
Thanks for your comments again!!!
Best Regards!
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.
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!
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 !!!
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!!!
You deserve a 'BIG THANK YOU VERY MUCH' for this hack. Incredibly simple and easy to implement. The best ever!
Superb Post man!!!! You are great !!!!
http://udownloadme.blogspot.com/
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. :)
Hello from Canary Islands (Spain).
This hack is simple and easy to implement. Thank you.
My blog is:
http://blogearporblogear.blogspot.com/
best ever hack for expandable posts
cheers!!!!!
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..
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!!
Post a Comment