Expanadable Posts

Expanadable Posts

Click on Edit Html and first backup your template by using the Download Full Template link. Then scroll down till you come to </head> tag and add the following code immediately above it :



<style>

<b:if cond='data:blog.pageType == "item"'>

span.fullpost {display:inline;}

<b:else/>

span.fullpost {display:none;}

</b:if>

</style>



Save Template. IMPORTANT NOTE in the layouts template there is a ]]></b:skin> tag just above the </head> tag. Add the above code so that it lies between these two tags. What we did here was to define a class called "fullpost" that will appear only on post pages (permalinks).







"READ MORE" LINKS



The second step is to add the Read More links which will appear after the paragraph summaries. To do this put a check in the Expand Widgets Template checkbox at the top of the Edit Template text box.

NOTE : If you do not put a check in Expand widgets template checkbox at the top of the TEMPLATE CODE BOX you will not see this code.

This is in the Edit Html subtab of Template tab. Then scroll down in the code till you come to the Blog Posts Widget code where locate this line of code :



<data:post.body/>



Add the code below immediately after the above code :



<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url' target='_blank'>Read more!</a>

</b:if>





Save Template. This link will only appear on the main page and archive pages, and it will redirect your reader to the post page containing the full text of your post.

IMPORTANT NOTE : Do not use any other code or it will give error.



You can also add your Post Title at the end of the Read More link so that it will read "Read More on "My Best Post"!"





UPDATE



A Reader wanted to increase the font size of the Read More! link. To do this add this code instead of the one above :



<b:if cond='data:blog.pageType != "item"'>

<span ><a expr:href='data:post.url' target='_blank'><font size="120" color="red">Read more!</font></a></span>

</b:if>



Increase or decrease the figure 120 as you want it and then save the template. To make the font bold use this code instead :



<b:if cond='data:blog.pageType != "item"'>

<span style="font-weight:bold;"><a expr:href='data:post.url' target='_blank'>Read more!</a></span>

</b:if>



Save Template. To do both use this 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>



Save Template.







POST MODIFICATIONS



The last step is to modify the post template so that each post when created will show you where to place your summary paragraph and where to place the rest of the post. To do this go to Settings------>Formatting and scroll down to the end of the page to the box for the Post Template. Copy and Paste the following lines there :



Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>



Save Settings. When you click on Create Post and then Edit Html tab of Post Editor you will see the following (Click Image for larger view) :