Hiển thị bài viết giống trang dantri.com.vn

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Mình đã từng giới thiệu đến các bạn một số thủ thuật liên quan đến việc hiển thị bài viết cho blogspot. Hôm nay mình cũng xin chia sẻ thêm các bạn một thủ thuật hiển thị bài viết giống với trang Dân Trí. Mình thấy cách hiển thị bài viết này cũng khá đẹp và nó có thể áp dụng cho blogspot nên mình sẽ hướng dẫn bạn thực hiện thủ thuật này dành cho blogspot. Cách hiển thị bài viết này có một hiệu ứng đó là bình thường thì các label có liên quan sẽ ở trạng thái ẩn, nó chỉ hiển thị khi bạn rê chuột vào bài viết.


Hình ảnh minh họa
1. Đăng nhập vào tài khoản blogger
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">function Hovercat(q){$("#neocat-"+q+" ul.dpost").find("li").show()}
function Outcat(q){$("#neocat-"+q+" ul.dpost").find("li").hide();$("#neocat-"+q+" ul.dpost").find("li:eq(0)").show()}
</script>

4. Tiếp theo bạn chèn code css bên dưới vào trước thẻ ]]></b:skin>
.summerypost a {
color:#000099;
font-weight:bold;
}
.summerypost a:hover {
color:#403c3d;}

.summerypost {
font-size:12px;
color:#000;
font-family:arial;}

.readm a{
color:#1f2f56;
font-size:12px;
margin-right:10px;
margin-top:8px;}
.readm a:hover{
color:#766162;}

.repost{
color:#3366ff;
font-family:arial;}

.repost a{
color:#000066;
background:url(http://lh3.ggpht.com/_BTztXRwC9ik/TQTcuSwh4nI/AAAAAAAAFf8/XLYhDCO3IEs/icon.png) no-repeat left;
padding-left:10px;}
.repost a:hover{
color:#bf9798;}

.tab {
font-size:13px;
padding:0px 5px 5px 5px;
width:550px; /*độ rộng của bài viết*/
}
.dpost a{
padding:0 2px;
font: 11px/22px Arial;
color:#000;
float:left;
height:20px;}

.dpost li{
float:left;
height:20px;
overflow:hidden;}

.dpost li.active{
background:url(http://lh4.ggpht.com/_BTztXRwC9ik/TQOckR-fKwI/AAAAAAAAFfc/tOQVyt0M6Nc/a1.png) right no-repeat; /*màu nền của chủ đề chính */
position:relative;
top:1px;
}
.dpost li.active a{
font-size:10px;
font-weight:bold;
color:#fff;
text-transform:uppercase;
padding-right:25px;}

.iframpost{
background:url(http://lh4.ggpht.com/_BTztXRwC9ik/TQOckRMTKeI/AAAAAAAAFfg/MvZ7NhbCrOY/a2.png) no-repeat; /*màu nền của tiện ích*/
height:25px;
}

*{margin:0;padding:0px 0px 0px 0px;}

Phần css này cũng không phức tạp bạn tự điều chỉnh, tuy nhiên bạn chỉ nên chỉnh lại các phần chính như độ rộng, hình ảnh nền... còn các phần khác bạn không nên chỉnh sửa nhiều. Nếu bạn không thành thạo về css mà can thiệp nhiều có thể xảy ra lỗi.
5. Bây giờ bạn hãy save template lại.
6. Trở về phần tử trang, thêm 1 HTML/Javascript
7. Thêm code bên dưới vào HTML/Javascript vừa thêm ở trên.
<div class="tab" id="neocat-1" onmouseover="Hovercat('1')" onmouseout="Outcat('1')">

<div class="iframpost">
<ul class="dpost">
<li class="active"><a href="#">Thủ thuật blogger</a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao | </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản | </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/tien-ich-blogger.html">Tiện ích blog</a></li> </ul>
</div>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "";
bgTD = "";

imgw = 130; // độ rộng của ảnh thumb
imgh = 100; // chiều cao của ảnh thumb

imgwidth = 60;
imgheight = 60;

fntsize = 12; //Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó
fontsize = 12 // Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt
fontsizecm = 11; // Cỡ chữ của ngày đăng bài

acolor = "";
titlecolor = "";
aBold = false;
icon = "";

text = "no";

showPostDate = false; //Nếu muốn hiển thị ngày đăng bài bạn thay FALSE thành TRUE
poston = "Ngày đăng :";

summaryPost = 350; // số kí tự hiển thị ở phần mô tả
summaryFontsize = 12; //Cỡ chữ bài viết tóm tắt
summaryColor = "#000";
icon2 = "";

numposts = 3; //số bài viết hiển thị trong phần bài viết liên quan
label = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị
home_page = "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn
</script>
<script src="http://data-traidatmui.appspot.com/scripts/dpost.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/related_dpost.js" type="text/javascript"></script>
</div>

Bạn chỉ việc chỉnh sửa lại code theo các hướng dẫn trong code. Bạn thay các text màu tím đậm thành tên thư mục bạn muốn hiển thị và các link tương ứng với các thư mục đó (màu tím nhạt).

8. Cuối cùng là save tiện ích lại

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

Loading...

27 nhận xét

  1. bai nay that do cho copy nhe

    Trả lờiXóa
  2. hay lắm bạn à, chúc bạn ngày càng pro hơn nữa

    Trả lờiXóa
  3. Nếu chọn phong cách này cho trang chủ thì quá tuyệt rồi,nhưng nếu đã chèn các widget hiển thị bài post theo Label khác thì dễ bị xung đột,không hiển thị hình ảnh hoặc tiện ích # bị lỗi :<

    Trả lờiXóa
  4. cam on ban nhieu lam, minh lam duoc roi ,ban vao xem thu va gop y giup minh nhe

    Trả lờiXóa
  5. vào blog của bạn hoành tráng quá. không biết chủ nhân bỏ ra bao nhiêu time và công sức nữa + trình độ siêu đẳng.
    bạn ơi có thể giúp mình cái code để khi click vào một bài viết thì nhảy sang trang mới vì blog của mình mỗi khi click nó nhảy sang trang khác thì không nghe nhạc đc.
    doctorkillerhp_2010
    anhtranphuong@rocketmail.com

    Trả lờiXóa
  6. Bạn chỉ việc thêm lệnh target="_blank" vào thẻ <a> khi tạo link là được bạn ah.

    Trả lờiXóa
  7. Help me!
    Bác xem giúp thủ thuật này nhé >>>http://img574.imageshack.us/img574/1516/demo.gif Tớ muốn hiển thị thêm hàng cho vừa khớp với Thumnail ảnh như minh họa thì chỉnh lại ở thuộc tính nào ?

    Trả lờiXóa
  8. Bạn hãy cho biết bạn đã thực hiện theo thủ thuật nào thì mình mới biết được thuộc tính nào?Khi muốn biêt hay thắc mắc về thủ thuật nào thì bạn nên comment đúng bài viết đó để mình dễ dàng kiểm soát và biết rỏ điều bạn hỏi nhe.

    Trả lờiXóa
  9. ban oi cho minh hoi ,blog minh bi cai gi ma no chay nhu rua ah, co cach nao khac phuc ko vay ,

    Trả lờiXóa
  10. Do trong Template có sẵn nên tớ cũng không rõ nằm trong chuyên mục nào, có thể thuộc nhóm " Tạo Read more " hoặc cách thể hiện bài viết

    Trả lờiXóa
  11. Chào bác, làm sao để ẩn widget khi click vào Link,nếu tạo widget ở phần Header thì khi click vào Link dẫn đến trang khác nhưng các widget ở trên chiếm khá nhiều vị trí

    Trả lờiXóa
  12. Bạn có thể tham khảo bài viết Tại đây

    Trả lờiXóa
  13. Chào pak, làm sao để hiển thị giờ/phút/giây bài viết ?Thủ thuật trên mở rộng được ngày đăng

    Trả lờiXóa
  14. em đã pót câu hỏi bên kia nhưng sang bên này hỏi chuẩn hơn,nếu có chưa hiểu thì em nói rõ hơn nha,tức là khi em đưa chuột vào tab thì chữ hiện nhưng khi đưa chuột ra khỏi tạp đó thì chữ ẩn đồng thời ảnh+đoạn trích bị dịch chuyển,vì điều đó mà khi di chuyển xuống gần cuối tab thì chữ và ảnh dich chuyển như cào cào bay ý(cái này xuất hiện với trình duyệt firefox)nếu có thể fix dùm em thì tốt quá hì hì. trăm sự nhờ anh:D

    Trả lờiXóa
  15. cho em hỏi tiếp là vì em mới làm blog nên em ko biết chỉnh căn lề như thế nào,em chia 3 cột nhưng vì ko biết căn lề(tức là khoảng trống giữa các cột quá lớn tốn diện tích quá,vì vậy em muốn hỏi là em muốn làm lề giảm đi thì em phải tìm ở thẻ nào.cám ơn anh nhiều....h phải đi ngủ mong rằng anh có thể reply sớm cám ơn anh nhiều

    Trả lờiXóa
  16. Em có thể chỉnh sửa thuộc tính Margin hay Padding, em có thể tìm hiểu tại đây

    Trả lờiXóa
  17. Mình đang thử mẫu này but cũng bị lỗi chạy ảnh, lệch đoạn trích và các label con bị một đường sọc cắt ngang như QUANG Sáng! Fix sao đây?

    Trả lờiXóa
    Trả lời
    1. Có thể là trong template bạn đã bị trùng biến với một số script bài viết mới trước đây, do đó khi chèn vào nó sẽ xung đột.

      Thời gian tới mình sẽ cập nhật lại bài viết này, giảm file JS và chỉnh biến lại và cách để có thể lặp lại tiện ích cho từng nhãn ở trang chủ.

      Xóa
  18. Rất mong là TDM sớm cải thiện thủ thuật này để khắc phục lỗi như mình nói! Cảm ơn TDM nhiều\
    lleu

    Trả lờiXóa
    Trả lời
    1. Ngày mai là bài viết có thể xuất rồi bạn ah.hj

      Xóa
  19. làm theo hướng dẫn rồi mà k hiệm thị bài viết là sao

    Trả lờiXóa
    Trả lời
    1. Bạn hãy kiểm tra xem tên nhãn và tên miền Blog đã chính xác chưa và nguồn cấp Feed đã ở dạng Full chưa nhé.

      Xóa
  20. Admin cho hoi van de ngoai van de mot chut. ta lam cach nao de su dung ten mien de tao ra trang demo giong Website minh nhi...

    Trả lờiXóa
    Trả lời
    1. Việc đó thì bạn tự thiết kế cho mình 1 Blogger và dùng tên miền của mình để cài đặt cho blogger đó, và đăng code demo. Nó tương đối phức tạp vì phải loại bỏ bớt code không cần thiết để nó trở thành 1 hosting free chạy trên nền tảng blogger được.

      Xóa
  21. thanks nha. no co ap dung cho ten mien mien phi k admin.

    Trả lờiXóa
    Trả lời
    1. Được bạn ah, nếu bạn biết cách cấu hình tên miền free đó về blogger thì áp dụng bình thường thôi bạn.

      Xóa
  22. minh lam thanh cong roi. thanks admin nhe...............

    Trả lờiXóa