Hướng dẫn cách tạo Responsive Youtube Video Cho Blogger

LongAnIT 5/04/2019 Bình luận
Hello chào các bạn hôm nay chúng ta lại băt đầu với bài viết nhúng video youtube vào blogger. Nghe có vẻ chẳng có gì mới cả đúng không nào?

Responsive video youtube cho Blogspot
Responsive video youtube cho Blogspot

Tuy nhiên trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn cho các bạn cách nhúng video youtube vào blogspot với tính năng Reponsive trên tất cả các thiết bị smartphone. Vậy cách làm như thế nào chúng ta cùng điểm qua một số cách dưới đây

Cách 1: Viết một đoạn CSS sau đó gọi class HTML vào


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

.youtube-video-longanit {position:relative;padding-bottom:56.25%;padding-top:25px;height:0;overflow:hidden;}
.youtube-video iframe, .youtube-video object, .youtube-video embed {position:absolute;top:0;left:0;width:100%;height:100%;}

Bước 3: Gọi class thôi rất đơn giản bạn chỉ cần chèn mã nhúng video youtube vào giữa 2 thẻ
này thế là xong

<div class="youtube-video-longanit">
<iframe width="560" height="315" src="https://youtu.be/z88OxSjw42Q" frameborder="0" allowfullscreen></iframe>
</div>

Chú ý: dòng màu đỏ là mã nhúng video youtube. Để lấy được mã nhúng này rất dễ bên dưới mỗi video youtube bạn click vào dòng "chia sẻ" sau đó click vào mã nhúng và copy toàn bộ đoạn code bên trong dán vào là xong?

Cách 2: Sử dụng code Javascript

Cách này dĩ nhiên sẽ làm chậm tốc độ tải trang blog bạn một xíu nếu bạn nào lười có thể dùng code mình chia sẻ bên dưới.
<script type="text/javascript">
//<![CDATA[
$(function() {
 
    var $allVideos = $("iframe[src*='//player.vimeo.com'], iframe[src*='//www.youtube.com'], object, embed"),
    $fluidEl = $("figure");
   
 $allVideos.each(function() {

   $(this)
     // jQuery .data does not work on object/embed elements
     .attr('data-aspectRatio', this.height / this.width)
     .removeAttr('height')
     .removeAttr('width');

 });

 $(window).resize(function() {
 
   $allVideos.each(function() {
 
     var $el = $(this);
        var newWidth = $el.parents('figure').width();
     $el
         .width(newWidth)
         .height(newWidth * $el.attr('data-aspectRatio'));
 
   });

 }).resize();
});
//]]>
</script>

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 cơ bản để nhúng video youtube vào trong blogspot Reponsive trên tất cả các thiết bị. Chúc các bạn thành công nhé.

Tạo navbar với Bootstrap 3 cho blogspot

LongAnIT 5/03/2019 Bình luận
Như các bạn đã biết thư viện Bootstrap 3 rất đa dạng ngoài việc tạo các bố cục Reponsive cho webiste thì compoment của nó còn rất nhiều thứ rất hay. Trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn cho các bạn cách tạo Navbar cho blogspot thông qua thư viện Bootstrap 3 tạm gọi là Bootstrap Menu Generator thông qua một site trung gian giúp chúng ta có thể tùy biến màu sắc cũng như code trước khi đưa code vào website.

Tạo navbar với Bootstrap 3 cho blogspot
Tạo navbar với Bootstrap 3 cho blogspot

Bước 1: Đầu tiên bạn truy cập vào địa chỉ sau:http://bootstrap3-menu.codedorigin.com/#sthash.Vz7KuG1y.dpbs

Bước 2: Tùy chỉnh giao diện rất đơn giản như hình trên bạn có thể thấy

  1. Phần trên của site là menu review giúp bạn có thể xem trước menu của mình như thế nào
  2. Phần ở giữa là màu sắc: Có 3 cột là màu nền, màu viền và màu text bạn có thể thay đổi trực tiếp màu sắc tại đây
  3. Phần cuối cùng: có 2 cột chứa HTML và CSS sau khi hoàn thành chỉnh sửa 
Bước 3: truy cập vào quản trị Blogger - Chủ đề - Chỉnh sửa HTML ở đây chúng ta có 2 code là CSS và HTML bạn copy và pase và đúng vị trí là xong. Bạn có thể lấy code bên dưới từ longanit đề sử dụng và tùy chỉnh nhé

