Tạo khung comment có phân cấp trong blogspot

Trước tiên, hãy lưu lại một bản template gốc để đề phòng bất trắc. Sau đó vào phần chỉnh sửa HTML, chọn mở rộng mẫu, tìm các đoạn sau:
sau:
<b:include data='post' name='comments'/>
Thay thế tất cả các đoạn tìm được bằng đoạn sau:
<b:include data='post' name='threaded_comments'/>
Tiếp tục chèn đoạn code  dưới đây  phía trên  thẻ ]]></b:skin>

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDKHo9uJqO-gf4tx9mh4sBwsrvn4sh9_IWGw9lMZH_VX0ZlaOioYJe_m37d2jCpp6-g3l8L1uiYd2uj-Ynor1pYEWRGYPJjvXG7hJU2ZtOtntVsxrYzYLBxDMQi79EA9mcCAXsMV4bnI/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Một số lỗi blogspot thường gặp

Trong quá trình chỉnh sửa tùy biến Blogger hẳn không ít lần bạnBlogger thường mắc phải, kèm theo cách giải quyết.
mắc phải sai lầm khiến phát sinh lỗi ngoài ý muốn. Bạn không biết nên làm lại từ đâu và sửa chữa như thế nào ? Bài viết này có thể sẽ giúp được bạn, đây là tổng hợp một số vấn đề mà rất nhiều người dùng
Điều quan trọng nhất trước khi chỉnh sửa template là sao lưu một bản gốc để có thể phục hồi lại khi cần thiết. Nếu sau khi tùy biến mà bạn nhận ra template của mình bị mất một số thành phần (avatar, label, .v.v...) thì có thể hoàn nguyên mẫu tiện ích về mặc định để "lấy lại những gì đã mất".

1/ Bị mất bài ở trang chủ
   Đây là vấn đề mà rất nhiều người mắc phải, nguyên nhân là do tính năng auto-pagination của Blogger tự động cắt bớt số bài đăng để blog của bạn load nhanh hơn. Đặc biệt nếu ở trang chủ có các bài đăng chứa nhiều hình ảnh thì khả năng mất bài là khá cao.

    Cách giải quyết: dùng tính năng read more (đọc thêm) của Blogger để thu gọn nội dung các bài đăng ở trang chủ (đừng nhầm lẫn với auto-readmore, nó chắc chắn không giúp bạn giải quyết được vấn đề này). Nếu không thấy tính năng này thì bạn vào phần cài đặt của Blogger rồi chọn cập nhật trình chỉnh sửa bài đăng.

2/ Số bài đăng của mỗi nhãn hiển thị không chính xác
Cách giải quyết : tìm trong template dòng sau
<a expr:href='data:label.url' rel='tag'>
Sửa nó thành:
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'>
10 là số bài đăng tối đa mà bạn muốn hiển thị trên từng nhãn.

3/ Mục bài đăng cũ hơn, bài đăng mới hơn không hiển thị
     Lỗi này do nhiều nguyên nhân, cách giải quyết thường là hoàn nguyên mẫu tiện ích về mặc định, nếu vẫn không được thì bạn kiểm tra trong template xem đã có dòng này hay chưa :
#blog-pager { clear : both; }
4/ Tiện ích phân trang không hoạt động
     Blog của bạn phải có một số lượng bài đăng nhất định thì tiện ích phân trang mới hoạt động. Ngoài ra nếu bạn cài đặt blog ở trạng thái chỉ có tác giả xem được thì cũng sẽ không thấy phân trang.

5/ Tiện ích Popular Posts không hiển thị ảnh thumbnail
     Mặc dù tất cả các bài đăng phổ biến của bạn đều chứa hình ảnh nhưng tiện ích Popular Posts của Blogger vẫn không hiển thị ảnh đại diện. Khi bạn đăng bài và dùng tính năng chèn hình ảnh của Blogger thì chúng được tự động upload lên Picasa, và tiện ích Popular Posts chỉ lấy các ảnh này làm ảnh đại diện thu nhỏ. Do vậy nếu bạn copy link ảnh từ các trang web khác (không phải từ Picasa) thì sẽ không thấy ảnh thumbnail. Đây cũng là cách mà Blogger khuyến khích người dùng tự viết bài và không nên đi sao chép của người khác.

