Fix lỗi trùng lặp nội dung, tiêu đề mô tả chuẩn trong Blogger

LongAnIT 4/13/2019 Bình luận
Nếu bạn nào đã sử dụng blogspot thì không lạ gì lỗi này "Lỗi trùng lặp nội dung" tức là 2 hay nhiều URL cùng nhận tiêu đề/ mô tả/ nội dung y như nhau và để cho Google Index

Nếu bạn lên google tra từ khóa "sửa lỗi trùng lập tiệu đề miêu tả", "trùng lập nội dung" trên blogspot bạn sẽ có rất nhiều kết quả tìm kiếm fix lỗi này.

Trùng lập nội dung hiểu nôm na như sau:


  • Nội dung đi copy 100% của trang khác dẫn đến trùng nội dung, không Unique 100%. 
  • Xuất bản 2 bài có cùng nội dung trên trang web của bạn
Trong bài viết hôm nay tôi sẽ hướng dẫn các bạn cách sử lỗi trùng lập trong blogspot bằng 2 cách


Cách 1: Cấu trúc code Web bằng thẻ Meta (Title và Description). Tuy nhiên nó khá là phứt tạp đối với trang nhiều nội dung thì công việc này khá mất thời gian.

Cách 2: Đơn giản nhất là chặn index các Url trùng lặp với link Gốc sinh ra ở các nền tảng website khác nhau.

Bạn có thể xem cách Google định nghĩa tại đây: https://support.google.com/webmasters/answer/66359
Google cũng khá thông minh khi cho chúng ta các định nghĩa trùng lặp nội dung nào là có hại và không có hại trong SEO để chúng ta ứng phó.

Cú pháp code chặn trong file Robots.txt các bạn có thể thêm như sau
Disallow: *archive.html
Disallow: *?m=0
Disallow: /search*
Disallow: *?updated-max*
Disallow: *?q=*
Nguyên nhân do cấu trúc của blogspot nó chia theo Label, dòng thời gian và phân trang theo max-results. Nếu bạn nào hay sử dụng code phân trang gọi Feed bài viết theo nhãn sẽ hay dính các lỗi này.

 Về lỗi trùng lặp trang Label (danh mục)

https://www.longanit.com/search/label/SEO
https://www.longanit.com/search/label/SEO?&max-results=10
https://www.longanit.com/search/label/SEO?updated-max=2017-09-01T16%3A19%3A00%2B07%3A00&max-results=10#PageNo=2

Bạn sẽ thấy là Google Index hàng loạt các URL nói về Label SEO. Nên điều đầu tiên là mình xác định URL chính cần lấy và chặn Index các URL còn lại. Chặn trong Robots.txt các URL còn lại các bạn có thể thêm code bên dưới vào:
Disallow: *?updated-max*
Disallow: *?q=* 

Trùng lặp Trang Desktop: Bạn sẽ thấy khá rườm rà với 3 link như sau

https://www.longanit.com/ (Desktop)
https://www.longanit.com (Desktop)
https://www.longanit.com?m=0 (Desktop)

Vì vậy chúng ta chặn : Disallow: *?m=0

Vấn đề ở đây là tại sao lại chặn quá nhiều như vậy và nó có ảnh hưởng nhiều đến site của bạn không? mình xin nói là nó sẽ không ảnh hưởng nhé vì bản thân google nó đã index mấy cái chính cần thiết rồi còn mấy cái mình nêu như trên do cấu trúc nền tảng blogspot nó thế nên nó index bị trùng lặp. Cách làm này sẽ chỉ định với google rằng không index các trang không cần thiết mà dành thời gian index các trang cần thiết nhanh hơn phục vụ cho SEO nhanh hơn đặc biệt là bài viết và trang chủ.

Điểm mạnh của Blogger là hỗ trợ SEO cực mạnh tại: Trang chủ, Trang bài viết, Trang tĩnh nhưng lại quá yếu kém trong Archive, Label và thường trùng lặp về nội dung tại các trang này.

Lưu ý: Blogger chỉ hỗ trợ viết Meta Description cho trang chủ và bài viết còn tất cả các trang còn lại đều không hỗ trợ mà phải làm thủ công toàn bộ. Như vậy cách dễ nhất là chúng ta chỉ index trang chủ và trang bài viết còn tất cả các thứ còn lại thì chặn hết là xong thôi.

