Read More Widget for Blogger
If you post a content to your blog it will displayed on a main page, if you have a long post content, your blog will opened more long time. But it can be tricked with a script to short your post or only abstraction post will dispaled on a main page, and the full post will replaced by "Read More" link. Here's the trick to create "Readmore"
1. You have to Login to blogger, then chose Layouts --> Edit HTML
2. Click on "Expand Widgets Template" checkbox.
3. Find the code below in your HTML Codes. ( the short way to find is by copy the code below then press "Ctrl + F" then paste in the box)
<div class='post-header-line-1'/> <div class='post-body'>
4. If you have found it, put the code below under the above code.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
5. Under the code, you will found code like this
<p><data:post.body/></p>
you have to put the code below under it.
<a expr:href='data:post.url'>Read More......</a>
</b:if>
6. You can change the "Read More" text with other.
7. Save your job.
8. Go to Setting Tab menu>Formatting
9. At the lower page you will found "text area" box beside text "Post Template"
10. Put the code below to the box
<span class="fullpost">
</span>
11. Then click Save the setting.
12. Ok, we’ve got everything all setup so it’s time to go and test it out. Hopefully you’ve got a new post in mind for your blog. If not, then we’ll just create a test post which you can later delete. When you click on the “Posting” tab, you’ll notice that the post text area is now pre-populated with the
So when writing your new post, anything you put above the
1. You have to Login to blogger, then chose Layouts --> Edit HTML
2. Click on "Expand Widgets Template" checkbox.
3. Find the code below in your HTML Codes. ( the short way to find is by copy the code below then press "Ctrl + F" then paste in the box)
<div class='post-header-line-1'/> <div class='post-body'>
4. If you have found it, put the code below under the above code.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
5. Under the code, you will found code like this
<p><data:post.body/></p>
you have to put the code below under it.
<a expr:href='data:post.url'>Read More......</a>
</b:if>
6. You can change the "Read More" text with other.
7. Save your job.
8. Go to Setting Tab menu>Formatting
9. At the lower page you will found "text area" box beside text "Post Template"
10. Put the code below to the box
<span class="fullpost">
</span>
11. Then click Save the setting.
12. Ok, we’ve got everything all setup so it’s time to go and test it out. Hopefully you’ve got a new post in mind for your blog. If not, then we’ll just create a test post which you can later delete. When you click on the “Posting” tab, you’ll notice that the post text area is now pre-populated with the
<span class="fullpost"> and
</span> tags. If not, then you didn’t save it properly so go back and redo step 8,9,10.
So when writing your new post, anything you put above the
<span class="fullpost"> tag 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 the screenshot below. Sometimes pictures illustrate better than words.
15 comments:
A special page can feature information you'd like your followers to know, while a widget featuring pictures and profiles of your subscribers can encourage more to join your page by knowing everything good that you want them to know about you.
Thank you for sharing such useful tips. I implemented these code on my blog and it works successfully.
This is very useful post for me because I have a unique article content but it's very long so I'll try your widgets. I have a confusion about the word of content reduce if I use this widgets.
Finally blogger give easy way to make read more like wordpress.com, this function only active if you use new post editor. With Jump Breaks you can show just a snippet of your post on your blog's index page. Blogger will insert a "Read more" link to the full post page where your readers can keep reading.
Thanks for the help of the simple icon! It is simple but effective...
Thank you for sharing, you're right, you're just for me is very useful. I really like your post.
If you use the new post editor (available on Blogger in Draft, or by enabling it via the Settings tab), you'll notice the "Insert jump break" icon in the editor's toolbar. Click this icon and the "jump break" will be inserted into your blog post at your cursor's position.
In fact, Christian Louboutin designs shoes that you must avoid any lubricant, it contains in its development of the oil or petroleum.
momo....so great your suggestion!tks for your sharing!
I have a blog of my family. I want read more option in my blog. I was try put this widgets in my blog. I was not got success. I like your tips regarding read more widgets. I 'll try this method and update my result. Thanks for the post.
We provide you with a fun and hassle-free shopping experience; if you know what you’re looking for, you’ll be able to find it in a snap with our signature navigation system.
I implemented these code on my blog and it works successfully.Blogger will insert a "Read more" link to the full post page where your readers can keep reading.
Microsoft can be taken together with the package for web browsing (80 cents per dollar), or applications for productivity in the office (at a cost of $ 1 for 1 hour of use), or to module for gamers (at $ 1.25 for 1 hour) that need more performance.
Food is a very important part of our life, and hence, a nutritious well.mesa weight loss
This is very useful content for all blogger, with help of all these information we can improve our blogging sped.
Post a Comment