Thủ thuật recent post Vnexpress

Hôm nay xin giới thiệu chia sẻ cho các bạn thủ thuật recent Post giống như trang Vnexpress. Các bạn hãy coppy code bằng Ctrl + C và Past vào bằng Ctrl + V nhe

►Thực hiện cách 1 nhanh gọn nhưng load chậm trang:

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới

#cotent-news {

border:#999 solid 1px;

width: 650px;

}

#top-news {

width: 440px;

height:166px;

padding:5px;

border:#bbb solid 1px;

background:#eee;

font-size:12px;

}

#bottom-news {

width: 444px;

padding:5px;

}

#bottom-news-item {

width: 106px;

margin-right:5px;

float:left;

}

#left-news {

padding:5px;

border-left:2px dotted #ccc;

}

</style>

imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

imgico= "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif";

showRandomImg = true;

topwidth = 160;

topheight = 160;

botheight = 100;

botwidth = 100;

fntsize = 12;

vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"

acolor = "#555";

cmcolor = "#555";

topcolor = "#f00";

aBold = true;

text = "comments";

showPostDate = true;

summaryPost = 250;

summaryFontsize = 12;

summaryColor = "#000";

botnum = 4;

numposts = 14;

label = "Hardware"; ( nhãn )

home_page = "http://www.buivansum.blogspot.com/"; ( Thay bằng blog của bạn)

</script>

* Trong đoạn code trên :

o width: 650px; : chiều rộng của widget

o botnum = 4; : số bài viết hiển thị ở class bottom-news

· numposts = 14; : số bài viết hiển thị ở class left-news

· label = "Hardware"; : nhãn/ trương mục ( Label ) sẽ được hiển thị

Các bạn có thể xem hình minh họa bên dưới để hiểu rõ layout của widget :

Bạn chú ý: thay Link http://buivansum.blogspot.com thành link blog của bạn:

* Cách tính chiều rộng :

o bottom-news = 4x(botwidth + 2px + 4px) + 4x5px = 444px

· bottom-news-item = botwidth + 2px + 4px = 106px

* Nếu bạn muốn widget hiển thị những bài cho Label thì thay code

https://sites.google.com/site/itechroot/javascripts/vne-recent-adv-all-posts.txt

thành :

https://sites.google.com/site/itechroot/javascripts/vne-recent-adv.txt

►Thực hiện cách 2 load nhanh hơn:

B1:Vào chỉnh sửa Html -Chọn mở rộng mẫu tiện ích - nhấn Ctr+F - Tìm mã code sau:]]></b:skin>

B2:copy hết code sau và chèn lên phía trên code vừa tìm được:

#cotent-news {

border:#999 solid 1px;

width: 650px; }

#top-news {

width: 440px;

height:166px; padding:5px;

border:#bbb solid 1px;

background:#eee;

font-size:12px;

}

#bottom-news {

width: 444px; padding:5px;

}

#bottom-news-item {

width: 106px;

margin-right:5px;

float:left;

}

#left-news {

padding:5px;

border-left:2px dotted #ccc;

}

B3:Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :

imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

imgico= "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif";

showRandomImg = true;

topwidth = 160;

topheight = 160;

botheight = 100;

botwidth = 100;

fntsize = 12;

vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"

acolor = "#555";

cmcolor = "#555";

topcolor = "#f00";

aBold = true;

text = "comments";

showPostDate = true;

summaryPost = 250;

summaryFontsize = 12;

summaryColor = "#000";

botnum = 4;

numposts = 14;

label = "Hardware";

home_page = "http://www.chipkool.blogspot.com/";

</script>

Style 2 : Recent Post mang phong cách VNExpress

Thực hiện cách 1 khó sửa khi sai xót nặng temple:

1. Vào Thiết kế > Chình sửa HTML

2. Chèn đoạn code bên dưới vào trước thẻ đóng</head>

.fl {float:left;}

.fr {float:right;}

.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}

.folder-content {background-color:#ffffff;}

.other-folder {width:100%;}

.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}

.folder, .folder-title, .folder-bottom {width:500px;}

.folder-bottom {background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_vne.gif') repeat-x 0px -73px;}

.folder {margin-bottom:5px;}

.folder-title {height: 21px;}

.folder-active, .subfolder {height: 17px;}

.folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x scroll 0px 0px;}

.folder-active {padding: 2px 9px; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x 0px -23px;}

.folder-content {width:478px; padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}

.folder-bottom {height:5px;}

