Hướng dẫn thêm thẻ tags tự động cuối mỗi bài viết trong Blog

Bên cạnh label (nhãn) của bài viết thì thẻ tags cũng rất quan trọng giúp cho người đọc dễ dàng tìm kiếm từ khóa liên quan qua đó cũng giữ chân độc giả truy cập Blog lâu hơn và trông cũng chuyên nghiệp hơn rất nhiều khi không có thẻ tags. Thật ra nói là Tags cũng không hoàn toàn chính xác mà phải gọi là từ khóa tìm kiếm thì mới đúng.

Hiện nay đa số các website họ đều dùng thẻ tags ở cuối mỗi bài viết, nếu như trong các nền tảng ví dụ như wordpress chẳng hạn thì khi soạn bài sẽ có mục thêm tags. Trong Blogger rất hạn chế cho nên chúng ta phải soạn trước rất nhiều từ khóa liên quan đến Blog, bài viết, chủ đề của Blog của chúng ta và khi viết bài cùm từ khóa mà chúng ta soạn trước sẽ tự động tìm các từ khóa liên quan trong bài mà hiển thị.

Lấy ví dụ bạn soạn trước từ khóa cài đặt thì khi trong bài viết từ khóa cài đặt sẽ xuất hiện, cái đó gọi là thêm thủ công và sẽ xuất hiện tự động.

Cách thêm thẻ tags thì mình sưu tầm trên internet không biết tác giả là ai nhưng mình có chỉnh sửa lại và phân tích nó rõ ràng hơn để các bạn dễ hiểu. Các bước thêm thẻ tags như sau:

1. Đăng nhập vào Blogger > Chủ đề > Chỉnh sửa HTML > Chuyển đến tiện ích > Blog1 tìm đến đoạn <b:includable id='post' var='post'> chọn mở rộng sau đó tìm đoạn <data:post.body/> (nội dung bài viết) lưu ý thường có ít nhất hai đoạn như vậy một cho bài viết và một sử dụng cho bài của trang tĩnh do vậy bạn phải xác định đúng bạn sửa thành như sau:

Copy


<div id='post-body'>

<data:post.body/>

</div>

Hình minh họa

2. Tiếp theo bạn thêm đoạn dưới đây sau <div class='post-footer'> có thể là dưới <div class='post-footer-line post-footer-line-1'> hay <div class='post-footer-line post-footer-line-2'> hoặc <div class='post-footer-line post-footer-line-3'> (nếu có) đều được

Copy


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

  <div class='keywords'>

    <script>//<![CDATA[

      keyword_text ="<b>Tags: </b>";

      window.onLoad = makeKeywordForPost("post-body");

    //]]></script>

  </div>

</b:if>

Có thể thay Tags: trong đoạn keyword_text ="<b>Tags: </b>"; bằng từ khác theo ý bạn có thể là Từ khóa hay Từ khóa tìm kiếm

3. Thêm css và javascript trước </head>

Copy


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

<style type='text/css'>

.keywords {padding-top:20px;font: 16px Roboto, sans-serif;color:#333}

.keywords a {background: #f0f0f0;font: 15px Roboto,sans-serif;color: #333;display: inline-block;padding: 5px 7px;margin:0 5px 10px 0;border-radius: 3px;}

.keywords a:hover {background:#0064b2;color:#fff}

</style>

<script>

//<![CDATA[

var keyword_collect = [ "admin","adsense","AIO","bảo mật","batch","batch files","Blog","blogger","blogspot","cài đặt","cập nhật","code","Cortana","command","đăng nhập","fix lỗi","full disk","game","ghost","hệ thống","kích hoạt","kiếm tiền","khởi động","lock screen","Microsoft","mới nhất","multiboot","office 2016","iso","phần mềm","phục hồi","powershell script","quản lý","quản trị viên","registry","services","update","recovery","winre","reset","sao lưu","máy tính","quảng cáo","start menu","sysprep","System Apps","tài liệu","theme","thủ thuật","tin tức","ứng dụng","video","Windows","Windows Apps","Windows 10","Windows 8.1","Windows 7","win pe","slide","Windows RE","Recovery","google","slider","Facebook","tìm kiếm","scripts","script","powershell","WIN AIO" ]



function makeKeywordForPost(mKF_id) {

  var content;

  var isDOM = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;

  if (isDOM) {

    content = document.getElementById(mKF_id).textContent;

  } else {

    content = document.getElementById(mKF_id).innerText;

  }

  var str = "";

  var link1 = "";

  var link2 = "";

  for (var j = 0; j < keyword_collect.length; j++) {

    if (content.indexOf(" " + keyword_collect[j] + " ") != -1) {

      str += '<a href="' + link1 + encodeURIComponent(keyword_collect[j]) + link2 + '">' + keyword_collect[j] + '</a>';

    }

  }

  str = (str != "") ? keyword_text + str : keyword_text + "no keyword";

  document.write(str);

}

//]]></script>

</b:if>

Hình minh họa

Trong đó cụm var keyword_collect = [] bên trong là các từ khóa được thêm trước mỗi từ khóa được ghi bên trong các dấu "" và cách nhau bằng dấu phẩy nếu soạn từ khóa theo thứ tự a,b,c thì càng tốt và không giới hạn từ khóa bao nhiêu cũng được.

4. Trong đoạn javascript ở trên mình có đánh dấu hai đoạn var link1 = ""; và var link2 = ""; màu đỏ bây giờ là cách thêm link tìm kiếm từ khóa. Có 3 trường hợp thêm như sau:

+ Trường hợp 1: Thêm link tìm kiếm trong Blog

Ví dụ trong trang tìm kiếm của Blog thường có link như sau

https://www.blogthuthuatwin10.com/search?q=từ khóa

Như vậy bạn thêm như sau:

Copy


var link1 = "/search?q=";

var link2 = "&max-results=20";

Nếu bạn không thích đặt giới hạn tìm kiếm của một trang thì có thể bỏ &max-results=20 và để trống var link2 = "";

+ Trường hợp 2: Nếu bạn đang sử dụng trang tĩnh Google tìm kiếm tùy chỉnh ví dụ như trang sau:

https://www.blogthuthuatwin10.com/p/search.html

Như vậy bạn thêm như sau:

Copy


var link1 = "/p/search.html?q=";

var link2 = "";

+ Trường hợp 3: Tạo liên kết tìm kiếm trên Google bạn thêm như sau:

Copy


var link1 = "https://www.google.com.vn/search?q=%22";

var link2 = "%22+site%3Ablogthuthuatwin10.com";

Thay blogthuthuatwin10.com bằng địa chỉ Blog của bạn

Như vậy mình đã vừa hướng dẫn cách thêm thẻ tags vào cuối mỗi bài viết trong Blog, nếu bạn cảm thấy phù hợp thì nên thêm vào và nếu thêm thì bạn cần lưu ý những điểm sau:

1. Xác định đúng <data:post.body/> của bài viết
2. Thêm từ khóa chính xác
3. Thay link tìm kiếm phù hợp