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

Ở bài viết trước, Namkna đã 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 namkna 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 namkna 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  Xem Demo

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào Thiết kế

   3- Chọn Bố Cục (Phần Tử trang)

   4- 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHLraDrpgDxYd8DIQHxZI2o_cWywm9JigYE2rSRtu3kSlTiB41GUIF9S4f78I9GbQ23dHKb5JnKXUpJmUBaak8GHqQx5GXpHWf3RLA0lmfhS39NzdmCFmSuhEM5AGnq48uFtGPDrheyPdu/h120/catalog_header_bg-namkna-blogspot-com.gif) repeat-x}
    .folder-active{height:24px; padding:4px 10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5VwhcqMPd_3_1Ri3SkBU5qfsH7mVc2jKk0wrJ5PN0D_DFtWD5aPPeCjCjQXJ4LxvXUfb5-vEpe-wV08kxXNzro_nQDJUO1baK7QgTHPW6-Gw9htb4F1dfE9n7jyLQkkoWQNtiDXnb6VoU/h120/parent_bg-namkna-blogspot-com.gif) repeat-x; font-weight:bold}
    .link-folder:link, .link-folder:visited{color:#fff}
    .subfolder{height:24px; padding:5px 5px 0 15px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhksLODBe3CbP5BYejzx5UkqDs1J37w52xSoNIZ_79KxTmkzwbmxILcY44J3pUksdCd565Lnia-fAvb8ivMiXogOg2bjmQ8w7023RSQOP_ObUdYrkz6J7hLD2aGU5EK_R0Buu45gW3hJ1UQ/h120/parent_child_spc-namkna-blogspot-com.gif) no-repeat}
    .folder-content{width:500px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7GGoBul_jXMlUxtQvhIhocXboE77Y2rJtV6OvTj8IDIzIWGouxTO9V5jj4CZfe5KiABJk1d24RSKSGwOrq0c_TQzZHBK7NnkMXJW0eqKNI7clh2Ev3gknKTTDwyJvy-pf0ta6mlTIzXp2/h120/red-box-content-namkna-blogspot-com.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiolGLewIZGk7G7HVEj11JZlgx4R-xPv1FKW9zzEhepiQaPTEnoNQyoPmpD67Mj-sFnJKDvdTzCC0ivrYiUqpjbQOPlyieHJAfZUSy1jq1masE_Glykw-g_-qXDnjprsoJ_G-ppLnWzmeOf/h120/icon-namkna-blogspot-com.gif) 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://namkna.blogspot.com/search/label/Blogspot%20Recent post?&max-results=5">Recent post</a></div>
    <div class="subfolder fl">
    <a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot Menu?&max-results=5">Menu</a> | <a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot Navigation?&max-results=5">Navigation</a> | <a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot Comments?&max-results=5">Comments</a> | <a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot Popular posts?&max-results=5">Popular posts</a></div></div><div class="folder-content" id="tdHomeFolder2">

    <script language='javascript'>
    imgr = new Array();
    showRandomImg = true;
    summaryPost = 230;
    numposts2 = 5;
    homepage = "http://namkna.blogspot.com/";
    label = "Blogspot-tips";
    </script>

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

Trong đó:

• Thay link màu đỏ http://namkna.blogspot.com/ thành địa chỉ blog của bạn.
• Thay Blogspot-tips thành tên nhãn muốn hiển thị.
• Thay các link Da cam thành link tới nhãn hoặc bài viết của bạn.
• Thay phần màu xanh là tên nhãn hoặc bài viết.
• Bạn có thể Download file TXT về Tại Đây sau đó Up lên Hots riêng

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