Blogger Auto Read More With Thumbnail – OgbongeBlog Style

read more

Hello bloggers and web designers, today I am going to be unveiling the second tutorial in the series “How to Design a Professional blogger template’ which has so far required me using ogbonge blog as a case study.If you have missed other tutorials on the series view the full list of posts below.

1. How to Design a Professional Blogger Template

3. Blogger Auto Read More With Thumbnail – OgbongeBlog Style

Every blogger want to have that great, neat and fast template but it won’t be possible if we don’t learn to twerk codes by our own self, this is why this tutorial is not focusing on just giving you the scripts, rather i simply guide you and show you the importance of each CSS, Javascript or HTML you use.

See Demo Here

Automatically Add Read More Button With Thumbnail (Image)

In other to automatically add read more button with thumbnail to our blogger blog. first we need to know the importance of what we are about to do.

1. It will make your blog load faster: How? By simply adding auto read more script to your blog, you have actually informed your blog server to deliver only a few lines (text), which will make loading your blog fast

2. Neat and Look Professional:
Most blogspot premium template designers, use this same hack in making their template look professional.

3. It saves time: Instead of always using the Jump break option in the blogger text editor, you can just use the auto read more and both old and new posts will automatically show only a snippet and a thumbnail on home page and archive pages.

How To Add Auto Read More With Thumbnail

Note: This tutorial is fully based on Ogbonge blog template, both the colors and style will be just the same as that of ogbonge blog.

Step 1 – Backup Your Template

In other to prevent risking all the previous coding on your blog, you need to backup your template, by simply downloading it. Do save it with a name you can easily remember.

Step 2 – Adding The Script

This is the most crucial part of today’s tutorial, as this is the only segment where we will have to delete some code from our template and replace with another. So be cautious with this part.

Using CTRL + F search for the below code

<data:post.body/>

Note; You will find this code twice in your HTML editor. For the purpose of this tutorial, we will only be replacing the second one. If you replace the first, you won’t see any changes, so you need to replace only the second one with the code below.

Hit: Press Enter twice to find it!.  Found it? replace it with the below code.

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class=’readmore’ style=’float:right;’><a expr:href=’data:post.url’>Read More &#187;</a></span></b:if></b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’><data:post.body/></b:if>

Step 3: Styling Post Snippet And Thumbnail

Now search for </head> in your HTML editor. Found it?, Then simply paste the below code just above the </head> tag.

<script type=’text/javascript’>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 140;
</script>
<script type=’text/javascript’>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf(“<“)!=-1)
{
var s = strx.split(“<“);
for(var i=0;i<s.length;i++){
if(s[i].indexOf(“>”)!=-1){
s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length);
}
}
strx = s.join(“”);
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+’…’;
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = “”;
var img = div.getElementsByTagName(“img”);
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = ‘<span class=”posts-thumb” style=”float:left; margin-right: 10px;”><a href=”‘+ pURL +'” title=”‘+ pTITLE+'”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px” /></a></span>’;
summ = posts_thumb_sum;
}

var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<style type=’text/css’>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {
    background: none repeat scroll 0 0 #B44444;
    color: #ffffff;
    display: inline;
    font-size: 15px;
    font-weight: 400;
    line-height: 14px;
    margin-right: 12px;
    padding: 2px 5px !important;
    text-decoration: none;
    text-indent: 0;
    text-transform: uppercase;
position: relative;
    top: 20px;
}
.readmore a:visited {
    text-decoration: none;
    color: #9c4d46;
}
.read more a:link {
    text-decoration: none;
    color: #b44444;
}
</style>
</b:if>
</b:if>

Step 4: Customization

The above code, will give you exactly Ogbonge blog blogger template Homepage look but should in case you want to style it to your own taste, simply change value of the below codes to your style.

To change the number of text (characters) shown when there is no image in the post, simply replace 490 with your preferred value.

To change the number of characters shown when there is an image, simply replace 400 with your own value.

You can also increase or decrease the thumbnail width and height by replacing 180 (Width) and 160 (height) with any value you want.

Replace #B44444 with any color to change the color of the read more button.

Step 5:

Now save your template, view your blog and see the changes. Did it work perfectly or you want a little more help? share your mind with us at the comment box. Sharing is caring!.

Turn Your Thoughts Into Reality

Sign up to receive free Blogger Tutorials For Beginners to start and grow your blogspot blog in 2019

24 Responses - Post Yours!

  1. Prince John Okosun says:

    The OgbongeBlog blogger template series will render tutorials on every part of the popular blog, including ads placement.

    Do subscribe to get notified once a new post is released on the series.

    Welcome..

  2. Dammy Emmanuel says:

    Sir please we need., let me say I personally need toturial on How to place adsense code inside post. & under every post. I really love Dat ogbonge underneath style. One box and two equal link only under the boxed. Please hoping for a go reply quickly..

  3. Prince John Okosun says:

    Hello friend. Every reader of this blog will get a free copy as a gift, but this will only be made available after I round up with the series.

    For now I can not offer any copy because as I keep on posting, I also design the template along side. Do stay in touch.

    Soon you will get the free template with options to customize and change the look and feel.

  4. Prince John Okosun says:

    Very sorry for the late response. Had a very busy week but for you complain, I just tried the same codes on a test blog and it worked.

    It seems like you did not replace the second in your blog. Try again and give me a feedback!

  5. Prince John Okosun says:

    Hello Kingsley, I just checked your blog and it worked perfectly. Guess you have figured out the error yourself. I can see you are following the ogbonge series and i can tell how great your blog look already.

    Keep in touch for more posts and series

  6. Anonymous says:

    Bro I used the codes, they worked but some posts are displaying "Normal 0 false false false EN-US X-NONE X-NONE…"
    what could be the problem?

Leave a Reply

0 Shares
Tweet
Share
Pin