6/ Ảnh trong bài đăng quá to và lấn sang sidebar
     Bạn có thể điều chỉnh kích thước tối đa của ảnh chứa trong bài đăng bằng đoạn CSS sau:
.post img { max-width: 600px; }
Đoạn code trên có nghĩa là nếu bài nào chứa ảnh mà có kích thước quá lớn thì sẽ tự động thu nhỏ (resize) bề rộng còn 600px. Các ảnh nhỏ hơn 600px vẫn giữ nguyên kích thước.

7/ Blog load quá chậm
     Có rất nhiều nguyên nhân gây chậm, thường là do bạn không dùng tính năng đọc thêm (read-more) của Blogger mà lại dùng auto-readmore script. Việc phải tải toàn bộ nội dung của tất cả bài đăng ở trang chủ khiến tốc độ blog giảm rất nhiều. Ngoài ra, việc lạm dụng quá nhiều tiện ích bên ngoài như Bài đăng mới, Bài đăng theo nhãn, bài đăng ngẫu nhiên (có ảnh đại diện)... cũng gây chậm đáng kể. Sử dụng các tiện ích do chính Blogger cung cấp là tốt nhất. Bạn có thể tham khảo bài viết này để cải thiện tốc độ cho blog của mình.

8/ Các tiện ích có dùng js không hoạt động
     Các link .js trong template của bạn đã die, bạn cần upload chúng lên một host khác (Dropbox, Google Code...). Hoặc bạn có thể chèn trực tiếp đoạn mã trong file js vào thẳng trong template. Cách này có ưu điểm là nhanh, không phụ thuộc vào host nhưng nhược điểm là dễ khiến bọ của Google nhầm lẫn giữa nội dung bài với đoạn mã mà bạn đã chèn, ảnh hưởng tới SEO.

9/ Chuyển toàn bộ Blog sang một tài khoản khác, làm thế nào ?
     Đăng nhập vào Blogger -> Cài đặt -> Quyền , ở mục Tác giả blog bạn nhập địa chỉ tài khoản mới (email). Cấp quyền quản trị (Admin) cho tài khoản đó, đăng nhập vào hộp thư tài khoản mới để xác nhận, cuối cùng bạn gỡ bỏ quyền quản trị của tài khoản cũ và remove nó đi. Khi bạn muốn xóa một blog nào đó mà không muốn phải đợi đến 90 ngày thì cũng có thể dùng cách này.

     Trên đây là các vấn đề thường gặp của Blogger, . Nếu bạn có ý kiến khác thì có thể bổ sung ở dưới đây, nhé chắc

Tạo thêm trang cho blogspot

Trang giúp bạn thêm các mục như liên hệ, đăng ký hay hướng dẫn... giúp cho độc giả dễ ràng tiếp cận với các dịch vụ trên blog bạn hơn. Hôm nay namkna sẽ hướng dẫn các bạn cách tạo trang thông thường cho blog của bạn, tức là 20 trang dầu do blog cúng cấp. nếu hốn hơn thì bạn tham khảo bài viết khác Tại đây.

Chia sẻ:

Lưu

Chia sẻ

Trang giúp bạn thêm các mục như liên hệ, đăng ký hay hướng dẫn. giúp cho độc giả dễ ràng tiếp cận với các dịch vụ trên blog bạn hơn. Hôm nay namkna sẽ hướng dẫn các bạn cách tạo trang thông thường cho blog của bạn, tức là 20 trang dầu do blog cúng cấp. nếu hốn hơn thì bạn tham khảo bài viết khác Tại đây.

Bài viết này mình sẽ hướng dẫn bằng video và hình ảnh bạn có thể lựa chọn hình thức bạn muốn.

1. Hướng dẫn tạo thêm trang cho blogger bằng Video

2. Hướng dẫn tạo thêm trang cho blogger bằng hình ảnh

1. Đăng nhập vào tài khoản Blogger
2. Vào Trang (Trang)
3. Chọn Trang mới => Trang trống

4. Bạn nhập tiêu đề cho trang và tạo bài viết vào khung bên dưới, xong xuôi bấm xuất bản trang.

- Như vậy bạn đã tạo được một trang cho blog rùi. Bạn cũng có thể chỉnh sửa hoặc xóa trang mình muốn.

- Bạn có thể thay đổi vị trí các trang bằng cách bấm và kéo thả!

