Wednesday, 17 October 2007

LENGTHY POST REMEDY FOR BLOGGER USERS

LENGTHY

If you have been noticing, I have done some modifications and housekeeping in my blog to enable my readers to have a smoother and easy browsing moments. Thanks to Azmeen’s advice on my blog’s loading time as well as how I should go about in eradicating the slowness of loading my page. I have searched through Blogger Help under “Expandable Post Summaries”. I managed to struggle through the “copy & paste” procedures by manipulating Blogger’s html codes. I did get my blog post to produce the “Read more” link but there was a problem with how the codes functioned. It appeared in all the posts, of which some may not require summarizing. That was quite irritating.


I Google for solutions for this problem and most people referred me to sites like hackosphere or freshblog where I can edit the Javascript to rectify it. For your information, Javascript looked so foreign to me. After browsing for quite some time, I managed to find the perfect solution with no Javascript needed by adding some commands in Blogger’s own pre-designed functions. I am going to show you the easiest way in few steps.

STEP BY STEP METHODS TO EDIT YOUR BLOGGER HTML CODES

STEP 1:
Sign in and go to your BLOGGER DASHBOARD. Go to SETTING/ARCHIVING, search for ENABLE POST PAGES, click YES and press SAVE SETTING.

STEP 2:
Go to FORMATTING/POST TEMPLATE and filled up the following codes, then press SAVE SETTINGS.

INTRODUCTION

<hr class=\'hr1\'><span class=\'fullpost\'>READ MORE CONTENTS</span>

STEP 3:
Go to TEMPLATE/EDIT HTML, tick the EXPAND WIDGET TEMPLATES box. Locate </head>, copy and paste the codes BELOW it.

<!-- BEGIN STYLE -->
<style>>
<b:if cond=\'data:blog.pageType == \"item\"\'>
.hr1 {display:none;}
span.more1 {display:none;}
span.fullpost {display:inline;}
<b:else/>
.hr1 {display:none;}
span.more1 {display:inline;}
span.fullpost {display:none;}
</b:if>
</style>
<!-- END STYLE -->

STEP 4:
Locate <data:post.body/>, copy and paste the following codes BELOW it.

<b:loop values=\'data:post.labels\' var=\'label\'>
<b:if cond=\'data:label.isLast\'>
<b:if cond=\'data:label.name == \"~skim\"\'>
<b:else/>
<span class=\'more1\'><a expr:href=\'data:post.url\' >Read more here…</a></span>
</b:if>
</b:if>
</b:loop>

STEP 5:
Press SAVE TEMPLATE. You have completed the editing of the HTML.

STEP 6:
Go to POSTING/CREATE. Click EDIT HTML. You will see that a line of preset code is shown there.

HTMLpix

INTRODUCTION is where you paste/write your introductory.

READ MORE CONTENTS is where you would want to continue your article when someone clicks on the “Read more here…” link.

EXAMPLE:
Here is my introductory. <hr class=\'hr1\'><span class=\'fullpost\'>My name is blah blah blah. I stay in blah blah blah. </span>

DISPLAY:
Here is my introduction.

Read more here…

WHEN CLICK ON LINK:
Here is my introductory. My name is blah blah blah. I stay in blah blah blah.

IMPORTANT THINGS TO TAKE NOTE WHEN POSTING

NOTE 1:
Most people will type in their article in word processing software (eg. MS Word) before copy and paste into the Blogger POSTING/CREATE article box. Make sure that you paste the article into EDIT HTML instead of COMPOSE area as “copy & paste” in COMPOSE will leave a lot of unnecessary codes. You can edit your fonts, color, hyperlinks after you are done in the EDIT HTML area.

COMPOSEpix

Use COMPOSE area if you decide to type in DIRECTLY.

NOTE 2:
If you have no intention of summarizing your post, please insert an additional label “~skim” in the LABEL BAR as shown below. This will shut off the “Read more here…” message.

LABELbar

NOTE 3:
The edited HTML codes WILL NOT WORK without at least a label.

9 comments:

Azmeen said...

Congratulations on getting it to work!

Loads *much* faster now that the most of your posts' graphics are under the read more fold.

By the way, I saw this -END POST- thing after your last front page post.

Is it intentional or did you forgot to take that out after working with your template?

CRIZ LAI said...

Thank for visiting Meen. I only have the energy to edit the script on the 1ast 5 posts. I have spent the whole day troubleshooting on the problem of the Blogger script. It appeared in all my posts and there's no way to remove it.

The only solution is to edit the way it behave by having the if/else command. So for those posts which I DO NOT WANT to summarize, I just put "~short" in the label/tag of the post and it will be identified as "-END POST-".

I did put this information in the TAKE NOTE area. Maybe it's not so obvious enough.. haha.

CRIZ LAI said...

Cool...Meen really rocks!! You have pointed out to me that the -END POST- message is irrelevant. I have edited the codes and now everything is so simple. I do hope this is a better solution for the Blogger users.

Wuching said...

i hate these expandable blog summaries thingies coz it means i have to click twice. & more frustratingly some blogs take forever to load.

Bell said...

Hey cool it does load faster now! I like that! But one thing I never liked about the having the summary thing is I'm perpetually lazy to click more than I need to! Haha! But that's just my own problem, not yours ^_^

Also... if you go to AlvinC's blog you'll see that clicking the "Read More" doesn't take you to a new page, just... erm... expands or opens up the post (how to say it I dunno). I'm not sure if that's a better solution, or whether that was one you didn't like cos it appeared in all posts, long or short, but I have minor issues with the "Read More" in most blogs.

Not that it'll stop me coming back or anything... ^_^

danielctw said...

To me! I am prejudice against this kind of Read More unless I really wanted to read more!

Well, it might load the main page faster, but with the second click, I sometimes don't bother but just read the summary instead!

I did play with this while I was in blogspot, but then many people say they are lazy to click twice!

PapaJoneh said...

Alamak... Criz I salute you!! Thanks for this info. I will "curi" this codes for my blogspot. :D

Ok, now.. get serious a bit here. The blog did load faster now. I just can't believe the difference it makes. Meaning, if this is what you want, you have achieved it. Congrats.

Next, about the read more thing... well, my point of view, it is practical if you have more than one post a day. As most comments I read, not only from this post, as above, visitors / readers a bit lazy to click the 2nd time. So in this case, the 1st paragraph is the most important thing here. For me, I use it mostly for my PP. If readers don't click, doesn't matter to me anyway.
So, it is all up to you. You care, you change.. that kind of thing lah. I guess u understand.
But the blog does load faster. well done. :)

danielctw said...

Oh ya... I did the Read More for my PPP post also in my domain blog. Well, it was harder with those php codes bothering me

Ignace said...

Very cool. I wish it didn't require the extra label though. I guess it's one or the other, (or the label or JavaScript) in order to not have the "read more" link on every post.

Blog Widget by LinkWithin