• Tạo Read More tự động với hình đại diện trên Blogger sử dụng Scrip
    Tạo liên kết Read More (đọc thêm) cho bài viết tự động hoàn toàn không còn thủ công như trước đây. Với Scrip mình giới thiệu hỗ trợ ảnh Thumbail lấy hình ảnh đầu tiên xuất hiện trong bài viết để làm ảnh đại diện, do vậy blog của bạn nhìn sẽ chuyên nghiệp hơn.
    Bạn có thể bấm vào hình bên cạnh để xem Demo sẽ rõ hơn.
    Hướng dẫn cài đặt:
    1. Vào Thiết Kế (Design)
    2. Chỉnh sửa HTML (Edit HTML)
    3. Chọn Mở rộng tiện ích mẫu (Expand widget), tìm đến thẻ <data:post.body/>  và thay nó bằng đoạn mã sau đây:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
    <span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt;Đọc thêm...</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    4- Thêm đoạn mã dưới đây vào phần HEAD (Tức là bạn có thể đặt sau thẻ <head> Hoặc đặt trước thẻ </head>) của template: 
    <script type='text/javascript'>
    summary_noimg = 430;
    summary_img = 340;
    img_thumb_height = 100;
    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>
    Trong đó bạn thay đổi các thông số màu đỏ cho phù hợp với blog của bạn nha các thông số màu đỏ trong đoạn mã phía trên:
    1. summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện.
    2. summary_img là số ký tự phần miêu tả cho các bài có hình đại diện.
    3. img_thumb_height chiều cao của hình đại diện (pixel).
    4. img_thumb_width chiều rộng của hình đại diện (pixel).
    Nguồn: namkna 

    0 Phản hồi

  • Copyright © - Hiển Thiếu Gia Pro - Hiển Thiếu Gia Pro - Powered by Blogger - Designed by Johanes Djogan