Thủ thuật recent post Vnexpress



Hôm nay Chip giới thiẹu chia sẻ cho các bạn thủ thuật recent Post mà Chip đang áp dụng trên Blog Điện Tử | Tin Học.share luôn cho bác Quangpro
 
►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 



<style type="text/css"> 
#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> 
<script language="JavaScript"> 
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> 
<script src="https://sites.google.com/site/itechroot/javascripts/vne-recent-adv-all-posts.txt" type="text/javascript"></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://chipkool.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 :


<script language="JavaScript"> 
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> 
<script src="https://sites.google.com/site/itechroot/javascripts/vne-recent-adv-all-posts.txt" type="text/javascript"></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>

<style type='text/css'> 
.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(&#39;http://vnexpress.net/Images/Background/bg_vne.gif&#39;) 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(&#39;http://vnexpress.net/Images/Background/bg_repeat.gif&#39;) repeat-x scroll 0px 0px;} 
.folder-active {padding: 2px 9px; background:#f5f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_repeat.gif&#39;) 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(&#39;http://vnexpress.net/Images/Background/black-square.gif&#39;); 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(&#39;http://vnexpress.net/Images/Background/bg_corner.gif&#39;) no-repeat -5px -0px;} 
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_corner.gif&#39;) no-repeat -5px -23px;} 
.Lead1 { font-family: &#39;Arial&#39;; font-size: 11px; color: #919090; font-weight: bold } 
</style> 
&lt;script type=&#39;text/javascript&#39;&gt; 
rdlabels = new Array(3); 
//Nhãn thứ 1 : Kiến thức căn bản 
rdlabels[0] = &quot;\&lt;script\&gt;label = &#39;OSystemK&#39;\;\&lt;/script\&gt;&quot;; 
//Nhãn thứ 2 : Thủ thuật 
rdlabels[1] = &quot;\&lt;script\&gt;label = &#39;OSystemT&#39;\;\&lt;/script\&gt;&quot;; 
//Nhãn thứ 3 : Phần mềm 
rdlabels[2] = &quot;\&lt;script\&gt;label = &#39;Download&#39;\;\&lt;/script\&gt;&quot;; 
//Nhãn thứ 4 : Phần mềm bản quyền 
rdlabels[3] = &quot;\&lt;script\&gt;label = &#39;License&#39;\;\&lt;/script\&gt;&quot;; 
index = Math.floor(Math.random() * rdlabels.length); 
&lt;/script&gt;


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

<div class="folder"> 
<div class="folder-title"> 
<div class="folder-activeleft fl"></div> 
<div class="folder-active fl"><a class="link-folder" href="http://www.itechplus.info/search/label/OSystem?max-results=10">Windows</a></div> 
<div class="folder-activeright fl"></div> 
<div class="subfolder fl"> 
<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 class="folder-titleright fr"></div> 
</div> 
<div class="folder-content" id="tdHomeFolder2"> 
<script type="text/javascript"> 
document.write(rdlabels[index]); 
</script> 
<script language="JavaScript"> 
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> 
<script src="https://sites.google.com/site/itechroot/javascripts/VnE-recent.txt" type="text/javascript"></script> 
</div> 
<div class="folder-bottom"></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"><div class="folder-title"><div class="folder-activeleft fl"></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%20Vi%20t%C3%ADnh?max-results=10">Thủ thuật vi tính</a></div>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<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 class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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>

<script src="http://chipteenplis.googlecode.com/files/vnexp_label.js" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

<!---END THU THUAT VI TINH--->


<div class="folder"><div class="folder-title"><div class="folder-activeleft fl"></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>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<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 class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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>

<script src="http://chipteenplis.googlecode.com/files/vnexp_label.js" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

<!--END TIEN ICH VI DIEU KHIEN--->


<div class="folder"><div class="folder-title"><div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="http://www.chipkool.tk/search/label/Ph%E1%BA%A7n%20m%E1%BB%81m%20vi%20t%C3%ADnh?max-results=10">Phần mềm vi tính</a></div>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<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 class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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>

<script src="http://chipteenplis.googlecode.com/files/vnexp_label.js" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

<!--END TIEN ICH PHAN MEM VI TINH--->


<div class="folder"><div class="folder-title"><div class="folder-activeleft fl"></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>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<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 class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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>

<script src="http://chipteenplis.googlecode.com/files/vnexp_label.js" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

<!--END TIEN ICH EBOOK DIEN TU--->





<div class="folder"><div class="folder-title"><div class="folder-activeleft fl"></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>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<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 class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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>

<script src="http://chipteenplis.googlecode.com/files/vnexp_label.js" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

<!--END TIEN ICH THU THUAT BLOGGER--->



<div class="folder"><div class="folder-title"><div class="folder-activeleft fl"></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>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<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 class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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>

<script src="http://chipteenplis.googlecode.com/files/vnexp_label.js" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

<!--END TIEN ICH LAP TRINH--->



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 :

<style type="text/css"> 
.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> 
      <script type="text/javascript"> 
                  home_page = "http://itechplus.info/"; 
                  label = "Office"; 
                  numposts = 6; 
              list1 = 1; 
                  sumPosts = 268; 
              mode = "label"; 
      </script> 
<div class="wbox Cat"> 
<!-- Header widget --> 
<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> 
<!-- END Header widget --> 
    <div class="ml"> 
        <div class="mr"> 
            <div class="mc"> 
<!-- noi dung cua tien ich --> 
    <script type="text/javascript" src="https://sites.google.com/site/itechroot/javascripts/rc-post-qmt.txt"></script> 
<!-- END noi dung cua tien ich --> 
            </div> 
        </div> 
    </div> 
<!-- Footer widget --> 
    <div class="bl"><div class="br"><div class="bc"></div></div></div> 
<!-- END footer widget --> 
</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!!

Tham khảo Itechplus.info



In bài này
Previous
Next Post »

19 comments

Click here for comments
Quang
admin
15/12/11 ×

thank chip, giờ khuya rùi, bùn ngủ ko làm đc có khi hỏng tem, để trưa mai về nghiên cứu=))

Reply
avatar
15/12/11 ×

hihihehe,cố gắng voc na,thay mấy cái boder cho đẹp,chip đang ôn thi,hic hic=))@-)

