Sedikit Info Seputar
How to add auto read more in blogger with thumbnail
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul How to add auto read more in blogger with thumbnail, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel Design and CSS,
Artikel How to, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
How to add auto read more in blogger with thumbnail
Terbaru
link: How to add auto read more in blogger with thumbnail
Berbagi How to add auto read more in blogger with thumbnail Terbaru dan Terlengkap 2017
- Login to your Blogger account.
- Go to Dashboard > Design > Edit HTML.
- Back up your template.
- Check the Expand Widget Templates check box on top right of the HTML window.
- In the code window, look for </head> line.
- Add the Read More code below right after that line.
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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 script End -->
7. After that, find this line: <data:post.body/>
8. Replace the line with this code:
<!-- Auto read more Start -->
<!-- http://blogger-templatees.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->
9. Click Preview. If it works, then click Save Template.
You can customize the read more by changing the values of the variables below:
- thumbnail_mode –set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
- summary_img –specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
- summary_noimg –specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
- img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).
- You can change the words “Read more” with your own by changing it in line 12 of the code in step 8.
That’s it, enjoy!