Aligned
WordPress theme was based on a Habari Project theme of the same name by
Thomas Silkjaer - The Undersigned. The theme features a grid-based
layout with two columns.
Aligned - Wordpress Theme
How to Add "Read More..." Expandable Posts link in Blogger
This tutorial is very easy if you just follow this step by step tutorial properly. With this hack, you can choose to display only a selected amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of your post, they can click a “Read more...” link to read your entire post. (Note that you’ll need to have post pages enabled in order to make this feature work.)
Update Your Template Code:
1. Login to your Blogger account and go to Layout > Edit HTML (click Expand Widget Template).
2. Find this line of code:
<data:post.body/>3. Copy this code just before the code above:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
4. Now, copy this code just after the code above (<data:post.body/>):
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>
Change the Read more... text to whatever link text you want to appear. The result should look something like this now:
5. Save your template.
Adding Class Tag in Your Default Post Template:
1. In your Blogger Dashboard, go to Settings > Formatting and scroll all the way down to the bottom. Copy this code and then save settings:
<span class="fullpost">
</span>
It should look something like this:
Creating a New Post:
When you click the Posting tab (HTML mode), you'll notice that your default post template now has <span class="fullpost"> and </span> tags. Anything you put above the tag <span class="fullpost"> will be the teaser text. The main body of your post needs to go in between the <span class="fullpost"> and </span> tags in order for the “read more…” link to work properly. See image below:
Publish or preview your new post to see your newly created "Read More..." works on your blog.Feel free to ask me if you have any problems regarding this tutorials. ENJOY!
If you cant find <data:post.body/> :
Check the [ ] Just at the top of HTML Text Area