Để thực hiện bạn làm như sau:
  1. Đăng nhập vào Blogger - Cài đặt - Tùy chọn tìm kiếm
  2. Mục Thẻ tiêu đề tùy chình click chỉnh sửa và tiến hành check vào các mục như hình bên dưới
Chặn index trang lưu trữ (Archive) và tìm kiếm
Chặn index trang lưu trữ (Archive) và tìm kiếm

Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách cơ bản đế fix lỗi trùng lặp nội dung, tiêu đề mô tả trong blogspot hi vọng qua bài viết này các bạn có thể giúp các bạn giải quyết những vấn đề liên quan đến SEO Onpage giúp website của bạn có thể cải thiện tốt hơn trong quá trình SEO lên top.

Bài viết có thể còn nhiều vấn đề thiếu xót mà trong quá trình tìm hiểu bản thân tôi không thể diễn giải hết được rất mong các bạn đề lại comment bên dưới để cùng thảo luận trao đổi.

Tạo bảng Table reponsive với tool cho blogspot

LongAnIT 3/30/2019 Bình luận
Như các bạn đã biết một điểm yếu của blogspot đó là việc tạo bảng Table. Do bản thân blogspot không có hỗ trợ công cụ tạo bảng mà đa phần sử dụng code CSS và HTML để tạo. Vì thế trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách tạo một bảng Table responsive với blogspot.


Bước 1: Bạn truy cập vào https://www.tablesgenerator.com/html_tables

Giao diện ban đầu của nó bạn có thể thấy như hình bên dưới và một điều tôi vô cùng ngạc nhiên là nó không hề thua kém bất cứ một công cụ tạo bàng nào. Mọi thao tác bạn có thể tiến hành trên đồ họa như tạo bảng số dòng, số cột, thêm dòng, thêm cột, xóa cột y như trong Word hay Excel

Tạo bảng ( table) responsive cho blogspot
Hướng dẫn tạo bảng ( table) responsive cho blogspot

Bước 2: Bạn tiến hành các thao tác tạo bảng trên này sau khi làm xong bạn chỉ cần copy toàn bộ đoạn code bên dưới dán vào nơi mà bạn muốn hiển thị trên blogspot. Nhớ chuyển qua HTML khi viết bài bạn nhé. Ngoài ra mình thấy trong này có rất nhiều mẫu template có sẵn cực kỳ  hay các bạn có thể tham khảo thêm nhé và bên dưới là kết quả sau mấy phút ngồi tạo thử bảng như hình bên dưới.
STT Họ tên Năm sinh Giới tính Trình độ Ghi chú

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách tạo bảng(table) reponsive  trên blogspot với tool hỗ trợ cực kỳ đơn giản. Nếu các bạn không làm được hãy sử dụng code tôi cung cấp bên dưới đây nhé
<style type="text/css">
.tg  {width:100%;border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}</style>
<div class="tg-wrap"><table class="tg">
  <tr>
    <th class="tg-0pky">STT</th>
    <th class="tg-0lax">Họ tên</th>
    <th class="tg-0lax">Năm sinh</th>
    <th class="tg-0lax">Giới tính</th>
    <th class="tg-0lax">Trình độ</th>
    <th class="tg-0lax">Ghi chú</th>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
  </tr>
  <tr>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
    <td class="tg-0lax"></td>
  </tr>
</table>

Chúc các bạn thành công nhé.

Tạo khung chứa code Blockquote và Auto select by Single/Double

LongAnIT 3/20/2019 2 Bình luận
Hello xin chào các bạn hôm nay chúng ta lại gặp nhau trong phần thủ thuật blogger. Như các bạn đã biết thẻ blockquote trong blogger là gì rồi đúng không? nếu bạn là một blogger thì không hề xa lạ với nó thẻ này dịch theo tiếng việt là khung chứa code.
Blockquote và Auto select by Single/Double
Blockquote và Auto select by Single/Double 

