Thư viện

Trải nghiệm

Thứ Hai, tháng 9 05, 2011

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

Style mới cho tiện ích VNE Recent Posts - Recent Posts mang phong cách VNExpress

Chia sẻ:
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ũ  Yêu quá đi....
  • 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 He...he...he...

Hình minh họa :
Style mới cho tiện ích VNE Recent Posts 
Style cũ
Style mới cho tiện ích VNE Recent Posts
Style mới của tiện ích VNE Recent Posts
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://lh6.googleusercontent.com/-5feF4IxeRV4/T4Ws0eBvUAI/AAAAAAAABFU/WW2IUii-eMo/h120/catalog_header_bg-namkna-blogspot-com.gif) repeat-x}
    .folder-active{height:24px; padding:4px 10px; background:url(https://lh5.googleusercontent.com/-ef97scIg448/T4Wsn9dIKGI/AAAAAAAABFM/ecAARVMA2ZU/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://lh4.googleusercontent.com/-fQAf6rjbhlE/T4WtDSH9ZxI/AAAAAAAABFc/fYK7tGZ5JvM/h120/parent_child_spc-namkna-blogspot-com.gif) no-repeat}
    .folder-content{width:500px; background:#fff url(https://lh6.googleusercontent.com/-IZoHVkFKOsw/T4WtOEIYIGI/AAAAAAAABFk/OBpkpWbD8bc/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://lh4.googleusercontent.com/-zgTX2eYGQhM/T4WtZj_YIaI/AAAAAAAABFs/3Vn-lR9r1E8/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 !

18 nhận xét:

  1. không hiển thị được bài viết, chỉ hiển thị đề mục. Giúp dùm admin!. Cảm ơn!

    Trả lờiXóa
  2. @Phạm Gia Hiếu Bạn chú ý thay các phần:

    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ị.

    link vẫn chạy tốt. bạn có thể xhenf đoạncode trên của mình vào blog để test

    Trả lờiXóa
    Trả lời
    1. Nếu mình dùng nhiều Label và chèn nhiều code này trong cùng 1 tiện ích html/javarscript thì sẽ xuất hiện nhiều link js..vậy làm cách nào gộp link js lại chỉ dùng 1 lần trong temple..chỉ cần đặt link js sau head ấy..bạn Nam làm thử nhé..mình đang cần..vì mình test thử load trang vô cùng nặng

      Xóa
  3. khi mình mở rộng tiện ích .folder{width:516px; thì nó không cân đối giữa hai bên, phía bên phải hơi bị thừa khoảng trống nhiều. vậy làm thế nào để dịch chuyện khối tin tức bên phải ra lề phải để nhìn cân đối hơn vậy bạn. Mình đã thử áp dụng nhưng chưa thành công nên chưa áp dụng vào blog mình.

    Trả lờiXóa
  4. @Hoằng Đảm Nếu chỉnh rộng .folder{width:516px; thì bạn phải chỉnh cả 2 thuộc tính sau:

    .folder-topnews{width:312px; padding-right:10px}
    .folder-othernews{width:168px}


    Sao cho: .folder - 40 = .folder-topnews + .folder-othernews là OK

    Trả lờiXóa
  5. Hi bạn, sao nó không hiện ảnh đại diện bài viết ra ngoài vậy ah?

    Trả lờiXóa
    Trả lời
    1. Mình load ảnh trực tiếp từ máy tính lên bài viết.

      Xóa
  6. Nó không hiển thị bài viết. Chỉ có tiêu đề thôi

    Trả lờiXóa
    Trả lời
    1. Bạn xem qua bài hướng dẫn này:
      Mình hơi vội nên chưa edit nhiều:
      http://six-million-namkna-templte.blogspot.com/2012/03/recent-post.html

      Xóa
  7. Bạn Nam xem lại code Styte VNE này nhé...mình làm theo đúng như hướng dẫn của bạn bên này:http://six-million-namkna-templte.blogspot.com/2012/03/recent-post.html thế mà chỉ hiện khung mà không hiên nội dung label..mình thay label của mình giống như trong link này:http://www.chipkool.blogspot.com/search/label/Ph%E1%BA%A7n%20m%E1%BB%81m%20%C4%91i%E1%BB%87n%20t%E1%BB%AD?max-results=10

    và chỗ label đó là Ph%E1%BA%A7n%20m%E1%BB%81m%20%C4%91i%E1%BB%87n%20t%E1%BB%AD mà không hiện gì cả..Đến nối mình thay cả Phần%20mềm%20điện%20tử vẫn không hiển thị..rồi mình thay Phần-mềm-điện-tử cũng không hiển thị..hic hic giúp mình với ban Nam

    Trả lờiXóa
  8. Bạn Namkna đâu rồi..trả lời ý kiến của mình đi..hic

    Trả lờiXóa
    Trả lời
    1. Với các blog để chế độ riêng tư thì tiện ích sử dụng feed như này sẽ không hoạt dộng nha bạn. hãy Puplish để mọi người có thể xem được sẽ thấy nó hoạt động ngay thôi.

      Xóa
  9. Demo của bạn cũng chỉ thấy đề mục mà thôi

    Trả lờiXóa
  10. thủ thuật này lỗi nam ơi, fix lại đi, có chạy dc đâu

    Trả lờiXóa
  11. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa