Bản hoàn thiện - Thủ thuật tạo bài viết giống trang dantri.com.vn

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

Traidatmui.com – Như mình đã nói cùng các bạn thì hôm nay mình chia sẻ cho các bạn thủ thuật hoàn chỉnh để tạo bài viết giống với trang Dân Trí. Thủ thuật này mình đã từng chia sẻ tại đây, tuy nhiên với bài viết trước còn nhiều nhược điểm như sử dụng 2 file JS, code rờm rà, trùng biến với một số thủ thuật đã có... Chính vì những lý do đó hôm nay mình viết bài này chia sẻ lại cho các bạn thủ thuật này với sự cải tiến hơn, chỉ dùng 1 file JS, thay đổi tên biến, bên cạnh đó mình cũng chia sẻ cho các bạn cách để lặp lại cho từng nhãn khác nhau một cách dễ dàng nhất.


Hình ảnh minh họa
Thủ thuật tạo bài viết giống dantri.com.vn
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. 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 src="http://data-traidatmui.appspot.com/scripts/dpost_fixed.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>

<style>
.first_post {font-family:arial;font-size:12px;color:#333;line-height:1.5em;}
.first_post {line-height:1.5em;}
.first_post img{width:150;height:100px;float:left; margin-right:10px; padding:2px; border:solid 1px #DEDEDE;}
.first_post h2{line-height:1.3em;font-size:14px;font-weight:bold;margin:0 0 5px;}
.first_post h2 a{color:#034c91}
.first_post h2 a:hover{color:#333}
.readm a{
color:#f00;
font-size:12px;
margin-right:10px;
margin-top:8px;
float:right;}
.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;}
</style>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới.
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = false;
showPostDate = false; //Nếu muốn hiển thị ngày đăng bài bạn thay FALSE thành TRUE
summaryPosts = 350; // số kí tự hiển thị ở phần mô tả
dtnumposts = 4; //số bài viết hiển thị trong phần bài viết liên quan
dthome_page = "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn
</script>

<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 type="text/javascript">
dtlabel = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị
document.write("<script src=\""+dthome_page+"feeds/posts/default/-/"+dtlabel+"?max-results="+dtnumposts+"&orderby=published&alt=json-in-script&callback=dtposts\"><\/script>");</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).

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

Mở rộng thủ thuật

Để lặp lại tiện ích cho các nhãn khác trên blog của mình thì bạn chỉ cần lặp lại đoạn code như bên dưới và chỉnh sửa phần số màu đỏ lại cho phù hợp
<div class="tab" id="neocat-2" onmouseover="Hovercat('2')" onmouseout="Outcat('2')">
<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 type="text/javascript">
dtlabel = "Templates"; // Thay thành tên nhãn bài bạn muốn hiển thị
document.write("<script src=\""+dthome_page+"feeds/posts/default/-/"+dtlabel+"?max-results="+dtnumposts+"&orderby=published&alt=json-in-script&callback=dtposts\"><\/script>");</script>
</div>

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

Loading...

58 nhận xét

  1. trang của mình vẫn bị lỗi! buồn quá, chắc do bị xung đột với thủ thuật nào đó rồi
    roile

    Trả lờiXóa
    Trả lời
    1. Bạn lặp mà không thay số ở "neocat-1" lại, bạn xem ký hướng dẫn nhé

      Xóa
  2. Bạn admin cho hỏi tại sao gần đây tôi up Clip từ Youtube vào blog thì khi xem clip ấy trên blog lại bị mờ mà không nét như xem trực tiếp trên Youtube? mong admin trả lời sớm.
    Thanks,

    Trả lờiXóa
  3. Bạn xem giúp mình code nó hiện thẻ li bị mấy cái dấu chấm. Không hiểu tại sao nhỉ idontknow

    Trả lờiXóa
    Trả lời
    1. Đó là các dấu đầu dòng của thẻ li, bạn thêm list-style-type:none; vào phần thẻ li để loại bỏ nhé.

      Xóa
    2. Nó vẫn như thế. Bạn có thể chỉ rõ là thêm trước dòng nào ko? kkrong

      Xóa
    3. Như ở trên bạn thêm vào trong .dpost li{

      Xóa
  4. Chào bạn, hiện mình đang dùng thủ thuật này của bạn, cho mình nhờ hỏi chút nhé, mình muốn phần tiêu đề ở phía dưới chia ra thành 2 cột được ko bạn, chỉ mình nhé, vì bên bên mình Blog1 rộng nên khi hiển thị bị trống một bên nhìn ngộ ngộ.:battay

    Trả lờiXóa
    Trả lời
    1. Như vậy cần phải code script và thêm một số css nữa bạn ah, cũng khá dài dòng, mình gợi ý chút bạn tự làm nhé. Nếu bạn rành chút script có thể tìm đến dòng code như bên dưới trong file dpost_fixed.js và đặt điều kiện IF cho nó để chia cột.
      [code]if (i>=1) {
      var trtd = '<div class="repost"><a href="'+posturl+'">'+posttitle+'</a></div>';

      document.write(trtd);
      }[/code]
      Điều kiện có thể là cột 1 i>=1&&i<5 và thứ 2 là i>=5. Bạn thêm css và thuộc tính float vào để có thể chia cột bên trái và bên phải.

      Xóa
    2. Mình không rành về code và script nên mù khoản này lắm, temp mình đang dùng là của Duy Phạm, mình chỉ biết dùng code săn để thay đổi thui, bạn chỉ giùm mình nhé.

      Xóa
  5. Bạn vui lòng kiểm tra giúp mình khắc phục lỗi khi áp dụng thủ thuật trên vào website của mình với nha . Cám ơn bạn nhiều !

    Trả lờiXóa
  6. http://lichchieuphim.tructuyen.co/

    Trả lờiXóa
  7. Admin cho mình hỏi tí nha. Làm thế nào ta tạo tiện ích trên nhưng khi vào một nhãn bất kì thì nó mất đi. Mình đang tập làm cái này. nó thành công nhưng khi vào một nhãn bất kì tiện ích này vẫn xuất hiện. làm thế nào để vào nhãn mà nó không xuất hiện. như trang web này của admin...

    Trả lờiXóa
    Trả lời
    1. Bạn chỉ cần cho tiện ích đó hiển thị ở trang chủ và cách cho nó hiển thị ở trang chủ bạn xem bài viết tại đây. Nếu bạn chèn trực tiếp vào template thì cho code ở bước 6 vào giữa dòng code như bên dưới
      [code]<b:if cond='data:blog.url == data:blog.homepageUrl'>

      Code ở bước 6

      </b:if>[/code]

      Xóa
  8. Đình ơi, mình muốn đổi màu khác của tiêu đề các bài viết thì đổi ở đâu vậy?
    Có gì vô blog monngoncuoituan.blogspot.com xem thử và chỉ mình nha.
    Thanks bạn

    Trả lờiXóa
    Trả lời
    1. Bạn thay đổi mã màu ở thuộc tính color trong dòng code
      [code].first_post h2 a{color:#034c91}
      và .repost a{
      color:#000066;[/code]

      Xóa
  9. Bạn ơi mình tạo trang bài viết dạng này ở trang chủ rồi mình tạo thêm các bài viết theo cho từng link chủ đề thì nó lại chừa khoảng trắng phía trên là sao vậy? Nếu mình tạo bài viết cho 1 chủ đề thì làm sao mình thêm vô tên chủ đề đó ở phía trên các mục bài viết của chủ đề con???
    Bạn hướng dẫn giúp mình nhé! Thanks bạn.
    My blog: monngoncuoituan.blogspot.com

    Trả lờiXóa
    Trả lời
    1. Khoảng trống ở phía trên bài viết của bạn là do trên tiện ích Blog1 bạn đặt quá nhiều tiện ích HTML/Javascript. Để khắc phục thì bạn hãy tìm đến .main .widget { và chỉnh sửa thuộc tính margin và padding về giá trị 0 hết. Và bạn cũng chú ý ở .post { xem khoảng cách trên của post là bao nhiêu thì bạn hãy giảm xuống cho phù hợp.

      Chủ yếu là bạn xem 2 thuộc tính margin và padding nếu bạn chưa rỏ 2 thuộc tính này thì có thể xem thêm bài viết tại đây.

      Xóa
  10. Mình đã khắc phục được rồi. Thanks bạn nhiều.
    Mình có thêm ý kiến là mình tạo 1 trang bài viết theo 1 nhãn nhưng mà sao các bài viết theo nhãn mặc định của blogger lại nằm ở phía dưới trang tạo bài viết theo 1 nhãn vậy? Làm sao mình khắc phục được?

    Trả lờiXóa
    Trả lời
    1. Mình vẫn chưa rỏ ý của bạn

      Xóa
    2. Mình nói rõ lại nhé.
      Ví dụ blog của mình ở trang bài viết của chuyên mục Món Ngon 3 Miền thì mình có 3 chuyên mục con là: Tin tức ẩm thực , Văn hóa ẩm thực, Du lịch ẩm thực. Bây giờ mình click vô 1 chuyên mục Tin tức ẩm thực để mình xem các bài viết trong đó. Nhưng mặc định của các bài viết trong blogger sẽ bao gồm Tiêu đề, nội dung, thông tin nhận xét, nhãn v.v.v.. rất dài dòng. Mình chỉ muốn nó gọn giống như trang của bạn (Ví dụ: Thủ thuật --> Thủ thuật blogger ---> Blogger nâng cao thì nó sẽ vô trang giống như của bạn vậy đó) . Vậy mình làm như thề nào?

      Xóa
    3. Bạn có thể xem bài viết tự động tóm tắt bài viết tại đây.

      Xóa
  11. Ý là trang này của mình : http://monngoncuoituan.blogspot.com/search/label/Du%20l%E1%BB%8Bch%20%E1%BA%A9m%20th%E1%BB%B1c
    Làm sao để gọn gàng, đẹp mắt giống như trang của Đình: http://www.traidatmui.com/search/label/Advanced%20blogger.

    Giúp mình nhé!

    Trả lờiXóa
  12. Đã khắc phục được lỗi. Thanks bạn nhiều.
    Mình muốn tạo phần chuyển ngữ Việt - Anh đặt phía trên web giống web của bạn thì như thế nào?

    Trả lờiXóa
    Trả lời
    1. Tiện ích đó hiện giờ không hoạt động được, bạn có thể gõ từ khóa "Translate" vào khung tìm kiếm ở trên để tìm bài viết về tiện ích dịch ngôn ngữ web.

      Xóa
  13. admin cho minh hoi la. co tien ich bai viet lien quan giong http://sohoa.vnexpress.net/ kieu phia ben trai nhu blog cong nghe,tu van, gi gi do cua sohoa k.

    Trả lờiXóa
    Trả lời
    1. Bạn có thể xem bài viết tại đây và tùy biến lại theo ý mình.

      Xóa
  14. Bạn Đình ơi, mình đã áp dụng thủ thuật này và gặp phải 1 vấn đề là: sau khi thêm đoạn code sau thẻ head thì drop-down menu của mình không sổ xuống nữa. Xóa đi thì nó sổ xuống lại (mặc dù chưa thêm widget). Bạn giúp mình với nhe!!!

    Trả lờiXóa
    Trả lời
    1. Có thể menu của bạn có sử dụng JQuery nên khi đưa file jquery.min.js của thủ thuật này vào nó không ưa nhau rồi :). Bạn hãy để lại 1 file jquery.min.js thôi là được.

      Xóa
  15. cho phep minh dua 2 files js vao host khac nha.
    cam on ban

    Trả lờiXóa
    Trả lời
    1. Đó là việc các bạn nên làm để tránh các file js bị die

      Xóa
  16. Rất mong bạn chia sẻ cho mình hai file js trong thủ thuật này . Vì blog của bạn quá nhiều bài nên mình e không tìm lại được bài viết này , vì vậy mong bạn có thể gửi hồi âm cho mình qua email huyenthoaif5@gmail.com

    Trả lờiXóa
  17. Mình có thử lấy link fike js của thủ thuật này và tải lên host google nhưng khi thay link vào thì không đươc , thay lại link của bạn đưa lại được . Xin bạn chỉ giúp

    Trả lờiXóa
  18. Mình đã làm được , thank you nhé

    Trả lờiXóa
  19. bạn cho mình hỏi nếu muốn không cần re chuột vào mà nó vẫn hiện thì làm sao?

    Trả lờiXóa
    Trả lời
    1. Việc đó thì đơn giản mà bạn, nếu như vậy bạn không cần thêm đoạn code bên dưới.
      [code]<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>[/code]
      Và bạn xóa style="display:none;" ở trong các thẻ <li> là được

      Xóa
  20. vẫn lỗi bạn ơi,mình đọc kĩ mấy bạn kia ,nhưng vẫn ko được. chỉ hiện phần "THỦ THUẬT BLOG" Ccon2 bài viết thì ko hiện gì hết, chỉ 1 thanh thủ thuật nằm ngan thôi ak, mong bạn chỉ giúp.....cám ơn nhiều

    Trả lờiXóa
    Trả lời
    1. Do bạn chưa bỏ thuộc tính style="display:none;" trong các thẻ con <li style="display:none;">

      Xóa
  21. Xóa rồi mà vẫn vậy ak.............mình dố lệnh lắm, làm heo bạn rồi ko được hu.uuuuuuuuuuuuu

    Trả lờiXóa
    Trả lời
    1. Mình có vào trang bạn xem và bạn vẫn chưa xóa code như hướng dẫn ở comments số 41 của mình.

      Xóa
  22. umh dạ để em làm kĩ lại, E cám ơn Trai Đất Mũi nhiều.....=L;

    Trả lờiXóa
    Trả lời
    1. Bạn hãy đọc kỹ rồi thực hiện từng bước nhé

      Xóa
  23. "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn
    dtlabel = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị

    BÀI VIẾT SỐ 6 HAI PHẦN NÀY EM THAY LINK WEB EM LÀ BỊ MẤT CHỈ CÒN THANH THỦ THUAT BLOG THÔI......
    EM KHÔNG HIỂU NỖI NỮA CÒN ĐỂ NGUYÊN KO SỬA THÌ OK......

    CSS CHỖ 41 A NÓI E LÀM VẬY CŨNG KO HIỆN, CHỈ HIỆN THANH THÔI CHỨ BÀI VIÊT KO HIỆN NHƯ A ĐƯỢC....
    A CŨNG XEM QUA RỒI ĐÓ.......
    EM MUỐN GIỐNG Y ANH VẬY......HIX.....

    Trả lờiXóa
    Trả lời
    1. Lúc em thay http://www.traidatmui.com/ thì nhớ là có dấu / cuối cùng và tên nhãn phải giống như em đã đặt cả chữ HOA và chữ thường nhé

      Xóa
  24. Ko biết nói gì hơn ngoài câu:" CÁM ƠN Trai Đất Mũi" ......
    Chúc Admin 1 ngày tốt đẹp. =L:

    Trả lờiXóa
  25. E có 1 vấn đề muốn hỏi :
    + E chèn css FLASH baner thì ok.
    + Kế tiếp em chèn css 2 thanh quảng cáo 2 bên thì thằng "Flas nó chạy dài khoảng 2000 qua phải và bị mất 1 thanh quảng cáo bên phải"
    + E gỡ css Flaf baner thì 2 thanh quảng cáo hiện lại bình thường.

    E ĐƯA 2 CSS MÀ E NÓI ADMIN XEM GIUP EM

    Trả lờiXóa
  26. E góp ý kiến phần "Bản hoàn thiện - Thủ thuật tạo bài viết giống trang dantri.com.vn" 1 tí:
    Khi vào 1 bài viết thí nó hiện bài đó nhưng sẽ nằm dưới các phần đã tạo, phải kéo xuống qua hết mấy cái đã tạo thì mới xem được.
    Dantri.com thì không bị vậy mà sẽ hiện lên trên thành 1 trang mới và không bị hiện lại các phần nhãn đã tạo.
    A qua xem chứ e nói khó hiểu quá ;)

    Trả lờiXóa
    Trả lời
    1. Một thủ thuật thường không giải quyết được hết vấn đề mà em mong muốn, đòi hỏi các bạn phải biết cách kết hợp với các thủ thuật khác. Em hãy xem bài viết cho phép hiển thị tiện ích ở những trang nhất định để kết hợp với thủ thuật này. Xem tại đây

      Xóa
  27. Bác admin cho mình hỏi chút: mình chọn showPostDate = true; nhưng không hiển thị ngày đăng nhỉ. Có cách nào hiển thị ngày viết bài và nhận xét ở ngay cạnh title không? (đối với những bài viết hiển thị trong phần bài viết liên quan).
    Cám ơn bác ;))

    Trả lờiXóa
    Trả lời
    1. Nguyên nhân đấy là do trong file JS mình đã loại bỏ biến showPostDate, để thêm ngày đăng bài bạn làm theo các bước sau:

      - Mở file dpost_fixed.js lên và tìm đoạn code bên dưới
      [code]var daystr = (showPostDate) ? '' : "";[/code]
      và thay thành code sau:
      [code]var daystr = (showPostDate) ? '<i> - ('+day+ ' ' + m + ' ' + y + ')</i>' : "";[/code]
      Tiếp theo bạn thay đoạn
      [code]var trtd = '<div class="repost"><a href="'+posturl+'">'+posttitle+'</a></div>';[/code]
      thành code bên dưới
      [code]var trtd = '<div class="repost"><a href="'+posturl+'">'+posttitle+'</a> '+daystr+'</div>';[/code]
      Cuối cùng bạn hãy save lại đưa lên host và lấy link thay vào file JS cũ là được.

      Xóa
  28. Thank bác, để em edit lại như trên xem thế nào. Yêu bác lắm đó ;))

    Trả lờiXóa
  29. Chúng tôi không thể lưu mẫu của bạn.

    Mẫu của bạn không thể phân tích cú pháp được vì không được định dạng tốt. Hãy đảm bảo tất cả thành phần XML được đóng đúng cách. Thông báo lỗi XML:
    Open quote is expected for attribute "{1}" associated with an element type "src".
    Mình bị báo lỗi như vậy khi chèn code vào. mình nghĩ là do dòng này: document.write("<script src=\""+dthome_page+"feeds/posts/default/-/"+dtlabel+"?max-results="+dtnumposts+"&orderby=published&alt=json-in-script&callback=dtposts\"><\/script>");</script> Mình không chèn code vào widget mà mình chèn trực tiếp và temp. rất mong bạn giúp

    Trả lờiXóa
    Trả lời
    1. Nếu bạn chèn trực tiếp vào temp thì hãy cho đoạn code trên vào giữa 2 thẻ
      [code]/* <![CDATA[ */ Đoạn code ở đây /* ]]> */[/code]
      ví dụ:
      [code]/* <![CDATA[ */
      document.write("<script src=\""+dthome_page+"feeds/posts/default/-/"+dtlabel+"?max-results="+dtnumposts+"&orderby=published&alt=json-in-script&callback=dtposts\"><\/script>"); /* ]]> */[/code]

      Xóa