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.
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.
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.
NOTE 3:
The edited HTML codes WILL NOT WORK without at least a label.
