Yesterday, one of my blog readers requested for how he can make is blog to show fewer post in Homepage.
“hello admin,pls my blog homepage,when people login how can i make it to look like yours where by a post will only show not like all the whole details will just show”
The statement above was sent to me in a comment by one of this blog reader. Today, I will try to explain how to summarize content and show only summary with a “read more” thumbnail in Home page, Archives Page and Label Page using Automatic Read More simple script in your template. Using automatic read more on your blog will make your blog load faster by showing few post instead of the full post on the homepage and it will also make your blog look professional.
Read:
How to Add Related Posts Beneath Each Post on Blogger
Automatic read more for BlogSpot post can be done by inputting some code into your blog templates. Below are simple explanations on how to install Automatic Read More Hack for Blogger with Thumbnails and a snapshot of how it will look after the installation.
Now let’s start the installation:-
Note: before you make any changes on your templates, always make a back up of it.
Login in to your blogger account, then navigate to Template section of your blog .
Then search for this tag: </head> . Use Ctrl F on your keyboard to search for it.
Now place the code below above the </head> tag in your templates:
<script type='text/javascript'>
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 120;
img_thumb_width = 120;
</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(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>
Note in above codes you can change the numeric numbers according to how you wish it appears on your blog.
summary_noimg = 430; this code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 430 characters. You can customize it to suit your template
summary_img = 340; If the post contains image, then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.
img_thumb_height = 100; this tag decides the height of the thumbnail to be shown in the post. Vary the number 100 to suit your template.
img_thumb_width = 120; This tag decides the width of the Thumbnail image to be shown.
Now find
<data:post.body/>
in your template and replace it with the codes below:
<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/>");</script>
<div class='readmore-wrap'>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read More</a></span>
</div>
</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>
You can now preview your template and then save it.
It will look like this:
For help, use the comment box below.
i cant find this tag on my template
thanks to u admin…its working perfectly
How can do image active, like read more??? peoples press on image and than opened full post. dont need to press on read more or title. sorry for english
@Wlad, when you use the settings above, it will also serve the same function.
Its not working on ma blog …. help pls
Thanks Bro I have tried many, but only urs worked. am grateful. please help me check if there is anything I need to set for my blog for seo and traffic. Its a new blog I created This afternoon. Your Guide will be greatly appreciated
Blog Name is: http://odiramini.blogspot.com
@Odebright, add menus at the top of the page. Create a contact page, about page and a page for privacy policy. Since you don’t have much on the sidebars, you can go for 2 columns layout instead of 3.
Ok. Thanks alot
Bro, so how many page View should I be expecting inorder to do better?
@Tomoloju iseoluwa david, anything from 5000 Upward.
Bro… Thanks but did you thing I should Go for adsense now.. I have 1564 pageview In one month?
@Tomoloju iseoluwa david, with that page view, you can’t earn anything. Try to further work on your blog traffic.
i did it and it worked. d problm z dat i only have one post showing on the main page but when you click on ‘older posts’ the remainin posts appear normally. http://www.mydiaryasagrowinggirl.blogspot.com/
@Roxy, go to your blog setting and set the number of post you want on the homepage.
thanks.. working fine now!! totally rocking it
can u help me do it my details is polawizard@gmail.com and my password is ******
@polawizard, send your request to admin@justnaira.com
bro I cannot find the in my template what should I do now, because I have followed your procedure already.
@tomoloju iseoluwa david, it’s there. Use Ctrl + F to search for it.
What about wordpress, was it the same procedure?
@Tomoloju iseoluwa david, this is Blogger platform.
Am using nokia 2700 classic
@Tomoloju iseoluwa david, you need a computer for this.
Hello boss am using phone how can I do it with phone?
@ Tomoloju iseoluwa david, what kind of phone?
I can’t find this line on my template what should i do??
@ jamespit, what’s your blog address?
can’t find this in my template< what can i do???
@segsssss, The code didn’t show. You need to parse the code from http://www.justnaira.com/2012/09/HTML-Parse-Tool.html before you write it in comments.
hey blog i did as u ask. and it workd but gat 1 big probs after i insert the codes all my blog post are repeatn its self instd of 1 it 2… plz check for your self and tell what to do.
@Phranq, you must be missing something. Contact admin@justnaira.com for help.
@Olusanya fatoki, which code?
plz this code: is absent in my template. what should i do?
Thank You Very Much Bro! I Used Your Technique And Its Working!!
This Is My Link..http://Infoaday.Blogspot.Com/
The Ctrl+F That You Suggest Was Most Helpful..
I Just Having Difficulties With
“Now find the in your template and replace it with the code below.”
It Should Be:
“Now find ALL the in your template and replace it with the code below.”
By The Way, Thanks Again!
Thanks Master, may God Bless you more. Keep on with the good work.
thank you araba oyunları
thank you, it is working absolutel cute on my new blog.
I will definitely try these for my blog and thanks man for working comment
Thanks all, you’re all welcome.
Awesome hack for blogger user
Please disregard my previous comment – I uploaded the code and it works perfectly!
thanks alot..your code work like a charm !!….and very easy…
@techno gist You’re welcome.
Hey…thanks for the code.It work’s perfectly.See it in my blog
http://technogist.blogspot.in/