Thursday

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.



Digg Technorati del.icio.us Stumbleupon Reddit
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

Vote

Vote to My site to be nominated for Best Geek Blog!

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