Khi bạn viết một bài viết chia sẻ các code liên quan đến CSS hay Javascript,... chúng ta sẽ đưa các code vào trong thẻ blockquote của bài viết. Chắc các bạn sẻ nói là bài viết của tôi chán quá chẳng có gì mới cả xin thưa rằng đúng là nó không mới nhưng bạn hãy chịu khó theo dõi những gì tôi chia sẻ dưới đây đề hiểu chi tiết hơn về nó mà cái gì cơ bản cũng tốt cả.

Đầu tiên tôi nói về cú pháp của thẻ này:

<blockquote class="tr_bq"> Code bên trong </blockquote>

Tôi bắt đầu viết CSS cho thẻ blockquote để làm đẹp cho nó tôi lấy ngay code mà longanit.com đang sử dụng để minh họa bên dưới.
.post blockquote {
    font-size: 15px;
    border-radius: 5px;
    margin: 10px 0!important;
    overflow: auto !important;
    text-align: left !important;
    max-height: 250px !important;
    background: #f1f1f1!important;
    background-repeat: no-repeat !important;
    color: #555 !important;
}
Bây giờ tôi sẽ thêm 1 dòng CSS sau vào code trên : "user-select:all" và sau khi thêm ta có đoạn code như sau

.post blockquote {
    font-size: 15px;
    border-radius: 5px;
    margin: 10px 0!important;
    overflow: auto !important;
    text-align: left !important;
    max-height: 250px !important;
    background: #f1f1f1!important;
    background-repeat: no-repeat !important;
    color: #555 !important;
    user-select:all}
Với dòng lệnh trên khi thêm vào thì mặc nhiên khi người dùng truy cập vào khung chứa code nó sẽ tự động "select all code" (tự động bôi đen tất cả các code). Công việc còn lại chúng ta chỉ việc nhấn CTRL + C  và CTRL + V là xong. Tuy nhiên lệnh user-select nó có mộ nhược điểm là chúng ta không thể tùy chỉnh chọn code mà chúng ta cần copy. Cách giải quyết là tôi sẽ cung cấp cho các bạn một đoạn Javascipt có tính năng "Single/Double " đoạn code với cách này bạn có thể giải quyết vấn đề trên.
<script type = 'text / javascript'>
var pres = document.getElementsByTagName (& quot; blockquote & quot;);
for (var i = 0; i & lt; pres.length; i ++) {
pres [i] .addEventListener (& quot; & quot ;, dblclick function () {
var lựa chọn = getSelection ();
var phạm vi = document.createRange ();
phạm vi .selectNodeContents (this);
selection.removeAllRanges ();
selection.addRange (range);
}, false);
}
</ script>

Nếu bạn nào sử dụng CSS "pre" thay thể cho CSS mặc định "blockquote" thì bạn có thể thay chữ blockquote màu đỏ trong code trên bằng chữ "pre"

Kết luận: Qua bài viết trên tôi đã hướng dẫn cho bạn cách cơ bản tạo khung chứa code với tính năng Auto select chọn code khi rê chuột và tính năng tùy chỉnh Double chọn all code rất thuận tiện cho việc trải nghiệm người dùng.

Mặc định kích thước hình ảnh khi đăng bài trên blogger

LongAnIT 3/18/2019 Bình luận
Thông thường khi post bài lên blogger, bạn sẽ up kèm một vài hình ảnh lên bài đăng. Trong blogger có một tính năng rất hay đó là sau khi upload tấm hình lên bài đăng bạn chỉ cần click vào bức ảnh khi đó bạn sẽ có các tùy chỉnh ảnh: Ảnh nhỏ, ảnh trung bình, ảnh lớn, ảnh rất lớn và cả kích thước ảnh ban đầu. Tuy nhiên tính năng này có những hạn chế nhất định của nó đó chính là tùy chỉnh kích thước theo ý muốn về chiều rộng và chiều cao của bức ảnh.
ảnh thumbnail trong blogspot
Thay đổi kích thước ảnh thumbnail trong blogspot

Trong trường hợp ảnh có kích thước quá lớn có thể dẫn đến tràn bề ngang của trang blog, gây mất thẩm mỹ. Trong bài viết này tôi sẽ hướng dẫn các bạn cách tùy chỉnh mặc định kích thước hình ảnh khi đăng bài trên blogger một cách đơn giản nhất bằng cách tùy chỉnh CSS. Thực hiện các bước sau đây để tiến hành

