How to create Expandable Posts in Blogger (Layout Templates)
Blogger.com gives the option to choose the number of blog posts to display on the main page and then displays the contents of the posts in their entirety. When posts are long or composed of a considerable number of lines, it may be a good idea to show partial content to the user with a "Read More" link that shows the whole post. The article will explain how to create blog posts with partial content displayed or more aptly termed as 'Expandable Posts'.
- This step is same as that for Classic Templates at this link
- The next step involves adding some JavaScript code to our blog template.
The JavaScript to be added should be pasted right above the closing <head> tag. This is what needs to be added. Make sure you copy the code correctly and in its entirety:
<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
Your blog skin/theme is either a template or a layout, but not both. If there are elements that start with '<b:' it is a Layout Template; else it is a Classic Template.
- The third step is to add the 'Read More' link code within the <body> tags of the blog template. This code should surround the <data:post.body/> - do a CTRL+F to search for the phrase 'data:post.body'. Right above the line that the phrase is present, should be present the following line:
<div class='post-body'>
<div class='post'>
<div class='entry'>
<div class='post-body entry-content'>In case your template is a third-party one, it is possible for this line to be completely different.
For example, if this is what your it present in your template:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>...it should be changed to this:<div class='post-body entry-content' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
The 'Read More......' can be replaced with any other alternative message such as 'Keep Reading...', etc.
At this stage, save the template changes done so far.
- The final step is to add the <span> tags whenever a blog post is made.
On the right-hand top corner of the editor, click on 'Edit HTML'.
Put the partial content that is to be displayed above the <span id="fullpost"></span> and the rest of the content to be hidden between the opening and closing <span> tags.
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home