Blog - Expandable Post Summaries Method

Hi Blog and readers,

FINALLY I found a method which can make a summary post on blog and allow readers to click on 'Read More' link if they are interested when especially my boring posts usually are lengthy which will kill off any readers (if there is even any).

I am very excited to share with you guys the method which works for me, after trying many other methods. (disclaimer: Maybe those methods work for you guys, but to me... it only got messed up) 

To credit where I got it from, I learned the trick from blogdoctor.com (link) and here is the method.

======================================================

Step 1

1. Login to Dashboard.
2. Click on Layout for your blog.
3. Click on Edit HTML. (remember to backup your template onto a notepad and save it somewhere)
4. Scroll or click on (ctrl+F) to </head> tag.
5. Add the following code above it:
   
   <style>
   <b:if cond='data:blog.pageType == "item"'>
   span.fullpost {display:inline;}
   <b:else/>
   span.fullpost {display:none;}
   </b:if>
   </style>


6. Save Template, then move on to step 2. (don't click 'Back')

==============================================

Step 2

1. Scroll or click on (ctrl+F) to locate this line of code (choose the second one):
   
   <data:post.body/>


2. Copy and Add the code below  the above code:
   
   <b:if cond='data:blog.pageType != "item"'>
   <span style="font-weight:bold;"><span ><a expr:href='data:post.url' target='_blank'>Read more!</a></span></span>
   </b:if>


3. Like this
   
   
4. Save Template. You won't see any changes for the moment.

==============================================

Last Step

1. Okay. You have gone through the complex part of formatting/setting up the code. Here is the last step.
2. You need to modify a current post or compose a new post.
3. After you have done composing your post. Edit in HTML tab, copy and paste the code <span class="fullpost"> and </span>
   
   

   

   
   
4. Take note. The code in red (refer to the example above) is where you insert in HTML tab. Whatever summary including image/link/paragraph, just have it above <span class="fullpost"> 
5. Whatever full post, we will place it in between <span class="fullpost"> and </span>
6. Now click on Publish button to see whether it works.

===============================================

Hope it helps some of you guys who had read until here, which I doubt there is any. I am no expert on html code or java or script, so if you have any doubt, you may go to blogdoctor and read up more.

===============================================

~Updated on 25/8/2016~

Recently my blog's alignment got some issues... 

So I have no choice but to ask for help in blogger forum. (link) and here is my post of my problem and solution. 

Thanks Goodness, the porblem had been resolved and at the same time, I can finally find a place to learn new stuff from others.

And I bumped onto a function which related to the topic and it is a SIMPLE function available in blogger! I was like making a BIG U-turn and the answer is just infront of my eyes.

Click here to read up more about that function - Jump Break.

Jeff