Bướ 1: Đăng nhập vào quản trị Blogger --> Chủ đề --> Chỉnh sửa HTML
Bước 2: Copy đoạn code CSS bên dưới vào trước thẻ  ]]></b:skin>

.post img {
max-width:800px;
min-width:600px;
 }

Điều chỉnh lại max-with và min-with cho phù hợp. Lưu ý rằng mỗi template có cấu trúc CSS khác nhau tùy vào người viết bạn chỉnh lại sao cho nó phù hợp với code trên

Giải thích: 

  1. max-width: 800px: Chiều rộng tối đa bức ảnh là 800px
  2. min-width:600px : Chiều rộng tối thiểu của bức ảnh là 600px


Nếu bạn muốn tất cả các hình ảnh hiển thị trong phần bài viết có kích thước cố định là 800 x 600 thì bạn có thể sử dụng code sau đây
.post img {   
width:800px;     
height:600px;     
 }
Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách set mặc định kích thước hình ảnh khi đăng bài trên blogger với CSS căn bản. Ngoài ra bạn có thể sử dụng tính năng Reponsive hình ảnh trong blogger với code tại đây 

Chúc các bạn thành công!

Reponsive hiển thị bài viết theo nhãn Blogger dạng tab

LongAnIT 3/09/2019 Bình luận
Với thời điểm hiện nay các trang blogger ngày càng đẹp và  hoàn thiện  hơn, nhiều trang nhìn đẹp và chuyên nghiệp không khác gì các trang web được code chuẩn từ các mã nguồn Wordpress, Joomla..., 

Hôm nay quay trở lại trong mục bài viết Widget Blogger tôi sẽ hướng dẫn các bạn cách tạo Widget hiển thị bài viết theo nhãn với nhiều tab và mỗi tab chứa một nhãn như hình bên dưới

Widget bài viết theo nhãn dạng tab
Widget bài viết theo nhãn dạng tab

