Don't forget to subscribe for Latest Updates!
Expandable Post Summaries is the method by which each blog post consists of a short paragraph of introduction followed by a 'Read More' link. This enables the reader to get a small introduction to each post on the main page. He can then click the Read More link if he gets sufficiently interested........
Many bloggers have reported confusion when they tried to follow the instructions on the official blogger help page for this hence I have tried to put the help in more easy to follow terms here. There are basically three steps to follow if you want to implement expandable post summaries in the new layouts template.
CONDITIONAL CSS
The first step is to put the code for the conditional css. This changes how posts display on different pages. To do this login to Dashboard and click on Layout for your blog. Then 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"!"
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) :
Replace the line "Here is the beginning of my post." (Type your summary here) with your summary paragraph. Then replace the line "And here is the rest of it." (Type rest of the post here.) with the rest of your post. Do not delete the other lines <span class="fullpost"> and </span>. Also add your summary paragraph above both the lines and your rest of the post between the lines. Then click Publish to publish post.
CREATING YOUR POSTS
Login to Blogger.com and click on +New Post link on Dashboard. The Post Editor will come up. Click on Edit Html tab in top right frame of Post Editor. This is what you should see (The colors are mine) :
Type your summary here
<span class="fullpost">
Type rest of the post here
</span>
If you want to show a photo or any text on the summary post on the Main Page put it instead of the red text line.
If you want photo to show in the full post on the Post Page put it instead of the GREEN text.
Before publishing make sure that the two span (code) lines are present and the line is at the bottom and the span=readmore line in between your summary post and the second half of the post.
Then only click on Publish button.
PLEASE NOTE
1. The hack will not apply retrospectively. That is to say after you add the code you will have to edit your past posts so that they display in summary fashion on the Main Page of the blog.
2. The hack applies only to posts on the Main Page. Once a post having the hack moves off the Main Page it does not display in this fashion. This is a Main Page Hack.
ADVANTAGES OF THIS METHOD
The advantages of this method is you get a link to your posts below your summary paragraph which gets an additional link in the search engines indexing. Also you do not have to rely on any external Javascript. The third advantage is that the Read More link opens into a new page leaving your main page still open in viewer's browser.
Don't forget to subscribe for Latest Updates!
Expandable Post Summaries is the method by which each blog post consists of a short paragraph of introduction followed by a 'Read More' link. This enables the reader to get a small introduction to each post on the main page. He can then click the Read More link if he gets sufficiently interested........
Many bloggers have reported confusion when they tried to follow the instructions on the official blogger help page for this hence I have tried to put the help in more easy to follow terms here. There are basically three steps to follow if you want to implement expandable post summaries in the new layouts template.
CONDITIONAL CSS
The first step is to put the code for the conditional css. This changes how posts display on different pages. To do this login to Dashboard and click on Layout for your blog. Then 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"!"
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) :
Replace the line "Here is the beginning of my post." (Type your summary here) with your summary paragraph. Then replace the line "And here is the rest of it." (Type rest of the post here.) with the rest of your post. Do not delete the other lines <span class="fullpost"> and </span>. Also add your summary paragraph above both the lines and your rest of the post between the lines. Then click Publish to publish post.
CREATING YOUR POSTS
Login to Blogger.com and click on +New Post link on Dashboard. The Post Editor will come up. Click on Edit Html tab in top right frame of Post Editor. This is what you should see (The colors are mine) :
Type your summary here
<span class="fullpost">
Type rest of the post here
</span>
If you want to show a photo or any text on the summary post on the Main Page put it instead of the red text line.
If you want photo to show in the full post on the Post Page put it instead of the GREEN text.
Before publishing make sure that the two span (code) lines are present and the line is at the bottom and the span=readmore line in between your summary post and the second half of the post.
Then only click on Publish button.
PLEASE NOTE
1. The hack will not apply retrospectively. That is to say after you add the code you will have to edit your past posts so that they display in summary fashion on the Main Page of the blog.
2. The hack applies only to posts on the Main Page. Once a post having the hack moves off the Main Page it does not display in this fashion. This is a Main Page Hack.
ADVANTAGES OF THIS METHOD
The advantages of this method is you get a link to your posts below your summary paragraph which gets an additional link in the search engines indexing. Also you do not have to rely on any external Javascript. The third advantage is that the Read More link opens into a new page leaving your main page still open in viewer's browser.
You can put your email link below your posts but it will be picked up by spam bots and then your inbox will soon be full of thousands of spam mails. It will be better to follow this method of putting it.......
First you will have to create an image out of your email link. For this go to :
Email Generator
OR
http://services.nexodyne.com/email
Follow the steps to make an image out of your email and then download it to your PC. Create an account at a freehost like Googlepages and upload the image there. Copy down the link of the uploaded image.
Login to Blogger Dasbhoard. Click on layouts for the blog where you want to add the link. Click on Edit Html tab at the top. First backup the template by clicking on Download Full Template link. Then put a check in Expanded widgets Template box and scroll down in Edit Template text box till you come to this line in Blog Posts widget :
<p class='post-footer-line post-footer-line-1'>
Paste the line below just under the code above :
<img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" />
Replace the CAPS with the link of your uploaded image. Preview and save Template.
CLICKABLE EMAIL LINK
To make a clickable image link paste this code instead at the same position :
<a href="mailto:xyz@gmail.com?subject=Hello%20again"><img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" /></a>
Instead of xyz@gmail.com put your own address. This method carries the risk of the address being harvested by spam bots. Save Template. Now clicking on the image will open the Compose Mail window with the address already filled in and the subject title as Hello Again.
You can put your email link below your posts but it will be picked up by spam bots and then your inbox will soon be full of thousands of spam mails. It will be better to follow this method of putting it.......
First you will have to create an image out of your email link. For this go to :
Email Generator
OR
http://services.nexodyne.com/email
Follow the steps to make an image out of your email and then download it to your PC. Create an account at a freehost like Googlepages and upload the image there. Copy down the link of the uploaded image.
Login to Blogger Dasbhoard. Click on layouts for the blog where you want to add the link. Click on Edit Html tab at the top. First backup the template by clicking on Download Full Template link. Then put a check in Expanded widgets Template box and scroll down in Edit Template text box till you come to this line in Blog Posts widget :
<p class='post-footer-line post-footer-line-1'>
Paste the line below just under the code above :
<img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" />
Replace the CAPS with the link of your uploaded image. Preview and save Template.
CLICKABLE EMAIL LINK
To make a clickable image link paste this code instead at the same position :
<a href="mailto:xyz@gmail.com?subject=Hello%20again"><img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" /></a>
Instead of xyz@gmail.com put your own address. This method carries the risk of the address being harvested by spam bots. Save Template. Now clicking on the image will open the Compose Mail window with the address already filled in and the subject title as Hello Again.
Yes, Now you can change the Title of the blogposts on individual post-view. You might have seen that I've changed the Title of my homepage to "Blogger Templates|3 Column Templates|Blogger Widgets|Blogger Hacks." This trick can help in boosting your search engine rankings.
By default, your Blogger's title on the top left displays your blog title, and if it's in the items page, it'll include your post title as well.eg, My Blog:Change the blog title for blogposts. By copying the coding from below, you can change the default behavior of the title tag.
* Step 1-Goto Blogger Dashboard>>Layout>>Edit Html
* Step 2-Backup your template
* Step 3-Follow the instructions below
Find this code in your XML template{in header}
<title><data:blog.pagetitle/></title>
Now replace it with
<!-- Start Widget-based: Changing the Blogger Title Tag -->
<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> ~ <data:blog.title/></title></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='nextprev'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!-- End Widget-based: Changing the Blogger Title Tag -->
Further more you can add a very good keyword in homepage's title by just adding Keyword + Blog Title by finding this line in the above code{3rd last}-
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
and adding keyword here
<b:else/>
<title> <data:blog.pageTitle/>Keyword</title>
</b:if>
Be creative in writing Keyword, it will surely help your blog grow and also for search engine optimization.
I would like to thank Webtalks for sharing such a great trick with us.
S/N: c9e9-aa2c-7140-f021-d009d9e9-aa2c-7140-f021-d009e9e9-aa2c-7140-f021-d009f9e9-aa2c-7140-f021-d00909e9-aa2c-7140-f021-d00919e9-aa2c-7140-f021-d00929e9-aa2c-7140-f021-d00939e9-aa2c-7140-f021-d00949e9-aa2c-7140-f021-d00959e9-aa2c-7140-f021-ddie
S/N: 09e9-aa2c-7140-f020-d00999e9-aa2c-7140-f029-d009
S/N: a9e9-aa2c-7140-f02a-d009
c9e9-aa2c-7140-f02c-d009b9e9-aa2c-7140-f02b-d009 d9e9-aa2c-7140-f02d-d009
S/N: c9e9-aa2c-7140-f021-d009d9e9-aa2c-7140-f021-d009e9e9-aa2c-7140-f021-d009f9e9-aa2c-7140-f021-d00909e9-aa2c-7140-f021-d00919e9-aa2c-7140-f021-d00929e9-aa2c-7140-f021-d00939e9-aa2c-7140-f021-d00949e9-aa2c-7140-f021-d00959e9-aa2c-7140-f021-ddie
S/N: 09e9-aa2c-7140-f020-d00999e9-aa2c-7140-f029-d009
S/N: a9e9-aa2c-7140-f02a-d009
c9e9-aa2c-7140-f02c-d009b9e9-aa2c-7140-f02b-d009 d9e9-aa2c-7140-f02d-d009