Add Read More With Thumbnail Into Blogger

How many types to Add Read More with thumbnail ?

There are mainly two way , you can Add Read More with thumbnail . One of them is regular and other is automatic. If you want to add read more option after some line of a post , you have to do a thing when you write a post. This is very easy. You can add the “Read More” option where you want to add . After all by this you can add this option any place of a post. There is no coding. The read more option  create a website or blog more readable and attractive,  and also helpful for reader to view many posts headline within a short page.

Perhaps , if you want to add Read More with thumbnail automatically , you have to do some coding on your template. This also not very difficult. If you know html and css it’s very easy for you to work with blogger tenplate .

Add “Read More” While Writing A Post ?

At first write something into your post by blogger dashboard. Now , you want to add “Read more” option, for doing this you have to select on the option indicated into the following image with red color. This option is called “Insert Jump Break” . If you click on this option a jump break will be shown into your post. You haven’t do this into “html” format mode. You have to do this into “compose” mode. You can place this “jump break” any where if you want.

Read-More-with-thumbnail h2cweb.net

Thus, you can add “Read-More” after a post . I again said that you have to do this for every post if you want to display “read more” after some line of every post. This is your post work not theme work. If you work on theme for doing this you can do it automatically for every post.

Add ” Read More with thumbnail ” Via Template ?

Step -1 : Log in your Blogger Dashboard with your gmail id and password . Scroll down your mouse pointer to find out the </head> tag. Or you can easily find </head> tag by searching it into your template. Just press ” ctrl +f ” and write this </head> tag.

Read-More-with-thumbnail-head-h2cweb

 

Step-2 : Add the following code simply by copy-paste before </head> tag. And get ready for step-3 .

    <script type=’text/javascript’>
    var thumbnail_mode = "float" ;
    summary_noimg = 230;
    summary_img = 140;
    img_thumb_height = 100;
    img_thumb_width = 100;
    </script>
    <script src=’http://h2cweb.net/demo/script/excerpt.js’ type=’text/javascript’/>

Step-3 : Now , Scroll down again your mouse pointer and find the following line. Or you can search for the following line also.

<data:post.body/>

Read-More-with-thumbnail-types-h2cweb

 

Step-4 : Replace this line with the following code and than save your blogger template.

    <b:if cond=’data:blog.pageType == "item"’>
    <data:post.body/>
    <b:else/>
    <div expr:id=’"summary" + data:post.id’>
    <data:post.body/>
    </div>
    <script type=’text/javascript’>
    createSummaryAndThumb("summary<data:post.id/>");
    </script>
    <div style=’clear: both;’/>
    <span style=’padding-top:5px;;float:right;text-align:right;’><a expr:href=’data:post.url’ rel=’bookmark’><b>Reade more >></b></a></span>
    </b:if>

This is the two types for adding read more with thumbnail into blogger. You have to keep in mind that, if you work on theme it will be work for the whole blog or site but if you work on post it will be work only for the post. I recommended to work on theme for this work. But if you want to add “read more with thumbnail” into some fixed post you can work with the first type.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.