How to convert blog to Magazine Style with read more button
Users have various types of blogger templates of their choice on their blogs. But no blogger template is perfect in all respects therefore they design their templates themselves in various styles. A magazine style blogger template with a ‘Read More’ button is liked by a large number of bloggers. An existing blogger template can easily be converted into a magazine style template by making some small modifications in its template’s HTML file. This template loads fast also in comparison with others. To convert your blogger template to a magazine style template with ‘Read More’ button carefully follow the steps given below
Magazine Style With read more button
Let us start with blogger template editing. To edit the blogger template –
1. Login to Your blogger Dash board using your Google account ID and password.
2. Click ‘Template’.
3. Click ‘Edit HTML’. Now your blogger HTML document will appear.
4. Click anywhere in the open HTML document.
5. Press ‘Control Key’ and ‘F’, simultaneously, a search box will appear in the top right hand corner of the open HTML document.
6. Now you have to find this code line “<data:post.body/>”, so please write this code or copy and paste it in the HTML search box and press ‘Enter’, the code will be highlighted.
7. You have to replace this code with the following code–
<script
type='text/javascript'>
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script src='http://kfile.110mb.com/summary-post.js'
type='text/javascript'/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" +
data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a
expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType ==
"item"'><data:post.body/></b:if>
Notes –
(1) You can change the text in red colour.
(2) summary_noimg = 500; - This is height of the post without image.
(3) summary_img = 400; - This is height of the post with image.
(4) img_thumb_height = 150; - This is the height of the thumbnail image.
(5) img_thumb_width = 200; - This is the width of the is thumbnail image.
(6) You can change the figures in green colour to resize.
(7) In some Templates you will see “<p><data:post.body/></p>” instead of “<data:post.body/>”. In such case please replace “<p><data:post.body/></p>” inplace of “<data:post.body/>”.
Now you have to decide the number of posts you want to display on your blog’s home page. For it you have to make the following changes in your blog’s setting-
1. Login to Your blogger Dash board using your Google account ID and password.
2. Click ‘Setting’.
3. Click ‘Posts and Comments’. Now the following screen will appear.
 |
blogger post setting screen image
|
4. Click the dropdown menu in the right side of “Show at most”
5. Here you have two options. Option one ‘posts’ and option two ‘days’.
6. If you select option one i.e. ‘posts’ and enter figure ‘15’ in the box shown, total 15 latest posts will be displayed on your blogs home page.
7. If you choose the second option and select ‘Days’, and enter figure 30 in the box, your all posts published during the last 30 days will be displayed on the home page.
Note –
You have to insert page break in every post at the time of publishing. You can insert page break at the time of first time publishing and even later by opening the existing posts in edit mode.
blogger css codes, html blog code example, blog post layout template, how to edit blogger template xml, blogger html codes free templates, how to customize blogger template, how to add html code in blogger post, how to add custom theme in blogger, How do I change my Blogger template, How can I copy a Blogger template to another blog, How do I change the width of my HTML template in Blogger, How do I use a downloaded Blogger template.