Tạo widget bài viết gần đây theo nhãn ngoài trang chủ

Các bạn chơi Blog đã lâu và cũng có đôi chút kinh nghiệm về css, javascript, html..., bạn đang tìm kiếm cách tạo các widget cho bài viết gần đây theo nhãn ngoài trang chủ để nâng cấp template của mình có giao diện tin tức, tạp chí...

Trong bài viết hôm nay mình sẽ viết hướng dẫn cách tạo widget qua một số bước cơ bản để lấy được bài viết gần đây theo nhãn còn cách tạo css tức là phần giao diện tùy vào khả năng mà bạn có thể thiết kế cho phù hợp

Quan trọng hàng đầu để gọi được bài viết phải sử dụng javascript và link jquery và cả hai phải được đặt trên </head> như sau:

Copy


<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script>

//<![CDATA[

function labelthumbs(t) {

  document.write('<ul id="label_with_thumbs">');

  for (var e = 0; e < numposts; e++) {

    var n, i, r = t.feed.entry[e],

      l = r.title.$t;

    if (e == t.feed.entry.length) break;

    for (var o = 0; o < r.link.length; o++) {

      if ("replies" == r.link[o].rel && "text/html" == r.link[o].type) var m = r.link[o].title,

        u = r.link[o].href;

      if ("alternate" == r.link[o].rel) {

        n = r.link[o].href;

        break

      }

    }

    try {

      i = r.media$thumbnail.url

    } catch (t) {

      s = r.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), i = -1 != a && -1 != b && -1 != c && "" != d ? d : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKUuXrqpYQwdrpFxByAcK2kZ6taAYCXRhmNb7b0QNPhb45VAl0EMg9-DeiCb7G-EPAjRJGRLGyo0nz32vPigYeI2vRtJhvDvNplIBGD7_jl1HjPJER8wCj_l1XX1TrbHpVw2BgOIqpYX8/s1600/picture_not_available.png"

    }

    var p = r.published.$t,

      g = (p.substring(0, 4), p.substring(5, 7), p.substring(8, 10), new Array);

    g[1] = "Jan", g[2] = "Feb", g[3] = "Mar", g[4] = "Apr", g[5] = "May", g[6] = "June", g[7] = "July", g[8] = "Aug", g[9] = "Sept", g[10] = "Oct", g[11] = "Nov", g[12] = "Dec", document.write('<li class="recent-box">'), 1 == showpostthumbnails && document.write('<div class="imageContainer"><a href="' + n + '" target ="_top"><img class="label_thumb" src="' + i + '" title="' + l + '" alt="' + l + '"/></a></div>'), document.write('<a class="label_title" href="' + n + '" target ="_top">' + l + "</a>");

    var h = 0;

    document.write("");

    for (var f = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], v = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], y = (p = r.published.$t).split("-")[2].substring(0, 2), w = p.split("-")[1], x = p.split("-")[0], A = 0; A < f.length; A++)

      if (parseInt(w) == f[A]) {

        w = v[A];

        break

      }

    var k = y + "/" + w + "/" + x;

    if (1 == showpostdate && document.write('<div class="toe"><a href="' + n + '" class="post-date">' + k + "</a>"), 1 == showcommentnum && (1 == h && " | ", "1 Comments" == m && (m = "1 Comment"), "0 Comments" == m && (m = "No Comments"), m, h = 1, document.write('<a class="recent-com" href="' + u + '" target ="_top">' + m + "</a></div>")), "content" in r) var _ = r.content.$t;

    else if ("summary" in r) _ = r.summary.$t;

    else _ = "";

    if (_ = _.replace(/<\S[^>]*>/g, ""), 1 == showpostsummary)

      if (_.length < numchars) document.write(""), document.write(_), document.write("");

      else {

        document.write("");

        var S = (_ = _.substring(0, numchars)).lastIndexOf(" ");

        _ = _.substring(0, S), document.write('<p class="post-summary">' + _ + "...</p>")

      }

    document.write("</li>"), e != numposts - 1 && document.write("")

  }

  document.write("</ul>")

}

//]]>

</script>

