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!

10 Bước xuất bản 1 bài viết chuẩn SEO trên blogspot

LongAnIT 3/16/2019 2 Bình luận
Vấn đề thuật ngữ SEO chắc các bạn cũng đã biết khá nhiều. Hiện tại thì xu hướng SEO 2019 đã thay đổi khá nhiều google bây giờ chú trọng về nội dung hơn vì thế các SEOer bây giờ cũng cài cố nhưng đã hạn chế đi rầt nhiều tuy nhiên bỏ cái này thì thêm vào cái kia cũng mệt thật việc biên tập nội dung xưa nay vẫn thế nhưng để bài viết của bạn được nhiều người biết đến cũng như anh google quan tâm thì phải làm sao đây?

Có nhiều cách đề thực hiện việc này nhưng cách đầu tiên tôi muốn nói đến các bạn là tạo một bài viết thật sự hay, có giá trị và nhất là bài viết phải chuẩn SEO. Vậy thế nào là bài viết chuẩn SEO ngay sao đây mình xin hướng dẫn các bạn cách viết bài chuẩn SEO và nhất là trên nền tảng blogger mình đang dùng.

Tiêu chuẩn cho bài viết chuẩn SEO trên Blogger


  1. Tiêu đề bài đăng
  2. Từ khóa tập trung
  3. Nội dung bài viết
  4. Tối ưu hóa hình ảnh
  5. Thêm chú thích và thuộc tính hình ảnh
  6. Thẻ Heading
  7. Chèn liên kết nội bộ đến các nhãn
  8. Tạo nhãn cho bài viết
  9. Liên kết cố định tùy chỉnh
  10. Mô tả tìm kiếm

Như trên mình đã liệt kê 10 tiêu chí cho một bài viết chuẩn SEO trên blogger. Bây giờ chúng ta hãy bắt đầu đi từng bước 1:

1. Tiêu đề bài đăng

Phần tiêu đề bài viết bạn nên đề ngắn gọn, tập trung vào từ khóa trọng tâm và làm rõ chức năng, nội dung bên dưới bài viết nhằm giúp cho người đọc dễ hiểu về nội dung là bạn đang viết cái gì tranh trường hợp ông nói gà bà nói vịt.
Tiêu đề bài đăng chứa từ khóa chuẩn SEO Blogspot
Tiêu đề bài đăng chuẩn SEO Blogspot


2. Từ khóa tập trung cần SEO

  • Giới hạn chuẩn ký tự tiêu đề bài viết:  60 – 70 kí tự. 
  • Tiêu đề cần chứa từ khóa, tiêu đề trang có chứa từ khóa cần SEO. Nếu được, tiêu đề nên có những con số, nhất là số lẻ các bạn nhé.

3. Nội dung bài viết chuẩn SEO

Viết một đoạn nội dung khái quát hoặc đưa ra suy nghĩ của mình và kết thúc lại bài viết đã chia sẻ. Nhưng hãy nhớ là hãy nhắc thương hiệu của bạn trong bài viết này nhé. Đừng quên kiêu gọi hành động chia sẻ, tham khảo, gửi bình luận nhé.

3.1. Yêu cầu về nội dung cho bài viết chuẩn SEO

  • Tự viết 100%. Bài viết phải mới và không nên sao chép có ý tưởng mới thì càng tốt nhé
  • Riêng các bài về thông số kỹ thuật, giữ nguyên thông số và có thể chấp nhận sao chép khoảng 30% – 50%.
  • Nội dung bài phải phù hợp với tiêu đề bài đăng.
  • Bài viết phải đạt từ 2000 trở lên vì xu hướng là bài viết dài sẽ hỗ trợ SEO tốt hơn.
  • Nội dung bài viết phải mới, có tính cập nhật xu hướng.
  • Có sự sáng tạo, đào sâu, phát triển từ những nội dung đã có.
  • Đáp ứng được nhu cầu tìm kiếm của người dùng.
  • Nội dung có nghĩa và hữu ích, viết cho “người” đọc, không chèn từ khóa vô tội vạ

