Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Auto Readmore with Crop Image on Blogger

MyShorTTips | Blogger - The Auto Readmore function is actually to cut the article on the blogger's main page, why should it be cut? so as not to be too long ...

Indeed, the default is that all articles are displayed, the drawback is that if the article has a lot of words, it will be very long ... so that is the function of readmore, which is cutting.

In this blogger tutorial, we will discuss it for friends, making auto readmore .. so it will automatically cut, so we don't cut it manually one by one.

Auto Readmore Function


To cut articles on the front page of the blog automatically ... so we don't bother cutting them one by one.

Auto Readmore Crop Image function


So its function is actually to tidy up the image that appears on the front page. So that the front page becomes neater. For example:

this method is what I applied the Skylight Basic Template.

Weaknesses of Crop Image


The downside is the use of Javascript which has the potential to reduce pagespeed ...

Is it possible without Crop Image


Yes, you can, you can, without an image, you can, but if you don't crop it, it looks messy, aka it is not regular because it adjusts the image according to the original dimension scale.

How to make Auto Readmore with Cropped Image


We will immediately discuss the method, so first of all, please see the appearance of Auto Readmore which I applied in the SKYLIGHT BASIC v1 Blogger Template.


Such is the final result of this Blogger tutorial.

After you see the picture above ... let's follow my steps ...

Please login to Blogger first if you are not logged in -> select the theme or theme -> click the down arrow -> then you select Edit HTML 


Look for it


, You can use the search facility by pressing Ctrl + F on the keyboard, then type 



after that replace  ]]></b:skin> with the code below  :




.skylightcrop-containr{float:left;width:160px;height:120px;border:1px solid #ddd; background:#f3f3f3; margin:0px 10px 1px 0; padding:3px;}
.skylightcrop{overflow:hidden;width:160px;height:120px;border:0px solid #eaeaea;}
.skylightcrop img{margin-top:-6px;margin-left:-6px;opacity:1;}
.skylightcrop img:hover{opacity:.7;}


    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 400;
    summary_img = 300;
    img_thumb_height = &quot;&quot;;
    img_thumb_width = 190;

    <script type='text/javascript'>
    Auto-readmore -
    function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    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 0px 0px 0px;"><div class="skylightcrop-containr"><div class="skylightcrop"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div></div></span>';
    summ = summary_img;

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ)+ '...' + '</div>';
    div.innerHTML = summary;

Relax, the code above already has a ]]></b:skin>  ... so it doesn't go away .. because if  ]]></b:skin>  is missing, the code will be error later.

after that, please find

, You can use the search facility by pressing Ctrl + F on the keyboard, then type <data:post.body/>




<!-- START Auto READMORE -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" +'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<>");</script>
<span class='rmlink' style='float:right; margin-top:20px; display:inline'>
<a expr:href='data:post.url' style='padding:5px; background-color:#eee;-webkit-border-top-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px;'>Read More</a>

<b:if cond='data:blog.pageType == "item"'> 
<b:if cond='data:blog.pageType == "static_page"'>
<!-- END Auto READMORE -->

please change all for  <data:post.body/> , because usually there are 3. or less .. so just replace all  <data:post.body/> with the code above

calm down, for the code  <data:post.body/> it's not lost, so it's already in the code above, it's just a patch.


After that you SAVE ... and the case is finished, so that's the Blogger Tutorial How to make Auto Readmore with Cropped Images.

That is all, I hope there are benefits ... if not, I apologize




Post a Comment for "Auto Readmore with Crop Image on Blogger "

Article original from MyShorTTips Stuff. Don't Copied or Sale. Protected by LAW. Thanks for Reading.