How to convert blog to Magazine Style with read more button ~ SAMPATKUMARI'S Blog "PARISHKAR"

How to convert blog to Magazine Style with read more button

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
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 != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</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 == &quot;item&quot;'><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
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.


1 comment:

  1. Great Article! Keep posting such kind of information on your site Im really impressed by your site ;)

    Also I Have found very useful content for VHS to DVD transfer edmonton in Edmonton Canada you can visit the website here … www.azaudiovisualservices.com

    ReplyDelete