Thư viện

Trải nghiệm

Thứ Hai, tháng 3 12, 2012

Auto readmore với thumbnail trên Blogger dùng Script - Style 1

Tạo Read More tự động với hình đại diện trên Blogger sử dụng Scrip - load nhanh - thiết kế blogspot

Chia sẻ:
Auto readmore với thumbnail trên Blogger dùng Script - Style 1
Trong bài này namkna sẽ hướng dẫn các bạn tạo Auto Readmore (đọc thêm) cho bài viết tự động hoàn toàn không còn thủ công như trước đây. Với Script mình giới thiệu hỗ trợ ảnh Thumbail lấy hình ảnh đầu tiên xuất hiện trong bài viết để làm ảnh đại diện, do vậy blog của bạn nhìn sẽ chuyên nghiệp hơn.
Thêm 1 điểm nữa là tiện ích lấy ảnh trong Album Picsa làm ảnh thumbnail, Với những hình ảnh không thuộc host Picasa của google sẽ không lấy được thumbnail. Do vậy bạn hãy Upload trực tiếp ảnh của mình lên blog khi post bài nha.

Bạn có thể xem Demo sẽ rõ hơn  : Demo for Post
Ảnh minh họa:
Auto readmore với thumbnail trên Blogger dùng Script - Style 1
☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML)  
4. Tìm đoạn code bên dưới - Tìm (Ctrl +F) thẻ bên dưới Bạn có thể dùng chức năng tìm kiếm nội tuyến như trong bài này):
<data:post.body/> 
5- Và thay nó bằng đoạn mã sau đây:
(Lưu ý: Trong mỗi blog có từ 1 đến 3 đoạn  <data:post.body/> do vậy bạn phải tìm đúng đoạn cần thiết nha. Nếu dùng mẫu SIMPLE của blogger thì bạn xem phần cập nhật ở cuối bài viết này nha)
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt;Đọc thêm...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
6- Thêm đoạn mã dưới đây vào sau thẻ <head> (hoặc đặt trước thẻ </head>):
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Trong đó bạn thay đổi các thông số cho phù hợp với blog của bạn nha:
  • summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện.
  • summary_img là số ký tự phần miêu tả cho các bài có hình đại diện.
  • img_thumb_height chiều cao của hình đại diện (pixel).
  • img_thumb_width chiều rộng của hình đại diện (pixel).
7- Bấm Lưu mẫu lại và về trang chủ của blog để xem kết quả nha.
Nếu bạn sợ sử dụng scrip sẽ làm blog bạn chậm thì bạn có thể xem bài viết tạo autoread more không sử dụng Javarscrip Tại đây
Cập nhật thêm cho các bạn thích ảnh thumbnail và tiêu đề bài biết nằm trên cùng một hàng (Ảnh minh họa) các bạn xem Tại đây

» Cập nhật.

1- Với mẫu SIMPLE (Mẫu đơn giản) của blogger thì bạn phải thay đoạn code bên dưới thành đoạn code ở bước 4 bước 5.
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>
- Tiện ích chỉ lấy ảnh trên Picasa, video từ trang Youtube.com. Tự động hiển thị thông báo no thumbnail với bài viết không có hình ảnh và video.