- Bạn có thể di chuyển các trang theo hình dọc hoặc ngang trên Blog bằng cách tại mục Hiển thị trang dưới dạng bạn chọn hình thức hiển thị.

Hiển thị các trang ra trang chủ

1. Đăng nhập vào Blogger => Bố cục (Layout) => Chọn Thêm tiện ích (Add widget) => Chọn Trang (Pages).

2. Bây giờ bạn trở vào Blog bạn sẽ thấy Blog của mìn sẽ có thêm một số trang mà bạn đã tạo.
3.Bạn cũng có thể ẩn/hiển trang hoặc thay đổi vị trí các thẻ bằng bấm vào chỉnh sửa của thẻ trang để thay đổi

- Bạn có thể chọn các nhãn bạn muốn hiển thị cho mọi người thấy khi vào web của bạn.

- Nếu bạn để các trang theo chiều ngang trên Blog sẽ tạo cho Blog giống như các trang Web, bạn cũng có thể thay đổi màu của Tab bằng cách vào Mẫu (Template) => Tùy chỉnh => Tại đây bạn có thể thay đổi màu của chữ, màu của Tab để phù hợp hơn với Blog của mình.

bài viết st từ blog.landgonow.com

Để tạo thêm trang cho blogspot ( vì blogspot chỉ cho tạo tối đa 20 trang ) thì các bạn tham khảo bài viết sau 

Lấy dữ liệu Blogspot khác và Bảo vệ dữ liệu blogspot bản thân.

Các bước Lấy data của blogspot khác hay gọi lịch sự là lấy data, mà gọi không lịch sự là đi ăn cắp. Mình cũng từng bị một tên ăn chộm dự liệu bê y nguyên 2400 bài viết của mình về và upload lên host của tên vô lại đó. Các bạn có thể xem trang của tên vô lại đó TẠI ĐÂY

Mình viết bài này không khuyến khích các bạn làm thế vì mình từng là nạn nhân nên mình rất hiểu tâm trạng của người bị hại sẽ như thế nào. Đặc biệt là vấn đề bản quyền (nếu bị tố cáo vi phạm bản quyền google thì bạn sẽ bị delete ngay đó). Dưới đây là các thủ đoạn ăn chôm của những kẻ đi choom:

Bước 1: Xác định blog muốn lấy dữ liệu!

- Blogspot cần lấy phải thỏa mãn điều kiện rss của nó phải là rss full, rss không bật full thì chỉ lấy phần giới thiệu

- Để xác định rss là full hay không chỉ cần đánh tên địa chỉ web như sau vào :

http://diachi.blogspot.com/atom.xml

Thay: diachi thành tên blog cần lấy 
Ví dụ: http://namkna.blogspot.com/atom.xml (Tất nhiên sau sự cố mất cắp data mình đã fix lại rồi nên các bạn đừng thắc mắc tại sao chỉ có phần trích dẫn nha).

- Nếu rss được bật full thì ta có thể lấy toàn bộ data. còn không thì dừng ở đây được rồi. Có một số template yêu cầu bắt buộc phải bật full rss như template Simplex Celebrity .... các trang tin hot teen hay dùng lắm, và một số Blogger mới vào nghề chưa biết hay quyên.

Bước 2: Xác định tổng só bài viết của blog muốn lấy dữ liệu!

- Xác định tổng số bài viết có trong blogspot đó bằng cách tạo một bài viết mới và Pate co bên dưới vào phần html rồi xuất bản (Hoặc có thể test trực tiếp tại cuông cụ editor HTML của namkna)

<script style="text/javascript">
function showpostcount(json) {
document.write('<center>Tổng số bài: <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b></center>');}</script>
<script src="http://namkna.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<script style="text/javascript"></script>

Thay: namkna.blogspot.com bằng tên blog bạn cần khi đó sẽ hiển thị số bài đăng như sau:
Tổng số bài: 4759

Cần xác định số bài đăng vì vì 1 số blogspot khủng data > 10000 bài nên sẽ chia nhỏ thành các đoạn data ,sau đó lấy theo khỏang từ 1-50 bài hay 1-10 bài tùy đường truyền mạng hay cấu hình máy. Blogspot cho import tối đa 500 bài.

Bước 3: Tiến hành chia nhở và tải dữ liệu về máy!

