» » » Code bài viết mới đẹp cho blogspot

Code bài viết mới đẹp cho blogspot

Hiển thị một widget bài viết mới trên sidebar của blog của bạn là cách tốt nhất để thông báo cho khách truy cập blog của bạn đã được cập nhật với nội dung mới và mới hơn. Vì vậy, nó có thể giúp bạn giữ cho khách tham gia vào blog của bạn tham quan thêm một chút nữa. Bài viết mới cho blog có nhiều cách để hiển thị và đã có hàng ngàn công cụ có sẵn trên tất cả các web.

Với các Recent Post được tùy biến nhiều hơn và bạn không cần phải thêm bất kỳ CSS hoặc mã jQuery vào mẫu Blogger của bạn có nghĩa là load widget của bạn nhanh hơn. Vì vậy đây là phương pháp đơn giản nhất để hút khách truy cập vào blog của bạn như vậy sẽ tăng thứ hạng của blog của bạn trên kết quả tìm kiếm của Google, bạn có thể xem hình ảnh dưới đây

Code bài viết mới đẹp cho blogspot


recent post widget

Hướng dẫn tạo code bài viết mới đẹp cho blogspot


Bước 1: Đăng nhập Blogger => Bố cục (Layout) => Thêm HTML/JavaScript

Bước 2: Copy và paste code bên dưới vào tiện ích

<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(json) {

  for (var i = 0; i < posts_no; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "... read more";
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var showyear = postdate.substring(0,4);
    var showmonth = postdate.substring(5,7);
    var showday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Jan";
    monthnames[2] = "Feb";
    monthnames[3] = "Mar";
    monthnames[4] = "Apr";
    monthnames[5] = "May";
    monthnames[6] = "Jun";
    monthnames[7] = "Jul";
    monthnames[8] = "Aug";
    monthnames[9] = "Sep";
    monthnames[10] = "Oct";
    monthnames[11] = "Nov";
    monthnames[12] = "Dec";
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");
 document.write('<li class="recent-post-title">');
    document.write(posttitle);
 document.write('</li><div class="recent-post-summ">');
    if (post_summary == true) {
      if (postcontent.length < summary_chars) {
         document.write(postcontent);
}
      else {
         postcontent = postcontent.substring(0, summary_chars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + ' ' + readmorelink);
}
}
 document.write('</div>');
if (posts_date == true) document.write('<div class="post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>');
}
}
</script>
<script>
var posts_no = 3;var posts_date = false;var post_summary = true;var summary_chars = 100;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script></div>

Bước 3: Copy code CSS và paste phía trên thẻ ]]></b:skin>

.recentpoststyle {
    counter-reset: countposts;
    list-style-type: none;
}
.recentpoststyle a {
    text-decoration: none;
    color: #0080ff;
}
.recentpoststyle a:hover {
    color: #db4437;
}
.recentpoststyle li:before {
    content: counter(countposts,decimal);
    counter-increment: countposts;
    float: left;
    z-index: 2;
    position: relative;
    font-size: 19px;
    font-weight: normal;
    color: #fff;
    background: #666;
    margin: 10px 5px 0px -4px;
    padding: 0px 10px;
    border-radius: 100%;
}
li.recent-post-title {
    padding: 7px 0px;
}
.recent-post-title {
    font-family: "Arial";
}
.recent-post-title a {
    color: #222;
    font-size: 15px;
    text-decoration: none;
    padding: 2px;
    font-weight: normal;
}
.post-date {
    padding: 5px 2px 5px 30px;
    font-size: 12px;
    color: #6d6e72;
    margin-bottom: 5px;
}
.recent-post-summ {
    border-left: 1px solid #69B7E2;
    color: #777;
    padding: 0px 5px 0px 20px;
    margin-left: 11px;
    font-family: Arial,"Times New Roman",serif;
    font-size: 16px;
}


Tùy chỉnh:
  • var posts_no = 3 là số bài được hiển thị

Cuối cùng lưu lại và kiểm tra xem kết quả.

Như bạn thấy, mình đã làm đẹp code này cho dễ hiểu. Thay var posts_no = 3 với số lượng bài viết mà bạn muốn hiển thị trên widget này. Nếu bạn thích một link hover màu, thay thế # db4437 với mã màu tùy chỉnh của bạn. Mình nghĩ rằng bạn không cần phải thay đổi kích thước phông chữ đệm và vì nó chính xác cho bất kỳ mẫu Blogger của bạn.

Chúc bạn làm blog đẹp hơn sau khi đọc xong bài Code bài viết mới đẹp cho blogspot nhé
Đi lên