Adding expandable "Read More" to blogger

The "Read More" buttons are everywhere throughout the professional blog sites. Now I've
finally gotten a chance to learn this blogger hack(that actually works) and ready to share.

It does a great job cleaning layouts that contain many long blog posts leaving just a portion of the entry as intro/teaser. It's simple to implement, too. Takes only 3 steps to get this thing running....


..and a few sub-steps.
Step 1:
Set up your template code.

1.Follow the steps (Be sure to download your current layout, just in case ..who knows what might happen). Expand Widget template.

Then look for

Use Ctrl+F for an easier search method.

2. Code implementation time. Copy the following codes
<b:if cond="'data:blog.pageType"><br /><style>.fullpost{display:inline;}</style><br /><p><data:post.body/></p><br /><b:else/><br /><style>.fullpost{display:none;}</style>

Then paste it right above the line you've just found like the following.


3. Cope the 2nd part of the code below.
<b:if cond="'data:blog.pageType"><br /><br /><a href="'data:post.url'">Read more...</a><br /></b:if><br /></b:if>

And paste it right below the line you've found.

That's it, major step 1's done.
-------------------------------------------------------------------------------------------------
Step 2:
To make things more efficient in the future, follow the steps below.


Then copy the codes beneath:
<span class="fullpost"><br /><br /></span>

and paste it under "Post template".

This way you won't have to add the "read more" reference codes to your entry every time you post.
-----------------------------------------------------------------------------------------------
Step 3:
Test things out by publishing a new entry.

Now, when you create a post, the codes you pasted above would already appear in the template.
As shown in the image above, above is the space for teasers. Once the reader clicks on "Read more", the content that's between the two brackets will appear.

Viola, you're done.
-----------------------------------------------------------------------------------------------------
For editing:
You can change things up abit. "Read More" might not be the perfect phrase that you're looking for, just go back to the html template and change the following to your own word choice.


I personally likes to have a photo there instead.

Hope this post's helpful. Feel free to leave a comment if you have any questions.

-Benson|| Follow me on Twitter || Join the movement|| Check the original website

Tweet