Tạo bố cục cho template -Thêm tiện ích cho bố cục - Phần 3.2

Ở phần trước mình đã giới thiệu cho các bạn sơ lược cấu trúc code của bố cục một giao diện trong blogger, tiếp đến phần này mình sẽ nói các tùy biến các bố cục bằng các tiện ích widget, cách thêm widget và chúng ta sẽ làm việc ở khu vực này

Ví dụ như Phần chính của trang, có Bài đăng nổi bật là một widget được tích hợp sẵn, có một số widget có sẵn rất tiện lợi, nhưng đa số chức năng thì cũng đáp ứng nhu cầu của chúng ta nhưng ngặt một điều nó giao diện của chúng thì ta lại không thích, và cách giải quyết là chúng ta sẽ chọn thêm tiện ích --> HTML/Javascript

Chúng ta thử tạo một widget nhé: widget này sẽ có công dụng hiển thị các bài post mới nhất

Thêm HTML/Javascript sau đó chèn đoạn code sau vào phần nội dung:

<div>
<style type="text/css">
.bbrecpost2 {width:100%; box-sizing:border-box; padding:7px; border-bottom:1px solid #d1d1d1;}
.bbrecpost2:last-child {border:none; }
.bbrecpost2 a{color: #004D99; font:bold 13px Helvetica,Arial,san-serif; line-height:1.6em;}
.bbrecpost2 a:hover {color:darkviolet;}
.bbrecpost2 span {font-size:12px;}
</style>
<div style="border: 1px solid #d1d1d1; box-sizing: border-box;">
<script>
//<![CDATA[
function showrecentposts(json) {
  for (var i = 0; i < numposts; 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 = "»»";
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Tháng 1";
    monthnames[2] = "Tháng 2";
    monthnames[3] = "Tháng 3";
    monthnames[4] = "Tháng 4";
    monthnames[5] = "Tháng 5";
    monthnames[6] = "Tháng 6";
    monthnames[7] = "Tháng 7";
    monthnames[8] = "Tháng 8";
    monthnames[9] = "Tháng 9";
    monthnames[10] = "Tháng 10";
    monthnames[11] = "Tháng 11";
    monthnames[12] = "Tháng 12";
    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, "");
    if (!standardstyling) document.write('');
 document.write('<div class="bbrecpost2">
');
    document.write('<span>');
    if (standardstyling) document.write('');

Kết quả như của chúng ta đây, hãy thay mathangspk.blogspot.com là địa chỉ blog của các bạn

Bắt đầu các bạn thấy hay hay rồi đúng không nào, chúng ta không đi sâu vào để hiểu code nó chạy chương trình như thế nào. Vì đây chỉ là cấp cơ bản, và chúng ta sẽ phân tích những đoạn code này ở các bài có nội dung nâng cao hơn.
Tiếp tục nào, ở nội dung trên chúng ta chỉ mới thêm tiện ích được ở thanh bên, giờ chúng ta muốn thêm tiện ích ở các khung khác thì phải nào như thế nào? Ví dụ như dưới chân trang

Hiện giờ phần chân trang của chúng ta chỉ có một ô có thuộc tính sẵn, giờ các bạn hãy làm theo mình nhé

Phần chân trang thì trong đoạn code của mình thường sẽ được đặt là footer, mà không phải đặt nữa mà nó được xem như là quy chuẩn viết code cho web vậy

Và đoạn code chúng ta cần sửa nằm ở đây, các bạn dùng công cụ Find.. (Ctrl + F) để tìm cho nhanh nhé

showaddelement = 'no'

Giờ chúng ta chuyển thuộc tính này showaddelement = 'yes' xem kết quả thế nào nhé!

Lưu chủ đề lại và kéo xuống phần cuối trang, một khung Thêm tiện ích đã xuất hiện, bây giờ chúng ta có thể thêm các tùy chọn có sẵn của blogger hoặc thêm những đoạn javascript.