Việc hiển thị các bài viết ngoài trang chủ của Blog cũng giống như việc bạn bài trí các sản phẩm lên trên cửa hàng của mình vậy. Một sản phẩm chất lượng đi kèm với một quảng cáo hấp dẫn sẽ tạo được sự quan tâm của khách hàng, việc hiển thị bài viết cho blog cũng vậy, một bài viết chất lượng được thể hiện hấp dẫn ngoài blog sẽ thu hút được khách truy cập ghé lại trang web/blog của bạn.
Bài viết này mình sẽ chia sẻ với các bạn cách hiển thị các bài viết theo nhãn (label) có kèm theo hình ảnh thu nhỏ của bài viết ở ngoài trang chủ của Blog như trên
Đầu tiên các bạn đăng nhập vào trang quản trị blog (Luôn luôn là thế) và chọn chỉnh sửa HTML và tiến hành các bước sau :
Bước 1 : Các bạn tìm tới thẻ đóng ]]</b:skin> và dán đoạn code phía dưới vào trước nó
/* Recent post by labels edit by csttol.blogspot.com*/
.boxhome{width:620px}
.box1{padding:10px;background:white;box-shadow:0 1px 3px 0 #B5B5B5;-moz-box-shadow:0 1px 3px 0 #b5b5b5;-webkit-box-shadow:0 0px 0px 0 #FFF;border:1px solid #DDD;border-bottom:4px solid #0F83A0;overflow:hidden;position:relative;border-radius: 10px}
.box1{box-shadow:0 1px 3px 0 rgba(0, 0, 0, 1);}
.box1{border-top: 1px solid silver; border-right: 1px solid silver; border-bottom: 1px solid silver;border-left: 1px solid silver;border-radius:0px;}
.box1{margin-bottom:1px;overflow:hidden;padding-left: 0px;padding-bottom: 0px;height : 370px}
.box1 a:hover{filter:alpha(opacity=75);opacity:.75;}
.box1-left{width:280px; float:left; height:350px;border-right: #ABABAB 1px solid; padding:10px; padding-top:0px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px; height:230px; width:280px}
.box1-right{height:51px; width:287px; float:right; padding: 10px;padding-left: 0px; line-height:20px;border-bottom: #ABABAB 1px solid;font: bold 12px Arial; }
.box1-right img {float:left; height:49px; width:72px; margin-right:10px; padding-left:0px}
.box1-left-info, .box2-left-info{ text-align:justify;}
.box1-googlesearch{width:650px;float:left}
.menu{overflow: hidden; width: 100%; background:#eee; padding: 0px; margin :0px;border-bottom: #ABABAB 1px solid;font: bold 12px Arial;color:#FFF}
.menu li{float: left; list-style: none;}
.menu a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;color: #444;}
.menu li:first-child a{padding-left: 10px; background:#BBB; color:#FFF}
.menu li:first-child a::after{border-left-color: #BBB;color:#eee}
.menu li:first-child a:hover{background:#979797; color:#fff}
.menu li:first-child a:hover::after { border-left-color: #979797;}
.menu a:hover{background: #979797; color:#FFF}
.menu a::after, .menu a::before{content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu a::after{z-index: 2; border-left-color: #eee;}
.menu a::before{border-left-color: #BBB; right: -1.1em; z-index: 1; }
.menu a:hover::after{ border-left-color: #979797;}
Bước 2 : Các bạn tìm tới thẻ <div id='main-wrapper'> và dán đoạn code phía dưới vào ngay dưới thẻ bạn vừa tìm được
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='boxhome'>
<div class='box1'>
<script src='/feeds/posts/default/-/Label cần hiển thị?max-results=6&orderby=updated&alt=json-in-script&callback=box1'/>
<div style='clear:both;'/>
</div>
</div>
<div style='clear:both;'/>
</b:if>
Đây là khu vực mà bạn muốn bài viết được hiển thị. Các bạn cũng có thể cho nó xuất hiện dưới phía dưới widget Blog1 cũng được, nói chung bạn có thể đặt vào bắt cứ đâu bạn muốn và nhớ chỉnh lại một số những thẻ mà mình đã đánh dấu màu ở phía trên
Màu thẻ : Đây là thông số chiều rộng và chiều cao của nhãn được hiển thị
Màu thẻ : Đây là thông số chiều rộng và chiều cao của bài viết bên trái
Màu thẻ : Đây là thông số chiều rộng và chiều cao hình ảnh thumbnail bài viết bên trái
Màu thẻ : Đây là thông số chiều rộng và chiều cao hình ảnh thumbnail bài viết bên phải
Màu thẻ : Số bài viết cho phép hiển thị
Màu thẻ : Tên nhãn cần hiển thị bài viết
Cuối cùng là Lưu mẫu và f5 lại blog để xem thành quả
Lưu ý : Cách này chỉ dùng khi bạn đã đăng ký feed cho blog. Nếu bạn chưa đăng ký feed rss cho blog vui lòng tham khảo bài viết này : Hướng dẫn đăng ký Feed Atom và RSS cho blog.
Chúc các bạn thành công
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
0 nhận xét | Viết lời bình