Reply
avatar
15/12/11 ×

Mình làm theo hướng dẫn ở đây :D
http://www.bloggerzbible.com/2011/03/new-stylish-related-posts-widget.html

Reply
avatar
15/12/11 ×

Thử thuật recent post bên Đing Kiu Truê chip xem rồi,khá đọc đáo và mới lạ,nhưng nếu boder cho nó thì đẹp hơn,bạn cũng hay xem trang nước ngoài nhỉ:)

Reply
avatar
Quang
admin
15/12/11 ×

mây' cái này làm mệt quá=)), có cách nào đơn giản hơn ko chip?:((

Reply
avatar
15/12/11 ×

=)) Chip cũng toàn làm vậy đó,phức tạp nó mới hay,hehehe,câu chịu khó voc CSS của nó ý.

Reply
avatar
16/12/11 ×

Thấy giống của bác Quang nên vọc theo
Lâu lâu e cũng hay xem trang nước ngoài Liên Xô.Mỹ lắm =))

Reply
avatar
16/12/11 ×

săx,xem Liên Xô cơ ak,có trang nào hay hay,thủ thuật hay hay thi chuyển nó về Việt Nam nhé.hihi:((

Reply
avatar
Elvis Anh
admin
24/12/11 ×

Thank for your share, could you give me a file js of Vnexpress style, please !

Reply
avatar
28/12/11 ×

Do you want .js file?what type?chip always share:D

Reply
avatar
2/1/12 ×

Chip ơi sửa lại code đi bị lỗi tùm lum kia lấy về khó sửa quá, dễ bị rối

Reply
avatar
2/1/12 ×

Bị lỗi code nào thế,chip quên mất tiện ích recent này không dùng trong trường hợp chỉ tác giả biết,phải mở cho mợi người biết thì nớ mới hoạt động,hơn nữa bài viết tối đa là 10 nhé.để cho hiển thị cho mượt:D

Reply
avatar
sangnguyenms
admin
6/2/12 ×

Mình thấy nhược điểm của style 1 nhue sau:
- Khi nhấn vào tiêu đề bài viết chính(topcolor) không chuyển sang bài viết được mà bắt buộc phải nhấn vào readmore.
- Nhấn vào hình cũng không có liên kết đến bài viết.
Chipkool chỉnh sửa lại giúp nhé. Như vậy mới hoạn thiện hơn.
Cám ơn chi và sớm nhận được hồi âm.

Reply
avatar
6/2/12 ×

oke,cái đó chỉnh dễ thôi mà,tối tớ sẽ edit lại,hic hic=))

Reply
avatar
sangnguyenms
admin
7/2/12 ×

Chào bạn. Sao bạn đã chỉnh sửa được nhược điểm như mình nói ở trên chưa vậy?
Sau khi chỉnh sửa nhấn vào tiêu đề bài viết rồi thì mình muốn bỏ chữ readmore thì làm cách nào vậy? Mình chờ bản hoàn thiện của bạn để áp dụng mà sao chưa thấy bạn hồi âm.
Bạn giúp mình cái này nữa nhé:
Làm sao để đưa được link in bản này vào bài viết vậy?
Ngoài ra mình cũng góp ý một chút nhé: Vì thấy site của bạn có khá nhiều mục hay như: Mạch vi điều khiển, Thủ thuật máy tính... và mình nghĩ chắc bạn cũng khá về các lĩnh vực này và bạn cũng muốn chia sẻ, học hỏi. Vậy bạn nên làm thêm mục trao đổi hoặc hỏi đáp như các site khác vẫn làm để tiện trao đổi, học hỏi lẫn nhau thì hay.
Cám ơn bạn, sớm nhận hồi âm.

Reply
avatar
7/2/12 ×

