[tintuc]Bạn có một blogspot và muốn trang chủ có giao diện đẹp mắt, thu hút người đọc từ cái nhìn đầu tiên? Hiển thị bài viết theo label tại trang chủ blogspot, giúp trang chủ phân ra nhiều chuyên mục là 1 cách đơn giản giúp độc giả dễ dàng tiếp cận nhiều bài viết hơn trên blog từ đó thu hút giữ chân độc giả ở lại Website của bạn thật lâu.
Mỗi label sẽ hiển thị các bài viết nằm trong Label đó. Rõ ràng với cách hiển thị truyền thống là phân trang của blogspot thì các phân các chuyên mục như thế này giúp độc giả dễ dàng tiếp cận các thông tin mà chúng ta đang cung cấp.
Vậy làm sao để hiển thị bài viết theo label tại trang chủ blogspot? Bài viết này của Giupbankinhdoanh xuất hiện chính là để giải quyết vấn đề này cho bạn.
Để thực hiện, các bạn làm theo các bước sau:
- Bước 1: Đăng nhập vào trang quản trị Blogger: https://www.blogger.com
Lưu ý: Trước khi chỉnh sửa các bạn nên back up lại code web trước nhé,
- Bước 2: Từ Blogger Dashboard bạn chọn "Chủ Đề" sau đó chọn "Chỉnh sửa HTML". Tiếp theo các bạn ấn "Ctrl +F" để tìm từ thẻ ]]> </ b: skin> :
Các bạn chèn đoạn code sau lên phía trên thẻ ]]> </ b: skin>
img.label_thumb{float:left;margin-right:10px !important;height:65px; /* Thumbnail height */width:65px; /* Thumbnail width */border: 1px solid #fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);box-shadow: 0 1px 1px rgba(0, 0, 0, .4);}#label_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 0px 10px 2px 0px;padding: 0;}ul#label_with_thumbs li {padding:8px 0;min-height:65px;margin-bottom:0px;border-bottom: 1px dotted #999999;}#label_with_thumbs li{list-style: none ;padding-left:0px !important;}#label_with_thumbs a { text-transform: uppercase;}#label_with_thumbs strong {padding-left:0px; }
Bước 3: Các bạn tìm đến thẻ : </head> và thêm đoạn code sau lên phía trên thẻ : </head> nhé.
<script type='text/javascript'>//<![CDATA[function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;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=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error){s=entry.content.$t;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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqnLwhH36K9Hmt2cOiackPKJoGP1zaVg_5bpisGJtcK8rIulIIRDIXf_-i5N2F90TLMQf5cINT3XCcyhMn08qj5siyqwdECagLHePAnvGSDMBTlZcIJA_fhAQkcq1CFKZ8lPFlBlz7xeE/s1600/picture_not_available.png';}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}elseif("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}if(showcommentnum==true){if(flag==1){towrite=towrite+' | ';}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('');}document.write('</ul>');}//]]></script>
Bước 4: Các bạn tìm đến thẻ </body> và thêm đoạn code sau lên phía trên thẻ </body>. Mục đích của việc này là để blog của bạn tương thích với mọi độ phân giải nhé.
<script type='text/javascript'>function changeThumbSize(id,size){var blogGadget = document.getElementById(id);var replacement = blogGadget.innerHTML;blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");var thumbnails = blogGadget.getElementsByTagName("img");for(var i=0;i<thumbnails.length;i++){thumbnails[i].width = size;thumbnails[i].height = size;}}changeThumbSize("label_with_thumbs",210);</script>
Bước 5: Các bạn kích Lưu lại nhé
Bước 6 : Bây giờ các bạn quay lại trang chủ Blog của bạn. Các bạn kích vào "Bố Cục" . Sau đó các bạn muốn hiển thị nhãn ở vị trí nào thì kích chọn "Thêm tiện ích" ở vị trí đó và chọn HTML/Javascript widget và dán đoạn mã phía dưới vào.
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script><script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>
Lưu ý:
1.Các bạn thay tên nhãn "Name-of- the label" thành nhãn trên thanh menu chính của các bạn nhé. Lưu ý là phải viết đúng chính xác tên trên thanh menu của các bạn nhé.
2. Các bạn có thể tùy chỉnh những thông số sau
- var numposts ← Số bài viết muốn hiển thị
- var showpostthumbnails ← Show/hide ảnh thu nhỏ
- var displaymore ← Show or hide link đọc tiếp
- var displayseparator ← Show/hide separator
- var showcommentnum ← Show/hide the number of comments
- var showpostdate ← Show/hide the posts dates
- var showpostsummary ← Show or not the posts summaries
- var numchars ← Number of posts characters (here you have to change the 100 value)
