Tạo khung thông báo lấy từ thư viện Bootstrap

LongAnIT 8/27/2019 Bình luận
Tạo khung thông báo đẹp lấy từ thư viện Bootstrap
Tạo khung thông báo lấy từ thư viện Bootstrap
Như bác bạn đã biết công dụng của bootstrap ngoài việc nó hổ trợ chúng ta bốc cục chia cột cho việc thiết kế website nó còn có rất nhiều compoment khác rất hay mà trong bài viết ngày hôm nay tôi muốn đề cập đến đó chính là Bootstrap Alerts.

Như bạn đã thấy hình ảnh phía trên tôi chụp lại bới 5 mẫu nội dung và màu sắc khác nhau. Tôi sẽ liệt kê các code bên dưới đi theo thứ tự từ trên xuống dưới.
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  </div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  </div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  </div>
<div class="alert alert-info">
<strong>Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.
</strong></div>
Việc còn lại là bạn chỉ việc chèn nó vào trong Web/Blog của bạn sau đó thay đổi nội dung là xong. Lưu ý nếu bạn sử dụng blogspot thì khi post bài bạn chuyển sang chế độ HTML trước khi copy code vào nhé. Chúc các bạn thành công!

Sắp xếp bình luận mới nhất, cũ nhất cho blogspot giống facebook

LongAnIT 8/27/2019 Bình luận
Hello các bạn hôm nay chúng ta lại gặp nhau trong chuyên mục bài viết thủ thuật blogsppot. Như các bạn đã biết tính năng bình luận trong blogspot là : những bình luận mới nhất trong một chủ đề bài viết mặc định nó sẽ nằm phía dưới những bình luận trước đó điều này làm cho việc các bình luận mới bị trôi xuống phía sau làm cho chúng ta rất khó theo dõi.
Sắp xếp bình luận mới nhất, cũ nhất cho blogspot dạng facebook
Sắp xếp bình luận mới nhất, cũ nhất cho blogspot dạng facebook

Trong bài viết ngày hôm nay longanit sẽ hướng dẫn cho các bạn cách chèn thêm tính năng sắp xếp bình luận từ mới nhất → cũ nhất để bạn có thể dễ dàng theo dõi những bình luận mới nhất là khi nào!
Tính năng này tương tự như Comment của Facebook thì nay đã có thể sử dụng trên Blogspot 1 cách dễ dàng. Hãy làm theo các bước bên dưới nhé

Bước 1: Xác định nơi muốn hiển thị sắp xếp comment

Thông thường ta sẽ chèn phía trên những bình luận hoặc trên Khung Comment của Blogger.
Code phần bình luận có cấu trúc như sau.

Chèn code vào đây nếu bạn muốn hiển thị trên khung bình luận
<p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>
Chèn code vào đây nếu bạn muốn hiển thị trên nội dung bình luận
    <div class='comments-content'>
      <b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
