Hôm nay namkna giới thiệu thêm cho các bạn một mẫu recent post mới để trang trí cho trang chủ của blog. Tiện ích đơn giản, load nhanh và dễ áp dụng. Tiện ích bao gồm một khung bài viết mới nhất tổng quát trên cùng, và các khung bài viết mới nhất cho từng nhãn bên dưới. Blog của bạn sẽ mang phong cách Magazine (báo trí), travel (du lịc) hoặc chuyên nghiệp hơn.
»Một số đặc điểm nổi bật của Recent post hompage Magazine style 2?
- Giao diện đẹp, bắt mắt.
- Khả năng tùy biến cao thông qua CSS và đoạn scipts mở (chưa mã hóa - endcode)
- Sử dụng 1 file javascripts duy nhất cho tất cả các nhãn nhằm hạn chế ảnh hưởng tới tốc độ load của blog khi sử dụng scripts.
Hãy xem demo hoặc ảnh minh họa đẻ thấy rõ hơn nha.:
View demo
» Bước 1: Ẩn bài viết ở trang chủ
-Việc ẩn bài viết ở trang chủ để tiện ích recen post hoạt động độc lập giúp blog của bạn nhìn chuyên nghiệp hơn.
- Để ẩn bài viết ở trang chủ bạn tham khảo bài viết sau:
» Bước 2: Thêm Recent post home page
1- Đăng nhập vào blog
2- CHọn Mẫu (Template)
3- CHọn chỉnh sửa HTML (Edit HTML)
4- THêm đoạn mã bên dưới vào trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhapTGwCR3FWqPw5X_Qgg7A3QpFz-SEAYvxurPMaqiTF0BJ3g6EoxnqhbYLvGh7QllNx-A7ufgiRh_aX-0cYmQA8iScggzZO9xDjx2xUKSD2_KxSUUxOBVj0vRJfe0HDjfwCs5IyMc8loiU/s1600/noimage-namkna-blogspot-com.png";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryPost1= 80;
summaryTitle = 35;
numposts = 1;
numposts1 =5;
numposts2 =4;
numposts3 = 6;
numposts4 = 1;
numposts5 = 6;
numposts6 = 10;
numposts7 = 10;
numposts8= 6;
function removeHtmlTag(strx,chop){
var s = strx.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,chop-1);
return s;
}
function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
if (numposts5 <= json.feed.entry.length) {
maxpost = numposts1;
}
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 pcm;
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;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
if (i==0) {
var trtd = '<div class="widgetsplitone_left"><a href="'+posturl+'"><img width="278" height="139" class="imagefeatured wp-post-image" src="'+img[i]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(postcontent,summaryPost)+'(...)</p></div><div class="clear"></div></div><div class="widgetsplitone_right">';
document.write(trtd);
}
if ((i>0)&&(i<maxpost)) {
var trtd = '<a href="'+posturl+'"><img class="imagewidgetthumb wp-post-image" height="40" src="'+img[i]+'" width="60"/></a><div class="featuredPost"><b><a href="'+posturl+'">'+posttitle+'</a></b><div class="borderfix"></div></div>';
document.write(trtd);
}
j++;
}
document.write('</div>');
}
function showrecentposts3(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < 10; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
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;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li><a href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
}
function showrecentposts6(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
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;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<a href="'+posturl+'"><img width="266" height="139" class="imagefeatured wp-post-image" src="'+img[i]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(postcontent,summaryPost)+'(...)</p></div><div class="clear"></div>';
document.write(trtd);
j++;
}
}
//]]>
</script>
5- Thêm đoạn mã bên dưới vào trước thẻ ]]></b:skin>/* --------Widgets---------------------*/
.widget {
margin: 0px 0px 10px 0px;
overflow: hidden;
}
.widget a,
.widget a:visited {
color: #00CD00;
text-decoration: none;
}
.widget a:hover {
color: #FF7000;
}
.widgetwrap {
padding: 10px;
border-left: 1px solid #F4F4F4;
border-right: 1px solid #F4F4F4;
border-bottom: 1px solid #F4F4F4;
overflow: hidden;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.widgetwrap ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.widgetwrap ul li {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJAk8qZjoDikAHzKkfYmQBLvi7w-_QUM1LSuH6aDv2c7pk8SuHQihFMWe4DZQOIlCZhFYO0Gx_Lctzgb4AsGiVKQS991F6U6lYYIjO7-G_QrVzDGtHp34B-b2JKd9uAZZAkEpuXHxnCZR/s1600/bullet-namkna-blogspot-com.gif) no-repeat 0px 5px;
margin: 0px 0px 4px 0px;
padding: 0px 0px 0px 13px;
}
.widgetwrap li a,
.widgetwrap li a:link,
.widgetwrap li a:visited {
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.widgetwrap li a:hover,
.widgetwrap li a:active {
color: #FF7000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.widgetwrapalt {
padding: 10px;
border: 1px solid #F4F4F4;
overflow: hidden;
border-radius: 3px;
}
.widgetsplitone {
width: 558px;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.widgetsplitone_left {
width: 313px;
padding: 0px;
margin: 0px 10px 0px 0px;
float: left;
}
.widgetsplitone_right {
width: 222px;
padding: 0px;
margin: 0px 0px 0px 10px;
float: right;
}
h3.widget {
line-height: 14px;
font-size: 12px;
font-weight: bold;
font-family: Tahoma;
color: #363636;
letter-spacing: normal;
padding: 5px 11px 5px 11px;
margin: 0px 0px 0px 0px;
display: block;
background: #F5F5F5;
}
h3.widget a,
h3.widget a:visited {
color: #000;
text-decoration: none;
}
h3.widget a:hover {
color: #ccc;
}
.main-w_w_right {
float: left;
margin-top: 0px;
padding: 0;
width: 290px;
}
Trong đó:
- width: 558px; Là độ rộng của khung recent comment chính
- width: 313px; là độ rộng của khung bên trái
- width: 222px; là độ rộng của khung bên phải.
- 2 số 313px +222px phải nhỏ hơn 558px
- width: 290px; là độ rộng của 2 khung dưới cùng (Số này phải nhỏ hơn 558px/2)
- color: #00CD00; là màu chữ tiêu đề khi chưa dê chuột vào.
- color: #FF7000; là màu chữ tiêu đề khi dê chuột vào.
- background: #F5F5F5; là màu nền của phần tên nhãn (phần màu xám trong hình minh họa hoặc blog demo).
- color: #363636; là mãu chữ của tên nhãn.
- font-size: 12px; là Font chữ tên nhãn.
- Hãy sử dụng công cụ lấy mã màu của namkna để thay đổi mã màu của bạn nha: Color conveter.
6- Tìm đoạn mã bài viết như bên dưới:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
- Và dán ngay sau nó đoạn code bên dưới.<!-- Recent Posts -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='widget'><h3 class='widget'>Recent Posts</h3>
<div class='widgetwrap'>
<div class='widgetsplitone'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
</div>
<!-- Nhãn 1 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 1</h3>
<div class='widgetwrap'>
<div class='widgetsplitone'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Tên nhãn 1?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
</div>
<!-- Nhãn 2 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 2</h3>
<div class='widgetwrap'>
<div class='widgetsplitone'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Tên nhãn 2?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
</div>
<!--Nhãn 3 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 3</h3>
<div class='widgetwrap'>
<div class='widgetsplitone'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Tên nhãn 3?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
</div>
<!-- Nhãn 4 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 4</h3>
<div class='widgetwrap'>
<div class='widgetsplitone'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Tên nhãn 4?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
</div>
<!-- Khung them thu cong -->
<div class='main-w_w_right'>
<div class='widget'><h3 class='widget'>Blogger Templates</h3>
<div class='widgetwrap'>
<script>document.write("<script src=\"http://quangvietmkt.blogspot.com/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");</script>
</div>
</div>
</div>
<div class='main-w_w_right'>
<div class='widget'><h3 class='widget'>Wallpapers</h3>
<div class='widgetwrap'>
<script>document.write("<script src=\"http://viettin365.com/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");</script>
</div>
</div>
</div>
</b:if>
Trong đó:
- Thay Mô tả 1,2,3,4 thành mô tả nhãn bạn muốn hiển thị recent post
- Thay tên nhãn 1,2,3,4 thành tên nhãn bạn muốn hiển thị recent post
- Thay: http://viettin365.com/ thành URL blog của bạn. Nếu muốn bỏ 2 ô cuối cùng bạn chỉ việc xóa phần màu xanh.
7- Lưu mẫu lại và xem kết quả nha.
Đôi khi bạn phải sử dụng Popup window để tạo liên kết đến một trang web khác. Popup window thường xuyên được sử dụng trong thiết kế web. Bạn hãy click chuột vào liên kết Demo dưới đây để thấy tác dụng của thủ thuật này.
