Blogger Auto Read More With Thumbnail - OgbongeBlog Style

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

2. How to design Ogbonge 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 != "static_page"'>
<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/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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!.

Proxibiet SEO