Convert Ur blog in to a Magazine blog ( Adding 'Read More' styles)

Is there a big different between your and my template ? hmm ? oh , yes , in my home page I have a Magazine type template with a Read More buttons and you have a blog with a homepage of posts that show their whole body and take a long time to load. And also it makes your blog more longer. ( If you are posting more than 5 posts per a page ). So , do you want to know how to add 'Read More' buttons and make your blog more profeesional ? so here is the way !


Fisrt of all , go to the Settings tab , then select Formatting tab and go to the option Show. Now add a number more than 5. ( Here in my blog , I keep about 15-20 posts in homepage )



Now

1. Edit your Template
2. Now find out


<data:post.body/>


( press 'Ctr
l' + F to open your browser's search box)

Now Replace


<data:post.body/>


with
these codes. Make sure that you REPLACE this line. In some templates , I have seen a line as


<p><data:post.body/></p>


instead of



<data:post.body/>.


If then replace the whole



<p><data:post.body/></p>


line with follwing lines.



<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 0;
img_thumb_width = 0;
</script>
<script src='http://kfile.110mb.com/summary-post.js' type='text/javascript'/>
<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'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Now follow the Safety Saving Steps.

And

That's it , now your blog will too get converted to a Magazine type template as following photo.



Do you like to add a Image too ? like in this photo ?


Then change these two lines of codes


img_thumb_height = 0;
img_thumb_width = 0;


to


img_thumb_height = 80;
img_thumb_width = 100;


or any hieght and width that you like to have.


If you want to increase your post's height ,


summary_noimg = 400;
summary_img = 300;


change these to any amount you need !


summary_noimg = 400; stand for the post's hieght without a Image.
summary_img = 300; stand for the post's hieght with the Image.



feedburner

Every New lesson , directly to your Mail Box .....

9 comments:

Nalina on June 21, 2009 at 3:59 AM said...

ela ela digatama karamu :-*

Khatia on September 4, 2009 at 7:17 PM said...

That's what I was looking for. Only my code don't contain such code at all, but something like this

}

.post-body {

Do you know how to make changes in such case?

Thank you!

DragonD on September 5, 2009 at 5:05 AM said...

@Khatia

do you expand the code ?

Khatia on September 5, 2009 at 10:40 AM said...

Thank you. I didn't think it would make such difference. I'll try it out when I get more time. Thanks!

Khatia on September 5, 2009 at 12:02 PM said...

I done everything as you said, but somehow it's not working on my blog http://abgeo.blogspot.com/

First it take way longer to download the page. Second, there is read more, but only after whole Text is displayed. and my 2 sidebars on right side were gone.

I set everything back. Do you know what reason might have been? :(

PURUSHU on December 4, 2009 at 1:51 AM said...

Dude.. it''s not workin for me too..
help me out!!!

my blog address:
http://purushu.blogspot.com

Madhawa Habarakada on June 26, 2010 at 3:52 AM said...

Yes, the code has errors, It does not work for me also. I too get the same error as Khatia.

‍ගේම් කාරයා on November 21, 2011 at 3:55 AM said...

wonder full...nice work

kanna on April 28, 2012 at 9:07 PM said...

i didn't find any of these. pls help me
 
and 
  

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

The Word Validation image has been removed and no need to Sign In. So don't be lazy ..........

 
This blog sucks under Internet Explorer.

Buy me a Coffee


Powered By

Latest Site News


Animated 3D Dock removed in order to speed up loading time and to help IE users.

This site will be come up with a DOMAIN name soon.

Link and Win competition will start as soon as the Domain name added. Join with us. You could be the winner.

Site Info

since 2009 April

Submit a Lesson

Visitors

of Visitors read Pages.

Lessons by DragonD | Template by Simran | Logo by lahirulcd | Temaplate redesigned by DragonD| Icons by DryIcons.com | Licensed under CC license Creative Commons License