Bước 2: Sau khi xác định vị trí chèn code bạn copy toàn bộ đoạn code bên dưới và dán vào nơi bạn muốn chèn nhé
<b:if cond='data:post.numComments &gt; 2'>
<style>
.coud-com{float:left;font-weight:700;margin-top:4px;font-size:14px}
.sort-comment{margin-top:13px;text-align:left}
.sort-comment .sort-sel{display:block;position:relative}
.sort-comment .sort-sel span{font-size:14px;font-weight:400;color:#888}
.sort-comment .sort-sel .sort-option{font-weight:500;cursor:pointer;padding:0;color:#4b4f56;border:0;font:500 14px Roboto,sans-serif;outline:0;margin:0 0 0 -2px}
.post-author.bottom {font-size: 18px;float: left;line-height: 0px;margin: 14px 0 0 7px;color: #5273b8}
</style>
<span class='post-author bottom'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><i class='fas fa-pen-square'/> Viết bình luận (<data:post.numComments/>)</a></span>
<div class='sort-comment' style='float:right'>
<div class='sort-sel'>
<span style='font-size:14px'>Xếp theo</span>
<select class='sort-option'>
<option selected='selected' value='newest'>Cũ nhất</option>
<option value='oldest'>Mới nhất</option>
</select>
</div>
</div><script type='text/javascript'>
//<![CDATA[
$.fn.reverseChildren = function() {
return this.each(function() {
var $this = $(this);
$this.children().each(function() {
$this.prepend(this);
});
});
};
$(".comments-content ol").reverseChildren();
$(".sort-option").on("change", function() {
$(".comments-content ol").reverseChildren();
})
//]]>
</script>
</b:if>
Bước 3: Lưu lại và kiểm tra

Bài viết có tham khảo từ bạn Huỳnh Phụng Blogger. Chúc các bạn thành công nhé.
Lưu ý: Tính năng sắp xếp bình luận mới nhất, cũ nhất cho blogspot mình đã viết lại điều kiện. ↠ chỉ hoạt động khi bài viết của bạn có từ 3 bình luận trở lên. Vì khi chỉ có 1 hoặc 2 bình luận ta cũng không có gì để cần phải sắp xếp để để tránh ảnh hưởng tốc độ Website.

Code tạo đồng hồ, ngày tháng năm chuẩn đẹp bằng js cho Website

LongAnIT 8/27/2019 Bình luận
Trong bài viết hôm nay mình xin chia sẻ cho các bạn code tạo đồng hồ, ngày tháng năm chuẩn đẹp bằng js cho Website. Các bạn có thể áp dụng cho blogspot của mình. Cách thực hiện rất đơn giản

Code tạo đồng hồ, ngày tháng năm chuẩn đẹp

Chèn code này vào bất cứ vị trí nào muốn hiện, hoặc widget HTML/Javascript trong Bố cục.

<center><script>var myVar=setInterval(function(){myTimer()},1000); function myTimer() {var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("h").innerHTML=t;}</script>
<span id="h"></span>
<script type="text/javascript">
n=new Date();if(n.getTimezoneOffset()==0)t=n.getTime()+(7*60*60*1000);else t=n.getTime();n.setTime(t);var dn=new Array("Chủ nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7");d=n.getDay();m=n.getMonth()+1;y=n.getFullYear()
document.write(dn[d]+", "+(n.getDate()<10?"0":"")+n.getDate()+"/"+(m<10?"0":"")+m+"/"+y)
</script></center>
<style>
#h {font-weight:400;
    display: block;
    font-size: 30px;
    margin: 0 0 5px;
    letter-spacing: 5px;
}
</style>
Chúc các bạn thành công!
Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Tạo intro post cho blogspot ở trang tĩnh và trang bài viết

LongAnIT 7/12/2019 Bình luận
Hello xin chào các bạn, chúng ta lại gặp nhau trong chuyên mục thủ thuật blogspot. Trong bài viết ngày hôm nay tôi sẽ hướng dẫn các bạn cách để chúng ta tạo một intro post cho blogspot. Nghe có vẻ khá hiểu tuy nhiên hãy nhìn hình bên dưới như mình demo nhé.

Tạo intro  post cho bài viết và trang tĩnh blogspot
Tạo intro  post cho bài viết và trang tĩnh blogspot

Về cách thức hoạt động của code này như sau


  1. khi bạn truy cập vào  một bài viết bất kỳ thì phía trên bài viết sẽ hiển thị một hình nền chứa thông tin tiêu đề bài viết và đường link "permaklink" như hình trên.
  2. Code có thể tùy chỉnh được tất cả bao gồm hình nền màu sắc, hiệu ứng
  3. Code sử dụng thẻ điều kiện </b:if> để tùy biến hiển thị

Các bước tiến hành


Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới và dán nó vào phía bên dưới menu trong template của bạn
<!--Bắt đầu intro bài viết hiển thị trên trang bài viết và trang tĩnh blogspot-->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

<style>
#longanit_postpage{position:relative;display:table;width:100%;height:46vh;margin:0!important;padding:0!important;z-index:999;background:url(https://1.bp.blogspot.com/-t6PmyG2WqWQ/XR1pXC6amgI/AAAAAAAABlI/1PRU6nCtiBMlfy51VJhDxTfVkht6AwpKwCLcBGAs/s1600/banner_longanit.jpg) no-repeat center center!important;background-size:cover!important}
#longanit_postpage:before{content: &#39;&#39;; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#longanit_postpage:after{content:&#39;&#39;;z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.longanit_postpage_content{position:relative;z-index:3;margin:auto}
.longanit_postpage_label h2{animation: zoomInUp 6s; font-size: 31px; font-weight: 400; color: rgba(255,255,255,.85); margin: 0; padding: 0;text-transform:uppercase;text-align:center}
.longanit_postpage_label p{animation: zoomInDown 4s; font-size: 21px; font-weight: 300; color: rgba(255,255,255,0.7); margin: .5em 0 0 0; padding: 0}
.longanit_postpage_label{margin:0 auto;text-align:center;padding:0}
.longanit_meta_{display:table-cell;vertical-align:middle;text-align:center}
</style>
<div id='longanit_postpage'>
<div class='longanit_meta_'>
<div class='longanit_postpage_content'>
<div class='longanit_postpage_label'>
<h2 class='_title' id='post-title'><i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/><data:blog.pageName/><i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p><data:blog.url/></p>
</div>
</div></div>
<div class='longanit_meta_'>
</div>
</div>
</b:if>
</b:if></b:if>

<!--Kết thúc intro bài viết hiển thị trên trang bài viết và trang tĩnh blogspot-->
 Bước 3: Tiến hành save lại và xem kết quả. Bạn có thể chỉnh sửa lại một số thứ mình tô đỏ ở trên

Code sử dụng 3 thẻ điều kiện: Chỉ hiển thị trên trang bài viết, trang tỉnh và không hiển thị trên mobile
Thay thế link hình ảnh bằng link sau:
https://1.bp.blogspot.com/-t6PmyG2WqWQ/XR1pXC6amgI/AAAAAAAABlI/1PRU6nCtiBMlfy51VJhDxTfVkht6AwpKwCLcBGAs/s1600/banner_longanit.jpg
Chỉnh sửa độ rộng và chiều cao của bức ảnh banner bạn chỉnh code này: width:100%;height:46vh

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn một tùy chỉnh chuyên sâu áp dụng thẻ điều kiện vào trong blogspot để hoàn thành code tạo intro cho bài viết ở trang tĩnh và trang bài viết cũng như là trên mobile.

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Highlight Author Comments in Blogger in threaded comment System

LongAnIT 7/12/2019 Bình luận
Nếu như blog của bạn có lưu lượng truy cập tương đối tốt thì blog của bạn cũng nhận được nhiều bình luận, điều đó có thể là tích cực hoặc tiêu cực. nhận ý kiến ​​liên quan đến cách bạn tương tác với khách truy cập.
Highlight Author Comments in Blogger in threaded comment System
Highlight Author Comments in Blogger in threaded comment System


Trong blog của bạn có nhiều bình luận. Làm thế nào khách truy cập blog xác định hoặc nhận ra nhận xét của bạn từ những bình luận này. Nhiều blogger sử dụng tên tài khoản là Quản trị viên. Nếu họ bình luận trong blog của bạn hoặc trả lời các bình luận khác, những khách truy cập khác nghĩ rằng đó là Quản trị viên của blog đó. Bạn có muốn làm nổi bật ý kiến ​​của bạn trong blog của bạn?

Chính vì thế mà trong bài viết hôm nay tôi sẽ hướng dẫn các bạn một thủ thuật nhỏ để làm đẹp phần bình luận của blogspot thủ thuật có tên gọi "Highlight Author Comments" tạm dịch làm đẹp CSS admin comment với một script khá đơn giản.


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


<script type="text/javascript">
    $(function() {
      function highlight(){
        $(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)
          .css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)
          .css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;http://4.bp.blogspot.com/-pLzbR7dRJ_M/UcbQMLJAw1I/AAAAAAAAAh8/16rH5vfHKsM/s1600/admin_comment1.png&quot;) no-repeat bottom right&#39;)
          .css(&#39;padding&#39;, &#39;10px&#39;);
          }
          $(document).bind(&#39;ready scroll click&#39;, highlight);
                       });</script>

Thay đổi địa chỉ URL ảnh mình tô đỏ bên trên thành địa chỉ URL image của bạn nhé.

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Hướng dẫn tạo thư viện ảnh cho Blogger

LongAnIT 7/02/2019 4 Bình luận
Như chúng ta đã biết tất cả các Website và Blog hiện nay đa phần đều có chuyên mục thư viện ảnh. Với thư viện ảnh các bạn có thể tùy biến làm đẹp cho website của mình ví dụ như: Ảnh hoạt động công ty, ảnh thiên nhiên, xe, nhà... và nhiều thể loại khác. 

Gallery tạo bởi longanit.com

Trong Blogger khi bạn upload hình ảnh khi đăng bài thì mặc nhiên hình đó sẽ nằm trong server của blogger. Tuy nhiên việc sắp xếp hình ảnh mặc định trong Blogger không được đẹp cho lắm. Vì vậy trong bài viết này LongAnIT sẽ hướng dẫn các bạn tạo một thư viện ảnh ( Gallery ) với các bước thực hiện đơn giản.

Bước 1: Đăng nhập vào Blogger - Trang - Tạo trang mới
Bước 2: Chuyển sang Tab HTML và Copy đoạn code bên dưới dán vào

<style>
.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}
div.gallery img {
    width: 100%;
    height: auto;
}
div.gallery img:hover {
opacity: 0.8;
}
div.desc {
    padding: 10px;
    text-align: center;
}
* {
    box-sizing: border-box;
}
@media only screen and (max-width: 700px){
    .gallery {
        width: 49.99999%;
        margin: 6px 0;
    }
}
@media only screen and (max-width: 500px){
    .gallery {
        width: 100%;
    }
}
.image-gallery:after {
    content: "";
    display: table;
    clear: both;
}
</style>
<div class="image-gallery">
  <!-- Grid Image Gallery -->
  <div class="gallery">
      <img src="Địa chỉ ảnh 1" alt="SEO-IMAGE-CAPTION">
  </div>
  <!-- Grid Image Gallery with Caption -->
  <div class="gallery">
      <img src="Địa chỉ ảnh 2" alt="SEO-IMAGE-CAPTION">
      <div class="desc">MIÊU TẢ DƯỚI HÌNH ẢNH</div>
  </div>
  <!-- Clickable Grid Image Gallery -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="Địa chỉ ảnh 3" alt="SEO-IMAGE-CAPTION">
    </a>
  </div>
  <!-- Clickable Grid Image Gallery with Caption -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="Địa chỉ ảnh 4" alt="SEO-IMAGE-CAPTION">
    </a>
    <div class="desc">MIÊU TẢ DƯỚI HÌNH ẢNH</div>
  </div>
</div> 
Code trên chia làm bốn 4 cột mỗi cột 1 hình và Reponsive trên các thiết bị Smartphone. Nếu bạn muốn chia thành 3 cột hoặc 2 cột vui lòng thay đổi code sau trong CSS.

.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}

  • Thay đổi giá trị :  24.99999% thành 33.333% ( chia làm 3 cột )
  • Thay đổi giá trị :  24.99999% thành 49.999% ( chia làm 2 cột )

Chú ý: Bạn tính làm sao để khi cộng giá trị tất cả các cột lại <=100% là ok

Kết luận: Bài viết trên tôi đã hướng dẫn các bạn cơ bản tạo thư viện hình ảnh trên blogger. Mọi thắc mắc vui lòng comment ngay bên dưới.

Hướng dẫn cơ bản cách nhúng bootstrap 3 vào trong blogger

LongAnIT 6/30/2019 Bình luận
Bootstrap 3 Framework

Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web. Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ (typography), các form, các nút (button), tables, modals, v.v... chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn.

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như một framework, một công cụ để phục vụ công việc nội bộ của Twitter. Trước khi phát triển Bootstrap, có nhiều thư viện khác nhau đã được sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột. Bootstrap ra đời để khắc phục những yếu tố này, cũng như giúp các nhà phát triển, lập trình tại Twitter có thể triển khai công việc nhanh hơn, tiện lợi và đồng bộ hơn.

Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi tiếng trên thế giới như Chrome, Firefox, IE, Opera.... Kể từ phiên bản 2.0 trở l nó cũng hỗ trợ Responsive Web Design. Thiết kế và bố trí của các trang web tự động điều chỉnh, tự động tương thích các thiết bị được sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động).

1. Tôi xin trích dẫn cấu trúc cơ bản của trang Blogger

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Tiêu đề trang web
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
Thêm nội dung trang web của bạn vào đây
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
Đây là cấu trúc cơ bản của 1 template blogger ( Cấu trúc cơ bản, CSS, HTML...).

2. Để sử dụng bootstrap vào trong blogger chúng ta sẽ thực hiện cách sau:

Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML bạn thêm đoạn code bên dưới vào ngay phía dưới thẻ <head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
 Làm tương tự bạn thêm 2 link bên dưới vào trước trên thẻ </body>
<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>
<script async='async' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' type='text/javascript'></script>
 Thêm thẻ Reponsive cho blogger
<meta name="viewport" content="width=device-width, initial-scale=1">
Kết luận: Trên đây, tôi đã hướng dẫn các bạn cách nhúng bộ thư viện Bootstrap vào website. Sau khi thực hiện việc nhúng xong Boostrap vào website, bạn có thể làm việc với các thành phần của bootstrap.

Tối ưu tốc độ load file CSS với function loadCSS cho blogspot

LongAnIT 6/29/2019 Bình luận
Xin chào các bạn hôm nay chúng ta lại gặp nhau trong chuyên mục tăng tốc blogspot toàn tập. Trong bài viết trước tôi có hướng dẫn các bạn cách Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên và sau khi thực hiện thì việc tải trang đã được cải thiện đáng kế. Trong bài viết ngày hôm nay longanit.com sẽ tiếp tục hướng dẫn các bạn cách tối ưu tốc độ load file css  với function loadCSS dạng font icon hay dẫn link.
Tối ưu tốc độ load file CSS với function loadCSS cho blogspot
Tối ưu tốc độ load file CSS với function loadCSS cho blogspot

Khi sử dụng blogspot tôi chắc rằng bạn nào cũng có sử dụng font load từ google có thể kể đến font Roboto và thêm một font nữa khá nặng là Font awesome icon. Tuy nhiên việc nhúng 2 font này theo cách thuần túy làm cho blogspot load khá là nặng. Để giảm thiểu tối đa tốc độ load cho nó bạn có thể sử dụng đoạn Script bên dưới mà tôi cung cấp.
 <script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("link file CSS 1");loadCSS("link file CSS 2");
