November 30, 2014

Chào các bạn hôm nay chúng tôi xin hướng dẫn cách tạo Widget hiển thị bài viết mới theo Label và có Thumbnails ảnh cho blogger. Mục đích việc này giúp blog của bạn sinh động hơn và khiến người đọc dễ theo dõi và có thể đọc nhiều bài viết hơn.


Để làm cái này ,bạn cần thực hiện theo bước sau.

Bước 01: Login blogspot > Template (Mẫu) > Edite HTML (Chỉnh sửa HTML).

– Chú ý: trước khi edit nên backup code gốc tránh khi sửa sai không khôi phục lại được nhé.

Bước 02: Thêm code dưới lên trước đoạn code ]]></b:skin> (dùng ctrl F để tìm nhé)

/* Recent posts by labels */
img.label_thumb{
 float:left;margin-right:10px !important;
 height:65px; /* Thumbnail height */
 width:65px; /* Thumbnail width */
 border: 1px solid #fff;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
 box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#label_with_thumbs {
 float: left;
 width: 100%;
 min-height: 70px;
 margin: 0px 10px 2px 0px;
 padding: 0;
}
ul#label_with_thumbs li {
 padding:8px 0;
 min-height:65px;
 margin-bottom:0px;
 border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
 list-style: none ;
 padding-left:0px !important;}
#label_with_thumbs a {text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px;}

Bước 3: Copy đoạn code dưới trước thẻ đóng </head>

<strong><br>');
if(“content”in entry){
    var postcontent=entry.content.$t;
} elseif (“summary”in entry){
    var postcontent=entry.summary.$t;
} else var postcontent=””;
var re=/<\S[^>]*>/g;
postcontent=postcontent.replace(re,””);
if(showpostsummary==true){
    if(postcontent.length<numchars){
        document.write(”);
        document.write(postcontent);
        document.write(”);
    } else{ 
        document.write(”);
        postcontent=postcontent.substring(0,numchars);
        var quoteEnd=postcontent.lastIndexOf(” “);
        postcontent=postcontent.substring(0,quoteEnd);
        document.write(postcontent+'…');
        document.write(”);
    }
} 
var towrite='';
var flag=0;
document.write('<br>');

if(showpostdate==true){
    towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;
    flag=1;
}
if(showcommentnum==true){
    if(flag==1){
        towrite=towrite+' | ';
    }
    if(commenttext=='1 Comments')commenttext='1 Comment';
    if(commenttext=='0 Comments')commenttext='No Comments';
    commenttext='<a href=”'+commenturl+'” target =”_top”>'+commenttext+'<a>';
    towrite=towrite+commenttext;flag=1;;
}
if(displaymore==true){
    if(flag==1)towrite=towrite+' | ';
    towrite=towrite+'<a href=”'+posturl+'” class=”url” target =”_top”>More »<a>';
    flag=1;;
}
document.write(towrite);
document.write('<li>');
    if(displayseparator==true)if(i!=(numposts-1))document.write(”);
}
document.write('<ul>');
}//]]><script>

Bước 4: Thêm code dưới ở trước thẻ </body>

<script type='text/javascript'>
function changeThumbSize(id,size) {
    var blogGadget = document.getElementById(id);
    var replacement = blogGadget.innerHTML;
    blogGadget.innerHTML = replacement.replace(/s72-c/g,”s”+size+”-c”);
    var thumbnails = blogGadget.getElementsByTagName(“img”);
    for(var i=0; i < thumbnails.length;i++){
        thumbnails[i].width = size;
        thumbnails[i].height = size;
    }
}
 changeThumbSize(“label_with_thumbs”,210);
</script>

Sau đó bạn save template lại

Bước 5: bạn tạo 01 widget mới đặt tên tùy ý. Và copy code dưới đây vào để kích hoạt:

<script type="text/javascript">
    var numposts = 3;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = true;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = true;
    var numchars = 100;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Ten-label-ban-can-hien-thi?published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Tinh chỉnh theo ý thích :
– var numposts ← Là số bài viết muốn hiển thị
– var showpostthumbnails ← Hiển thị hoặc không hiển thị ảnh (true nghĩa là có hiển thị)
– var displaymore ← Có hiển thị read more link không
– var displayseparator ← Hiện thị ngăn cách bài
– var showcommentnum ← Hiển thị số lượng comment
– var showpostdate ← Hiển thị ngày post bài
– var showpostsummary ← Hiển thị hay khôgn tổng số bài
– var numchars ← Hiển thị số lượng chữ ( bthg là 100 chữ cái)

Cuối cùng là bạn ra xem blog bạn hiển thị đã vừa ý chưa. Chúc các bạn thành công!

  • Blogger
  • November 30, 2014
  • 0 comment
  • 170 lượt xem

Recent posts

Cảnh báo thủ đoạn hack iCloud mới cực kỳ tinh vi, sử dụng chính công cụ do Apple tạo ra

Cảnh báo thủ đoạn hack iCloud mới cực kỳ tinh vi, sử dụng chính công cụ do Apple tạo ra

Người dùng có thể mất quyền truy cập tài khoản iCloud nếu “sa lưới” vào hình thức lừa đảo mới […]

Ngoại hình iPhone 16 Pro lộ diện, thiết kế tuyệt đẹp

Ngoại hình iPhone 16 Pro lộ diện, thiết kế tuyệt đẹp

Bản vẽ thiết kế được cho là của iPhone 16 Pro cho thấy dòng iPhone thế hệ mới của Apple […]

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

Rối loạn về tin đồn iPhone màn hình gập của Apple

Rối loạn về tin đồn iPhone màn hình gập của Apple

Báo cáo mới nhất cho hay, Apple vẫn chưa từ bỏ iPhone màn hình gập nhưng cũng không gấp gáp […]

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Một rò rỉ mới cho biết phiên bản cập nhật iOS 18 mà Apple phát hành vào mùa thu 2024 […]

© 2021 Tạp Chí CNTT. Mr Hoang