.folder-topnews {width:298px; padding-right:20px;}

.folder-othernews {width:160px;}

.folder-news {width:478px; padding:0px 11px; margin-bottom:10px;}

.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}

.subfolder {padding: 3px 5px 1px;}

.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}

.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}

.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}

.link-title:visited {color:#004080;}

.link-othernews {text-decoration:none; color:#000000;font:12px arial;}

.link-othernews:visited {color:#004080;}

.link-othernews:hover {text-decoration:underline;}

.folder-content p{margin-top:0px;margin-bottom:4px;}

.folder-content ul {list-style:none;margin:0;padding:0;}

.folder-content li {

padding-left:6px;

background-image:url('http://vnexpress.net/Images/Background/black-square.gif'); background-repeat:no-repeat;

background-position: 0 7px;

}

.other-folder {margin-bottom:5px;}

.img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}

.img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}

.folder-activeleft{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -0px;}

.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -23px;}

.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }

</style>

rdlabels = new Array(3);

//Nhãn thứ 1 : Kiến thức căn bản

rdlabels[0] = "\<script\>label = 'OSystemK'\;\</script\>";

//Nhãn thứ 2 : Thủ thuật

rdlabels[1] = "\<script\>label = 'OSystemT'\;\</script\>";

//Nhãn thứ 3 : Phần mềm

rdlabels[2] = "\<script\>label = 'Download'\;\</script\>";

//Nhãn thứ 4 : Phần mềm bản quyền

rdlabels[3] = "\<script\>label = 'License'\;\</script\>";

index = Math.floor(Math.random() * rdlabels.length);

</script>

3. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :

<div class="folder-active fl"><a class="link-folder" href="http://www.itechplus.info/search/label/OSystem?max-results=10">Windows</a></div>

<a class="link-subfolder" href="http://www.itechplus.info/search/label/OSystemK?max-results=10">Kiến thức</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/OSystemT?max-results=10">Thủ thuật</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/Download?max-results=10">Phần mềm</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/License?max-results=10">Free License</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = false;

summaryPost = 247;

sumPost = 147;

numposts = 6;

home_page = "http://www.itechplus.info/";

</script>

</div>

</div>

Trong 2 đoạn code trên :

o width:500px; : chiều rộng của cả widget

o width:478px; : chiều rộng phần nội dung widget

o width:298px; : chiều rộng phần nội dung bên trái

o width:160px; : chiều rộng phần nội dung bên phải

o height:100px; : chiều rộng ảnh bài viết mới nhất

o width:53px; height:53px; : chiều rộng & chiều cao ảnh bài viết đầu tiên bên phải

o rdlabels[x] : tên của mảng tương ứng với Label. Nếu bạn không gán cụ thể, nội dung của tiện ích sẽ hiển thị một cách ngẫu nhiên theo nhãn.

· summaryPost = 247; : số ký tự đoạn mô tả bài viết chính

· sumPost = 147; : số ký tự tiêu đề bài viết

· numposts = 6; : tổng số bài viết được hiển thị trên mỗi widget

Để hiểu rõ hơn bố cục của Widget, các bạn có thể xem hình dưới :

Thực hiện cách 2 đẹp hơn,có thêm nút xem thêm tạo cho nhiều label trên trang chủ:

B1:Vào Chỉnh sửa html - Mở rộng mẫu tiện ích- nhấn ctrl + F - tìm code sau]]></b:skin>

B2:Copy hết code sau và chèn lên phí trên code vừa tìm được:

.fl{float:left}

