Aero Up Attractive And Auto Read More with Thumbnails For Blogger

 Aero Up Attractive And Auto Read More with Thumbnails for Blogger

Talking about "Read More", The post will guide you how to get cool and stylish read more buttons replaced by images. Honestly it's almost similar with an earlier one, the only different it makes your blog more colorful and stylish, as you can see in the following screenshot. Well, just follow the simple instructions below:

How to add Stylish Auto Read More with Thumbnails for Blogger

Step 1. Login to Blogger account.

Step 2. From Dashboard > Design/Layout > Edit HTML
Step 3. Don't forget to download full template for backup
Step 4. Tick 'Expand Widget Templates'
Step 5. Use CTRL + F, find this code </head>
Step 6. Copy and paste this code below </head>

<!-- Auto read more script http://www.bloggerclick.com Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more End -->

You can change the red marked for the amount of letters as you want. summary_noimg=Amount of letter characters without image, summary_img=Amount of letter characters with image, meanwhile img_thumb_height and img_thumb_width are the size of image thumbnail (pixel).

Step 7. Use CTRL + F, find this code <data:post.body/>

Step 8. Replace with this code:

<!-- Auto read more http://www.bloggerclick.com Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more End -->

Now for the stylish button, you just simply replace the red marked "read more" with an image URL everything  you want that you hosted the image.

<img border='0' src='Your image URL is here'/>

For Example: If u using this button with URL https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-32j1NXnoIvMrfbxvzPXV3zwvTExLyAJOa7R6f5m5AU7Ke_4WrPDtaspxwAvSTEfKm7MWOdMTfTlWxbihILiXu1Ldi2-VR_DqMAcBTNEdyJ2IRZSuILNNGvidcNkJxxfRS5dkXNVh9gZb/s1600/readmore+merah.jpg

Then, it should looks like this:

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-32j1NXnoIvMrfbxvzPXV3zwvTExLyAJOa7R6f5m5AU7Ke_4WrPDtaspxwAvSTEfKm7MWOdMTfTlWxbihILiXu1Ldi2-VR_DqMAcBTNEdyJ2IRZSuILNNGvidcNkJxxfRS5dkXNVh9gZb/s1600/readmore+merah.jpg'/>

You Can  Now Save template And Enjoy New Style Readmore Button to Your Blogger!