//]]>
</script>
 Bạn thay thế 2 link màu đỏ thành link file CSS cần load nhé. Tôi lấy thí dụ như hình bên dưới

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("//fonts.googleapis.com/css?family=Roboto:400,500,700")
//]]>
</script>

Lời khuyên từ kinh nghiệm


  1. Để tốt nhất cho việc tải trang nhanh chóng bạn chỉ nên sử dụng hình ảnh định dạng jpg và hạn chế sử dụng các hình ảnh như png,..
  2. Hình ảnh không cần thiết phải quá nét, quá chi tiết do đó bạn cần giảm dung lượng của ảnh bớt đi. Theo kinh nghiệm bạn nên để kích thước dưới 150kb dưới 100kb càng tốt cho hình ảnh
  3. Về sử dụng font bạn có thể dùng font Helvetica co sẵn thay cho font Roboto về bản chất font này có sẵn load nhanh không qua server google lại khá là đẹp. 
Ngoài ra để nén hình ảnh bạn có thể truy cập vào 2 link bên dưới nếu bạn nào không rành về Photoshop hoặc các công cụ chỉnh sửa ảnh để giảm kích thước của ảnh.


Kết luận: Như vậy qua bài này tôi đã hướng dẫn các bạn thêm một cách tối ưu tốc độ tải trang cho blogspot nữa hi vọng sẽ giúp được các bạn phần nào trong việc làm chủ blogspot. Kính mời các bạn theo dõi trong phần tiếp theo vào ký tới nhé. Chúc các bạn thành công và SEO nhanh lên top nhé.


Sửa lỗi nội dung trích dẫn code bài viết tràn ra khỏi khung blogspot

LongAnIT 6/28/2019 Bình luận
Khi viết bài về thủ thuật blogspot chắc rằng chúng ta sẽ sử dụng nhiều nhất khung trích dẫn code cho bài viết. Có một số trường hợp xảy ra thường là nội dung bài viết, phần trích dẫn code, đoạn văn bản  hoặc đường link quá dài làm cho bài viết bị tràn ra ngoài khung. Trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn các bạn cách sửa lỗi nội dung trích dẫn code bài viết bị tràn ra ngoài.

Sửa lỗi nội dung trích dẫn code bài viết tràn ra khỏi khung blogspot
Sửa lỗi nội dung trích dẫn code bài viết tràn ra khỏi khung blogspot

Trường hợp này thường là do copy bài viết tự một website khác dán vào bài viết, để khắc phục lỗi Text bị tràn ra khỏi khung bạn làm như sau:

Bước 1:  Đăng nhập vào phần quản trị => Chủ đề - Chỉnh sửa HTML
Bước 2:  Thêm đoạn code bên dưới vào trước thẻ đóng  ]]>
.post{word-wrap:break-word;}
 Chú ý: Nếu gặp phải trường hợp code khung trích dẫn quá dài ta thay thế bằng code sau:
blockquote{word-wrap:break-word}
Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Phím tắt hữu ích cho khung soạn thảo Blogspot

LongAnIT 6/26/2019 Bình luận
Blogspot là nền tảng miễn phí và dễ sử dụng nhất tính tới thời điểm hiện tại. Bạn có thể sử dụng Blogger của Google để phục vụ cho công việc của mình, đơn giản là viết blog chia sẻ kinh nghiệm, hoặc tạo 1 Website bán hàng, Landing Page…
19 phím tắt hữu ích cho khung soạn thảo Blogspot
19 phím tắt hữu ích cho khung soạn thảo Blogspot

Nếu bạn là một blogger thì công việc viết bài nó trở thành quá quen thuộc rồi có phải không nào. Cũng giống tất cả các ngôn ngữ khác thì khung soạn thảo văn bản của Blogspot cũng có những công cụ phục vụ cho việc hỉnh sửa văn bản, hình ảnh, video... Tuy nhiên đối với những bạn thường xuyên làm việc với khung soạn thảo này thì những phím tắt sẽ vô cùng hữu dụng nó giúp bạn rút ngắn được thời gian trong việc soạn thảo cũng như chỉnh sửa bài viết. Trong  bài viết hôm nay longanit.com xin được giới thiệu với các bạn một số phím tắt thông dụng trong trình soạn thảo bài viết blogspot

PHÍM TẮT HỮU ÍCH CHO KHUNG SOẠN THẢO BLOGGER


1. Ctrl + C: Sao chép văn bản đã được chọn

2. Ctrl + V: Dán đoạn văn bản vừa mới sao chép

3. Ctrl + Z: Trả lại tác vụ trước đó

4. Ctrl + Y: Trả lại tác vụ sau khi nhấn Ctrl+Z

5. Ctrl + X: Cắt đoạn văn bản được chọn (bôi đen)

6. Ctrl + B: In đậm đoạn văn bản được chọn

7. Ctrl + A: Chọn toàn bộ văn bản trong trang

8. Ctrl + S: Tự động lưu bài viết của bạn

9. Ctrl + U: Định dạng gạch chân văn bản cho đoạn văn bản được chọn

10. Ctrl + I: In nghiêng đoạn văn bản được chọn

11. Ctrl + K: Chèn liên kết cho đoạn văn bản được chọn

12. Tab: Chuyển danh sách dạng list xuống list cấp 2

13. Tab + Shift: Xóa định dạng danh sách

14. Ctrl + F: Tìm kiếm từ hoặc đoạn văn bản trong trang

15. Ctrl + Shift + M: Chuyển trình soạn thảo bài viết sang chế độ xem trên Mobile

16. Ctrl ++ (Press + Twice): Phóng lớn trình soạn thảo

17. Ctrl — (Press – Twice): Thu nhỏ trình soạn thảo

18. Ctrl + 0 (Số không): Trả lại trình soạn thảo về kích thước mặc định

19. Ctrl+Shift+V: Loại bỏ định dạng đoạn văn bản mới copy và chỉ dán text vào khung soạn thảo.

Kết luận:
Trên đây là một số những phím tắt hữu ích cho khung soạn thảo văn bản Blogspot bạn nên áp dụng bởi vì nó có thể giúp bạn giảm thời gian định dạng và soạn thảo bài viết. Nếu bạn thấy hay thì hãy chia sẻ ngay để cho mọi người cùng biết nhé.


Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Hướng dẫn tùy biến Widget ở những trang nhất định trong Blogspot

LongAnIT 6/22/2019 Bình luận
Hello các bạn. Hôm nay chúng ta lại gặp nhau trong topic thủ thuật blogspot. Như các bạn đã biết blogspot quản lý giao diện chính từ Template chứa tất cả các code người dùng sử dụng. Một phần nữa là Bố cục (Widget) - Giao diện đồ họa dành cho người dùng dễ thao tác có thể thêm/xóa các tiện ích

Đối với các blog có nhiều bốc cục thì việc sử dụng nhiều Widget (Tiện ích) là điều không tránh khỏi. Do vậy làm thế nào để các Wiget tiện ích đó hiển thị đúng nơi, đúng chỗ là điều mà các Blogger phải tính toán và cân nhắc rất kỹ.

Việc bố trí các Widget trên Template một cách hợp lý sẽ làm nổi bật nội dung cần truyền tải, logic và hài hòa với bố cục Blog.Hiển thị Widget ở những trang nhất định trong Blogspot - ẩn hiện Wiget ở những trang nhất định trên desktop và moblie sẽ giúp tối ưu hóa tốc độ tải trang cho blog của bạn rất nhiều

Chính vì thế mà trong bài viết này longanit xin được giới thiệu đến các bạn thủ thuật ẩn hiện Widget ở những trang nhất định trong Blogspot”

 Xác định ID của Widget tiện ích cần tùy biến ta làm như sau:

Bước 1: Đăng nhập vào Blogger - Bốc cục như hình

Cách xác định ID của tiện ích Widget
Cách xác định ID của tiện ích Widget

Tại giao diện tiện ích chọn một Widget bất kỳ cần tùy biến click vào chỉnh sửa như hình

ID nằm phía bên phải cuối cùng của thanh Address
ID nằm phía bên phải cuối cùng của thanh Address
Nhìn lên phía trên thanh địa chỉ màu xanh bạn kéo con trỏ chỏ cho đền cuối cùng sẽ hiện thị ID của Widget như trong hình trên ID=HTML7.

Các bước tùy biến Widget

Sau khi hoàn thành xác định ID của Widget cần tùy biến bạn quay lại trang quản trị Blogger

  1. Chủ đề - Chình sửa HTML. 
  2. Phần phía trên thanh menu của template bạn sẽ thấy tab "chuyển đến tiện ích". 
  3. Tìm ID có tên là HTML7
Chỉnh sửa tùy biến trong template blogspot
Chỉnh sửa tùy biến trong template blogspot

Click vào dấu tam giác màu đen bên trái để mở rộng code ra như trong hình tôi có code này


<b:widget id='HTML7' locked='false' title='Liên hệ quảng cáo' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<a href="https://www.longanit.com/" target="new"><img  src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" class="img-responsive"/></a>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
Bây giờ để ẩn Widget này ngoài trang chủ tôi sẽ thêm code bên dưới vào phía dưới dòng  <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>
Sau khi hoàn thành tôi có code hoàn chỉnh như sau
 <b:widget id='HTML7' locked='false' title='Liên hệ quảng cáo' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<a href="https://www.longanit.com/" target="new"><img  src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" class="img-responsive"/></a>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
