Có lẽ đã nhiều người biết các hiển thị này. Tuy nhiên với một số newmembers hay một số bạn không phải là dân công nghệ thì vẫn còn chưa biết hay chưa rõ về khoản này.
Hôm nay ở tút này, mình xin giới thiệu với bạn cách làm. Cũng như hướng dẫn chi tiết để mọi người có thể hiểu và áp dụng vào web blog của mình.
Đây là một style được hiển thị trên Erhay. Bạn có thể thấy:
Với STYLE bài viết mới đây không ảnh:
Bạn copy toàn bộ đoạn code dưới đặt vào trước thẻ ]]></b:skin>
Ok. vậy là đã xong khoản CSS giống kiểu "bài viết mới đây" như trong hình.
Giờ là code Javascript để hiển thị. Bạn thêm code này bên dưới thẻ <head> hoặc bên trên </head>
Giờ đến phần code trên body. Bạn muốn hiển thị ở đâu thì thêm đoạn mã này vào trước đó:
Nếu muốn hiển thị có ảnh (thumbnail) như mục bên trái trong ảnh thì bạn dùng style này (thao tác thêm vào như phần trên):
Thêm CSS:
Nếu bạn vẫn chưa làm được hay có khó khăn gì cần giúp đỡ hãy để lại comment hoặc sang phần hỏi đáp: http://ask.erhay.com. Mình sẽ giúp đỡ bạn hết mình theo khả năng cho phép.
Trong phần sau mình sẽ hướng dẫn mọi người cách làm một số Style hiển thị bài viết theo chủ đề giống một số trang web nổi tiếng có hình ảnh đại diện.
Cảm ơn bạn đã quan tâm.
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Hôm nay ở tút này, mình xin giới thiệu với bạn cách làm. Cũng như hướng dẫn chi tiết để mọi người có thể hiểu và áp dụng vào web blog của mình.
Đây là một style được hiển thị trên Erhay. Bạn có thể thấy:
 |
| Một style được sử dụng để hiển thị bài viết theo chủ đề. |
Bạn copy toàn bộ đoạn code dưới đặt vào trước thẻ ]]></b:skin>
ul{list-style-type:none};
.label_with_thumbs2
{
float:left;
margin:0 10px 2px 0;
min-height:30px;
}
ul.label_with_thumbs2 li{background:url("https://lh4.googleusercontent.com/-ylapAWvY-rw/UKjsKTTo3YI/AAAAAAAAAHs/F0q6DjTt4jI/s6/1.png") no-repeat scroll 0 8px transparent;
margin: 5px 0 5px 10px;
min-height:30px;
padding:0 20px;
}
ul.label_with_thumbs2 li:hover {
margin-left:10px;
margin-top:5px;
background:url(https://lh6.googleusercontent.com/-pNRoGbjI-1Q/UKjw4aEyQ3I/AAAAAAAAAIA/hBXLCisMkNM/s6/2.png) no-repeat scroll 0 8px transparent;
padding:0px 20px;
min-height:30px;
margin-bottom:5px;
}
.label_with_thumbs2 a{
font:inherit;
font-weight:600;
min-height:30px;
}
a, a:visited{color:#064D62 !important;
outline: medium none;
text-decoration:none;
}
a:hover{color:#FF6D0B}Ok. vậy là đã xong khoản CSS giống kiểu "bài viết mới đây" như trong hình.
Giờ là code Javascript để hiển thị. Bạn thêm code này bên dưới thẻ <head> hoặc bên trên </head>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs2(json) {
document.write('<ul class="label_with_thumbs2">'); 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://lh6.googleusercontent.com/-1L0xTXyl_As/UK9y8xXWd7I/AAAAAAAAAlE/NgDCeSkF2aQ/s90/noimage.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] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec";
if (showpostthumbnails == true) {
document.write('<div style="height:8px; width:100px"></div>');
document.write('<li1 class="clearfix">');
document.write('<a style="font-size:13px" href="' + posturl + '" target ="_top"><img class="label_thumb2" src="' + thumburl + '"/></a>'); document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
document.write('<div style="width:200px;height:0px; background:white;padding-top:20px"></div>');
}
else {
document.write('<li class="clearfix">');
document.write('<a style="font-size:13px" href="' + posturl + '" target ="_top"></a>'); document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
}
if ("content" in entry) { var postcontent = entry.content.$t; }
else
if ("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(''); 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 nhận xét'; if (commenttext == '0 Comments') commenttext = '0 nhận xét'; commenttext = '<a style="color:#DB552D" 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>Giờ đến phần code trên body. Bạn muốn hiển thị ở đâu thì thêm đoạn mã này vào trước đó:
<script type='text/javascript'> var numposts = 3; var showpostthumbnails = false; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
<script src='/feeds/posts/default/-/Nhập nhãn của bạn vào đây?orderby=updated&alt=json-in-script&callback=labelthumbs2' type='text/javascript'/>Nếu muốn hiển thị có ảnh (thumbnail) như mục bên trái trong ảnh thì bạn dùng style này (thao tác thêm vào như phần trên):
Thêm CSS:
.label_thumb:hover{
background:#eaf7fd;
}
.label_with_thumbs {
float: left;
height:240px;
min-height: 30px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:4px 5px;
min-height:30px;
margin-bottom:5px;
}
.label_with_thumbs a {}
.label_with_thumbs
{
font-weight:normal;
}
ul{list-style-type:none};
a, a:visited{color:#064D62 !important;
outline: medium none;
text-decoration:none;
}
a:hover{color:#FF6D0B}Thêm Javascript:
Và đặt đoạn code dưới trong phần body, nơi mà bạn muốn nó hiển thị bài viết theo nhãn: <script type='text/javascript'> //<![CDATA[ function labelthumbs(json) {
document.write('<ul class="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/AVvXsEh388mqCreOZkt-ucWxkuL5U0dUZK58NgwZcd2-qhlsM4B3O6vpSGnzFvJ71lDpXqiZ38z75hikMjo54MTupEFqwrmpxQofsyjB_qW_tWMGV0JLbnxemMPsdTJ8dn0QaYYHLIL09vxIBcIL/'; } 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] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; 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('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>'); if ("content" in entry) { var postcontent = entry.content.$t; } else if ("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> <script type='text/javascript'> var numposts = 3; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script> <script src='/feeds/posts/default/-/Nhập label của bạn vào đây?orderby=updated&alt=json-in-script&callback=labelthumbs' type='text/javascript'/> Nếu bạn vẫn chưa làm được hay có khó khăn gì cần giúp đỡ hãy để lại comment hoặc sang phần hỏi đáp: http://ask.erhay.com. Mình sẽ giúp đỡ bạn hết mình theo khả năng cho phép.
Trong phần sau mình sẽ hướng dẫn mọi người cách làm một số Style hiển thị bài viết theo chủ đề giống một số trang web nổi tiếng có hình ảnh đại diện.
Cảm ơn bạn đã quan tâm.
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn
0 nhận xét:
Đăng nhận xét