Thư viện

Trải nghiệm

Thứ Sáu, tháng 4 20, 2012

Bài viết mới trượt ngang từ JQuery cho blogspot style 3

Bài viết mới trượt ngang từ JQuery cho blogspot style 3

Chia sẻ:
Bài viết mới trượt ngang từ JQuery cho blogspot style 3
Namkna sẽ giới thiệu thêm cho các bạn một tiện ích bài viết mới (Recent post) với hiệu ứng chạy ngang. Tiện ích bao gồm hình ảnh thumbnail và tiêu đề blog.
Dạng này khác với các dạng trước là các bài đăng dàn xếp theo hàng ngang. Tuy nhiên các bạn nên cân nhắc trước khi thực hiện vì sử dụng scrip nên ít hiều ảnh hưởng đến tốc độ load blog của bạn.
Các bạn hãy xem Demo để thất rõ hơn.


Minh họa:

Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sửa HTML
   4- Dán đoạn code sau vào trước thẻ đóng ]]></b:skin>..
.bgcontent{background:#efefef; 
height:140px;
width:500px;
}
#rc-content {
padding:4px;
width:500px; 
}
#rc-main {
width:110px;
background:#fff url(https://lh5.googleusercontent.com/-MyCpPC4yrRo/T5Dy5BaoRwI/AAAAAAAABM4/ClQLR2-iwVQ/h120/main-bg-namkna-blogspot-com.png) repeat-y;
}
#rc-top {
background:#fff url(http://3.bp.blogspot.com/-ya_LtIPhClI/T5DzVzoELhI/AAAAAAAABNA/vP7SxUmWx_o/s1600/top-bg-namkna-blogspot-com.png) no-repeat top;
height:3px;
}
#rc-bottom {
background:#fff url(https://lh5.googleusercontent.com/-_D3nKp4re_A/T5DzqSTfsvI/AAAAAAAABNI/ZoXDrwFIAao/h120/bottom-bg-namkna-blogspot-com.png) no-repeat bottom;
height:3px;
}
.rc-thumbs {
padding:2px 5px 5px 5px;
height:70px;
}
.rc-thumbs IMG {
width:100px; /*độ rộng của ảnh thumbnail*/
height:70px; /*chiều cao của ảnh thumbnail*/
}
.rc-title {
height:48px;
padding:0px 3px 2px 3px;
line-height:1.3em;
font-size:11px;
font-weight:bold;
}
.rc-title a {color:#0000ff;}
.rc-title a:hover {color:#ff0033;}
Trong đó:
  • background:#efefef;   là màu nền của tiện ích
  • height:140px; là chiều cao cỉa tiện ích
  • width:500px; là chiều rộng của tiện ích:
   5-  Bấm Lưu Mẫu  (save template) lại.

   6- Vào Phần Tử trang - Chọn Thêm Tiện ích - Thêm một HTML/Javarscip và dán đoạn code bên dưới vào:
<div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#FFF380;">Thủ thuật Blofspor</div>
<div class="bgcontent">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/-wm2RqrVKwTg/T493GPLRGSI/AAAAAAAABLI/MmvKZmefPzY/s320/nothumbnail-namkna-blogspot-com.gif";
showRandomImg = true;
zaBold = false;
numposts = 20; 
label = "Blogspot-tips"; 
summaryTitle = 40; 
home_page = "http://namkna.blogspot.com/"; 
</script>

<marquee align="center" direction="left" height="150" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="500">
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/rc_label.js" type="text/javascript">
</script>
</marquee></div>

<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="http://namkna.blogspot.com/search/label/Blogspot-tips?&max-results=5"> Thủ thuật Blogspot &#187;</a></p>
Trong đó
  • numposts = 20;    số bài trình diễn trong tiện ích
    label = "Blogspot-tips";   thay thành tên nhãn của blog bạn
    summaryTitle = 40;   số ký tự của tiêu đề bài viết
    home_page = "http://namkna.blogspot.com/";  Thay thành URL địa chỉ blog của bạn.

   7-  Bấm Lưu Mẫu  (save template) lại.

Chúc thành công!

26 nhận xét:

  1. Namkna đăng bài hướng dẫn chia footer thành 3 cột như blog bạn đi! Mình rất cần thủ thuật này

    Trả lờiXóa
  2. @Mr Sum
    Bài viết này đã được Nam giới thiệu rồi mà
    Bạn xem địa chỉ này
    link: http://namkna.blogspot.com/2011/08/chia-footer-blogger-ay-blogspot-thanh.html

    Trả lờiXóa
  3. Bác Namkna tham gia CTV giúp mình về các thủ thuật blospot nhé : http://www.blogktv.net/2012/04/chuong-trinh-cong-tac-vien-cung.html :)) . Cảm ơn bạn.

    Trả lờiXóa
  4. Mình chia cột được nhưng khoảng cách giữa các cột quá xa nhìn rất xấu. Bạn hướng dẫn giúp mình điều chỉnh lại nhe. Cám ơn bạn

    Trả lờiXóa
  5. @Mr Sum - Theo mình thấy blog bạn có độ rộng là 960 px.
    - Và bạn chia footer thành cột

    => như thế bạn có thể đổi các đoạn:
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 1px auto;
    padding-bottom: 20px;
    width: 49%; text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }


    Thành đoạn:
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 1px auto;
    padding-bottom: 20px;
    width: 470px; text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }


    - bạn thay đổi width: 470px sao cho đẹp nhất nha.

    Trả lờiXóa
  6. @Việt Nam@Việt Nam Ok nhưng chắc phải khaongr 1 tháng nữa. Dạo này mình đang tập chung để làm nốt bài cáo cáo tốt nghiệp đã.:3) :3) :3)

    Trả lờiXóa
  7. Khi nào rãnh Namkna hướng dẫn giúp mình chỉnh lại footer thành 3 cột như glog bạn nhe. Mình đã thay code như bạn hướng dẫn nhưng khoảng cách vẫn vậy

    Trả lờiXóa
  8. @Mr Sum bạn đặt code thứ 2 trước dòng này nhé
    <div id='footer'>
    - Bạn đặt như hiện tại khiến nó nằm dưới copyrice mất rùi.

    Trả lờiXóa
  9. Hay lắm Anh Namkna ơi!Cái này em tìm lâu rồi mà chưa thấy
    ----------------
    Cảm ơn Anh nhiều lắm nhe!
    Khi nào Anh rảnh, Anh nhớ ghé sang em!
    Trang của em là: phamtuankietdn.blogspot.com
    và góp ý giúp trang em với nhe!
    ----------------
    Một lần nửa em cảm ơn Anh nhiều lắm!

    Trả lờiXóa
  10. @Phạm Văn Phương Khong có gì.:3) :3) :3)
    - Bạn chuyên viết về phần mềm thì phải :3) :3) :3)

    Trả lờiXóa
  11. tại sao tôi không thể thay địa chỉ blog tôi như bạn hướng dẫn ở đây được ! home_page = "http://namkna.blogspot.com/"; Thay thành URL địa chỉ blog của bạn.
    rất mong được hướng dẩn ! cám ơn.

    Trả lờiXóa
  12. tôi làm được nhưng bị lỗi tiêu đề chồng lên nhau giống demo phía trên đó.....bạn biết vì sao không vậy....http://www.tuanduy.co.cc/
    thankyou

    Trả lờiXóa
  13. @THÁI QUANG HIỀN. Bạn thay nguyên http://namkna.blogspot.com/ thành URL blog của bạn thôi!

    Trả lờiXóa
  14. @Duy Phan Bạn có thể nói rõ không vì hiện tại trong Demo mình thấy chạy rất OK.

    Trả lờiXóa
  15. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  16. Bạn ơi!
    Mình áp dụng được rổi nhưng lam sao để hình chạy không gián đoạn nhỉ.?

    Trả lờiXóa
  17. @hai nguyen Sau khi chạy hết 20 bài thì chạy lại từ đầu đâu có gì gián đoạn.

    Trả lờiXóa
  18. cái này là cái em cần tìm nè

    Trả lờiXóa
  19. thế còn demo sao nó bị khuyết một phần khi chạy thế hở anh. Giúp em với

    Trả lờiXóa
    Trả lời
    1. DO anh để width nhỏ thôi em;
      .bgcontent{background:#efefef;
      height:140px;
      width:500px;
      }
      #rc-content {
      padding:4px;
      width:500px;
      }

      Xóa
  20. Để nó cố định và có mũi tên 2 bên để xem thì sao bạn, mình không thích nó tự chạy thế này

    Trả lờiXóa
    Trả lời
    1. Nếu để như bạn nói thì không cần thủ thuạt phức tạp này đau vì nó ảnh hưởng tới load,

      Xóa
  21. Nam ơi! anh hỏi chút:
    1. Anh ko muốn chạy bài theo nhãn, mà cứ bài nào mới thì chạy ngang thôi, thì sửa script như nào.
    2. Anh đã copy code của em nhưng anh CHỈ thay địa chỉ blog của em bằng blog của anh thì nó chỉ ra 1 bài viết và phần nội dung bên dưới bị mất???

    Trả lờiXóa
    Trả lời
    1. 1- Bạn thay:
      label = "Blogspot-tips"; thay Blogspot-tips thành tên nhãn của blog bạn

      2- Thay cả phần label như trên nha.

      Xóa
    2. Code của thủ thuật này dành cho label nhãn mà anh.

      Xóa
  22. Vào buiduchaoblog.blogspot.com de xem thu thuat nhe
    Thủ thuật chia footer thanh 3 cot o day ne Mr Sum

    Trả lờiXóa