.fr{float:right}
.folder{width:516px; margin-bottom:8px; overflow:hidden; line-height:1.5em;font:normal 12px arial;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.folder-title{height:26px; border-bottom:1px solid #eee; overflow:hidden; background:url(http://goo.gl/CyQBL)repeat-x}
.folder-active{height:24px; padding:4px 10px; background:url(http://goo.gl/EgxmY) repeat-x; font-weight:bold}
.link-folder:link, .link-folder:visited{color:#fff}
.subfolder{height:24px; padding:5px 5px 0 15px; background:url(http://goo.gl/Z29yN) no-repeat}
.folder-content{width:500px; background:#fff url(http://goo.gl/qy9iZ) repeat-x left bottom; padding:10px 6px 2px 10px; overflow:hidden}
.folder-content p{margin:0}
.folder-content ul{list-style:none; margin:0; padding:0}
.folder-content li{padding:0 0 4px 6px; background:url(http://goo.gl/4OvNo) no-repeat 0 8px}
.folder-topnews{width: 398px; padding-right:10px}
.folder-othernews{width:220 px}
.other-folder{margin:0}
.img-subject{height:85px; width:110px; border:1px solid #a5a5a5; margin-right:8px}
.img-other{width:60px; height:50px; border:1px solid #a5a5a5; margin:0 5px 4px 0}
.xemthem{float:right; display:block; margin:0; padding:5px}

B3:Tạo 1 Javar/script rồi chèn code sau vào:

<div class="folder-active fl"><a class="link-folder" href="http://www.chipkool.tk/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Vi%20t%C3%ADnh?max-results=10">Thủ thuật vi tính</a></div>

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/S%E1%BB%A9c%20m%E1%BA%A1nh%20s%E1%BB%91?max-results=10">Sức mạnh số</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/th%E1%BB%A7%20thu%E1%BA%ADt%20internet?max-results=10">Internet</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/Di%E1%BB%87t%20virut?max-results=10">Diệt Virut</a> | <a class="link-subfolder" href="http://www.chipkool.tk/search/label/clip%20th%E1%BB%A7%20thu%E1%BA%ADt?max-results=10">Video - clip</a>| <a class="link-subfolder" href="http://www.chipkool.tk/search/label/windows%207?max-results=10

">Windows 7</a>| <a class="link-subfolder" href="http://www.chipkool.tk/search/label/windows%208?max-results=10">Windows 8</a>| <a class="link-subfolder" href="http://www.chipkool.tk/search/label/windows%20XP?max-results=10">Windows XP</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ZUuJV-QxLqUeYR0Wetpyj_nIR9ZBGhPjM7sQ1tFVXV18A0SxpgPNyxmzJKOn18feYIxgg2H4HBH2FKkfrJ9Po_8KHvu2MYHziirp0Tehm4bs2pf3y1TRqPuuu1IKE93Paxv9eqCVo_cf/";

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "Th%E1%BB%A7%20Thu%E1%BA%ADt%20Vi%20t%C3%ADnh";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

<div class="folder-active fl"><a class="link-folder" href="http://www.chipkool.tk/search/label/M%E1%BA%A1ch%20Vi%20%C4%91i%E1%BB%81u%20khi%E1%BB%83n?max-results=10">Mạch vi điều khiển</a></div>

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/Ph%E1%BA%A7n%20m%E1%BB%81m%20%C4%91i%E1%BB%87n%20t%E1%BB%AD?max-results=10">Phần mềm điện tử</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/%C4%90i%E1%BB%87n%20t%E1%BB%AD%20c%C6%A1%20b%E1%BA%A3n?max-results=5">Điện tử cơ bản</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/M%E1%BA%A1ch%20%C4%91i%E1%BB%87n%20c%C6%A1%20b%E1%BA%A3n?max-results=10">Mạch điên cơ bản</a> |

<a class="link-subfolder" href="#">All datasheet</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "M%E1%BA%A1ch%20Vi%20%C4%91i%E1%BB%81u%20khi%E1%BB%83n";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/th%E1%BB%A7%20thu%E1%BA%ADt%20word?max-results=10">Thủ thuật word</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/th%E1%BB%A7%20thu%E1%BA%ADt%20mobile?max-results=5">Thủ thuật mobile</a> |

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "Ph%E1%BA%A7n%20m%E1%BB%81m%20vi%20t%C3%ADnh";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

<div class="folder-active fl"><a class="link-folder" href="http://www.chipkool.tk/search/label/ebook%20%C4%91i%E1%BB%87n%20t%E1%BB%AD?max-results=10">Ebook điện tử</a></div>

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/Ebook%20%C4%90%E1%BA%A1i%20H%E1%BB%8Dc?max-results=10">Ebook Đại Học</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/Ebook%20Tin%20H%E1%BB%8Dc?max-results=10">Ebook tin học</a> | <a class="link-subfolder" href="http://www.chipkool.tk/search/label/Ebook%20Web?max-results=10">Ebook Lập trình Web</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "ebook%20%C4%91i%E1%BB%87n%20t%E1%BB%AD";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

<div class="folder-active fl"><a class="link-folder" href="http://www.chipkool.tk/search/label/th%E1%BB%A7%20thu%E1%BA%ADt%20blogger?max-results=10">Thủ thuật blogger</a></div>

<a class="link-subfolder" href="http://www.chipkool.tk/2010/11/bang-ma-mau-hexa.html">Bảng mã màu </a> |

<a class="link-subfolder" href="http://www.chipkool.tk/2010/12/xem-ma-nguon-1-website-bat-ky.html">Xem mã nguồn website</a> | <a class="link-subfolder" href="http://ha-escapexml.blogspot.com/">Mã hóa code</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "th%E1%BB%A7%20thu%E1%BA%ADt%20blogger";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/l%E1%BA%ADp%20tr%C3%ACnh%20c%2B%2B">Lập trình C</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/l%E1%BA%ADp%20tr%C3%ACnh%20asembly">Lập trình Asembly</a> | <a class="link-subfolder" href="http://www.chipkool.tk/search/label/Gi%E1%BA%A3i%20thu%E1%BA%ADt%20C%2B%2B">Giải thuật C</a> | <a class="link-subfolder" href="http://www.chipkool.tk/search/label/L%E1%BA%ADp%20tr%C3%ACnh%20Robot?max-results=10">lập trình robocon</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "Gi%E1%BA%A3i%20thu%E1%BA%ADt%20C%2B%2B";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

Style 3 : Recent Post mang phong cách Quantrimang

Thực hiện :

1. Tạo 1 widget HTML\JavaScript và dán code bên dưới vào :

.wbox {background-color:#ffffff;width:auto;height:auto;}

.wbox.Cat {width:500px;height:auto;margin-bottom:5px;}

.wbox .tl {

background:url(http://quantrimang.com.vn/App_Themes/default/images/left_wbox_03.jpg) no-repeat left top;

padding-left:3px;

}

.wbox .tr {

background:url(http://quantrimang.com.vn/App_Themes/default/images/right_wbox_03.jpg) no-repeat right top;

padding-right:3px;

}

.wbox .tc {

background:url(http://quantrimang.com.vn/App_Themes/default/images/mid_wbox_03.jpg) repeat-x left top;

height:23px;

color:#246296;

font-size:12px;

text-transform:uppercase;

font-weight:bold;

padding-top:5px;

padding-left:7px;

}

.wbox .tc a {text-decoration:none;color:#246296;}

.wbox .ml {

background:url(http://quantrimang.com.vn/App_Themes/default/images/left_contannerbox.jpg) repeat-y left top;

padding-left:3px;

}

.wbox .mr

{

background:url(http://quantrimang.com.vn/App_Themes/default/images/right_contannerbox.jpg) repeat-y right top;

padding-right:3px;

}

.wbox .mc {background-color:#FFFFFF;}

.wbox .bl

{

background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomLeft_wbox.jpg) no-repeat left top;

padding-left:3px;

height:5px;

}

.wbox .br

{

background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomright_wbox.jpg) no-repeat right top;

height:5px;

padding-right:3px;

}

.wbox .bc

{

background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomMiddle_wbox.jpg) repeat-x left top;

height:5px;

font-size:0;

line-height:5px;

}

.Tin_lienquan ul,.Tin_lienquan li {list-style:none}

.Title_article {

color:#246296;

font-size:12px;

font-weight:bold;

padding-top:10px;

padding-bottom:10px;

padding-left:5px;

}

.Title_article {text-decoration:none;color:#246296;}

.Title_article a {text-decoration:none;color:#303030;}

.Title_article a:hover {color:#990000; text-decoration:none;}

.imgModule {padding-left:5px;}

.imgModule img {width:120px; margin-right:5px;}

.imgModule a {text-decoration:none;}

.Tin_lienquan {

color:#797979;

font-size:11px;

padding-top:15px;

font-family:Tahoma;

padding-left:5px;

}

.Tin_lienquan a {text-decoration:none; color:#004784;}

.Tin_lienquan a:hover {text-decoration:none;color:#CC3300;}

</style>

home_page = "http://itechplus.info/";

label = "Office";

numposts = 6;

list1 = 1;

sumPosts = 268;

mode = "label";

</script>

<div class="tl"><div class="tr"><div class="tc"><a href="http://itechplus.info/search/label/Office">Tin học văn phòng</a></div></div></div>

</div>

</div>

Thay đoạn code in đậm cho phù hợp với Blog bạn, cần lưu ý :

- list1 : số bài viết có hiện ảnh thumbnail kèm trích dẫn

- mode :

o mode=”label” : áp dụng cho Label

o mode=”blog” : áp dụng cho cả Blog

Chúc các bạn thành công!!

Mr Sum