Theo yêu cầu của chị Diễm Xưa là muốn trình bày bài viết giống giao diện Multiply, tức là 1 bài mới nhất sẽ có ảnh minh họa và 1 đoạn mô tả ngắn, các bài tiếp theo sẽ hiển thị tiêu đề theo dạng list nên hôm nay mình viết thủ thuật này nhằm đáp ứng cho chị Diễm Xưa cũng như cho những bạn nào thích trình bày Blogspot theo dạng này.
Cách thực hiện:
1. Vào Thiết kế => Bố cục
2. Thêm tiện ích => HTML/Javascript
3. Chép đoạn code bên dưới vào phần nội dung tiện ích HTML/Javascript vừa tạo:
<style type="text/css"> #bnll-rc {width:100%;margin:0px;padding:0px;overflow:hidden;
border:1px solid #transparent;background:#transparent;font-size:22px}
.bnll-rc h2{background:#transparent;color:#transparent;line-height:1.6em;
margin:0 0 10px;padding:4px 10px;font-size:16px;font-weight:bold; display:none}
.bnll-rc ul{list-style:none;margin:0;padding:0} .bnll-rc li{text-indent:0;background:url( )
no-repeat 0 2px;line-height:1.5em;margin:0;padding:2px 0 2px 15px} .bnll-rc h2 a:link,
.bnll-rc h2 a:visited {color:#transparent} </style>
<div id="bnll-rc" class="bnll-rc"> <h2><a href="http://testpage-bnll.blogspot.com/feeds/posts/default/-/Blog-Entries?&max-results=10">Blog Entries</a></h2>
<script type='text/javascript'> numposts = 4; list1 = 1; sumPosts = 180; maintitle = "#034afe"; subtitle = "#39c"; </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 showrecentposts(e) { img = new Array();
for (var i = 0; i < numposts; i++) { var f = e.feed.entry[i]; var g = f.title.$t; var h; if (i == e.feed.entry.length) break; for (var k = 0; k < f.link.length; k++) { if (f.link[k].rel == 'alternate') { h = f.link[k].href; break } } if ("content" in f) { var j = f.content.$t } else if ("summary" in f) { var j = f.summary.$t } else var j = ""; s = j; a = s.indexOf("<img"); b = s.indexOf("src=\"", a); c = s.indexOf("\"", b + 5); d = s.substr(b + 5, c - b - 5); if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {img[i] = d;} else {img[i]="https://lh4.googleusercontent.com/-j6hqLiJ1G9E/UJ8cCYtftlI/AAAAAAAAGUs/-KZQnnuO_Fc/s370/Man-Of-Steel-2013-Superman-Thumbnail.jpg";} var l = '<table border="0" cellpadding="10" cellspacing="0" style="margin-bottom:20;border-bottom: 1px solid #222222"><tr><td><img width="200" height="150" src="' + img[i] + '" align="left" border="1" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '" style="color:'+maintitle+'"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>'; var m = '<li><a href="' + h + '" style="color:'+subtitle+'">' + g + '</a></li>'; if ((i >= 0) && (i < list1)) { var n = l } if (i == list1) { var n = '<div class="bnll-rc"><ul>' + m } if ((i > list1) && (i < numposts - 1)) { var n = m } if (i == numposts - 1) { var n = m + '</ul></div>' } document.write(n) } } document.write("<script src=\"http://testpage-bnll.blogspot.com/feeds/posts/default/-/Blog-Entries?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); //]]> </script> </div> <p style="float:right;margin:0;padding:3px">Xem tất cả: <a href="http://testpage-bnll.blogspot.com/search/label/Blog-Entries?&max-results=10">Blog Entries</a></p>
Các giá trị quan trọng trong đoạn code trên:1. http://testpage-bnll.blogspot.com/feeds/posts/default/-/Blog-Entries?&max-results=10 : đây là địa chỉ Feed đến Nhãn (Label) mà bạn muốn ứng dụng tiện ích này. Thay testpage-bnll.blogspot.com thành địa chỉ blog của bạn và thay Blog-Entries thành tên nhãn của bạn. Max-results=10 là số bài tối đa được đếm trong feed.
2. Blog Entries (ngay sau liên kết số 1. phía trên là tên bạn muốn đặt cho tiện ích. Do ở đây mình đã ẩn phần này đi nên các bạn chỉ cần chỉnh sửa nếu muốn hiển thị nó ra. Hiển thị nó bằng cách xóa lệnh display:none ở dòng thứ 5 trong đoạn code trên.
3. numposts = 4; là số bài viết được hiển thị.
4. sumPosts = 180; là số từ của đoạn trích dẫn ngắn Summary cho bài viết đầu tiên.
5. maintitle = "#034afe"; là màu tiêu đề bài mới nhất.
6. subtitle = "#39c"; là màu tiêu đề các bài còn lại.
7. https://lh4.googleusercontent.com/-j6hqLiJ1G9E/UJ8cCYtftlI/AAAAAAAAGUs/-KZQnnuO_Fc/s370/Man-Of-Steel-2013-Superman-Thumbnail.jpg là hình ảnh thay thế Thumbnail khi bài viết mới nhất không có hình ảnh.
8. width="200" là chiều rộng ảnh Thumbnail.
9. height="150" là chiều cao ảnh Thumbnail.
10. Thay http://testpage-bnll.blogspot.com/search/label/Blog-Entries thành địa chỉ Label mà bạn muốn áp dụng tiện ích này.
***Lưu ý:
Nếu bạn muốn áp dụng tiện ích cho toàn bộ các bài viết thuộc tất cả các nhãn trên blog, thì bạn chỉ cần thay địa chỉ http://testpage-bnll.blogspot.com/feeds/posts/default/-/Blog-Entries thành http://testpage-bnll.blogspot.com/feeds/posts/default là được. Địa chỉ này lặp lại 2 lần trong code tiện ích, bạn nhớ sửa đủ cả 2, trong đó địa chỉ đặt trong thẻ document.write là quan trọng nhất.
No comments:
Post a Comment