Hiển thị bài viết theo nhãn ngoài trang chủ Blogspot

Bài này mình cùng giới thiệu đến các bạn một cách khá đơn giản để đưa các bài viết ra ngoài trang chủ theo nhãn.
Mẫu này được mình trích ra từ template Johny Kampret được chia sẻ từ mastemplate.com. Mẫu đã được chỉnh lại về giao diện và thêm một số hiệu ứng nhỏ nhằm làm đẹp hơn.

Bước 1: Các bạn vào Chỉnh sửa HTML trong trang quản trị blog, Tìm đến thẻ đóng ]]</b:skin>và copy đoạn code phía dưới vào trước thẻ đóng.

.featuredPost2 h1{font-size:15px;font-family:Arial;font-weight:bold;text-shadow:1px 1px 1px #fff;padding:10px 10px;color: #464546;letter-spacing:-1px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #c6c2c1;background:#E3E3E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVy96R2Uz0dU-NyJbFjknlp9eJzkb8qAFRDz-QlAZ4CfhRQkU837WlzXz16Tf-M4-w57hr1irRip2P21xYBBokzJOOyJJUGr0tLggZ5lqaD9Yt6UNESV4niePjvkgGVjFEz99EfSR6S6ur/) repeat-x left bottom;text-transform:none;}
.featuredPost2 h1 a{color:#464546}
.featuredPost2 h1 a:hover{color:#0077ff}
.featuredPost2{font-size:13px;font-family:Arial;color:#464546;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7);margin-bottom:15px;padding-bottom:8px;float:left;line-height:1.3em;}
.featuredPost2 ul{border:1px solid #fff}
.featuredPost2 .entry-title{font-size:13px;font-family:Arial;font-weight:bold;text-transform:none;color:#0077ff;line-height:15px;margin-bottom:5px}
.featuredPost2 .entry-title a{color:#0077ff}
.featuredPost2 .entry-title a:hover{color:#464546;text-decoration:underline}
.featuredPost2 ul li{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-bottom: 1px dashed #b2b1b4;margin:0 8px;padding:8px 0}
.featuredPost2 img{background:#fff;-webkit-box-shadow:0 0 5px rgba(0,0,0,.7);-moz-box-shadow:0 0 5px rgba(0,0,0,.7);box-shadow:0 0 5px rgba(0,0,0,.7);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transition:all 0.2s ease;;padding:3px;float:left;display:block;margin-right:10px}
.featuredPost2 img:hover{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}
.index{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#0077ff;float:right;font:12px Tahoma;color:#fff;display:block;margin:8px 5px 0;padding:3px 10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
.index a,.index a:visited{color:#fff;}
.index:hover{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#555;text-decoration:none}

Bước 2: Các bạn chèn đoạn code phía dưới vào trước thẻ đóng </head>

Bước 3 : Các bạn tìm đến widget 'Blog1' như đoạn mã phía dưới

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Và thêm ngay dưới nó đoạn mã sau :

<b:section class='book' id='dxh1' preferred='yes'>
<b:widget id='HTML51' locked='false' title='TEST1' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML52' locked='false' title='TEST3' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='book' id='dxh2' preferred='yes'>
<b:widget id='HTML53' locked='false' title='TEST2' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML54' locked='false' title='TEST4' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>

Các bạn thay những phần được tô đỏ là địa chỉ các label mà các bạn muốn hiển thị bài đăng
Bước 4: Bạn vào phần Bố cục → Lúc này trong template đã hiển thị thêm 4 widget với tên lần lượt là: TEST1, TEST2, TEST3, TEST4 nằm ngay bên dưới "Bài đăng trên Blog" .

Bạn nhấp vào "Chỉnh sửa" và thêm vào phần nội dung của widget tên nhãn mà bạn muốn hiển thị.

Và thay đổi tên nhãn bạn muốn hiển thị.
Chúc các bạn thành công

Chào mừng và rất vui các bạn đến với blog chia sẻ mình!

Tham quan du ngoạn từ Nam chí Bắc:

An Giang || Bà Rịa - Vũng Tàu || Bắc Giang || Bắc Kạn || Bạc Liêu || Bắc Ninh || Bến Tre || Bình Dương || Bình Định || Bình Phước || Bình Thuận || Cà Mau || Cao Bằng || Cần Thơ || Đà Nẵng || Đắk Lắk || Đắk Nông || Điện Biên || Đồng Nai || Đồng Tháp || Hà Giang || Hà Nam || Hà Tĩnh || Hải Dương || Hậu Giang || Hòa Bình || Hưng Yên || Khánh Hòa || Kiên Giang || Kon Tum || Lai Châu || Lâm Đồng || Lạng Sơn || Lào Cai || Long An || Về Miền Tây || Nam Định || Nghệ An || Ninh Bình || Ninh Thuận || Phú Thọ || Quảng Bình || Quảng Nam || Quảng Ngãi || Quảng Ninh || Quảng Trị || Sóc Trăng || Sơn La || Về Tây Nguyên || Tây Ninh || Thái Bình || Thái Nguyên || Thanh Hóa || Thừa Thiên Huế || Thành phố Hồ Chí Minh || Thủ Đô Hà Nội || Tiền Giang || Trà Vinh || Tuyên Quang || Vĩnh Long || Vĩnh Phúc || Yên Bái

|| || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || ||

Bộ sưu tập ảnh hot:

Album nghệ thuật Dương Quốc Định Full || Albums Quang Linh || Ảnh chỉ có Việt Nam || Ảnh cưới Collection || Ảnh đẹp Phương Tây || Ảnh đẹp Victoria’s Sceret tổng hợp || Ảnh độc cười ra nước mắt || Ảnh giải trí Châu Á || Ảnh giải trí Hàn Quốc || Ảnh giải trí Nhật Bản || Ảnh giải trí Thái Lan || Ảnh giải trí Trung Quốc || Ảnh nền PC || Ảnh nghệ thuật 3D || Ảnh Nude || Hoa đẹp bốn mùa nên xem || Hoa hậu thế giới Collection || Hoa hậu Việt Nam Collection || Hoa Phong Lan || Thư viện ảnh || Thời sự qua ảnh || Tranh đẹp của họa sĩ nổi tiếng

|| || || || || || || || || || || || || || || || || ||

Like bài viết nếu bạn thấy hay và có ích :

Admin: Haitaynamkg

Thích ngắm biển chiều hoàng hôn Tây Nam (Rạch Giá - Kiên Giang) và viết lách blog để chia sẻ kiến thức của nhân loại cùng mọi người. Sống thì phải lao động dù điều đó có thể đem lại cho bạn bao buồn vui... mệt mỏi... nghỉ ngơi chỉ để dành cho những người die thui...