- Copy và paste đoạn cần lấy vào chương trình download IDM khi đó sẽ là nếu máy ai chưa cài IDm có thể download TẠI ĐÂY. Sau khi cài đặt bạn bấm vàoTasks => Add new download và sử dụng cú pháp bên dưới:

- Để tải về bạn sử dụng cú pháp sau:

http://diachi.blogspot.com/atom.xml?redirect=false&start-index=m&max-results=n

Trong đó: 

Trong đó:

• start-index=m bắt đầu bài đăng mới nhất
• max-result=n lấy n bài, bắt đầu từ bài từ bài thứ m
• diachi.blogspot.com: là blog cần lấy Data

- Khi đó IDM sẽ cho ra 1 file .xml . Cứ thế lấy tiếp đến hết data thì thôi:

- Ví dụ đoạn link dưới đây là lấy từ bài 1 đến bài 10 kể từ bài đăng mới nhất.

http://diachi.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=10

Nếu muốn lấy thêm 10 bài thì bạn sử dụng tiếp mã như bên dưới:

http://diachi.blogspot.com/atom.xml?redirect=false&start-index=11&max-results=10
http://diachi.blogspot.com/atom.xml?redirect=false&start-index=21&max-results=10
..................................

- Sau đó ta thu được các file .xml (chuẩn rss hình như wordpress cũng cho phép import rss vào- chưa thử)

Bước 4: Nhập dữ liệu bài đăng (Import data) lên blog của bạn!

- Import file xml đó vào blogspot bằng cách vào Cài đặt => Khác => Nhập Blog

=> Chỉ đường dẫn tới các file .XML mà bạn vừa download về.

-chú ý : khi import xong nên đăng lấy lệ 1 vài bài để xóa bỏ capchar khi import quá nhiều bài 1 lúc, google săm soi blog sẽ cho là spam sẽ disable acc.

Cập nhật: Cách cài đặt để bảo vệ dữ liệu trên blog của bạn!

- Tránh cho blog của bạn bằng cách tắt chức năng full này đi bằng cách vào Setting ( Cài đặt ) -> Khác => tại mục Cho phép nguồn cấp dữ liệu Blog bạn chọn Cho đến dấu ngắt .

 

Nếu template bắt buộc đặt full thì ta nên tạo thêm 1 đoạn giới thiệu ,để khi bài được mang vác khắp nơi người đọc biết nguồn xuất phát từ đâu khi có ai dùng bằng cách tại mục Chân trang nguồn cấp dữ liêu bạn chọn thêm và đánh nội dung vào như hình dưới.

Bài viết được sưu tầm từ namkha.blogspot.com

hướng dẫn recent post hiển thị theo label

Hướng dẫn tạo Recent Post hiển thị theo Label