Bước tiếp theo bạn cần tạo section để thêm widget, đặt đoạn section này trong main-wrapper, mỗi section thêm một widget html, ví dụ tạo widget cho label 1 thêm như sau:

Copy


<b:if cond='data:view.isHomepage'>

<b:section class='recent' id='recent1' name='Label 1' showaddelement='false'></b:section>

</b:if>

Bạn để ý phần mình đánh dấu màu đỏ, khi thêm xong lưu template quay trở ra mục Bố cục tạo phần section bạn vừa thêm chọn thêm tiện ích HTML xong truy cập lại chỉnh sửa template chọn mở rộng widget mà bạn vừa thêm trong đó có đoạn <b:includable id='main'>...</b:includable> bạn thay tất cả bằng đoạn bên dưới:

Copy


<b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'>

<h2><a expr:href='&quot;/search/label/&quot; + data:content + &quot;?&amp;max-results=10&quot;' expr:title='data:title'><data:title/></a></h2>

</b:if>

<div class='widget-content'>

<script>

var numposts = 6;

var showpostthumbnails = true;

var showcommentnum = false;

var showpostdate = true;

var showpostsummary = true;

var numchars = 160;

</script>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:content + &quot;?published&amp;alt=json-in-script&amp;callback=labelthumbs&quot;'/>

<div class='clear'/>

</div>

</b:includable>

Trong đó:

var numposts = 6; // số bài viết
var showpostthumbnails = true; // ảnh đại diện
var showcommentnum = true; // số bình luận
var showpostdate = true; // thời gian đăng bài
var showpostsummary = true; // đoạn tóm tắt
var numchars = 160; // số từ của đoạn tóm tắt

Các bạn thay true thành false nếu không muốn hiển thị mục nào ở trên còn đoạn max-results=10 là số bài viết khi bạn nhấp vào tiêu để đến trang label, bạn có thể thay 10 thành số khác nếu muốn.

Tiếp tục trong phần <widget bạn sửa locked='false' thành locked='true' để khóa widget này lại mục đích là để cố định không thể di chuyển hoặc xóa widget ngoài bố cục template. Tiếp theo ngay trên phần <b:section bạn sửa showaddelement='false' thành showaddelement='true' mục đích khóa section này không cho thêm widget

Mẹo: Bạn có thêm một widget html khác trong section này mục đích chèn quảng cáo

Cứ như vậy bạn làm tương tự với các section và widget khác, ví dụ thêm section thứ 2, 3,4... như sau:

<b:section class='recent' id='recent2' name='Label 2' showaddelement='false'></b:section>
<b:section class='recent' id='recent3' name='Label 3' showaddelement='false'></b:section>
<b:section class='recent' id='recent4' name='Label 4' showaddelement='false'></b:section>
....

Với Label 1, Label 2, Label 3, Label 4,... là tên hiển thị ngoài bố cục template

Còn các id recent1, recent2, recent3, recent4,... là các id mà căn cứ vào đấy viết css cho phần bố cục. Cứ tiếp tục trong mỗi section lại thêm một widget nhãn và cách làm như mình hướng dẫn ở trên.

Khi bạn đã có tạo được widget quay trở ra phần bố cục bạn chỉ cần chỉnh sửa widget thêm tên label và đặt tiêu đề

Như vậy bạn đã tạo được widget bài viết gần đây theo nhãn phần cuối cùng tạo css cho bố cục bài viết trong widget này ví dụ với widget label 1 viết như sau:

Copy


#recent1 {

...

}

#recent1 ul#label_with_thumbs {

...

}

#recent1 .recent-box {

...

}

#recent1 .recent-box:first-child {

...

}

#recent1 .recent-box .imageContainer {

...

}

#recent1 .recent-box:first-child .imageContainer {

....

}

#recent1 .label_thumb {

...

}

#recent1 .label_title {

..

}

#recent1 .post-date{

...

}

#recent1 .post-sumary {

...

}

Cứ như vậy viết css cho widget label 2 thì chỉ cần thay #recent1 bằng #recent2, #recent3, #recent4,..., bạn đừng quên viết css cho phần bố cục section ví dụ:

body#layout #recent1 {
...
}