Chào bạn^^.mình viết bài tạo nút in bài viết rồi đó Nút Print.còn tiện ích recent post vnexpress mình đang sửa,khi nào sửa xong mình chảy thử nghiệm,mình sẽ post bài lên,mình cũng cảm ơn đã góp ý xây dựng blog cho mình,mình sẽ cải tiến thêm,còn mình thì học chuyên nghành điện tử viễn thông,còn tin học là sở thích của mình khi lướt web thấy bài viết hay có ích mình lưu trữ lại chia sẻ cộng đồng blogger.bạn mới gia nhập blog ak.:)

Reply
avatar
sangnguyenms
admin
7/2/12 ×

@ChipKool_Online
Sao bạn thay giao diện mất cả phần comments zậy.
Mình đã làm được nút print nhưng không biết comment ở đâu nên cảm ơn bạn ở đây nhé.

Reply
avatar
7/2/12 ×

hihi,mình không thay giao diện đâu,mà là do google thay đổi khung comment nên tớ đổi 1 tí ý mà,vẫn commnet bình thường mà cậu,hic hic.

Reply
avatar
phuong minh
admin
9/2/15 ×

@ChipKool_Online

Không có link cho tiêu đề bài viết chính (top), do đó bắt buộc phải nhấn vào readmore.
Bây giờ mình muốn làm được như vậy thì phải chỉnh sửa ở đâu? Cụ thể nhé: Mình muốn bỏ chữ readmore và nhấn vào tiêu đề bài viết chính là nó hiện ra bài viết đó. (Style 1 đó nhé) <<<< fix lại giúp mình vs chip còi ơi, cảm ơn bạn rất nhiều

Reply
avatar

Bạn đọc hãy giúp chúng tôi xây dựng cộng đồng bằng cách để lại bình luận, chúng tôi luôn đón nhận mọi ý kiến của các bạn:
» Bình luận nghiêm túc và không chứa các liên kết quảng cáo.
» Vui lòng không Spam nhận xét với mọi hình thức.
» Rất mong bạn đề tên cho nhận xét của chính mình - Bằng cách chọn vào Tên/URL và điền tên bạn vào (Phần URL có thể bỏ trống ).

- Bạn có thể chèn Link nhạc (NCT), video(Youtube),Hình ảnh vào comment bằng cú pháp:
+ [youtube] Link video Youtube [/youtube].
+ [img] Link ảnh( định dạng PNG, JPG,GIF) [/img]
+Chèn link liên kết: <a href="LINK" rel="nofollow">Name</a>
-Bạn copy mã bên cạnh biểu tượng chèn vào nhận xét để bày tỏ cảm xúc!! ConversionConversion EmoticonEmoticon

       Mạch Khóa Số Điện Tử Mạch Đếm Sản Phẩm Mạch Đèn giao thông Ngã Tư Mạch Trái Tim Final Mạch Trái Tim Final Mạch Trái Tim I Love U

THƯ MỤC KHO TÀI LIỆU MIỄN PHÍ ECHIPKOOL

Code 8051 - ASM Code 8051 - C Code AVR - C Code led sao băng Code PIC - C Điện tử cơ bản điện tử viễn thông Đo Nhiệt Độ DS18B20 + LCD Đo Nhiệt Độ LM35 + LCD Đo Nhiệt Độ LM35 + Led 7 thanh Đo tốc độ động cơ Động cơ robo Ebook Đại Học ebook điện tử Ebook đồ án Học Orcad Học Protues Hồng ngoại Lập Trình 8051 Lập Trình AVR lập trình c++ Lập Trình Led Quảng Cáo lập trình PIC Lập trình Robot Lập trình VHDL Lcd16x2 Led Clock Led Quay Led RGB Mạch 7seg Mạch Amply.Mạch Loa Mạch Cảm Biến Mạch cube Mạch Đếm Sản Phẩm Mạch điện cơ bản Mạch điện hay Mạch Điện Ứng Dụng Mạch đọc file nhạc MP3 dùng Atmega 8 Mạch Động Cơ Mạch đồng hồ Mạch đồng hồ LCD Mạch đồng hồ Matrix Mạch giao thông Mạch in Mạch khóa số điện tử Mạch Led đơn Mạch Led Quảng Cáo Mạch Led Vumeter Mạch Ma trận Phím Mạch Matrix Mạch nạp Mạch nguồn Mạch Nút Bấm Mạch RS232 Mạch RS485 Mạch thu phát Mạch tổ hợp MSI Mạch trái tim Mạch truyền điện không dây Mạch Vi điều khiển Module Bluetooth Module Sim Module Sim548 Motor Nhiệt độ - Độ ẩm oscilloscope Phần mềm điện tử Phần Mềm Diệt Viruts Phần Mềm Hay Phần Mềm Led Quảng Cáo Phần mềm vi tính robocon Rule robocon Sạc Acquy Sản Phẩm Thương Mại Sáng tạo Smart Home Tài liệu Điện Tử Tranzitor Tụ điện TUT - 8051 - ASM TUT - 8051 - KeilC UART Ứng Dụng Led Quảng Cáo Ứng dụng USB USB TO COM Vi điều khiển - Ứng dụng Vi mạch số VOM Wifi ESP8266