Tin mới :
Đăng lúc 03:48 bởi Nguyễn Phúc
Với yêu cầu mong muốn được hiển thị bài viết nhiều chuyên mục ngoài trang chủ, giống như những trang blog wordpress, johncms,... để sử dụng theo mục đích riêng, hôm nay mình sẽ hướng dẫn các bạn Cách hiện bài viết theo từng chuyên mục cho blogspot ngoài trang chủ hoặc trong bài viết tùy ý.
1. Đăng nhập vào Blogger.
2. Vào phần Mẫu » Chỉnh sử HTML.
3. Tìm đến thẻ ]]></b:skin> và chèn code sau vào trước nó :
4. Chèn tiếp đoạn code sau vào trên thẻ đóng </head> :
Trong đó :
- Màu xanh : số kí tự trong bài viết được cắt ra.
- Màu vàng : link ảnh khi trong bài viết bạn không up ảnh lên.
- Màu đỏ sẫm : thiết kế cho bài viết đầu tiên có ảnh.
- Màu xanh sẫm : hiển thị 5 bài viết tiếp theo dạng list.
5. Và giờ thì bạn chỉ cần thêm code này vào sau thẻ mở <body> :
Trong đó : màu xanh là tên chuyên mục, màu vàng là tên hiển thị tùy ý.
6. Lưu lại rồi xem thử.
P/s : để phù hợp cho việc hiển thị thì các bạn có thể thiết kế lại code css trên kia, vì mình chỉ lấy demo là Template Clone 24h nên có thể cho vào template của bạn sẽ hiển thị không theo mong muốn. Tham khảo Các hàm tùy chỉnh hiển thị để thuận tiện hơn trong khi làm.
Kết bài : Bài viết chia sẻ cho mọi người tham khảo, ai biết rồi thì ném gạch, chưa biết thì ngồi ngâm cứu rồi comment mình sẽ support nhiệt tình hjhj Chúc bạn thành công !
Hướng dẫn làm
1. Đăng nhập vào Blogger.
2. Vào phần Mẫu » Chỉnh sử HTML.
3. Tìm đến thẻ ]]></b:skin> và chèn code sau vào trước nó :
.ten-chuyen-muc{font-size: 13px;background: none repeat scroll 0% 0% rgb(93, 160, 57);line-height: 23px;color: rgb(255, 255, 255);padding: 3px 0px 3px 2%;}
.ten-chuyen-muc a{font-size:13px;color:#FFF;text-decoration:none;}
.chuyen-muc ul a {display: block;color: rgb(177, 64, 0);padding: 6px 0px 6px 14px;background: url(http://2.bp.blogspot.com/-NaFridlGX3E/UHH2gRahjEI/AAAAAAAABNs/AXd_dsbPLW0/s1600/iconNew.gif) no-repeat scroll 0px 13px transparent;}
.tin-anh{margin-top:5px;overflow:auto;position:relative;padding:0 2%;}
.tin-anh h1{display:inline;line-height:18px;}
.tin-anh p h2{display:inline;font-weight:700;font-size:16px;}
.tin-anh h4{clear:both;margin-bottom:2px;}
.tin-anh p{text-align:justify;margin:5px 0 8px;}
.tin-anh .line-break{clear:both;border-top:1px solid #C2C2C2;}
.xem-them{margin: 11px 2% 15px;text-align:right;color:#390;}
.xem-them a{color:#666;}
.img-thumb{float:left;}
.ten-chuyen-muc a:hover{color:#000;}
.ten-chuyen-muc h2{font-weight:700;font-size:13px;display:inline;}
.chuyen-muc ul{border-top:1px solid #C2C2C2;padding-top:5px;clear:both;line-height:21px;margin:5px 2% 0;}
.tin-anh h2{display:inline;}
.tin-anh h2 a{font-size:16px;font-weight:700;}
.tin-anh img{margin:0 5px 5px 0;}
4. Chèn tiếp đoạn code sau vào trên thẻ đóng </head> :
<script type='text/javascript'>
numposts = 6;
list1 = 2;
sumPosts = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a, b) {
var s = a.split("<");
for (var i = 0; i < s.length; i++) {
if (s[i].indexOf(">") != -1) {
s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)
}
}
s = s.join("");
s = s.substring(0, b - 1);
return s
}
function hienthibaiviet(json) {
if (numposts <= json.feed.entry.length) {maxpost = numposts;} else {maxpost=json.feed.entry.length;}
for (var i = 0; i < maxpost; i++) {var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break;}}
if ("content" in entry) {var postcontent = entry.content.$t;} else if ("summary" in entry) {var postcontent = entry.summary.$t;}
else var postcontent = "";
if("media$thumbnail" in entry){var thumburl = entry.media$thumbnail.url;}
else{ var thumburl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxebBdo1v0ugQCbdF37VLig7JxCr-VuYZFlOJ42iYXZZPhIb50SqJ_lnvOT8a3rAWSK8-G-7QWXUOtPENokVoOwWt9G26aOTOaHVoGBRvAPjlJeeuNPPZdsWh2-S-hFrp34BFmFL20GHc/s72-c/seoer.png";}
var l = '<div class="tin-anh"><a href="'+posturl+'"><img class="img-thumb" width="70" height="70" src="'+thumburl+'" alt="'+posttitle+'"/></a><h3><a href="'+posturl+'">'+posttitle+'</a></h3><p>'+removeHtmlTag(postcontent,90)+'...</p></div>';
var m = '<li><a href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a></li>';
if (i == 0) { var n = l + '<ul>' }
if ((i >= 1) && (i < 5 - 1)) { var n = m }
if (i == 5 - 1) { var n = m + '</ul>' }
document.write(n)
}
}
//]]>
</script>
Trong đó :
- Màu xanh : số kí tự trong bài viết được cắt ra.
- Màu vàng : link ảnh khi trong bài viết bạn không up ảnh lên.
- Màu đỏ sẫm : thiết kế cho bài viết đầu tiên có ảnh.
- Màu xanh sẫm : hiển thị 5 bài viết tiếp theo dạng list.
5. Và giờ thì bạn chỉ cần thêm code này vào sau thẻ mở <body> :
<div class='chuyen-muc'>
<div class='ten-chuyen-muc'><h2>Thủ Thuật Blogger</h2></div>
<script type='text/javascript'>
//<![CDATA[
document.write("<script src=\"/feeds/posts/default/-/Thủ Thuật Blogger?max-results="+5+"&orderby=published&alt=json-in-script&callback=hienthibaiviet\"><\/script>");
//]]>
</script>
<div class='xem-them'>>><a href='/search/label/Thủ Thuật Blogger?max-results=10'> Xem thêm Thủ Thuật Blogger</a></div>
</div>
Trong đó : màu xanh là tên chuyên mục, màu vàng là tên hiển thị tùy ý.
6. Lưu lại rồi xem thử.
P/s : để phù hợp cho việc hiển thị thì các bạn có thể thiết kế lại code css trên kia, vì mình chỉ lấy demo là Template Clone 24h nên có thể cho vào template của bạn sẽ hiển thị không theo mong muốn. Tham khảo Các hàm tùy chỉnh hiển thị để thuận tiện hơn trong khi làm.
Kết bài : Bài viết chia sẻ cho mọi người tham khảo, ai biết rồi thì ném gạch, chưa biết thì ngồi ngâm cứu rồi comment mình sẽ support nhiệt tình hjhj Chúc bạn thành công !
Nội Quy Khi Comment:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Những nhận xét spam sẽ bị xóa.
» Sử dụng tài khoản Google để được trợ giúp.
» Nặc danh thường không được chào đón.
bạn có thể chỉ cách chèn bài đưa bài trang web khác lên blog mình như box game mới trang này không http://24h.fchiase.com/
Trả lờiXóathủ công cậu nhé
Xóa