Bước 1: Vào blogger.com > Template > Edit HTML
Bước 2: Dán code bên dưới vào trên thẻ </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.newarlinalabel1 ul,.newarlinalabel2 ul{list-style:none;margin:0;padding:0} .newarlinalabel1 li,.newarlinalabel2 li{margin:0;padding:0;} .newarlinalabel1 .widget,.newarlinalabel2 .widget{margin:0;padding:0} .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden} .newarlinalabel1 h2,.newarlinalabel2 h2,.newarlinalabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0} .newarlinalabel2 h2,.newarlinalabel3 h2{margin:20px 0 0 0;} .newarlinalabel1 h2:before,.newarlinalabel2 h2:before,.newarlinalabel3 h2:before{content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;} .newarlinalabel2 h2:before{content:&#39;\f0c3&#39;;}.newarlinalabel3 h2:before{content:&#39;\f143&#39;;} .newarlinalabel1 .index,.newarlinalabel2 .index{font-size:10px;float:right;font-weight:400;} .newarlinalabel1 .index a,.newarlinalabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6} .newarlinalabel2 .index a{color:#ef6c00;border-color:#ffa726} .newarlinalabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent} .newarlinalabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent} .newarlinalabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px} .newarlinalabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px} .newarlinalabel2 span.newarlina_meta_comment a:hover{color:#38761d!important} .newarlinalabel2 ul.newarlina_thumbs li a:hover,.newarlinalabel2 ul.newarlina_thumbs2 li a:hover{color:#ff675c;text-decoration:none} .newarlina_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9} .newarlina_right{width:250px;width:47.5%;float:right;margin:0;padding:0} ul.newarlina_thumbs{margin:0;padding:0} ul.newarlina_thumbs li,ul.newarlina_thumbs2{margin:0;padding:0} ul.newarlina_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px} ul.newarlina_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s} ul.newarlina_thumbs .cat_thumb img:hover{opacity:.9;} ul.newarlina_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9} ul.newarlina_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0} ul.newarlina_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden} ul.newarlina_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s} ul.newarlina_thumbs2 .cat_thumb2 img:hover{opacity:.9;} span.newarlina_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none} span.newarlina_title2{font-size:16px;line-height:1.4em;margin:0 0 3px} span.newarlina_title a{color:#333} span.newarlina_title a:hover{color:#ff675c;text-decoration:none} span.newarlina_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0} span.newarlina_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase} span.newarlina_meta a{color:#aaa;display:inline-block} span.newarlina_meta_date,span.newarlina_meta_comment,span.newarlina_meta_more{display:inline-block;margin-right:10px} span.newarlina_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px} span.newarlina_meta_comment a:hover{color:#ff675c!important} span.newarlina_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px} ul.newarlina_thumbs2 li a:hover,ul.newarlina_thumbs li a:hover{color:#ff675c;text-decoration:none} @media screen and (max-width:1024px) { .newarlinalabel1 .widget-content, .newarlinalabel2 .widget-content {padding:20px 25px;} .newarlina_left {width:50%;float:left;margin:0;padding:0;border-right:none} .newarlina_right {width:46%;float:right;margin:0;padding:0;} ul.newarlina_thumbs .cat_thumb {width:100%;height:auto;} ul.newarlina_thumbs .cat_thumb img {width:100%;height:auto;} ul.newarlina_thumbs li {margin:0;padding:0;} span.newarlina_title2 {font-size:20px;line-height:1.2em;} span.newarlina_summary {font-size:14px;}} @media only screen and (max-width:768px){ .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs2 li{border-bottom:0} span.newarlina_summary,.newarlina_left{display:none} span.newarlina_title{margin:0 0 5px} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0} span.newarlina_title2{font-size:18px;line-height:1.2em}} @media only screen and (max-width:480px){ #newarlinalabel1-wrapper,#newarlinalabel2-wrapper{display:none}} @media only screen and (max-width:320px){ .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px} .newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 20px 1px 20px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;} span.newarlina_title2{font-size:18px;line-height:1.2em}} @media screen and (max-width:260px) { .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px} .newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 10px 1px 10px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;} span.newarlina_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[ function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newarlina_left">'),document.write('<ul class="newarlina_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newarlina_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newarlina_meta">'),1==showpostdate&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newarlina_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newarlina_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newarlina_right">'),document.write('<ul class="newarlina_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newarlina_title newarlina_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newarlina_meta newarlina_meta2">'),1==showpostdate2&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment newarlina_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newarlina_meta_more newarlina_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")} //]]>
</script>
<script type='text/javascript'> var numposts=1,numposts2=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0XK52ck7A9-NTnU8M9cmCkD5nmJ-1XN7mimWIyJY0xjfHO_ITzqipOvfaHbKUYNgEAUSQ6z9tE52tTqBFMClTY6eId51ajLn5L3d83HByZlM_7UcDF-BsG08kiAT94zfliaXCz-YSUW-/s1600/newarlina_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6FDzZFK3ETRUG1UY77pOShNsJk90qWOJPDhjhsff7KB0ygZ2o9_69Ps3r5MyqjYXjPI28uhxDoFnUZTDJYqBF1tVI99SFErCMLhywOmxsHoMDPSIlC6PWhyphenhyphen2xT1TJGqF49bp344V5ELrx/s1600/newarlinathumb_small.png&quot;; </script>
</b:if>
</b:if>

Bước 3: Sao chép mã dưới đây vào trước
<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='newarlinalabel1-wrapper'>
<b:section class='newarlinalabel1' id='newarlinalabel1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Template' type='HTML'>
<b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='newarlinalabel2-wrapper'>
<b:section class='newarlinalabel2' id='newarlinalabel2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='Tips Blogger' type='HTML'>
<b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>

Tiếp theo, trở ra phần Bố cục và thêm tiện ích vào, bạn gọi label ra, bằng cách điền tên label bạn muốn hiển thị theo nhãn.

Hy vọng bạn sẻ thích dạng recent Post theo Label style tin tức này!