Tiến hành lưu lại và xem kết quả. Cũng tương tự như thế dùng cho các thè điều kiện bên dưới để tùy biến

Hide from home page

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>

Hide from index pages

(home, label, search page or all posts page (include home and its older posts pages).
<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:remove/>
</b:if>

Hide from static pages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <b:remove/>
</b:if>

Hide from item pages (articles, posts)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:remove/>
</b:if>

Hide from archive pages (showing posts by months / years)

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
 <b:remove/>
</b:if>

Hide from 404 pages

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
 <b:remove/>
</b:if>

Hide from mobile

<b:if cond='data:blog.isMobileRequest'>
 <b:remove/>
</b:if>
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 để chúng ta tùy biến một widget bất kỳ trong blogspot bằng cách sử dụng một số thẻ điều kiện cơ bản. Chúc các bạn thành công

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Hướng dẫn cách tạo RSS Feedburner và thêm Feed vào Blogspot

LongAnIT 6/15/2019 Bình luận
Xin chào tất cả các anh em hôm nay cuối tuần chúng ta lại gặp nhau trong chuyên mục bài viết thủ thuật blogspot. Trong chủ đề bài viết này tôi sẽ giới thiệu đến các bạn một thuật ngữ có tên RSS hay Feedburner của google. Trước khi đi vào bài viết này tôi xin giới thiệu sơ qua đôi chút về nó.

RSS hay feed là nguồn cấp dữ liệu miễn phí được Google cung cấp giúp các webmaster có thể quảng bá, quảng cáo, tối ưu hóa cũng như kiếm thêm thu nhập từ quảng cáo. RSS hay Feed là rất cần thiết cho một website. Chúng ta có thể sử dụng RSS hay Feed để làm một nguồn cấp dữ liệu qua mail cho những người dùng đăng ký. Cụ thể là ngay trong blogspot với tính năng tiện ích Widget tạo hộp mail để người dùng theo dõi qua email

Hướng dẫn cách tạo Feedburner

Bước 1:  Truy cập vào đường dẫn sau: https://feedburner.google.com

Bước 2: Bạn đăng nhập với tài khoản Google bình thường thôi nhé. Và chúng ta sẽ có giao diện sau:
Feed của feedburner blogspot
Giao diện Feed của feedburner minh họa qua hình
Bước 3: Tại đây bạn nhập các thông tin như hình minh họa bên dưới để đăng ký cho trang blogspot của bạn nhé.
Nhập địa chỉ trang web của bạn tại khung quản lý feed
Nhập địa chỉ trang web của bạn tại khung quản lý feed

Sau khi điền đầy đủ thông tin xong bạn click vào NEXT đề sang bước kế tiếp

Tùy chọn Feed cho blogspot của bạn
Tùy chọn Feed cho blogspot của bạn

Bước 4:  Ngay tại trang Indentify Feed Source bạn click chọn vào mục thứ 2 như hình trên chính là RSS bạn đăng ký sau đó click Next để tiếp tục.

 Feed cho blogspot bạn nhập tên Feed
Chúc mừng bạn đã hoàn thành tạo Feed cho blogspot bạn nhập tên Feed tại đây

Đây chính là tùy chọn cho bạn đặt đường dẫn tùy chỉnh cho RSS của mình, hãy sửa lại cho vừa ý và tiếp tục Next. Chú ý: nếu tên báo bị trùng bạn phải tìm tên khác cho nó phú hợp nhé. OK rồi thì Next tiếp, các bước tiếp theo các bạn cứ bấm Next cho đến khi hoàn thành là xong

Hoàn chỉnh tạo  Feed cho blogspot
Hoàn chỉnh tạo  Feed cho blogspot như vậy bạn sẽ có 01 link như trích dẫn bân dưới
Như vậy với cách làm như trên thì tôi đã tạo xong RSS cho blogspot của mình với địa chỉ:
http://feeds.feedburner.com/longanitvn
Đến đây chúng ta đã hoàn thành 99% chỉ còn một bước nữa đó chính là khai báo feed cho Blogspot.

Khai báo Feed cho blogspot trong phần cài đặt thiết lập
Khai báo Feed cho blogspot trong phần cài đặt thiết lập

Để khai báo Feed cho Blogspot, bạn truy cập vào trang quản trị Blogspot. Sau đó vào Cài đặt (Settings) -> Khác. Sau đó thêm đường dẫn feed vừa tạo vào URL chuyển hướng nguồn cấp dữ liệu bài đăng, sau đó lưu lại là xong.

Kết luận: Qua bài viết trên tôi đã hướng dẫn các bạn cách để tạo RSS Feedburner của google thay thế cho Atom mặc định của blogspot việc này giúp cho site của bạn index nhanh hơn mỗi khi có bài viết mới và giúp bạn cải thiện hơn rất nhiều trong việc SEO và nếu như traffic của bạn tốt bạn sẽ có ngay một backlink chất lượng 92 điểm từ đây.

Khắc phục sự cố khi chuyển sang giao thức https trên blogspot

LongAnIT 5/28/2019 Bình luận
Việc chuyển sang https bây giờ thật sự rất dễ dàng vì bản thân blogger đã hỗ trợ sẵn trong phần cài đặt từ trang quản trị. Tuy nhiên webiste của bạn vẫn gặp một số lỗi cở bản nhất là một số link trong template do bạn chưa chuyển sang https. Trong bài viết này longanit.com sẻ hướng dẫn các bạn khắc phục sự cố một số lỗi khi chuyển giao sang giao thức https này chỉ qua một vài bước kiểm tra cơ bản.

Bước 1: Đăng nhập vào Blogger - Cài đặt
Bước 2: Kéo thanh cuộn xuống giữa trang bạn sẽ nhìn thấy mục thiết lập HTTPS. Mục này phải ở tình trạng là nhé. Nếu bạn để Không thì hãy chuyển trạng thái nó sang Có 



Hướng dẫn thiết lập cơ bản https trong blogspot
Hướng dẫn thiết lập cơ bản https trong blogspot 
Một câu hỏi đặt ra là mặc dù bạn đã thiết lập tất cả đúng nhưng trên thanh trình duyệt vẫn không hiện ra được hình ảnh dấu" chìa khóa"" bảo mật như hình bên dưới


Nếu như bạn gặp phải trường hợp này vui lòng thực hiện thêm các bước sau nhé

Bước 3: Đăng nhập vào Blogger - Chù đề - Chỉnh sửa HTML
Bước 4: Trong khung tìm kiếm bạn tìm từ khóa sau http:// và sửa nó thành // khi đó hệ thống sẽ tự động gán link https cho các link trong blog của bạn. Thí dụ tôi có link sau
http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
Sau khi chuyển xong nó sẽ thế này
//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
Bước 5: Sau khi hoàn thành save lại và kiểm tra nhé.

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 fix một số lỗi cơ bản khi chuyển blogger sang giao thức https. Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.

Cách chèn hình ảnh và liên kết vào trang web HTML

LongAnIT 5/27/2019 Bình luận
Chúng ta có thể chèn hình ảnh thuộc các định dạng như: jpg, png, gif (hình động),.... vào trang web của mình. Trong bài viết hôm nay phần chuyên mục HTML và CSS căn bản mình xin giới thiệu với các bạn một số mã cơ bản để chèn hình ảnh, link vào trong website.

1. Cách chèn hình ảnh vào trong website

Để đưa hình ảnh vào trang html ta dùng thẻ <img> với cú pháp cơ bản như sau

<img src="Liên kết đến ảnh " />

Một số thuộc tính đi kèm như sau

  • Width: Chiều rộng của ảnh sẽ hiển thị trên trình duyệt ( tính bằng pixel hoặc % so với chiều rộng toàn trang web )
  • Height: Chiều cao mà ảnh sẽ hiển thị trên trình duyệt.
  • Border (Đường biên hay đường viền) :Thuộc tính này quy định độ dày của đường biên bao quanh ảnh ( tính bằng pixel ). Nếu không có thuộc tính này, ảnh sẽ không có đường biên bao quanh.
  • Alt : Tiêu đề cho ảnh, khi bạn rê chuột vào ảnh, tiêu đề của ảnh sẽ hiện ra. Tuy nhiên "alt" không có tác dụng trong một số trình duyệt, vì vậy để chắc ăn, bạn nên dùng thuộc tính sau.
  • Title : Tương tự như "Alt".

Vậy cú pháp đầy đủ để đưa một bức ảnh vào trang html là

<img src="Dường dẫn đến ảnh" width="Độ rộng" height="chiều dài" border="độ dày" title="Tiêu đề ảnh" >

2. Chèn Link/Liên kết vào webiste


Để chèn một liên kết vào trang web, ta sử dụng thẻ <a> với cú pháp như sau


<a href="https://www.longanit.com" target=" "> LonganIT </a>

Khi bạn sử dụng thẻ này ta có một số chú ý sau


  • Liên kết đến một trang web nào đó phải có http:// đi trước.
  • Thuộc tính target sẽ xác định xem liên kết của bạn sẽ được mở ở đâu khi kích hoạt.
  • Giá trị thường dùng là "_blank" - Mở trong một tab mới
  • Nếu không có thuộc tính này, liên kết sẽ được mở trên trang hiện tại.
  • Trên trình duyệt sẽ chỉ hiển thị đoạn "text", đoạn text này sẽ đại diện cho liên kết, khi bạn click vào "text", liên kết sẽ được mở như ví dụ trên  của tôi text là "LonganIT"

Bạn có thể thay thế đoạn text bằng một bức ảnh theo cú pháp sau

<a href="liên kết" target="new"><img src="link ảnh"></a>

3. Liên kết gửi email

Khi bạn click vào một liên kết, bạn sẽ được đưa đến một trang tài liệu hoặc một trang web. Nhưng giả sử một người đọc bài viết của bạn, và họ muốn liên hệ với bạn để trao đổi thêm. Lúc này, bạn nên để lại một "dấu vết" để giúp họ liên hệ với bạn.

  • Tạo lệnh có tên là mailto: <a href="mailto:Địa chỉ email của bạn"> text </a>
  • Khi người dùng click vào dòng text, họ sẽ được đưa đến trang gửi email, khi họ đăng nhập vào email của họ, thì email của bạn sẽ được đặt sẵn trong phần Email đích.
Cuối cùng là bạn xem đoạn code ví dụ dưới đây mình demo nhé

<a href="https://www.longanit.com/p/contact.html" target="new"><img src="https://1.bp.blogspot.com/-uvy7EJFXU64/XOuWV1zbIRI/AAAAAAAABhQ/PWvJ5GADafIwEVofohOM9sD1JYUe8WwlgCLcBGAs/s1600/ad-longanit.com.jpg" /></a>

Hướng dẫn cài đặt template mới cho Blogspot

LongAnIT 5/27/2019 Bình luận
Hello các anh em. Hôm nay chúng ta sẽ quay lại với một chủ đề nó rất cũ rồi nhưng mà thật sự rất mới đối với những bạn lần đầu tiên mới làm quen với blogspot. Hãy cùng với longanit.com tìm hiểu cách thế nào để chúng ta có thể cài đặt template mới cho blogspot cũng như là "Sao lưu / Khôi phục" template trên blogspot.

Sao lưu và khôi phục template blogspot
Hướng dẫn cài đặt template mới cho Blogspot

Thường thi sau khi tiến hành xong thủ tục đăng ký blog thì bước tiếp theo là bạn sẽ cài Template hay còn gọi theme (giao diện) cho nó bởi những giao diện mặc định của Blogger bản thân nó không được đẹp cho lắm và không hỗ trợ tính năng tùy biến cao đối với nhu cầu sử dụng.

Hiện nay trên mạng có rất nhiều trang chia sẻ các Template blogspot miễn phí bạn có thể thoải mái tải về và cài đặt. Tôi nói thí dụ bạn muốn làm một trang blog bán hàng điện thoại thì bạn tìm những template nào có chức năng giống như thế để cài vào. Bạn có thể thao khảo template blogspot bán hàng shop điện thoại mà tôi chia sẻ tại longanit nhé.

Mẫu template mình nói ở trên là một mẫu giao diện mình thấy là khá hoàn hảo về chức năng bán hàng cũng như là tốc độ load trang khá nhanh và có thể tùy biến rất dễ, bạn có thể xem demo ngay tại đây: https://www.hi4kids.com.

Bước 1: Download template bán hàng tại đây
Bước 2: Tiến hành giải nén ra một thư mục. Chú ý password unpack là: longanit.com
Bước 3: Đăng nhập vào trang Blogger - Chủ đề
sao lưu và khôi phục template blogspot
Giao diện sao lưu và khôi phục template blogspot by longanit.com
Bước 4: Click vào mục Sao lưu / Khôi phục để vào giao diện bên trong
Hướng dẫn cách sao lưu và thay đổi template blogspot
Giao diện chính của blogspot với 2 tính năng sao lưu và thay đổi template như hình
Sau khi thay đổi xong phần giao diện bạn truy cập lại website của bạn để thấy thay đổi , tuy nhiên bạn sẽ có thắc mắc là sao nhìn nó không giống ở template gốc mà trông cũng xấu vậy? Đó chính là lí do tại sao chúng ta phải cần cài đặt sao cho nó giống bản template gốc. Và đây chính là công đoạn làm lâu nhất và khó nhất đấy. Bạn có thể để lại comment bên dưới để chúng tôi hỗ trợ cho bạn việc hoàn thành.

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ất để sao lưu cũng như thay đổi một template mới trên nền tảng blogspot. Chúc các bạn thành công và SEO nhanh lên top nhé.

Hướng dẫn sử dụng thẻ Label (nhãn) trong blogspot

LongAnIT 5/22/2019 Bình luận
Trong blogspot có một thuật ngữ mang tên "Label" tạm dịch là "nhãn". Khi bạn đăng một bài viết bất kỳ thì trong thanh menu tùy chọn nằm phái bên phải bạn sẽ thấy có một tùy chọn tên là ""cài đặt bài đăng" bao gồm: Nhãn, Lịch Biểu, Liên kết,...như hình bên dưới.
Hướng dẫn cài đặt nhãn trong blogspot
Tùy chỉnh cài đặt bài đăng Label cho blogspot

Trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn cách sử dụng thẻ Label (nhãn) trong blogspot như thế nào cho đúng cách cũng như là chuẩn SEO

Bước 1: Tạo mới một bài đăng bất kỳ sau khi chỉnh chu tất cả các thứ nhìn phái bên phải mục cài đặt bài đăng bạn click vào mục Label (nhãn) hiển thị khung hộp thoại để tạo nhãn bạn hãy nhập vào nhãn mà bạn mong muốn thí dụ tôi đặt tên nhãn là SEO thì nó sẽ như sau
Quá trình tạo nhãn hoàn thành cho bài viết
Quá trình tạo nhãn hoàn thành cho bài viết
Bước 2: Sau khi tạo xong nhãn click vào hoàn thành như bước 2 trong hình trên. Ok  bây giờ  một "Label" (Nhãn) đã hiển thị với dòng chữ màu xanh, bên dưới khung vừa đặt tên "Label" (Nhãn). Các bạn chỉ cần bấm "Xuất bản" là xong.

Chú ý các tùy chỉnh nhãn trong blogspot như sau


  1. Nếu muốn tạo một "Label" (Nhãn) khác, thì viết một bài nữa và tiếp tục gắn (đặt tên) cho "Label" (Nhãn) mới - lặp lại thao tác như trên.
  2. Nếu viết một bài nữa và muốn đặt vào nhãn cũ thì chỉ việc bấm vào nhãn cũ đã tạo (hiển thị với chữ màu xanh ngay bên dưới khung đặt tên "Label" (Nhãn) rồi bấm "Hoàn thành" là bài viết sẽ được hệ thống tự động chuyển vào "Label" (Nhãn) đó. 
  3. Bạn có thể gán nhiều nhãn cho một bài viết bằng các nhãn có sẵn cũng như là tạo mới các nhãn cách nhau bằng dấu , (dấu phẩy)
  4. Bạn có thể đổi sang sang nhãn khác bằng cách chỉnh sữả bài viết và tạo nhãn mới cho bài viết

Vấn đề nhãn chuẩn SEO

Thật ra phần này liên quan đến "Permark link" mà trong các bài viết trước tôi đã có giới thiệu qua trong mục 10 bước để tạo một bài viết chuẩn SEO trên blogspot bạn có thể tham khảo trong longanit nhé.

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 nhãn cho bài viết trong blogspot cũng như là một số tùy chình về nhãn. Hi vọng qua bài viết này có thế giúp được phần nào các bạn trong việc tùy chỉnh nhãn trong blogspot. Trong quá trình thực hiện bài viết sẽ không thể tránh khỏi một số vấn đề thiếu xót vui lòng để lại bình luận bên dưới để trao đổi thảo luận cũng như chia sẻ. Chúc các bạn thành công và SEO nhanh lên top nhé.

Hướng dẫn sửa lỗi cấu trúc dữ liệu trên blogspot

LongAnIT 5/13/2019 Bình luận
Hello! Xin chào các bạn chúng ta lại gặp nhau trong chuyên mục thủ thuật blogger. Trong bài viết ngày hôm nay longanit sẽ hướng dẫn các bạn cách khắc phục một số lỗi trong cấu trúc dữ liệu của blogspot. Trong các bài viết trước mình đã có giới thiệu về cấu trúc dữ liệu của blogspot cũng như hướng dẫn các bạn cách chúng ta cấu trúc dữ liệu blogspot lại theo chuẩn.

Các lỗi thường gặp nhất khi kiểm tra dữ liệu cấu trúc blogspot thường sẽ là thiếu trường name, tên tác giả, ngày tháng, header,...Vậy thì chúng ta khắc phục nó thế nào. Các bạn hãy xem các hướng dẫn dưới đây để sửa nhé.

Đầu tiên chúng ta quay lại một chút xíu để test cấu trúc trang blogspot. Các bạn truy cập vào link sau:

https://search.google.com/structured-data/testing-tool/u/0/


Trước khi thực hiện việc kiểm tra bạn phải thông báo cho blogspot biết bằng việt thêm code sau đây vào trước thẻ đóng </body>
 <script type='application/ld+json'>
// <![CDATA[
{
  "@context" : "http://schema.org",
  "@type" : "WebSite",
  "name" : "All Blogger Things",
  "alternateName" : "ABT",
  "url" : "https://www.longanit.com"
}
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://www.longanit.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.longanit.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
// ]]>
      </script>

Thay thế địa chỉ https://www.longanit.com thành địa chỉ blogspot của bạn nhé. Ok bây giờ chúng ta bắt đầu việc sửa lổi.

Sửa lỗi Web Page Error

  1.  Blogger - Chủ đề - Chỉnh sửa HTML
  2.  Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <body> trong template 
  3.  Thay thế đoạn code bên dưới bằng thẻ <body>
<body class='index' itemscope='' itemtype='http://schema.org/WebPage'>

 #Nhấn save để hoàn thành. Bạn nên làm đến đâu thì save đến đó nếu báo lổi thì dễ có hướng khắc phục nhé.

Sửa lỗi Header Error

  1.  Blogger - Chủ đề - Chỉnh sửa HTML
  2.  Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <header> trong template 
  3.  Thay thế đoạn code bên dưới bằng thẻ <header>

 <header itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

#Nhấn Save đế hoàn thành.

Sửa lỗi Menu Error

  1.  Blogger - Chủ đề - Chỉnh sửa HTML
  2.  Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <nav> trong template 
  3.  Thay thế thẻ <nav> bằng đoạn code bên dưới
 <nav itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
# Nhấn save để hoàn thành.

Sửa lỗi Sidebar

  1.  Blogger - Chủ đề - Chỉnh sửa HTML
  2.  Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <div id='sidebar-wrapper'>  trong template 
  3.  Thay thế đoạn code bên dưới bằng thẻ <div id='sidebar-wrapper'> 
<div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>

# Nhấn save để hoàn thành

Sửa lỗi Footer

  1. Blogger - Chủ đề - Chỉnh sửa HTML
  2. Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <div id='footer-wrapper'> trong template
  3. Thay thế thẻ <div id='footer-wrapper'> bằng đoạn code bên dưới
 <div id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Sửa lỗi Blog Error

  1. Blogger - Chủ đề - Chỉnh sửa HTML
  2. Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <div id='main-wrapper'> trong template
  3. Thay thế thẻ <div id='main-wrapper'> bằng đoạn code bên dưới
  <div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
# Save đề hoàn thành

Sử lỗi Blog Posting Error


  1. Blogger - Chủ đề - Chỉnh sửa HTML
  2. Sử dụng phím (CTRL + F) tìm đoạn code chứa thẻ <div class='post hentry uncustomized-post-template'> trong template
  3. Thay thế thẻ <div class='post hentry uncustomized-post-template'> bằng đoạn code bên dưới

  <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
 #4: Tiếp tục tìm từ khóa <div class='post hentry'> or <article class='post hentry'>

 #5: Tiến hành thay thế bằng đoạn code bên dưới
 <div class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>
Sửa lỗi hCard Errors
  1. Blogger - Chủ đề - Chỉnh sửa HTML
  2. Sử dụng phím (CTRL + F) tìm đoạn code
 <span class='post-author vcard' >                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <data:post.author/>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn'><data:post.author/></span>
                  </b:if>
                </b:if>
              </span>
3. Tiến hành thay thế bắng đoạn code bên dưới
 <span class='post-author vcard' itemscope='itemscope'  itemtype='http://schema.org/Person'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </b:if>
              </span>


Sửa lỗi Article Errors

Tất cả các lỗi này bao gồm: Main Entity Of Page, Publisher, Article Name, Image, URL, Updated Date, and Published Date Errors.

Bước 1: Blogger > Chủ đề > Chỉnh sửa HTML

Bước 2: Tìm đoạn code sau  <div class='post hentry'> or <article class='post hentry'>

Bước 3: Thay thế bằng đoạn code bên dưới
    <meta content='data:post.link : data:post.url' expr:itemid='data:post.link' itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
    <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
      <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
        <meta content='https://2.bp.blogspot.com/-bYkKfIQpPX4/W5o7M85ORcI/AAAAAAAAAF8/kUER1t54X1knI0i7bO6l7EjiQz2AZyotwCK4BGAYYCw/s1600/longanitvn.png' itemprop='url'/>
        <meta content='320' itemprop='width'/>
        <meta content='60' itemprop='height'/>
      </div>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
      <meta expr:content='data:blog.title' itemprop='name'/>
    </div>
    <a expr:name='data:post.id'/>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'><img itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
    <b:else/>
    <a expr:href='data:post.url'/>
    </b:if>
      </b:if>
Bước 4: Thay thế địa chỉ link logo tô màu đỏ phía trên thành địa chỉ link logo blog của bạn nhé.

Bước 5: Sửa lỗi date published tìm đoạn code sau  <data:post.timestamp/>

Bước 6: Thay thế đoạn code trên bằng đoạn code bên dưới
 <span class='updated' itemprop='datePublished'><data:post.timestamp/></span>
Bước 7: Save để hoàn thành chỉnh sửa lỗi cấu trúc. Và bây giờ bạn hãy quay lại trang kiểm tra cấu trúc trang blog của bạn xem kết quả như thế nào sau khi tiến hành sửa lỗi nhé.

Kết luận: Như vậy qua bài viết này tôi đã hướng dẫn các bạn cách để chúng ta sửa một số lỗi cơ bản về cấu trúc dữ liệu trên nền tảng blogspot. Dĩ nhiên là bài viết còn nhiều sai xót trong quá trình hướng dẫn rất mong các bạn thông cảm và đóng góp ý kiến bằng cách để lại comments bên dưới để góp ý. Chúc các bạn thành công và SEO nhanh lên top nhé.

Bài viết có tham khảo nguồn: https://www.allbloggerthings.com

Hướng dẫn cài đặt tên miền riêng cho blogspot

LongAnIT 5/10/2019 Bình luận
Hiện nay tính phổ biến của blogspot là vô cùng lớn trong cộng đồng blogger. Việc tạo cho mình một blog cá nhân sử dụng blogspot ngày càng nhiều. Thậm chí là nhiều SEOer sử dụng blogsppot để làm site vệ tinh cực kỳ hiệu quả,..

Việc sở hữu cho mình một tên miền riêng ở thời điểm hiện tại thì quá dễ dàng bạn chỉ cần bỏ vài trăm nghìn đồng là có thể mua ngay cho mình một tên miền cá nhân quá đẹp có đúng không nào?

Trong bài viết ngày hôm nay tôi sẽ hướng dẫn cho các bạn cách cài đặt tên miền riêng cho blogspot .  Chúng ta hãy bắt đầu với việc thực hiện các bước như bên dưới tôi hướng dẫn nhé.

Cấu hình tên miền vào blogger

Bước 1: Đăng nhập vào trang quản trị của bạn -> Cài đặt
Bước 2: Nhìn phía bên phải mục địa chỉ blog + Thiết lập URL của bên thứ 3 cho blog của bạn như hình bên dưới

Cấu hình tên miền vào blogger
Hướng dẫn cài đặt tên miền riêng cho blogspot
Tại mục thiết lập tên miền bạn gõ địa chỉ tên miền vào đây ví dụ www.longanit.com nhớ là phải có www ở đầu nhé.
cài đặt tên miền tại trang quản trị blogspot
Trang thông tin cài đặt tên miền tại trang quản trị blogspot

Tuy nhiên trong lần đầu tiên bạn sẽ gặp thông báo lỗi là không thể xác minh được tên miền đừng quá lo lắng hãy để ý hình bên dưới mình đã đánh dấu với 2 tên là CNAME1CNAME2

Thông báo lỗi giúp bạn tìm được 2 CNAME để thêm vào trang cấu hình domain
Thông báo lỗi giúp bạn tìm được 2 CNAME để thêm vào trang cấu hình domain

Bước 3: Truy cập vào Cpanel của trang quản trị tên miền và tiến hành thêm các thông số sau đây

3.1) Tạo 2 CNAME  như trong hình bên dưới: Thông tin CNAME bạn nhìn hình phía trên mình đã minh họa nhé.
Thêm giá trị cho CNAME 01 tại trang quản trị tên miền
Thêm giá trị cho CNAME 01 tại trang quản trị tên miền 

Tương tự như vậy chúng ta lại thêm 01 CNAME nữa  và kết quả bạn có thể xem như hình bên dưới

Thêm giá trị cho CNAME 02 tại trang quản trị tên miền
Thêm giá trị cho CNAME 02 tại trang quản trị tên miền 

Bước 4: Ngoài ra làm thế nào để không cần gõ www.longanit.com mà chỉ cần gõ longanit.com cũng có thể truy cập được thì chúng ta nên cấu hình 4 giá trị bên dưới ở bản ghi A (address).

Tạo 04 giá trị bản ghi Address cho blogspot
Tạo 04 giá trị bản ghi Address cho blogspot
Cấu hình xong bạn Save lại. Quay lại trang quản trị cấu hình blogger mục huyển hướng sang https bạn tiến hành check vào có và chờ giây lát cho hệ thồng xử lý để hoàn thành nhé.
Cấu hình chuyển hướng https trong blogspot
Cấu hình chuyển hướng https trong blogspot

Quá trình cài đặt đã kết thúc. Hãy kiểm tra bằng cách truy cập blogspot của bạn với tên miền mà bạn vừa cấu hình ở 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 để cài đặt tên miền cho website sử dụng trên nền tảng blogspot. Nếu gặp khó khăn trong quá trình cài đặt vui lòng comments bên dưới để trao đổi cũng như support. Chúc các bạn SEO nhanh lên TOP

Danh sách tổng hợp các loại thẻ dữ liệu mặc định của Blogspot

LongAnIT 5/09/2019 Bình luận
Dưới đây là danh sách các loại thẻ dữ liệu data mặc định của Blogspot được mình tổng hợp lại và đây chỉ là những thẻ thường được hầu hết các blogger tìm kiếm sử dụng trong Blog thôi còn nếu tạo danh sách đầy đủ thì dài lắm mà một số loại thẻ dữ liệu lại không thường được sử dụng.

Vậy loại thẻ dữ liệu này có gì hay thì mình xin nói là nó cực kỳ quan trọng nếu như bạn nào muốn phát triến blogspot của mình lên một tầm cao mới nó giúp cho các bạn rất nhiều trong việc thiết kế template cũng như là làm chủ blogspot kết hợp với các thẻ điều kiện nữa thì vô cùng tuyệt vời.

Danh sách tổng hợp các loại thẻ dữ liệu mặc định của Blogspot
Danh sách tổng hợp các loại thẻ dữ liệu mặc định của Blogspot

1. data:view

Loại dữ liệu cho các chế độ xem khác nhau trong Blog.


<data:view.postId/>
<data:view.pageId/>
<data:view.type/>
<data:view.featuredImage/>
<data:view.title/>
<data:view.description/>
<data:view.url/>
<data:view.isPost/>
<data:view.isPage/>
<data:view.isHomepage/>
<data:view.isSearch/>
<data:view.isArchive/>
<data:view.isError/>
<data:view.isLabelSearch/>
<data:view.isSingleItem/>
<data:view.isMultipleItems/>
<data:view.isMobile/>
<data:view.isPreview/>
<data:view.isLayoutMode/>
<data:view.search.resultsMessageHtml/>
<data:view.search.resultsMessage/>
<data:view.search.query/>
<data:view.search.label/>
<data:view.archive.rangeMessage/>
<data:view.archive.day/>
<data:view.archive.month/>
<data:view.archive.year/>


 2. data:blog

Loại dữ liệu chung của Blog


<data:blog.blogId/>
<data:blog.title/>
<data:blog.pageTitle/>
<data:blog.pageName/>
<data:blog.pageType/>
<data:blog.view/>
<data:blog.url/>
<data:blog.homepageUrl/>
<data:blog.searchUrl/>
<data:blog.blogspotFaviconUrl/>
<data:blog.bloggerUrl/>
<data:blog.metaDescription/>
<data:blog.analyticsAccountNumber/>
<data:blog.locale/>
<data:blog.localeUnderscoreDelimited/>
<data:blog.languageDirection/>
<data:blog.encoding/>
<data:blog.hasCustomDomain/>
<data:blog.httpsEnabled/>
<data:blog.enabledCommentProfileImages/>
<data:blog.isPrivate/>
<data:blog.isPrivateBlog/>
<data:blog.adultContent/>
<data:blog.isMobileRequest/>
<data:blog.mobileClass/>
<data:blog.feedLinks/>
<data:blog.googleProfileUrl/>
<data:blog.postImageUrl/>
<data:blog.postImageThumbnailUrl/>
<data:blog.latencyHeadScript/>
<data:blog.mobileHeadScript/>
<data:blog.dynamicViewsScriptSrc/>
<data:blog.dynamicViewsCommentsSrc/>
<data:blog.ieCssRetrofitLinks/>
<data:blog.adsenseHostId/>
<data:blog.adsenseClientId/>
<data:blog.adsenseHasAds/>
<data:blog.plusOneApiSrc/>
<data:blog.gPlusViewType/>
<data:blog.jumpLinkMessage/>
<data:blog.hasCustomJumpLinkMessage/>
<data:blog.sharing.googlePlusBootstrap/>
<data:blog.sharing.googlePlusShareButtonWidth/>
<b:loop values='data:blog.sharing.platforms' var='platform'>
  <data:platform.name/>
  <data:platform.key/>
  <data:platform.shareMessage/>
  <data:platform.target/>
</b:loop>


 3. data:messages


Là kiểu dữ liệu hiển thị bằng văn bản.

<data:messages.adsGoHere/>
<data:messages.archive/>
<data:messages.at/>
<data:messages.authorSaid/>
<data:messages.authorSaidWithLink/>
<data:messages.blogArchive/>
<data:messages.blogAuthors/>
<data:messages.by/>
<data:messages.byAuthor/>
<data:messages.byAuthorLink/>
<data:messages.comments/>
<data:messages.configurationRequired/>
<data:messages.copy/>
<data:messages.copyToClipboard/>
<data:messages.deleteComment/>
<data:messages.edit/>
<data:messages.emailAddress/>
<data:messages.emailPost/>
<data:messages.euCookieNotice/>
<data:messages.euCookieNotice2018/>
<data:messages.euCookieResponsibility/>
<data:messages.euCookieResponsibility2018/>
<data:messages.featured/>
<data:messages.getEmailNotifications/>
<data:messages.gotIt/>
<data:messages.hidden/>
<data:messages.home/>
<data:messages.image/>
<data:messages.joinTheConversation/>
<data:messages.keepReading/>
<data:messages.labels/>
<data:messages.latestPosts/>
<data:messages.learnMore/>
<data:messages.linkCopiedToClipboard/>
<data:messages.loadMorePosts/>
<data:messages.loading/>
<data:messages.moreEllipsis/>
<data:messages.morePosts/>
<data:messages.myBlogList/>
<data:messages.myFavoriteSites/>
<data:messages.myPhoto/>
<data:messages.newer/>
<data:messages.newerPosts/>
<data:messages.newest/>
<data:messages.noResultsFound/>
<data:messages.noTitle/>
<data:messages.numberOfComments/>
<data:messages.ok/>
<data:messages.older/>
<data:messages.olderPosts/>
<data:messages.oldest/>
<data:messages.onlyTeamMembersCanComment/>
<data:messages.on/>
<data:messages.photo/>
<data:messages.popularPosts/>
<data:messages.popularPostsFromThisBlog/>
<data:messages.postAComment/>
<data:messages.postLink/>
<data:messages.postedBy/>
<data:messages.postedByAuthor/>
<data:messages.postedByAuthorLink/>
<data:messages.posts/>
<data:messages.poweredByBlogger/>
<data:messages.poweredByBloggerLink/>
<data:messages.readMore/>
<data:messages.recentPosts/>
<data:messages.reportAbuse/>
<data:messages.search/>
<data:messages.searchBlog/>
<data:messages.searchThisBlog/>
<data:messages.share/>
<b:eval expr='data:blog.sharing.platforms[0].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[1].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[2].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[3].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[4].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[5].shareMessage'/>
<b:eval expr='data:blog.sharing.platforms[6].shareMessage'/>
<data:messages.showAll/>
<data:messages.showLess/>
<data:messages.showMore/>
<data:messages.skipToMainContent/>
<data:messages.someOfMyFavoriteSites/>
<data:messages.subscribe/>
<data:messages.subscribeTo/>
<data:messages.subscribeToThisBlog/>
<data:messages.templateImagesBy/>
<data:messages.templateImagesByLink/>
<data:messages.theresNothingHere/>
<data:messages.title/>
<data:messages.viewAll/>
<data:messages.viewMyCompleteProfile/>
<data:messages.visible/>
<data:messages.visitProfile/>
<data:messages.visitSite/>
<data:messages.widget/>
<data:messages.widgetNotAvailableInPreview/>
<data:messages.widgetNotAvailableOnHttps/>
<data:messages.youMayLikeThesePosts/>

 4. data:widget Blog1 version 1


Loại dữ liệu sử dụng trong widget Blog1 version 1

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog' version='1' >
  <b:includable id='main'>
    <data:title/>
    <data:description/>
    <data:numPosts/>
    <data:mobile/>
    <data:postLabelsLabel/>
    <data:timestampLabel/>
    <data:authorLabel/>
    <data:commentLabel/>
    <data:postLocationLabel/>
    <data:reactionsLabel/>
    <data:showTimestamp/>
    <data:showLocation/>
    <data:showAuthor/>
    <data:showPostLabels/>
    <data:showReactions/>
    <data:showDummy/>
    <data:showPlusOne/>
    <data:showMobileShare/>
    <data:showEmailButton/>
    <data:showBlogThisButton/>
    <data:showTwitterButton/>
    <data:showFacebookButton/>
    <data:showPinterestButton/>
    <data:olderPageUrl/>
    <data:olderPageTitle/>
    <data:newerPageUrl/>
    <data:newerPageTitle/>
    <data:mobileLinkUrl/>
    <data:mobileLinkMsg/>
    <data:desktopLinkUrl/>
    <data:desktopLinkMsg/>
    <data:homeMsg/>
    <data:navMessage/>
    <data:postCommentMsg/>
    <data:blogCommentMessage/>
    <data:blogTeamBlogMessage/>
    <data:feedLinksMsg/>
    <data:commentPostedByMsg/>
    <data:shareMsg/>
    <data:shareToTwitterMsg/>
    <data:shareToFacebookMsg/>
    <data:shareToPinterestMsg/>
    <data:blogThisMsg/>
    <data:emailThisMsg/>
    <data:emailPostMsg/>
    <data:editPostMsg/>
    <data:deleteCommentMsg/>
    <data:adCode/>
    <data:cmtIframeInitialHeight/>
    <data:showCmtPopup/>
    <b:loop values='data:feedLinks' var='feedLink'>
      <data:feedLink.url/>
      <data:feedLink.name/>
      <data:feedLink.feedType/>
      <data:feedLink.mimeType/>
    </b:loop>
    <b:loop values='data:posts' var='post'>
      <data:post.id/>
      <data:post.title/>
      <data:post.body/>
      <data:post.snippet/>
      <data:post.longSnippet/>
      <data:post.url/>
      <data:post.link/>
      <data:post.thumbnailUrl/>
      <data:post.firstImageUrl/>
      <data:post.date/>
      <data:post.dateHeader/>
      <data:post.timestamp/>
      <data:post.timestampISO8601/>
      <data:post.lastUpdatedISO8601/>
      <data:post.author/>
      <data:post.authorUrl/>
      <data:post.authorProfileUrl/>
      <data:post.authorAboutMe/>
      <data:post.authorPhoto.url/>
      <data:post.authorPhoto.width/>
      <data:post.authorPhoto.height/>
      <data:post.hasJumpLink/>
      <data:post.jumpText/>
      <data:post.isFirstPost/>
      <data:post.isDateStart/>
      <data:post.adminClass/>
      <data:post.editUrl/>
      <data:post.allowComments/>
      <data:post.allowNewComments/>
      <data:post.noNewCommentsText/>
      <data:post.numComments/>
      <data:post.commentLabelFull/>
      <data:post.addCommentUrl/>
      <data:post.addCommentOnclick/>
      <data:post.commentPagingRequired/>
      <data:post.hasOlderLinks/>
      <data:post.oldLinkClass/>
      <data:post.oldestLinkUrl/>
      <data:post.oldestLinkText/>
      <data:post.olderLinkUrl/>
      <data:post.olderLinkText/>
      <data:post.hasNewerLinks/>
      <data:post.newLinkClass/>
      <data:post.newerLinkUrl/>
      <data:post.newerLinkText/>
      <data:post.newestLinkUrl/>
      <data:post.newestLinkText/>
      <data:post.commentRangeText/>
      <data:post.commentFormIframeSrc/>
      <data:post.embedCommentForm/>
      <data:post.showThreadedComments/>
      <data:post.commentSrc/>
      <data:post.commentFeed/>
      <data:post.commentJso/>
      <data:post.commentHtml/>
      <data:post.commentMsgs/>
      <data:post.commentConfig/>
      <data:post.avatarIndentClass/>
      <data:post.includeAd/>
      <data:post.allowIframeComments/>
      <data:post.iframeCommentSrc/>
      <data:post.viewType/>
      <data:post.commentSource/>
      <data:post.dummyTag/>
      <data:post.googlePlusShareTag/>
      <data:post.emailPostUrl/>
      <data:post.sharePostUrl/>
      <data:post.reactionsUrl/>
      <data:post.cmtfpIframe/>
      <data:post.appRpcRelayPath/>
      <data:post.location.mapsUrl/>
      <data:post.location.name/>
      <b:loop values='data:labels' var='label'>
        <data:label.name/>
        <data:label.url/>
        <data:label.isLast/>
      </b:loop>
      <b:loop values='data:feedLinks' var='feedLink'>
        <data:feedLink.url/>
        <data:feedLink.name/>
        <data:feedLink.feedType/>
        <data:feedLink.mimeType/>
      </b:loop>
      <b:loop values='data:comments' var='comment'>
        <data:comment.id/>
        <data:comment.inReplyTo/>
        <data:comment.cmtBodyIdPostfix/>
        <data:comment.url/>
        <data:comment.body/>
        <data:comment.timestamp/>
        <data:comment.timestampValue/>
        <data:comment.timestampAbs/>
        <data:comment.author/>
        <data:comment.authorUrl/>
        <data:comment.authorPhoto.url/>
        <data:comment.authorPhoto.width/>
        <data:comment.authorPhoto.height/>
        <data:comment.favicon/>
        <data:comment.authorAvatarSrc/>
        <data:comment.authorAvatarImage/>
        <data:comment.anchorName/>
        <data:comment.deleteUrl/>
        <data:comment.isDeleted/>
        <data:comment.adminClass/>
        <data:comment.authorClass/>
      </b:loop>
      <b:loop values='data:enclosures' var='enclosure'>
        <data:enclosure.url/>
        <data:enclosure.mimeType/>
      </b:loop>
    </b:loop>
  </b:includable>
</b:widget>


 5. data:widget Blog1 version 2


Loại dữ liệu sử dụng trong widget Blog1 version 2


<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog' version='2' >
  <b:includable id='main'>
    <data:title/>
    <data:description/>
    <data:olderPageUrl/>
    <data:newerPageUrl/>
    <data:navMessage/>
    <data:adCode/>
    <data:adClientId/>
    <data:cmtIframeInitialHeight/>
    <data:showCmtPopup/>
    <data:messages.blogComment/>
    <b:loop values='data:feedLinks' var='feedLink'>
      <data:feedLink.url/>
      <data:feedLink.name/>
      <data:feedLink.feedType/>
      <data:feedLink.mimeType/>
    </b:loop>
    <b:loop values='data:posts' var='post'>
      <data:post.id/>
      <data:post.title/>
      <data:post.body/>
      <data:post.snippets.short/>
      <data:post.snippets.long/>
      <data:post.url/>
      <data:post.link/>
      <data:post.thumbnailUrl/>
      <data:post.featuredImage/>
      <data:post.date/>
      <data:post.lastUpdated/>
      <data:post.author.name/>
      <data:post.author.profileUrl/>
      <data:post.author.aboutMe/>
      <data:post.author.authorPhoto.image/>
      <data:post.author.authorPhoto.width/>
      <data:post.author.authorPhoto.height/>
      <data:post.hasJumpLink/>
      <data:post.adminClass/>
      <data:post.postAuthorClass/>
      <data:post.allowComments/>
      <data:post.allowNewComments/>
      <data:post.noNewCommentsText/>
      <data:post.numberOfComments/>
      <data:post.commentsUrl/>
      <data:post.commentsUrlOnclick/>
      <data:post.commentPagingRequired/>
      <data:post.hasOlderLinks/>
      <data:post.oldLinkClass/>
      <data:post.oldestLinkUrl/>
      <data:post.olderLinkUrl/>
      <data:post.hasNewerLinks/>
      <data:post.newLinkClass/>
      <data:post.newerLinkUrl/>
      <data:post.newestLinkUrl/>
      <data:post.commentRangeText/>
      <data:post.commentFormIframeSrc/>
      <data:post.embedCommentForm/>
      <data:post.showThreadedComments/>
      <data:post.commentSrc/>
      <data:post.commentFeed/>
      <data:post.commentJso/>
      <data:post.commentHtml/>
      <data:post.commentMsgs/>
      <data:post.commentConfig/>
      <data:post.avatarIndentClass/>
      <data:post.includeAd/>
      <data:post.adNumber/>
      <data:post.allowIframeComments/>
      <data:post.iframeCommentSrc/>
      <data:post.viewType/>
      <data:post.commentSource/>
      <data:post.emailPostUrl/>
      <data:post.shareUrl/>
      <data:post.reactionsUrl/>
      <data:post.cmtfpIframe/>
      <data:post.appRpcRelayPath/>
      <data:post.location.mapsUrl/>
      <data:post.location.name/>
      <b:loop values='data:labels' var='label'>
        <data:label.name/>
        <data:label.url/>
      </b:loop>
      <b:loop values='data:feedLinks' var='feedLink'>
        <data:feedLink.url/>
        <data:feedLink.name/>
        <data:feedLink.feedType/>
        <data:feedLink.mimeType/>
      </b:loop>
      <b:loop values='data:comments' var='comment'>
        <data:comment.id/>
        <data:comment.inReplyTo/>
        <data:comment.cmtBodyIdPostfix/>
        <data:comment.url/>
        <data:comment.body/>
        <data:comment.timestamp/>
        <data:comment.timestampValue/>
        <data:comment.timestampAbs/>
        <data:comment.author/>
        <data:comment.authorUrl/>
        <data:comment.authorUserType/>
        <data:comment.authorPhoto.url/>
        <data:comment.authorPhoto.width/>
        <data:comment.authorPhoto.height/>
        <data:comment.authorAvatarSrc/>
        <data:comment.authorAvatarImage/>
        <data:comment.anchorName/>
        <data:comment.deleteUrl/>
        <data:comment.isDeleted/>
        <data:comment.adminClass/>
      </b:loop>
      <b:loop values='data:enclosures' var='enclosure'>
        <data:enclosure.url/>
        <data:enclosure.mimeType/>
      </b:loop>
    </b:loop>
  </b:includable>
</b:widget>

Kết Luận: Như vậy qua bài viết trên tôi đã liệt kê cho các bạn danh sách tổng hợp các loại thẻ dữ liệu mặc định của blogger. Hi vọng qua bài viết này các bạn có cái nhìn mới hơn về cấu trúc của Blogger để từ đó giúp các bạn tốt hơn trong việc thiết kế template blogspot. Chúc các bạn thành công và SEO nhanh lên top.