Style mới cho tiện ích VNE Recent Posts

Ở bài viết trước, iTechPlus đã giới thiệu đến bạn đọc tiện ích Recent Posts mang phong cách VNExpress, nằm trong bộ sưu tập những Style Recent Posts mang phong cách báo chí.

Nhận thấy đây là một style rất hay và chính iTechPlus cũng từng sử dụng nó cho một Blog cá nhân của mình với một số tùy chỉnh. Và cũng theo yêu cầu của một số bạn là làm sao cho tiện ích trông bắt mắt hơn, thân thiện hơn với các SE, nên hôm nay iTechPlus sẽ chia sẻ đến các bạn một “biến thể” của style này.

Những nét mới :

• Giao diện : bắt hơn so với style cũ 
• Khả năng SEO : thân thiện hơn với các SE do chèn thêm thuộc tính Alternate cho Images
• Cài đặt đơn giản hơn
• Thêm liên kết “xem thêm” kèm hình ảnh nhỏ xinh

Hình minh họa :

 
Style cũ

Style mới

Thực hiện :

Rất đơn giản, bạn chỉ cần tạo một widget HTML\JavaScript và chèn vào đó đoạn code bên dưới :

<style type="text/css">
.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:312px; padding-right:10px}
.folder-othernews{width:168px}
.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}
</style>

<div class="folder"><div class="folder-title"><div class="folder-active fl">
<a class="link-folder" href="http://itechplus.info/search/label/OSystem?&max-results=8">Hệ điều hành</a></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://itechplus.info/search/label/OSystemK?&max-results=8">Kiến thức</a> | <a class="link-subfolder" href="http://itechplus.info/search/label/OSystemT?&max-results=8">Thủ thuật</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/Download?&max-results=8">Công cụ</a> | <a class="link-subfolder" href="http://www.itechplus.info/p/question.html">Hỏi - Đáp</a></div></div><div class="folder-content" id="tdHomeFolder2">

<script language='javascript'>
imgr = new Array();
showRandomImg = true;
summaryPost = 230;
numposts2 = 5;
homepage = "http://itechplus.info/";
label = "OSystem";
</script>

<script src="https://sites.google.com/site/itechroot/javascripts/VnE-rc-newstyle.txt" type="text/javascript"></script>
</div></div>

Thay các dòng code in đậm cho phù hợp với Blog của bạn. Chi tiết bố cục và ý nghĩa các thông số các bạn xem lại bài viết cũ tại đây.

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

iTechPlus