4. Tối ưu hóa hình ảnh

  • Hình ảnh có độ phân giải khoảng 640px * 480px, hoặc 640px * …..px.
  • Hình có trọng tâm, đúng chủ đề bài viết, có trích dẫn phù hợp, rõ nét
  • Không dùng ảnh của người nổi tiếng vì tính chất bản quyền
  • Không dùng ảnh có tên của bất kỳ thương hiệu nào.

5. Thêm chú thích và thuộc tính hình ành

 Đây chính là thè "ALT" thêm chú thích cho thuộc tính hình ảnh như minh họa bên dưới
Kích thước hình ảnh vừa phải tốt cho SEO
Kích thước hình ảnh và miêu tả chuẩn SEO


6. Tối ưu Thẻ Heading

Phần này rất dễ nếu bạn chịu khó để ý nó giống như trình bày văn bản trong Word cũng như tôi đang viết bài này vậy. Một bài viết cần có mở bài, thân bài và kết bài.
Hướng dẫn tối ưu các thẻ Heading trong bài viết
Hình mình họa tối ưu thẻ Heading trong bài viết

Thông thường thì tiêu đề bài đăng chính là thẻ Heading H1, do vậy trong nội dung bài viết các bạn nên chèn thêm các thẻ H2, H3,…Các thể H2, H3 này có thể là phân mục, chia phần cho nội dung bài viết, nếu chứa từ khóa thì càng tốt, có thể là từ khóa chính hoặc từ khóa phụ. 

