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

Mục Lục

Với các

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

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

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é

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 đâyBước 3: Copy code CSS và paste phía trên thẻ ]]>Tùy chỉnh:Cuối cùng lưu lại và kiểm tra xem kết quả.