90 nhận xét:

  1. Sao không thấy demo đâu hết zậy.
    Mình muốn làm giống như hình demo thì làm thế nào?
    Có nghĩa là hình đại diện làm về phía trái. Tiêu đề bài viết và phần tóm tắt nằm bên phải (giống hình demo của bạn).

    Trả lờiXóa
  2. @sangnguyenms Mẫu này ảnh đã nằm bên trái rùi đó bạn. :3) :3)
    - Nếu muốn đổi sang bên phải bạn thay left thành right trong đoạn code sau:
    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;">
    :3) :3)

    Trả lờiXóa
  3. @Fairstar.
    Tiêu đề bài viết chưa nằm bên phải như hình demo mà nó nằm trên.
    Mình muốn là bên trái chỉ có hình thôi. Giống như trên các báo dantri.vn, vnexpress.net đó bạn. Bên phải gồm tiêu đề và phần tóm tắt bài viết.

    Trả lờiXóa
  4. @sangnguyenms Nếu bạn muốn bên trái chỉ có hình thì phải chỉnh cả cấu trúc template và Css như thế một vài dòng không thể mô tả hết đâu.
    - Tóm lại nếu muốn ảnh nằm một mình một bên bạn phải để ảnh trong 1 class riêng và các phần còn lại trong một class riệng.

    Trả lờiXóa
  5. @Fairstar
    Vậy vấn đề đó làm như thế nào, bạn có thể hướng dẫn cho mình được không? hoặc bạn có thể làm riên một bài viết hướng dẫn đi.

    Trả lờiXóa
  6. @sangnguyenms Còn phải tùy theo cấu chúc Template của từng blog như thế nào. Để hôm nào rảnh mình viết bài hướng dẫn cho :3) :3) :3)

    Trả lờiXóa
  7. @Fairstar
    Uh. Mình chờ bạn nhé, cố gắng nhé, mình thấy như vậy nó rất đẹp vì giống phong cách báo chí.
    Cám ơn bạn trước, mong sớm nhận được hồi âm.

    Trả lờiXóa
  8. @sangnguyenms Ok khi nào rảnh mình Post cho, mấy hôm nay làm đề tài hơi bận :B) :B) :B)

    Trả lờiXóa
  9. Namkna ui, đã chỉnh sửa readmore như mình nói chưa zậy, mình chờ bạn lâu rùi. Cố giúp mình nhé.
    Thank a lot

    Trả lờiXóa
  10. @sangnguyenms Sory tại mấy hôm nay mình bận quá không có thời gian nữa. :B) :B) :B)

    Trả lờiXóa
  11. Minh khong thay trong code cua minh .
    hic hic

    Trả lờiXóa
  12. minh khong thay code nay : data:post.body

    Trả lờiXóa
  13. @Concordia Ile de FranceBạn chọn mở rộng tiện ích mẫu chua thế. Mình vừa qua template bạn có đó :3) :3) :3)

    Trả lờiXóa
  14. Merci merci minh lam duoc roi .

    Trả lờiXóa
  15. @Concordia Ile de France Uk nếu đẻ ý là làm được mà :3) :3) :3)

    Trả lờiXóa
  16. hk phải viết chử vào video quay phim dóa anh giúp dùm nhak !!!!!!!!

    Trả lờiXóa
  17. @vAN dO Huynh Em quay phim bằng phần mềm gì :3) :3) :3)

    Trả lờiXóa
  18. em chỉ viết chử dc vào đầu đoạn phim thôi còn viết vào giửa phim thì xao anh ?

    Trả lờiXóa
  19. anh ak bửa nào rảnh chỉ em cài đặt photoshop Cs1 ...Cs6 cái nào cũng dc > kam1 ơn

    Trả lờiXóa
  20. @vAN dO Huynh Em có thể dùng các phần mềm biên tập video để viết chữ vào video em quay như phần mềm Corel Video studio prox4, phần mền này hỗ trợ các layer riêng lẻ rất rễ thực hiện (Xem tại đây) :3) :3) :3)

    - hiện anh giwois thiệu bản Adobe Photoshop CS5 em xem Tại đây nha

    Trả lờiXóa
  21. cái photoshop cs5 của anh cài đặt xao z? anh chỉ dumm2 em dj em pó tay uj

    Trả lờiXóa
  22. Bạn ơi, readmore chỉ phân trang cho homepage của blogspot thôi, các nhãn khác không có tác dụng, bạn check lại giúp mình với nhé, link: http://surasushi.blogspot.com

    Trả lờiXóa
  23. @Nhà Hàng Nhật Hàn Sura Sushi lỗi phân trang này do cài đặt của bạn thôi, mình đã từng giới thiệu trước đây. bạn có thể xem lại TẠI ĐÂY:3) :3) :3)

    Trả lờiXóa
  24. anh ơi, e chỉ muốn giữ phần ảnh đại diện thui, còn phần readmore k thay đổi thì làm thế nào? Help e với,

    Trả lờiXóa
  25. @Châu Vũ Nghĩa là em chỉ cần ảnh đại diện còn phần nội dung mô tả không cần hả em/

    Trả lờiXóa
  26. Nam ui, Mình muốn làm readmore chỉ hiện tiêu đề với hình đại diện ở giữa, giống như mấy site bán hàng điện thoại di dộng online đó. Nam có cách nào không hướng dẫn cho mình với. Cám ơn Nam và mong sớm nhận được hồi âm.

    Trả lờiXóa
  27. @Fairstarbạn ơi hướng dẫn làm cái này đi, ảnh sang bên trái còn tiêu đề và nội dung sang bên phải giống như demo đó bạn

    Trả lờiXóa
  28. @sangnguyenMS Chỉ cần tủy biến CSS và bỏ phần sau:

    <span class='rmlink' style='float:right'><a expr:href='data:post.url'>-->Đọc thêm...</a></span>

    Trả lờiXóa
  29. Nếu blog của mình có 3 dòng thì thay vào chổ nào ?

    Tiện thể cho mình hỏi. Làm sao làm Author Comment bên cạnh chủ blog như blog này

    Trả lờiXóa
    Trả lời
    1. Thông thường là đoạn đầu hoặc đoạn thứ 2. (đoạn thứ 3 là mobile ko phải"
      Câu 2: http://namkna.blogspot.com/2012/12/chen-comment-phan-cap-vao-blogspot-vers2.html

      Xóa
  30. cho mình hỏi, mình muốn khi click vào thumnail thì nó cũng dẫn tới luôn bài viết thì phải làm như thế nào

    Trả lờiXóa
    Trả lời
    1. Sửa đoạn:

      <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

      thành:

      <a expr:href='data:post.url'><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script></a>

      Xóa
  31. anh Nam hướng dẫn giúp, em muốn lấy ảnh đầu tiên làm ảnh thumbnail thôi ko cần auto read more

    Trả lờiXóa
    Trả lời
    1. Ảnh đầu tiên em tải trực tiếp lên blog là được. nếu lấy host kahcs nó sẽ lấy ảnh kế tiếp đó.

      Xóa
  32. mình phải đặt ảnh ở đầu bài viết luôn hay sao anh, lấy ảnh ngẫu nhiên trong bài làm ảnh hiển thị ngoài index cũng được, anh hd giúp em.thanks

    Trả lờiXóa
    Trả lời
    1. Không nhất thiết phải dặt trên đầu em ak. Chỉ cần ảnh đó em tải trực tiếp lên blog là nó sẽ lấy ảnh. nếu không biết tải lên blog em xem bài này: XEM NGAY

      Với các hình ảnh em copy trên amngj không phải host của gooogle sẽ không có thumbanil đâu nha em,.

      Xóa
  33. bài này cô làm mãi không thành công NK ạ không biết vì sao nữa ? mong cháu chỉ giúp ?

    Trả lờiXóa
    Trả lời
    1. CÔ có nhiều blog quá cháu không biết cô đang hỏi cho blog nào . CÔ xem nếu có cả đoạn sau thì cô thay bước 5 vào nha:

      <b:if cond='data:blog.metaDescription == ""'>
      <!-- Then use the post body as the schema.org description,
      for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
      <b:else/>
      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
      </b:if>

      Xóa
  34. NK ơi cô sương ghê , nhờ cháu chỉ giúp thêm cô đã làm thành công bài này . vì blog của cô có đoạn code trên nên cô ko biết và làm mãi ko được . đã nản lắm rồi / Cô cảm ơn cháu rất nhiều . chúc chau mãi khỏe và thành công!

    Trả lờiXóa
    Trả lời
    1. Không có gì đâu cô ak. GIúp được cô là cháu vui lắm rùi/

      Xóa
  35. NK ơi có thể cho ẩn đi phần chân trang bài đăng cho gọn hơn không?

    Trả lờiXóa
    Trả lời
    1. Tất nhiên là được cô ak. Giờ cô muốn xóa phần nào thế cô.

      Xóa
  36. cháu học chuyên viết phần mềm hay sao mà cháu giỏi quá . cô muốn xóa đi phần chân trang bài đăng gồm những mục sau đây cháu ạ

    BlogThis! Đăng bởi Anh nguyễn ..

    Chia sẻ lên Twitter

    Chia sẻ lên Facebook


    Phản ứng:

    Trả lờiXóa
    Trả lời
    1. - Không cô ak. Tất cả cháu tự học thôi, chyên ngành của cháu không phải CNTT mà là nông nghiệp cơ.

      Cô có thể vào bố cục => Chỉnh sửa phần bài đăng và bỏ dấu tích ở những mục đó đi.
      Nếu muốn xóa hẳn thì cô có thể tham khảo một số đoạn code có thể xóa trong template của cô ở bài này nha cô: XEM NGAY

      Xóa
  37. Cách thu gọn bài đăng một bên là o ảnh thu gọn một bên là ô ngày tháng và số comments , ở giữa là phần trích đoạn như ở trang
    http://namkna.blogspot.com/search/label/Blogspot-tips#.UgoTYI2Eza8
    Này của cháu. Không biết cháu có bài nào có Hướng dấn với code loại này không? cô còn một blog nữa cô chờ hỏi cháu rồi cô làm theo cách này cháu ạ . chỉ giúp cô nhé . cô cảm ơn cháu nhiều lắm

    Trả lờiXóa
    Trả lời
    1. Hiện tại cháu chưa viết về thủ thuật đó cô ak./.

      Xóa
  38. Trả lời
    1. Nhìn ảnh cô còn trẻ lắm :)

      Cô sao lưu một bản dụ phòng sau đó cô có thể chỉnh sửa. nếu lỗi cô tải bản dụ phòng lên là OKE cô ak.

      Xóa
  39. rắc rối quá thì cô chịu thôi không khéo lại lợn lành chữa thành lợn què cháu ạ . mệt lắm

    Trả lờiXóa
    Trả lời
    1. Cô xì teen quá ta, sao cô ko dùng những mẫu template có sẵn

      Xóa
    2. Dùng những mẫu có sẵn thì đẹp nhưng có một số vấn đề như mã độc, hay làm giảm khả năng tự thiết kế và tùy biến vì ta khong hiểu bố cục của nó :)

      Xóa
    3. Nhận xét này đã bị tác giả xóa.

      Xóa
  40. Cô lại rất thích những gì mình tự làm được Nk à. Nên ban đầu chả biết gì cô nhờ bạn lập blog cho dùng tamplate có sẵn cô không chỉnh sửa được . nên cô bỏ đi rồi .

    Trả lờiXóa
  41. Ngoiaif cách sao lưu.Nếu lõi quá cô thay mẫu khác thì được không cháu nhỉ?

    Trả lờiXóa
    Trả lời
    1. Nếu cô thay mẫu khác vẫn được nhưng những tùy biến trước đây của cô sẽ không còn và cô phải bắt dầu tùy biến lại.

      Theo cháu cô nên sao lưu để đề phòng sự cố thôi cô ak. Tất nhiên nếu muốn cô có thể thay mẫu khác :)

      Xóa
  42. Cô cảm ơn cháu đã chỉ giúp cô?

    Trả lờiXóa
  43. theo dõi trang blog của cháu cô đã học được nhiều thủ thuật tiện ích mà cô rất thích

    Trả lờiXóa
  44. Cô muốn ẩn đi dòng phản ứng , những ô như thú vị... thì làm sao cháu nhỉ. hôm trước sút nữa cô cắt mất bút chì chỉnh sửa bài đăng . may mà kịp thời khôi phục lại

    Trả lờiXóa
    Trả lời
    1. cô vào bố cục => bài đăng trên blog(cái khung bự nhất ấy), cô chọn chỉnh sửa rồi cô bỏ tíc vào những mục nào mà cô không muốn hiển thị( mục phản ứng nằm ở ô thứ 7 nhé cô).chúc cô vui....

      Xóa
    2. CÔ cảm ơn trường linh nhé cô sẽ làm như cháu hd

      Xóa
    3. có làm được rồi không biết tìm mãi ko ra . cháu bảo cô dễ hiểu quá làm được ngay cảm ơn cháu nhiều

      Xóa
  45. NK ơi ? cháu có bài nào về đổ bóng chữ trong BLog không ? cô muốn làm bóng chữ bằng màu viền trắng , để khi chữ vào phần ảnh tối dễ đọc ? cháu chỉ giúp cô nhé . Cô cảm ơn cháu rất nhiều.

    Trả lờiXóa
    Trả lời
    1. Đúng vậy ngoài ra đơn giản nhất cô thêm thuộc tính text-shadow: 1px 2px 4px #fff vào id hoặc class mà cô muốn. vi dụ thêm vào toàn bộ phần bài viết thid thêm nó vào thẻ .post như:


      .post{....;text-shadow: 1px 2px 4px #fff}

      hay:


      .post body{....;text-shadow: 1px 2px 4px #fff}

      Xóa
  46. Đúng vậy ngoài ra đơn giản nhất cô thêm thuộc tính text-shadow: 1px 2px 4px #fff vào id hoặc class mà cô muốn. vi dụ thêm vào toàn bộ phần bài viết thid thêm nó vào thẻ .post như:


    .post{....;text-shadow: 1px 2px 4px #fff}

    hay:


    .post body{....;text-shadow: 1px 2px 4px #fff}

    Cháu nói rõ giùm cô đi thêm vào id hoặc class là thêm chỗ nào ? cô chưa hiểu ? nói rõ hơn giùm cô nhé

    Trả lờiXóa
    Trả lời
    1. CHáu ví dụ với blog thiên đường của cô.

      - Nếu muốn tất cả chữ trong phần bài đăng đổ bóng thì cô sửa đoạn:

      .post-body {
      line-height: 1.4;
      }

      thành:

      .post-body {
      line-height: 1.4;
      text-shadow: 1px 2px 4px #fff
      }


      Hay đổ bóng chữ ở footer

      .post-footer {
      margin: 1.5em 0 0;
      }

      thành

      .post-footer {
      margin: 1.5em 0 0;
      text-shadow: 1px 2px 4px #fff
      }

      Xóa
  47. Cho cô hỏi cháu một điều này ? trong blog hông anh của cô tìm kiếm bài đăng trong blog rất tốt. nhưng trong blog thiên đường và blog ảnh thì không tìm được bài dăng trong blog . chỉ có một hai bài tìm ra qua thanh tìm kiếm là lỗi gì cháu có biết thì bảo cô nhé? cảm ơn cháu.

    Trả lờiXóa
    Trả lời
    1. Cháu vào blog của cô thấy cô đag dùng khung tìm kiếm của blogger. Cháu test thấy nó vẫn chạy tốt đó cô ak. Chắc do cô đánh từ khóa quá dài nên nó không tìm được thôi.

      Xóa
  48. .post-body {
    line-height: 1.4;
    } Cô vào mẫu chỉnh sữa HTML tìm thẻ trên mà ko thể tìm được cháu ạ

    Trả lờiXóa
  49. .post-body {
    font-size: 110%;
    line-height: 1.4;
    position: relative;
    }
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: $(image.border.small.size);
    background: $(image.background.color);
    border: 1px solid $(image.border.color);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    }
    .post-body img, .post-body .tr-caption-container {
    padding: $(image.border.large.size);
    }
    .post-body .tr-caption-container {
    color: $(image.text.color);
    }
    .post-body .tr-caption-container img {
    padding: 0;
    background: transparent; chi co nh­ng doan nay thoi NK oi! co ko tim duoc doan code nhu chao b¶o

    Trả lờiXóa
  50. Chỉ có đoạn code như trên cô không tìm được đoạn code.post-body {
    line-height: 1.4; này thì làm thế nào vậy NK?

    Trả lờiXóa
  51. Có phải tất cả các đoạn post-body { đều thêm đuôi text--shadow: 1px 2px 4px #fff
    } không NK? và #fff là mã màu trắng sao lại không ghi đủ ffffff chữ số f . cô đã thêm đuôi vào các đoạn post- body và chưa thấy được Nk ạ ? cô mong hồi âm của cháu?

    Trả lờiXóa
    Trả lời
    1. Mây hôm nay cháu đi công tác nên giờ mới trả lời cô được. Đúng vậy cô ak. Blog dó cô tìm đoạn này:

      .post-body {
      font-size: 110%;
      line-height: 1.4;
      position: relative;
      }

      và sửa thành:

      .post-body {
      font-size: 110%;
      line-height: 1.4;
      position: relative;
      text-shadow: 1px 2px 4px #fff
      }

      Xóa
  52. cô chờ mãi chưa có hồi âm của cháu NK ạ?

    Trả lờiXóa

  53. post-body {
    font-size: 110%;
    line-height: 1.4;
    position: relative;
    text-shadow: 1px 2px 4px #fff
    }

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: $(image.border.small.size);
    background: $(image.background.color);
    border: 1px solid $(image.border.color);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    }
    .post-body img, .post-body .tr-caption-container {
    padding: $(image.border.large.size);
    }
    .post-body .tr-caption-container {
    color: $(image.text.color);
    }
    .post-body .tr-caption-container img {
    padding: 0;
    background: transparent;
    border: none;
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    }
    .post-header {
    margin: 0 0 1.5em;
    line-height: 1.6;
    font-size: 90%;
    }
    .post-footer {
    margin: 20px -2px 0;
    padding: 5px 10px;
    color: $(post.footer.text.color);
    background-color: $(post.footer.background.color);
    border-bottom: 1px solid $(post.footer.border.color);
    line-height: 1.6;
    font-size: 90%;
    }
    #comments .comment-author {
    padding-top: 1.5em;
    border-top: 1px solid $(body.rule.color);
    background-position: 0 1.5em;
    } cô thay như cháu bảo mà sao vẫn không được cháu ạ

    Trả lờiXóa
  54. Những thẻ .post-body còn lại có thêm đuôi text-shadow: 1px 2px 4px #fff
    Nữa không?

    Trả lờiXóa
    Trả lời
    1. Không cô ak. Cháu nói thế này cho cô đễ hiểu:

      post-body {.......} là code quy định phần bài viết của cô

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,.BlogList .item-thumbnail img {.....}là code của phần hình ảnh trong bài viết. đoạn text-shadow: 1px 2px 4px #fff không có tác dụng với đoạn này chỉ có box-shadow: 1px 2px 4px #fff mới có tác dụng


      .post-body img, .post-body .tr-caption-container {....}
      .post-body .tr-caption-container {....}
      .post-body .tr-caption-container img {.....}
      là code phần chí thích của anh nếu thích cô có thể cho thêm vào đây nhưng không cần thiết



      .post-header {....} cô có thể thêm vào đây nếu header blog của cô có chữ

      .post-footer {.....} có thể thêm vào đây nếu muốn đổ bóng cả foter

      nếu muốn cả blog thì cô tìm đoạn body{...} và thêm vào.

      Xóa
    2. Cô cảm ơn cháu nhiều lắm Nk ạ . cô làm được rồi điều mà cô mơ ước làm từ lâu . may gặp được cháu chỉ bảo . cô đã đổi text-shadow: 1px 2px 4px #fff
      thành
      text-shadow: 1px 1px 1px #fff bóng trắng ko bị nhòe đẹp hơn cháu ạ.
      Cháu vào xem blog của cô trong bài tình mẹ nhé . cô cảm ơn và chúc chú nhiều may mắn và thành công trên mọi lĩnh vực công tác

      Xóa
    3. CHáu rất vui vì có thể giúp được cô :))

      Phần 1px 2px 4px là độ đổ bóng của chữ phần này cô có thể thay đổi tùy ý cô ak..

      Tất nhiên nếu muôn đổi màu bóng đổ cô có thể thay đổi mã màu #fff theo ý muốn của cô.

      Cháu cũng chúc cô luôn mạnh khỏe và thành đạt trong cuộc sống, Và tất nhiên bất cứ khi nào cần cháu giúp co cứ commment cháu sẽ giúp đỡ trong khả năng của cháu :))

      Xóa
    4. Cảm ơn cháu cô già mà lại bị mấy trò này cuốn hút cháu ạ . Nhưng học được điều mình thích thấy vui lắm cháu ạ. cô đã định lưu đc nhờ cháu giúp , rồi lại cố đọc kỹ lại HD của cháu và làm lại thì lại được . thanks cháu NK à

      Xóa
    5. ĐÚng vậy cô ak. Mình tự làm được sẽ thấy nó rất rễ và cũng sẽ rút ra được khá nhiều kinh nghiệm từ những lần thất bại rồi thành công đó. :))

      Xóa
  55. CHo mình hỏi đoạn Script nào dùng để get hình ảnh đầu tiên trong bài làm thumb vậy !
    Gửi mail gaphagun12@gmail.com hổ trợ mình với nhá!

    Trả lờiXóa
    Trả lời
    1. Tất cả các đoạn code đều lấy hình ảnh đầu tiên làm ảnh thumbnail nếu nó được tải trực tiếp lên blog thay vì các host khác bạn ak.

      Mẹo nhỏ bạn hãy để hình ảnh đầu tiên trước dấu ngắt khi đăng bài như vậy khi gọi feed thì chỉ có hình ảnh đó được gọi nó sẽ hiển thị. Bạn có thể xem các đặt dấu ngắt ở đây: XEM ẢNH

      Xóa
  56. mình đã làm theo, nhưng không được. Bạn có thể giúp mình được không?

    Trả lờiXóa
    Trả lời
    1. Một blog có từ 2 đến 3 đoạn code <data:post.body/> ở bước 4, em phải chèn đúng đoạn cần thiết nó mới hiển thị nha.

      Xóa
  57. Chào admin, xin lỗi vì comment của em không đúng với topic nhưng em ko biết post ở đâu cả ><

    Em mới cài cái theme kiểu này : http://p1nkfl0wer.blogspot.com/
    Link down: http://downloads.ziddu.com/download/13961117/pink-flower.rar.html/eng

    Nó đúng kiểu thu gọn bài viết như trong bài này anh hướng dẫn đấy ạ. Khổ nỗi em thích kiểu theme trong suốt nhưng không thích bài post của em bị thu gọn kiểu thế, ý em là mình viết được bao nhiêu thì nó phải hiện hết toàn bộ ra cơ. Cho em hỏi có cách nào để sửa theme này theo ý muốn của em ko ạ ? Mong anh giúp em. Cám ơn anh rất nhiều !

    Trả lờiXóa