Không nói vòng vo nữa, chúng ta bắt đầu ngay thôi nhé

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML copy toàn bộ đoạn code bên dưới vào trước thẻ đóng  ]]></b:skin>
/* Recent Post Label */
.recent-labpost{margin:20px;}
.rctab-button > span{padding:15px 20px;cursor:pointer;position:relative;color:#222;display:inline-block;font-size:120%;font-weight:700;}
.rctab-button > span.active{color:#222;background:rgba(0,0,0,0.05)}
.rctab-button > span.active:before{content:'';top:0;opacity:1}
.rctab-content{padding:15px;background:rgba(0,0,0,0.05);position:relative;min-height:100px;overflow:auto}
.rctab-item{float:left;width:48%;margin:10px 1%;background:#fff;border:1px solid rgba(0,0,0,0);transition:all .3s;}
.rctab-item:hover{border:1px solid rgba(0,0,0,0.1);}
.rctab-item-inner{padding:10px}
.rctab-item img{float:left;width:120px;height:auto;}
.rctab-item h3{float:right;width:calc(100% - 130px);height:20px;margin:10px 0;font-size:120%}
.rctab-item h3 a{color:#222}.rctab-item h3 a:hover{color:#e74c3c}
.loader{position:absolute;left:50%;top:50%;margin-left:-27.5px;margin-top:-27.5px;transition:all .3s linear}
.hide-load .loader{opacity:0}
.squarin{background:#374140;width:15px;height:15px;float:left;top:-10px;margin-right:5px;margin-top:5px;position:relative;opacity:0;-webkit-animation:enter 6s infinite;animation:enter 6s infinite}
.enter{top:0;opacity:1}
.squarin:nth-child(1){-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s}
.squarin:nth-child(2){-webkit-animation-delay:2.1s;-moz-animation-delay:2.1s;animation-delay:2.1s}
.squarin:nth-child(3){-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s;background:#09c}
.squarin:nth-child(4){-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;animation-delay:0.9s}
.squarin:nth-child(5){-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}
.squarin:nth-child(6){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s}
.squarin:nth-child(8){-webkit-animation-delay:0.3s;-moz-animation-delay:0.3s;animation-delay:0.3s}
.squarin:nth-child(9){-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;animation-delay:0.6s}
@media screen and (max-width:768px) {
.rctab-item{float:left;width:100%;}
.rctab-item {margin:10px auto;}}

Bước 2:  Tiếp tục tìm đến thẻ </head> và chèn đoạn code sau vào phía trước nó
<script type='text/javascript'>
//<![CDATA[
function getMeImg(a){var t=[a,a,!1];return void 0!==a?-1!==a.url.indexOf("img.youtube")?(t[0]=a.url.replace("default.jpg","hqdefault.jpg"),t[1]=a.url.replace("default.jpg","mqdefault.jpg"),t[2]=!0):(t[0]=a.url.replace("s72-c","w100-h75-c"),t[1]=a.url.replace("s72-c","s500-c")):(t[0]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png",t[1]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png"),t}function load_w_tab(a){var t=a.find(".rctab-content>.active"),e=t.attr("data-load");$.ajax({type:"GET",url:"/feeds/posts/summary/-/"+e+"?max-results=6&alt=json-in-script",async:!1,contentType:"application/json",dataType:"jsonp",success:function(a){if(a.feed.entry){t.append('<div class="wtab-inner"></div>');for(var e=0;e<a.feed.entry.length;e++){for(var i=a.feed.entry[e],d=0;d<a.feed.entry[e].link.length;d++)if("alternate"==a.feed.entry[e].link[d].rel){var s=a.feed.entry[e].link[d].href;break}var n=i.title.$t,l=getMeImg(i.media$thumbnail),r='<div class="rctab-item"><div class="rctab-item-inner"><a href="'+s+'"><img src="'+l[0]+'"/></a><h3><a href="'+s+'">'+n+'</a></h3><div style="clear:both"></div></div></div>';t.find(".wtab-inner").append(r)}t.addClass("hide-load")}}})}function getwtabs(e){for(var labelArr=eval(e.attr("data-label")),html='<div class="rctab-button">',i=0;i<labelArr.length;i++)html+='<span data-target="'+labelArr[i]+'-genova">'+labelArr[i]+"</span>";html+='</div><div class="rctab-content">';for(var i=0;i<labelArr.length;i++)html+='<div data-load="'+labelArr[i]+'" data-container="'+labelArr[i]+'-genova">'+loaderHTML+"</div>";html+="</div>",e.append(html),e.find(".rctab-button>span").first().addClass("active"),e.find(".rctab-content>div").hide(0),e.find(".rctab-content>div").first().show(0).addClass("active loaded"),setTimeout(function(){load_w_tab(e)},500),e.find(".rctab-button>span").click(function(){var a=$(this).attr("data-target"),t=$(this),i="";e.find(".rctab-content>div").each(function(){$(this).attr("data-container")==a&&(e.find(".rctab-button>span").removeClass("active"),t.addClass("active"),e.find(".rctab-content>div").removeClass("active").hide(0),$(this).fadeIn().addClass("active"),i=$(this))}),i.hasClass("loaded")||(i.addClass("loaded"),setTimeout(function(){load_w_tab(e)},500))})}var loaderHTML='<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';$(function(){getwtabs($(".recent-labpost"))});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function getMeImg(a){var t=[a,a,!1];return void 0!==a?-1!==a.url.indexOf("img.youtube")?(t[0]=a.url.replace("default.jpg","hqdefault.jpg"),t[1]=a.url.replace("default.jpg","mqdefault.jpg"),t[2]=!0):(t[0]=a.url.replace("s72-c","w100-h75-c"),t[1]=a.url.replace("s72-c","s500-c")):(t[0]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png",t[1]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png"),t}function getauthor(a){for(var t=0;t<a.length;t++)var e="<span class='author'>&#xf007; "+a[t].name.$t+"</span>";return e}function getmeta(a){var t=[];t[1]="Jan",t[2]="Feb",t[3]="Mar",t[4]="Apr",t[5]="May",t[6]="Jun",t[7]="Jul",t[8]="Aug",t[9]="Sep",t[10]="Oct",t[11]="Nov",t[12]="Dec";var e=a.substring(0,4),s=a.substring(5,7),n=a.substring(8,10),i="<span class='date'>&#xf017; "+t[parseInt(s,10)]+" "+n+" "+e+"</span>";return i}function t(a){var a,t,e=[];for(t=0;a>t;t++)e.push(t);return shuffle(e)}function getmashrandom(a){var e="/feeds/posts/summary/?max-results=500&alt=json-in-script",s=a.find("div.tab-mash-random");s.find("span#tab-mash-random").addClass("loaded"),s.append('<ul class="random-inner"></ul>'),$.ajax({type:"GET",url:e,async:!0,contentType:"application/json",dataType:"jsonp",success:function(a){s.addClass("hide-load");for(var e=a.feed.entry,n=e.length,i=t(n),r=0;5>r;r++){for(var d=0;d<a.feed.entry[i[r]].link.length;d++)if("alternate"==e[i[r]].link[d].rel){var l=a.feed.entry[i[r]].link[d].href;break}var c=getMeImg(e[i[r]].media$thumbnail),o=e[i[r]].title.$t,u=e[i[r]].published.$t,h=getmeta(u),f=getauthor(e[i[r]].author),m='<li><a href="'+l+'"><img  class="toLoad" src="'+c[0]+'"/></a><div class="recent-list-c"><h3><a href="'+l+'">'+o+'</a></h3><div class="meta">'+f+" "+h+"</div></div></li>";s.find("ul").append(m)}}})}function getmashrecent(a){a.find("span#tab-mash-recent").addClass("loaded"),$.ajax({type:"GET",url:"/feeds/posts/summary?max-results=6&alt=json-in-script",async:!1,contentType:"application/json",dataType:"jsonp",success:function(t){if(t.feed.entry){a.find("div.tab-mash-recent").append('<ul class="recent-post-list"></ul>');for(var e=0;e<t.feed.entry.length;e++){for(var s=t.feed.entry[e],n=0;n<t.feed.entry[e].link.length;n++)if("alternate"==t.feed.entry[e].link[n].rel){var i=t.feed.entry[e].link[n].href;break}var r=s.title.$t,d=getmeta(s.published.$t),l=getauthor(s.author),c=getMeImg(s.media$thumbnail),o="<li class='recent-post-item'><a href='"+i+"'><img src='"+c[0]+"'/></a><div class='recent-list-content'><h3><a href='"+i+"'>"+r+"</a></h3><div class='recent-list-meta'>"+d+l+"</div></div></li>";a.find("div.tab-mash-recent ul").append(o)}}}})}var loaderHTML='<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';shuffle=function(a){for(var t,e,s=a.length;s;t=parseInt(Math.random()*s),e=a[--s],a[s]=a[t],a[t]=e);return a},$(function(){$(".thetabs").each(function(){var a=$(this);a.append("<div class='tab-mash-outer'><div class='tab-mash-button'><span class='active' id='tab-mash-recent'><i class='fa fa-rss'></i> Recent</span><span id='tab-mash-random'><i class='fa fa-random'></i> Random</span></div><div class='tab-mash-content'><div class='tab-mash-recent min-height-need'></div><div class='tab-mash-random min-height-need' style='display:none;'>"+loaderHTML+"</div></div></div>"),getmashrecent(a),a.find(".tab-mash-button>span").click(function(){var t=$(this),e=a.find(".tab-mash-content>div");e.each(function(){$(this).hasClass(t.attr("id"))?($(this).fadeIn(),a.find(".tab-mash-button>span").removeClass("active"),t.addClass("active"),t.hasClass("loaded")||("tab-mash-random"==t.attr("id")?(t.addClass("loaded"),setTimeout(function(){getmashrandom(a)},500)):"tab-mash-comment"==t.attr("id")&&(t.addClass("loaded"),setTimeout(function(){getmashcomment(a)},2e3)))):$(this).hide(0)})})})});
//]]>
</script>
Bước 3: Tìm vị trí để đặt khung chứa Tab bài viết hiển thị, phần này thì tùy bạn, có thể đặt em nó dưới thẻ <header>. Copy toàn bộ đoạn code bên dưới và dán vào

 <b:if cond='data:blog.url == data:blog.homepageUrl'><!-- Nội dung chỉ hiển thị trên trang chủ -->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><!-- Nội dung không hiển thị trên Mobile -->
<div class='container'>
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'><!-- Bạn phải có thư viện bootstrap để sử dụng code này nhé -->
<div class='recent-labpost' data-label='[&quot;SEO&quot;,&quot;SEO Onpage&quot;,&quot;SEO Offpage&quot;,&quot;Blogging tips&quot;,&quot;Computer Tricks&quot;]'/></div>
</div>
</div>
</b:if></b:if>

Bước 4: Tiến hành thay đổi các nhãn: SEO, SEO Onpage, SEO Offpage, Blogging tips, Computer Tricks thành thành nhãn mà bạn muốn hiển thị phù hợp trong blog của bạn.

Lưu ý: Nếu máy bạn chưa có thư viện boostrap thì bạn hãy nhúng nó vào nhé vì phần tạo widget này mình tạo dựa trên nó mục đích là Reponsive trên các thiết bị.

Kết luận: Như vây qua bài này chúng ta lại có một cái nhìn nữa về tính đa dạng của Blogger trong việc hiển thị nhãn bài viết hi vọng các bạn có những trải nghiệm tốt sau khi thực hành cùng tôi.

Chúc các bạn thành công và đừng quên để lại comment bên dưới để trao đổi cũng như là hỗ trợ nhé.

Hướng dẫn tích hợp Customer Chat Facebook vào website

LongAnIT 2/22/2019 1 Bình luận
Trong bài viết hôm trước tôi đã có giới thiệu với các bạn cách tích hợp live chat facebook vào trong blogspot đây là code mà mình lấy nguồn từ bạn Nguyễn Cao Tú chia sẻ trên site.

Trong bài viết hôm nay mình sẽ tiếp tục hướng dẫn các bạn thêm một cách tích hợp "Live chat Facebook" version 2 vào trong web của mình. Trước tiên mình xin giới thiệu đôi chút về plugin này
Live chat Facebook version 2
"Live chat Facebook" version 2

Customer Chat Facebook là plugin do chính Facebook phát hành, giúp các webmaster có thể tạo khung live chat nhanh chóng, hỗ trợ khách hàng đối với doanh nghiệp cũng như là các site cá nhân. Tuy vẫn còn một số hạn chế về Customize nhưng tất cả những thứ mà mà plugin này mang lại còn hơn cả mong đợi.

Ưu điểm:

  • Hoàn toàn miễn phí (Không cần phải trả phí như một số Live chat khác)
  • Dễ cài đặt và vận hành.
  • Hỗ trợ người dùng nhanh chóng thông qua Facebook messenger.
  • Customer Chat Facebook hiển thị, hoạt đông tốt trên mọi loại trình duyệt trên PC, Mobile và Tablet.

Nhược điểm:

  • Người dùng cần có một tài khoản Facebook để đăng nhập.
  • Chưa thật sự có nhiều tùy biến.
  • Không thể theo dõi người dùng có đang truy cập Online hay không.
  • Các bước tích hợp Customer Chat Facebook vào website:
  • Yêu cầu cơ bản để tích hợp được Customer Chat Facebook vào website là:
  • Bạn phải có một tài khoản Facebook và có một trang Fanpage.
  • Bạn phải có 1 App Facebook để lấy ID cho phần source code của plugin có thể hoạt động.
  • Bước 1: Cấu hình plugin Customer Chat Facebook từ cài đặt của Fanpage Facebook.
  • Đầu tiên, bạn vào trang Fanpage Facebook, nhấn vào Cài đặt nằm ở góc phải trên màn hình. Tiếp theo là chọn Nền tảng Messenger nằm bên thanh menu bên trái. Nhấn chọn tiếp “Chuyển đển phần” Plugin Chat với khách hàng.

Các bước tích hợp Customer Chat Facebook vào website:

Bước 1: Vào trang Fanpage Facebook, nhấn vào "Cài đặt" nằm ở góc phải trên màn hình.

Giao diện cài đặt của trang Fanpage facebook
Giao diện cài đặt của trang Fanpage facebook

Tiếp theo là chọn Nền tảng Messenger nằm bên thanh menu bên trái. Nhấn chọn tiếp “Chuyển đển phần” Plugin Chat với khách hàng như hình.

Plugin Chat với khách hàng
Plugin Chat với khách hàng

Tại khung Plugin chat với khách hàng chọn thiết lập:

Tại cửa sổ Setup Customer Chat chọn Next:

Setup Customer Chat Facebook
Setup Customer Chat Facebook
Tiếp theo bạn cần thiết lập vài thông số cho plugin:
  • Ngôn ngữ: Bạn có thể thiết lập ngôn ngữ tùy ý.
  • Lời chào: Để mặc định hoặc muốn tùy chỉnh bạn có thể nhấn vào “Thay đổi”.


Thiết thông thông số ngôn ngữ và lời chào cho live chat
Thiết thông thông số ngôn ngữ và lời chào cho live chat

Sau đó nhấn “Tiếp” để chuyển sang bước tiếp theo.

Bước 2: Bạn có thể thay đổi màu khung chat, thời gian phản hồi và nhấn “Tiếp” để chuyển đến bước cuối cùng.

Thay đổi màu khung hộp thoại chat

Bước 3: Bước cuối cùng của phần thiết lập
  • Thêm tên miền trang web của bạn vào và nhấn “Lưu”.
  • Copy đoạn code mà Facebook cung cấp.


Thiết lập tên miền và sao chép code vào trong website
Thiết lập tên miền và sao chép code vào trong website

Nhấn “Hoàn tất” để hoàn thành việc thiết lập

Hoàn tất thiết lập Facebook live chat
Hoàn tất thiết lập Facebook live chat 

Sau khi hoàn tất xong bạn đăng nhập vào Blogger và dán đoạn code vào trước thẻ đóng </body> thế là xong

Nếu bạn nào lười thì có thể dùng code bên dưới nhớ sửa Page ID thành Page ID của FB bạn nhé
<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : &#39;v3.2&#39;
    });
  };
  (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &#39;https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<!-- Your customer chat code -->
<div attribution='setup_tool' class='fb-customerchat' page_id='328582747712453'>
</div>


Kết luận: Qua bài viết trên tôi đã hướng dẫn các bạn cách tích hợp Customer Chat Facebook (LiveChat Facebook) vào website trong quá trình thực hiện nếu có báo lỗi hay code không chạy vui lòng comment bên dưới để được hỗ trợ.


Đoạn code Javascript chống Ctrl + U và F12

LongAnIT 2/15/2019 Bình luận
Xin chào các bạn. Như chúng ta đã biết Mã nguồn Blogger thiết kế dựa trên CSS , HTML và Javascript vì vậy việc Viewsourse ( Ctrl + U) cũng như là sử dụng phím F12 để kiểm tra hoặc xem mã nguồn trên web là rất dễ dàng.

Code chống F12, Ctrl + U cho blog
Code chống F12, Ctrl + U cho blog

Thật ra đối với Site longanit.com của mình thì không dùng cách chống này các bạn có thể tự do xem mã nguồn cũng như Script vì thật ra bản thân mình cũng không phải là dân lập trình ra code mà cũng đi lượm lặt code của các bạn trên cộng đồng Blogger cũng như các site khác chia sẻ.

Tuy nhiên nếu bạn không muốn cho người khác Viewsourse khi nhấn F12 và Ctrl+U của Blogsot thì dưới đây mình xin chia sẻ một code đơn giản để chống lại các thao tác trên.

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Chèn đoạn Code bên dưới vào trên thẻ đóng </head>
<script type='text/javascript'>
//<![CDATA[
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},shortcut.add("Ctrl+U",function(){top.location.href="https://www.longanit.com/p/rules.html"}),shortcut.add("F12",function(){top.location.href="https://www.longanit.com"}),shortcut.add("Ctrl+Shift+I",function(){top.location.href="https://www.longanit.com/"}),shortcut.add("Ctrl+S",function(){top.location.href="https://www.longanit.com/"}),shortcut.add("Ctrl+Shift+C",function(){top.location.href="https://www.longanit.com/"});
//]]>
</script>
Thêm đoạn code chống chuột phải nữa nhé
<script type='text/javascript'>
//<![CDATA[
// JavaScript Document
var message="NoRightClicking"; function defeatIE() {if (document.all) {(message);return false;}} function defeatNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=defeatNS;} else{document.onmouseup=defeatNS;document.oncontextmenu=defeatIE;} document.oncontextmenu=new Function("return false")
//]]>
</script>
Chú ý: Thay đổi link màu đỏ trên thành link mà bạn muốn chuyển hướng đến nhé

Bước 3: Tiến hành save lại và xem kết quả

Chúc bạn thành công nhé!