Để thêm thẻ heading, các bạn nhấp chuột vào dòng chữ cần thêm rồi nhấp chuột vào chỗ chọn thẻ heading trên thanh công cụ soạn thảo (có thể hiện chữ “Chuẩn” (cạnh chỗ chọn kiểu chữ) rồi chọn loại thẻ heading, trong đó: Tiêu đề – H2, Tiêu đề con – H3, Tiêu đề nhỏ – H4.

7. Chèn liên kết nội bộ đến các nhãn và bài viết có liên quan

Mục đích giúp người đọc có thể tương tác tốt hơn với các bài viết liên quan nhằm giảm tỉ lệ thoát trang cao. Tôi nói ví dụ trong bài viết bạn có nói đến một chủ đề khác tương tự thì bạn chọn từ khóa đề trỏ link nội bộ đế bài viết đó để người đọc hiều hơn bạn phải biết rằng không phải ai cũng biết hết tất cả nội dung của bạn đang nói đến (Đây là dạng lấy mộ trích dẫn từ nguồn ra đề dẫn chứng khi bạn học phổ thông mà làm bài văn luận vậy đó).


Hướng dẫn chèn liên kết nội bộ cho bài viết chuẩn SEO
Hình minh họa chèn link liên kết nội bộ cho nhãn và bài viết liên quan

Nếu bài viết của bạn có các nhãn liên quan đến các bài viết khác trong blog của bạn thì bạn nên chọn liên kết từ nhãn đó. Tôi nói ví dụ bài này tôi có từ khóa chứa nhãn SEO tôi sẽ trỏ nhãn từ khóa này về link nhãn trong các bài viết có chuyên mục nhãn SEO.

Như hình minh họa bên trên tôi đã gán nhãn SEO cho liên kết nội bộ. Bạn để ý 2 mục tôi khoanh đỏ bên dưới 
  1. Mở liên kết trong cửa sổ mới : Có gnhĩa là là nếu như bạn tích vào mục này thì khi độc giả click vào liên kết đó sẽ mở ra một liên kết trong 1 cửa sổ trình duyệt mới, cửa sổ bài đăng hiện tại vẫn giữ nguyên rất tốt cho trải nghiệm người dùng.
  2. Thêm thuộc tính 'rel=nofollow' : Nếu là link bên ngoài thì bạn check vào còn là liên kết nội bộ thi bạn cứ để mặc định nhé, phần này sẽ ảnh hưởng đến SEO khá nhiều nên bạn hãy cẩn thận, bạn có thể xem rõ hơn về phần này tại đây

8. Tạo nhãn cho bài viết

“Nhãn” ở đây có mục đích dùng để phân các bài đăng cùng chủ đề vào cùng chung một chuyên mục với nhau nó giống như là Category trong Wordpress vậy. Tức là những bài viết, đặt chung một nhãn sẽ được nhóm lại với nhau trong nhóm đó.

Để tạo nhãn nhấn vào “Nhãn” rồi nhập tên các nhãn cho bài viết, có thể tạo 1 hoặc nhiều nhãn, các nhãn cách nhau bởi dấu phẩy (,). Nhập xong nhấn “Hoàn thành”. Lời khuyên là bạn nên tạo nhãn bằng tiếng anh không dấu và ngăn cách bởi dấu gạch ngang cũng được nếu từ khóa nhãn dài vì sau này khi bạn tạo các code bài viết gọi nhãn ra ngoài sẽ dễ hơn.

Ví dụ: Tôi tạo nhãn có tên là " thủ thuật" thay vì tôi viết là "thu-thuat"...,

9. Liên kết cố định tùy chỉnh

Các bài viết trên Blogspot, thường sau khi bạn đặt tiêu đề xong, nó sẽ tự động tạo ra liên kết cho bài đăng đó. Nếu như tiêu đề bài viết của bạn quá dài thì blogspot sẽ tự động ngắt từ ở phần cuối cùng

Tôi có ví dụ tiêu đề bài đăng làHướng dẫn viết bài chuẩn SEO trên blogspot” thường thì liên kết cố định tự động mà blogspot tạo ra sẽ như thế này "huong-dan-viet-bai-chuan-seo-tren".

Theo như trên thì nó đã cắt mất chữ " blogspot" trong tiêu đề của chúng ta đặt có đúng không nào. Còn một điểm dỡ nữa của blogspot mà chúng ta ai cũng biết đó chính là chữ  "đ" trong liên kết nó sẽ không hiểu và sẽ bỏ đi làm cho liên kết bài viết xấu

Tôi có ví dụ: "hướng dẫn cách đặt backlink"  nó sẽ biến thành "huong-dan-cach-at-backlink

Liên kết cố định tùy chỉnh thân thiện với trải nghiệm người dùng
Như ví dụ hình trên tôi đã chỉnh lại liên kết cố định cho phù hợp xong rồi nhấn vào “Hoàn thành“


10. Mô tả tìm kiếm

Cuối cùng là phần mô tả tìm kiếm Đây là một phần rất quan trọng trong SEO, Nhiều bạn ở mục này không có hoặc bị mờ lý do là bạn chưa bật tính năng này trong cài đặt của blogspot. Nếu blogspot của bạn chưa bật tính năng này bạn có thể làm như sau.

Tính năng mô tả trên blogspot rất có lợi cho SEO
Bật tính năng mô tả tìm kiếm chính trên blogspot cũng như trên bài viết


Các bạn hãy nhấp vào “Mô tả tìm kiếm” rồi mô tả ngắn gọn, khoảng 30 từ về nội dung bài viết, nên chứa cả từ khóa tập trung. Đoạn mô tả này sẽ xuất hiện trong kết quá tìm kiếm của bác google

Quay trở lại với phần mô tả tìm kiếm cho bài viết bạn nhập vào mô tả cho bài viết của mình nhớ là có chứa từ khóa liên quan đến bài viết đó nhé.

Sau khi viết bài xong kiểm tra lại nội dung bài viết, nhãn, các thứ. Chú ý là cái liên kết cố định tùy chỉnh bạn phải xem kỹ trước khi xuất bản vì sau này sửa nó rất khó nếu như bài này của bạn lên top google mà liên kết nhìn xấu thì cũng không hay lắm. cuối cùng là  xuất bản thôi nào!

Kết luận: Như vậy qua bài viết này tôi đã tổng hợp lại 10 bước đơn giản để có thể xuất bản một bài viết chuẩn SEO trên blogspot hi vọng các bạn có những trãi nghiệm thú vị khi đọc qua bài viết này của tôi. Nếu thấy bài viết hay đừng quên để lại comments hoặc chia sẻ bài viết cho nhiều người cùng xem nhé.

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