Code CSS
 /*** mau nen thanh menu nav longanit.com ****/
.navbar-default {background-color:#0073aa}
.navbar {position: relative;min-height: 50px;margin-bottom: 0px!important; border: 1px solid transparent;}
.navbar-default .navbar-brand { color: #ffffff;}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #e5dbdb;}
.navbar-default .navbar-text {color: #d7e2e9;}
.navbar-default .navbar-nav > li > a {color: #ffffff;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {color: #e5dbdb;}
.navbar-default .navbar-nav > li > .dropdown-menu {background-color: #69899f;}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {color: #ffffff;}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {color: #e5dbdb;background-color: #425766;}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {background-color: #69899f;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color: #e5dbdb;background-color: #425766;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {color: #e5dbdb;background-color: #425766;}
.navbar-default .navbar-toggle {border-color: #425766;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color: #425766;}
.navbar-default .navbar-toggle .icon-bar {background-color: #d7e2e9;}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {border-color: #d7e2e9;}
.navbar-default .navbar-link {color: #d7e2e9;}
.navbar-default .navbar-link:hover {color: #e5dbdb;}
&#160;@media (max-width: 767px)
.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #fff;}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #fff;}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {color: #e5dbdb;}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {color: #e5dbdb;background-color: #425766; }
}

Code HTML cho Menu
<nav class='navbar navbar-default' id='menu'>
<div class='container-fluid'>
<div class='row'>
<div class='navbar-header'>
<button aria-expanded='false' class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='https://www.longanit.com/'>LongAnIT</a>
</div>
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='https://www.longanit.com/'>Trang chủ <span class='sr-only'>(current)</span></a></li>
<li><a href='https://www.longanit.com/p/gioi-thieu.html'>Giới thiệu</a></li>
<li><a href='https://www.longanit.com/p/rules.html'>Quy định</a></li>
<li><a href='https://www.longanit.com/p/contact.html'>Liên hệ</a></li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='' role='button'>Web Tools <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.longanit.com/p/css.html'>Tool CSS </a></li>
<li class='divider' role='separator'></li>
<li><a href='https://www.longanit.com/search/label/Reponsive'>Reponsive </a></li>
</ul>
</li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='https://www.longanit.com' role='button'>Blogger <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.longanit.com/search/label/Blogging tips'>Blogging tips</a></li>
<li><a href='https://www.longanit.com/search/label/Widgets'>Widgets</a></li>
<li class='divider' role='separator'></li>
<li><a href='https://www.longanit.com/search/label/Templates'>Templates</a></li>
<li class='divider' role='separator'></li>
<li><a href='https://www.longanit.com/search/label/Bootstrap'>Bootstrap</a></li>
</ul>
</li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='https://www.longanit.com' role='button'>SEO<span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.longanit.com/search/label/SEO'>SEO Tips </a></li>
<li><a href='https://www.longanit.com/search/label/SEO Onpage'>SEO Onpage</a></li>
<li><a href='https://www.longanit.com/search/label/SEO Offpage'>SEO Offpage </a></li>
</ul>
</li>
</ul>
<ul class='nav navbar-nav navbar-right'>
<li><a href='http://longanit.forumvi.com/'>Diễn đàn</a></li>
<li><a href='https://www.longanit.com/p/backlink.html'>Liên kết</a></li>
<li><a href='https://www.longanit.com/p/sitemap.html'>Sitemap</a></li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='' role='button'>Admin <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='https://www.blogger.com'>Login</a></li>
<li class='divider' role='separator'></li>
<li><a href='#'>Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>

Kết luận: Qua bài viết trên tôi đã hướng dẫn các bạn cách cơ bản để tạo cho blogspot một Menu Reponsive rất đẹp mắt. Bạn có thể xem thêm tại link trang chủ của bài viết: https://getbootstrap.com/docs/3.3/components/#navbar

Chúc các bạn thành công và SEO nhanh lên top nhé!

Hướng dẫn tăng tốc blogspot bằng cách xóa CSS và Javascript mặc định

LongAnIT 4/20/2019 1 Bình luận
PageSpeed Insights - Google Developers
Google Page Speed Insights

Hello các bạn quay lại với chuyên mục thủ thuật bogspot. Trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách cơ bản để tăng tốc blogspot nhằm đạt được điểm cao trên các công cụ test của google từ đó tăng điểm SEO cho site của bạn.
tăng tốc blogspot toàn tập
Tăng tốc blogspot bằng cách xóa CSS và Javascript mặc định

Như các bạn đã biết templates blogspot có cấu trúc cơ bản các phần như sau:
<html>
<head>
</head>
<body>
</body>
</html>

1. Chỉnh sửa lại cấu trúc template blogspot

 <head> thay đổi thành &lt;head&gt;
</head> thay đổi thành  &lt;/head&gt;&lt;!--<head/>--&gt;
<body> thay đổi thành &lt;body&gt;
</body> thay đổi thành &lt;!--<body/>--&gt; hoặc &lt;!--</body>--&gt;&lt;/body&gt;

Sau đó tiến hành lưu mẫu và kiểm tra thì bạn sẽ cảm thấy tốc độ tải trang blogspot tăng điểm lên rất nhiều. Để kiểm tra tốc độ tải trang các bạn có thể kiểm tra tại đây

2. Xóa bỏ 2 file css mặc định mặc định của blogspot:


Bước 1: Các bạn truy cập html của blogspot tìm kiếm đoạn mã sau đây: <b:skin><![CDATA[

Bước 2: Thêm đoạn mã &lt;!--<style type='text/css'/>--&gt; vào ngay trước đoạn mã trên.

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 đơn giản để tăng tốc cho blogspot. Hi vọng sau khi thực hiện thì blog của bạn sẽ có được tốc độ tốt nhất khi tải trang nhé!

Chú ý: Đây là cách hướng dẫn dành cho template blogspot version 1. Nếu bạn nào đã nâng cấp lên version 2 và 3 thì có thể dùng cách khác

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

LongAnIT 4/13/2019 2 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

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 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. Bài viết có tham khảo nguồn từ toilaquantri.com

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!

Thuộc tính con trỏ chuột trong CSS

LongAnIT 3/09/2019 Bình luận
Thuộc tính trỏ chuột có chức năng quyết định cách hiển thị của con trỏ khi di qua một thành phần nào đó, trong bài viết này tôi sẽ hướng dẫn các bạn cách hiển thị các kiểu con trỏ trong CSS Blogger.

Minh họa thuộc tính con trỏ chuột
Minh họa thuộc tính con trỏ chuột

Bước 1: Bạn truy cập vào blog hay trang web của bạn
Bước 2: Click chuột phải vào vùng trống trên trang web sau đó chọn "kiểm tra" hoặc bạn có thề truy cập nhanh bằng việc nhấn phím nóng F12 thần chưởng quá dễ đúng không. Sau khi vào màn hình dành cho nhà phát triển bạn chọn như hình

Thuộc tính con trỏ chuột trong CSS
Thuộc tính con trỏ chuột trong CSS
Ở đây tại thẻ Body CSS mình thêm vào đoạn "cursor:" khi đó trình duyệt sẽ hiện ra các kiểu con trỏ như bên dưới.
auto
alias
crosshair
col-resize
default
e-resize
help
move
n-resize
ne-resize
nw-resize
not-allowed
no-drop
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
w-resize
wait
Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ các thuộc tính liên quan đến con trỏ. Bạn có thể thay đổi các thông số con trỏ chuột như tôi liệt kê bên dưới để xem nó thay đổi thế nào nhé

Kết luận: Qua bài viết trên tôi đã hướng dẫn các bạn cách tìm hiểu về thuộc tính các kiểu con trỏ chuột trong CSS hi vọng sẽ giúp ích được cho các bạn.


CSS căn bản cách đổi màu link liên kết trên website

LongAnIT 3/09/2019 Bình luận
Khi bạn online trên internet hoặc bản thân là quản trị một trang web khi truy cập vào các đường link trong trạng thái tĩnh hay động bạn sẽ thấy có hiệu ứng màu link

Hiệu ứng màu link nó được tạo ra ừ CSS áp dụng cho tất cả link liên kết của website, blog của bạn. Tạo hiệu ứng thay đổi màu sắc phân biệt rõ ràng cho khách truy cập.
CSS căn bản cách đổi màu link liên kết trên web
CSS căn bản cách đổi màu link liên kết trên web

Phân biệt link đã truy câp, link chưa truy cập và di chuột vào sẽ thay đổi thành màu sắc khác nhau. Trong bài viết này tôi sẽ hướng dẫn các bạn tìm hiểu về cách thay đổi các màu link này theo ý mình

Ví dụ: Tôi có đoạn code CSS như sau:

/* màu Link khi chưa truy cập*/
a:link {
color:#3366ff;
text-decoration:none;
}
/*Màu Link khi đã truy cập*/
a:visited {
color:#cccccc;
text-decoration:none;
}
/*Màu link khi rê chuột vào*/
a:hover {
color:#339966;
text-decoration:underline;
}

Như đoạn code trên tôi chia làm 3 trường hợp

  1. Trường hợp 1: màu link chi chưa truy cập 
  2. Trường hợp 2: màu link khi đã truy cập
  3. Trường hợp 3: màu link khi rê chuột vào
Nói thì có vẻ mông lung thật ra dành cho những bạn chưa biết thôi chứ những bạn đã biết về HTML và CSS thì cái này nó rất cơ bản. Vậy để hiểu rõ hơn bạn hãy truy cập vào web của mình nhé. Chúc các bạn có một ngày cuối tuần vui vẻ nhé


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é.

Cách chia cột tương tác với tỷ lệ màn hình trong bootstrap

LongAnIT 3/04/2019 2 Bình luận
Trong bài viết trước mình đã hướng dẫn các bạn cách nhúng Bootstrap vào Blogger và một bài giới thiệu hệ thống lưới trong bootstrap. trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách chia cột tương tác tỷ lệ màn hình một cách nhanh chóng, tương tác tốt với các thiết bị khác nhau như: desktop (máy bàn), laptop (máy tính xách tay), tablet (máy tính bảng), smart phone (điện thoại thông minh).
Cách chia cột tương tác với tỷ lệ màn hình trong bootstrap
Cách chia cột tương tác với tỷ lệ màn hình trong bootstrap

Chúng ta cần nhớ các lệnh cơ bản như sau trong hệ thống lưới:
  • Lớp .col-xs-* sử dụng tương thích với màn hình smart phone (< 768px)
  • Lớp .col-sm-* sử dụng tương thích với màn hình tablet (>= 768px)
  • Lớp .col-md-* sử dụng tương thích với màn hình laptop, desktop (>= 992px)
  • Lớp .col-lg-* sử dụng tương thích với màn hình desktop (>= 1200px)

Ví dụ 1: Sử dụng bootstrap, chia 2 cột với tỉ lệ bằng nhau:
<div class="container">
 <div class="row">
             <div class="col-sm-6">
                    <div class="mauxanh">Cột thứ 1</div>
             </div>
             <div class="col-sm-6">
                    <div class="mauhong">Cột thứ 2</div>
             </div>
    </div> 
</div>

Ví dụ 2: Sử dụng bootstrap, chia 2 cột với tỉ lệ 1:2
<div class="container">
 <div class="row">
     <div class="col-sm-4">
         <div class="nenxanh">Cột thứ 1 tỉ lệ 1</div>
        </div>
        <div class="col-sm-8">
         <div class="nenhong">Cột thứ 2 tỉ lệ 2</div>
        </div>
    </div> 
</div>
Ví dụ 3: Chia 3 cột có tỷ lệ bằng nhau trong Bootstrap cũng tương tự như chia 2 cột.
<div class="container">
 <div class="row">
     <div class="col-md-4">
         <div class="nenxanh">Cột thứ 1</div>
        </div>
        <div class="col-md-4">
         <div class="nenhong">Cột thứ 2</div>
        </div>
        <div class="col-md-4">
         <div class="nenvang">Cột thứ 3</div>
        </div>
    </div> 
</div>
Ví dụ 4: Để chia 3 cột có tỷ lệ khác nhau, các bạn làm tương tự như ví dụ 3, chỉ việc thay chỉ số sau .col-md-*, luôn nhớ tổng các giá trị này là 12.
<div class="container">
 <div class="col-md-2">
         <div class="nenxanh">Cột thứ 1</div>
        </div>
        <div class="col-md-8">
         <div class="nenhong">Cột thứ 2</div>
        </div>
        <div class="col-md-2">
         <div class="nenvang">Cột thứ 3</div>
        </div>
</div>
Ví dụ 5: Sử dụng bố cục kết hợp trên nhiều thiết bị di động như desktop, laptop, tablet, smart phone. 
  • Thiết bị có độ phân giải từ 1024x728 trở lên, bố cục được chia thành 3 cột (hình 8)
  • Thiết bị có độ phân giải 728x1280, bố cục được chia thành 2 cột (hình 9)
  • Thiết bị có độ phân giải nhỏ hơn 728, bố cục được chia thành 1 cột (hình 10)
<div class="container">
 <div class="row">
     <div class="col-sm-3 col-md-2">
         <div class="nenxanh">Cột thứ 1</div>
        </div>
        <div class="col-sm-9 col-md-8">
         <div class="nenhong">Cột thứ 2</div>
        </div>
        <div class="col-sm-12 col-md-2">
         <div class="nenvang">Cột thứ 3</div>
        </div>
    </div> 
</div>

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é!

Hướng dẫn gửi sơ đồ web mới nhất lên google

LongAnIT 2/13/2019 Bình luận
Xin chào các bạn trong bài viết trước tôi có hướng dẫn các bạn cách để chúng ta submit một trang web lên google.

Hướng dẫn gửi sơ đồ website mới nhất lên google Google trên nền tảng Blogger
Hướng dẫn gửi sơ đồ website mới nhất lên google Google trên nền tảng Blogger

Trong bài viết này tôi sẽ hướng dẫn các bạn một số cách để chúng ta gửi một sơ đồ web lên google master tools đồng thời kiểm tra kết quả của quá trình gửi sitemaps – cấu trúc site cho Google thông qua công cụ Google Search Console.

Do mình sử dụng Blogger nên mình sẽ hướng dẫn trên nền tảng này. Chúng ta cần chú ý 3 vấn đề

  1. Sitemap.xml
  2. Sitemap Atom
  3. Robots.txt

1. KHAI BÁO SITEMAP TRONG ROBOTS.TXT

Việc khai báo file robots.txt trên trang web các bạn có thể tham khảo bài viết cũ của mình tại đây 


Các thành phần khai báo về Sitemap như sau:

Sitemap: https://www.longanit.com/sitemap.xml
Sitemap:https://www.longanit.com/p/sitemap.html
Sitemap:https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500
Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=501&max-results=500

 Như trích dẫn ở trên thì chúng ta có đến 4 link sitemap nhưng có 3 loại sitemap mà mình dùng ở trên:


  1. Đầu tiên là: sitemap xml
  2. Thứ 2 là sitemap cho người xem.
  3. Thứ 3 và 4 là Sitemap Atom (Do có những site có nhiều hơn 500 bài viết nên mình dùng thêm sitemap thứ 4 để khai báo)


Thời gian gần đây Blogger mới cập nhật sitemap mới có dạng như sau: https://www.longanit.com/sitemap.xml (Sitemap.xml) trước đây gần như là không có.

2. Phần này là sitemap cho người dùng xem. Tại đây cập nhật tất cả bài viết trên trang của mình với rất nhiều liên kết nên mình sẽ khai báo cho Google vào đọc từ đó bò đến các link ở nhiều bài viết khác nhau các bạn có thể xem link tại đây nhé: https://www.longanit.com/p/sitemap.html


Chú ý: Sitemap cho người xem thì Google cho là không chuẩn cấu trúc Sitemap.

3. Sitemap có các định dạng như sau: XML, RSS hoặc Atom. Do gần đây Google mới cập nhật sitemap.xml trên Blogger nên trước đó ai cũng sử dụng Atom cả.

Ưu điểm là Sitemap Atom được Google cập nhật thường xuyên hơn sitemap.xml vì dung lượng nhỏ hơn.

Mỗi lần khai báo bằng Atom Feed thì tối đa 500 bài nên cấu trúc:

https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500  

và cấu trúc

https://www.longanit.com/atom.xml?redirect=false&start-index=501&max-results=500 sẽ khai báo từ bài 501 + thêm 500 bài nữa tức là 501 đến 1001 dành cho website nhiều bài viết hơn.

2. HƯỚNG DẪN GỞI SITEMAP LÊN GOOGLE WEBMASTER TOOLS

Đăng nhập vào google master tools - Thu Thập Dữ Liệu -> Sơ đồ trang web - Thêm/Kiểm tra sơ đồ trang web và thực hiện giống như hình bên dưới

Hướng dẫn Submit Google Sitemap lên google
Hướng dẫn Submit Google Sitemap lên google 


Lưu ý: Bạn không cần phải copy chứa cả tên miền khi gởi lên. 

Thông thường, thì Google sẽ trả về ngay kết quả index sitemap như trên hình vẽ, bao gồm số lượng nội dung đã được lập chỉ mục và số lượng nội dung đã gửi. Công việc cần làm sau khi gửi sơ đồ trang lúc này của bạn đó là tìm và khắc phục các nguyên nhân khiến cho một số nội dung trên trang chưa được lập chỉ mục.

3. 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 gửi sitemap – sơ đồ trang web lên Google. 

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

Hướng dẫn Cấu trúc lại dữ liệu theo chuẩn trên nền tảng Blogger

LongAnIT 2/12/2019 Bình luận
Hello! Các bạn .Trong 2 bài viết trước tôi đã có bài giới thiệu về dữ liệu có cấu trúc trên nền tản Blogger. Trong bài này tôi sẽ hướng dẫn bạn cách xóa cấu trúc cũ và tạo lại cấu trúc mới cũng từ template các bạn đang sử dụng theo đúng chuẩn.

Triển khai dữ liệu có cấu trúc và thẻ rich cho nền tảng blogger
Triển khai dữ liệu có cấu trúc trên nền tảng blogger

Trước tiên bạn hãy backup lại template để tránh trường hợp làm xong bị lỗi thì chúng ta có thể Restore lại nhanh chóng vì như mình nói mỗi template thì cấu trúc khác nhau nó tùy thuộc vào người tạo ra nó. Ok chúng ta bắt đầu tiến hành

Như chúng ta đã biết Template blogger đa phần sử dụng dữ liệu cấu trúc dạng Microdata, qua việc sử dụng các thuộc tính itemprop, itemscope, itemtype nên việc xóa đi rất đơn giản để cấu trúc  lại một template blogger cho đúng chuẩn cấu trúc như gợi ý từ google master tools

- Đầu tiên chúng ta lần lượt tìm các với 3 từ khóa itemprop, itemscope, itemtype

+ Nếu là tag HTML

Ví dụ <div id='xxx' itemprop='publisher' itemscope='' itemtype='https://schema.org/Organization'> thì xóa hết thuộc tính chỉ để lại div,id,class.. hoặc bất kì thuộc tính nào không liên quan tới 3 từ khóa trên.

Kết quả <div id='xxx'>

+ Nếu là thẻ meta thì xóa luôn thẻ meta

+ Để xóa hvcard tìm class='fn' và xóa đi ví dụ <span class='fn'...> thì xóa thành <span...>

+ Để xóa hatom tìm class hfeed và xóa đi ví dụ <div class='post hfeed'...> thì xóa thành <div class='post'...>

+ Để xóa hentry tìm class hentry và xóa đi ví dụ <div class='post hentry'...> thì xóa thành <div class='post'...>

Như vậy với cách trên thì các bạn đã hoàn toàn xóa hết các thuộc tính râu ria của template. Bây giờ thì chúng ta tiến hành tạo lại cấu trúc. Tôi sẽ để code bên dưới theo trình tự bạn chỉ cần Search trong template của mình các code tương ứng và thay thế là xong.

Header

Code ban đầu:
<div class='header-wrap' id='header-wrap'>
Code tạo cấu trúc:
<div class='header-wrap' id='header-wrap' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

Sidebar


Code ban đầu:
 <div class='sidebar-wrapper' id='sidebar-wrapper'>
Code tạo cấu trúc:
<div class='sidebar-wrapper' id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>


Footer

 Code ban đầu:
<div class='lowerbar-wrapper' id='lowerbar-wrapper'>
Code tạo cấu trúc:
<div class='lowerbar-wrapper' id='lowerbar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Main Wrapper hoặc Content Wrapper

 Code ban đầu:
<div class='body-row' id='content-wrapper'>
Code tạo cấu trúc:
<div class='body-row' id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

Menu


 Code ban đầu:
<div class='tm-menu' id='tm-menu'>
Code tạo cấu trúc:
 <div class='tm-menu' id='tm-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

Sau khi đã tạo cấu trúc cho các thành phần xong bạn lại tiếp tục tạo cấu trúc cho các thành phần con của chúng  bạn có thể tham khảo trực tiếp tại link trang chủ
http://schema.org/SiteNavigationElement
Đây là link cung cấp tất cả các thứ liên quan đến Schema website tuy nhiên nếu bạn nào chưa rành về nó thì nhìn nó như đám rừng. Nếu như không hiểu về code cũng như lập trình thì bạn có thể tìm search trên mạng rồi sau đó fix dần các lỗi cấu trúc.

Kết luận: Với cách trên tôi đã hướng dẫn các bạn tái cấu trúc lại một template blogger theo chuẩn. Trong các bài viết sau tôi sẽ hướng dẫn các bạn cấu trúc lại các thành phần con bên trong của nó.

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

Tìm hiểu về dữ liệu có cấu trúc trong blogger

LongAnIT 1/29/2019 Bình luận
Hello các bạn! chúng ta lại gặp nhau trong bài viết thảo luận về triển khai dữ liệu có cấu trúc trong website.

Đầu tiên mình nói sơ qua về Cấu trúc schema là gì? nó có tác dụng gì trong SEO? Chắc nhiều bạn cũng đặt câu hỏi tương tự như thế này, bài viết này tôi sẻ giới thiệu cho bạn sơ qua về cấu trúc blogger chuẩn SEO Schema.org.

Tìm hiểu về dữ liệu có cấu trúc trong blogger
Tìm hiểu về dữ liệu có cấu trúc trong blogger

Schema được hiểu đơn giản là cấu trúc dữ liệu trên website mà bạn muốn khai báo với các công cụ tìm kiếm. Mỗi thành phần trên website sẻ có một đoạn mã, đoạn mã đó được khai báo để cho các bot của google biết rằng đây là phần nào trên website, và nó quan trọng hay không, phần chính hay phụ...

Như vậy bạn có thể hiểu nếu bạn khai báo càng chi tiết thì bot càng hiểu về website của bạn và nó thu thập được các dữ liệu xác đáng nên sẻ hiện thị chuẩn xác hơn nó giống như việc bạn đi xin việc thì cần phải khai báo sơ yếu lý lịch vậy đơn giản thế thôi.

Làm thế nào để kiểm tra website đã chuẩn SEO dữ liệu cấu trúc hay chưa? Tôi cung cấp cho bạn một công cụ chuẩn đoán của google có tên là  google Structured Data Testing Tool tại địa chỉ:

https://developers.google.com/structured-data/testing-tool/ 

Mình xin nói thêm với các bạn là tool này nó sẽ giúp bạn fix dần các cấu trúc bị lỗi, ngoài ra muốn chính xác hơn thì bạn nên vào google webmaster tool phần cấu trúc dữ liệu mà bot thu thập sẻ chi tiết hơn như hình bên dưới

Chọn mục tìm nạp URL gõ địa chỉ trang web của bạn vào đây
Chọn mục tìm nạp URL gõ địa chỉ trang web của bạn vào đây
Sau đó click vào chạy thử nghiệm để kiểm tra lỗi cấu trúc

Kết quả thu được sau khi kiểm tra cấu trúc
Kết quả thu được sau khi kiểm tra cấu trúc
Theo như hình trên thì không có lỗi xảy ra. Dĩ nhiên là tôi đã sửa lỗi cấu trúc trước đó rồi. Bây giờ bạn hãy thử kiểm tra xem web của mình có bị lỗi cấu trúc không nhé. Trong bài viết tiếp theo tôi sẽ hướng dẫn cho các bạn cách triển khai dữ liệu cấu trúc chuẩn cho website trên nền tản blogspot, mời các bạn đón xem nhé.

Chúc thành công!

Hướng dẫn chuyển hướng Redirect 301 trong Blogger

LongAnIT 1/11/2019 Bình luận
Chuyển hướng Redirect 301 nói chung là thuật ngữ để chỉ việc chuyển hướng từ một liên kết cũ sang liên kết mới, giúp chuyển hướng người dùng và cũng giúp cho bọ  tìm kiếm từ đường dẫn cũ sang đường dẫn mới. Nó rất đơn giản như bạn chuyển nhà đi nơi khác, hay thay đổi số điện thoại rồi sau đó bạn phải thông báo cho bạn bè biết vậy.

Bạn sẽ nghĩ thế nào nếu như khi người dùng tìm kiếm một bài viết liên quan đến site của bạn nhưng khi họ truy cập vào thì không thấy bài viết đó đâu cả việc này dẫn đến nguyên nhân trải nghiệm người dùng xấu và google cũng đánh giá site của bạn tệ. Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn cách chuyển hướng Redirect 301 trong Blogger từ liên kết cũ sang liên kết mới.

Như bạn đã biết là Blogger là web vệ tinh 2.0 mạnh nhất hiện tại bởi vì sau. Bởi vì những tùy chỉnh của nó trong thiết lập là vô cùng tuyệt vời cho SEO.

Chuyển hướng Redirect 301 trong Blogger cũng tương tự như các chuyển hướng 301 ở nền tảng khác, kết quả tìm kiếm được giữ nguyên. Bạn có thể áp dụng cách này để thay đổi đường dẫn các bài viết đẹp hơn, chuyển hướng khá dễ dàng giúp cho các liên kết nội bộ cũng như bên ngoài của bạn không bị gãy.

Tôi có ví dụ như sau: Trước đó tôi có tạo một bài đăng với nhãn là SEO vậy khi search bài viết theo nhãn SEO nó sẽ thế này

https://www.longanit.com/search/label/SEO
Hôm nay tôi tôi đổi nhãn cho bài viết từ SEO thành Thủ thuật SEO vậy đường dẫn mới nó sẽ có dạng thế này

https://www.longanit.com/search/label/Thủ thuật SEO
Tuy nhiên sau khi đổi xong thì liên kết cũ https://www.longanit.com/search/label/SEO đã không thể tìm thấy các bài viết theo nhãn SEO nữa. Vậy tôi cần chuyển hướng 301 sang link mới
https://www.longanit.com/search/label/Thủ thuật SEO
Ok chúng ta tiến hành ngay chuyển hướng như ví dụ trên để hiểu rõ hơn nhé. Thực hiện các bước như hướng dẫn sau đây:

Bước 1: Đăng nhập vào Blogger - Cài đặt - Tùy chỉnh tìm kiếm như hình bên dưới

Chuyển hướng tùy chỉnh trong phần cài đặt của Blogger
Chuyển hướng tùy chỉnh trong phần cài đặt của Blogger

Bước 2: Trong mục chuyển hướng tùy chỉnh bạn click vào chỉnh sửa như hình trên chúng ta sẽ chuyển sang giao diện như sau

Giao diện thiết lập chuyển hướng 301
Giao diện thiết lập chuyển hướng 301

Như hình trên tôi có tạo 4 chuyển hướng 301. Bạn tiếp tục click vào "chuyển hướng mới" để bắt đầu thiết lập chuyển hướng tùy chỉnh 301.

Thiết lập đường dẫn cho link cần chuyển hướng sang link  mới
Thiết lập đường dẫn cho link cần chuyển hướng sang link  mới


 Giao diện trang chuyển hướng như trên chúng ta có 2 forum

  1. Forum đầu tiên bạn để link của đường dẫn cũ
  2. Forum thứ 2 bạn để link đường dẫn mới (Link cần chuyển hướng 301)
Lưu ý: Là link sẽ có dạng như sau: 

Cú pháp thêm link cũ và link mới trong chuyển hướng 301
Cú pháp thêm link cũ và link mới trong chuyển hướng 301


Như hình trên thì bạn có thể thấy là tôi chuyển hướng 301 cho nhãn bài viết. Nếu bạn muốn chuyển hướng một liên kết cố định thì cách làm vẫn tương tự bạn chỉ cần bỏ miền đằng trước ra là ok nhé.

Bước 3: Sau khi thay đổi xong bạn tiến hành lưu thay đổi là xong

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ơ bản cách chuyển hướng 301 tùy chỉnh trong blogger hi vọng là qua bài viết này có thể giúp được các bạn hiểu rõ hơn về tính năng này. Chúc các bạn SEO nhanh lên top nhé.