Thư viện

Trải nghiệm

Thứ Sáu, tháng 2 08, 2013

Slider bài viết mới nhất trượt ngang cho blogger

Bài viết mới nhất dạng thanh trượt ngang là một cách tốt để hiển thị bài viết gần đây của bạn dưới dạng một slide show. Bạn có thể nhìn thấy thanh trượt như vậy trong nhiều blog wordpress, nhưng với blogger nó không có nhiều người biết để áp dụng

Chia sẻ:
Bài viết mới nhất trượt ngang đẹp cho blogger - Auto Recent Posts Slider jQuery Blogger
Bài viết mới nhất dạng thanh trượt ngang là một cách tốt để hiển thị bài viết gần đây của bạn dưới dạng một slide show. Bạn có thể nhìn thấy thanh trượt như vậy trong nhiều blog wordpress, nhưng với blogger nó không có nhiều người biết để áp dụng. Thủ thuật này được chia sẻ bởi Abu-Farhan và thêm một số code của helperblogger Và được mình chỉnh cho phù hợp với vlogger. Nếu bạn nghĩ rằng tùy biến rất khó thì bạn đã sai, tiện ích này rất dễ dàng tùy biến và thêm vào blog. Bạn không cần phải thêm hình ảnh, văn bản hoặc bất kỳ liên kết nào như các slider khác, tất cả là tự động.
Xem Demo để thấy rõ hơn.

XEM DEMO

Ảnh minh họa:
Slider bài viết mới nhất trượt ngang cho blogger

Làm thế nào để Thêm Recnet post slider này vào Blogger?

Bước 1: Thêm CSS và Thêm JavaScript

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Dán đoạn code sau đây vào trước thẻ ]]></b:skin>
#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}

#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(http://4.bp.blogspot.com/-LgAXvcErdQE/URTKWqfW76I/AAAAAAAAIKs/uxNqhffvU5k/s1600/darkbg-namkna.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
    left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://4.bp.blogspot.com/-fRH65PyYmGs/URTJwVS1EgI/AAAAAAAAIKc/oTeintoMD6Q/s1600/prev-namkna-blogspot.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://1.bp.blogspot.com/-vOfoe5d-EDk/URTKH3_x0fI/AAAAAAAAIKk/BtweC3VFxtc/s1600/next-namkna.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}
- Đoạn CSS trên dùng cho mẫu có chiều rộng 480px và cao 360px. - Nếu muốn chỉnh kích thước bạn chú ý các phần sau:
  • width: 480px; độ rộng (3 lần)
  • height: 360px; độ cao(3 lần)
  • left: 520px !important; là căn vị trí của nút next.
  • width: 200px; độ rộng tiêu đề

=> Mình cung cấp thêm cho các bạn một đoạn CSS để dùng với độ rộng 300px và cao 250px.
#slide-container {
    height: 250px;
    position: relative;
    width: 300px;
}

#slider {
    height: 250px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 300px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(http://4.bp.blogspot.com/-LgAXvcErdQE/URTKWqfW76I/AAAAAAAAIKs/uxNqhffvU5k/s1600/darkbg-namkna.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
    width: 300px;
    height: 250px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
     left: 320px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://4.bp.blogspot.com/-fRH65PyYmGs/URTJwVS1EgI/AAAAAAAAIKc/oTeintoMD6Q/s1600/prev-namkna-blogspot.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://1.bp.blogspot.com/-vOfoe5d-EDk/URTKH3_x0fI/AAAAAAAAIKk/BtweC3VFxtc/s1600/next-namkna.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}
- Bạn có thể chỉnh sửa các giá trị CSS ở trên  như ý bạn. Bạn có thể sử dụng HTML Editor để xem trước trực tiếp và thay đổi theo ý của bạn (Lưu ý - Nếu bạn đang chỉnh sửa tiện ích này trong HTML Editor  đó có thêm đồng thời cả ba mã trong trình soạn thảo).
5 - Thêm vào mã dưới đây ngay sau thẻ </ body>.
<!-- Start easy content slider by helperblogger.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- End easy content slider by helperblogger.com -->
- Nếu blog của bạn đã có file JQuery rồi thì xóa đoạn màu xanh đi.
6. Lưu mẫu lại.

Bước 2: Thêm tiện ích slider.

1- Vào Bố cục (Layout)
2- Chọn thêm tiện ích (Add gadget) => Tạo một HTML/Javarscipt và dán code bên dưới vào.
<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://namkna.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
Trong đó:
Thay http://namkna.blogspot.com/ thành URL blog của bạn.
var numposts_gal = 6; thành số lượng bài sẽ xuất hiện trong tiện ích.
var numchars_gal = 150; là số lượng ký tự mô tả.
Nếu muốn hiển thị ngẫu nhiên thì thay  var random_posts = false; thành true.
3- Lưu tiện ích lại.

18 nhận xét:

  1. @Nam Ta: Tiêu đề bài đăng của khung bài đăng mới này là màu Đen gần màu với nền xám của backgroup mô tả nó, mình muốn chuyển màu của tiêu đề thành màu trắng thì fai chỉnh sửa thế nào?

    Trả lờiXóa
    Trả lời
    1. Bạn có thể nói rõ hơn không. TIêu đề trong tiện ích này là màu xanh da trời mà bạn.

      - Nếu muốn thay đổi màu xanh thì thay đổi phần im đậm trong mã sau:

      ol#controls li a {
      float: left;
      height: 28px;
      line-height: 28px;
      border: 1px solid #ccc;
      background: #DAF3F8;
      color: #555;

      padding: 0 10px;
      text-decoration: none;
      }

      background: #DAF3F8; là màu nền
      color: #555; là màu chữ

      Xóa
  2. hi namkna!
    đúng là màu xanh nhung là màu xanh sam, so màu voi backgroup xám thì 2 màu như nhau nen khong thay duoc dong chư tieu dê của các bài dang trong hop này :(
    Mình da chinh sua nhu code cua ban huong dan o tren nhung van khong duoc, da thu thay doi nhung doan code của color khác cũng ko duoc lun.
    http://nguoiduyxuyen.blogspot.com/ ban xem qua giúp mình nhé. >>> Hien tai cái Slider có kích thuoc lon qua, làm trang cua minh chay cham qua, minh cung da mò cai doan code de giam Slider nay di nhung khong thành cong, ban giup mình giảm kich thuoc nay xuong 2/3 duoc khong?
    Cam on ban da tra loi cau hoi tren cua minh!

    Trả lờiXóa
    Trả lời
    1. cả phần này:

      ol#controls li a {
      float: left;
      height: 28px;
      line-height: 28px;
      border: 1px solid #ccc;
      background: #DAF3F8;
      color: #FAF8CC;
      padding: 0 10px;
      text-decoration: none;
      }
      ol#controls li.current a {
      background: #DAF3F8;
      color: #ffffff;
      }




      Chỉnh:

      width: 480px; độ rộng (3 lần)
      height: 360px; độ cao(3 lần)
      width: 200px; độ rộng tiêu đề

      Xóa
  3. Nam ơi! Sao mình thay đổi kích thước thành 300x250 mà nó hok ra? Nó bại lỗi gì đó hok hiểu. Mình muốn thể hiện bài viết theo kiểu này: http://2.bp.blogspot.com/-90y2AaGw57k/UXTZQHIWS_I/AAAAAAAAb0c/pBjbaQX-mjw/s1600/hinh+bai+viet+demo.jpg giống như web saigonamthuc.vn thì làm sao?

    Nam hướng dẫn và fix giúp mình nhé! Thanks

    Trả lờiXóa
  4. Code CSS bị gì đó, mình chỉnh hoài ko được. Nam chỉnh lại giúp kích thước cho wiget 300x250 giùm mình nhé. Nam coi hình thử code bị lỗi nha: http://3.bp.blogspot.com/-JzLH5lMeZR0/UXUAnlOMyTI/AAAAAAAAb0s/lsGdJnJjhDE/s1600/demo+1.jpg

    Trả lờiXóa
    Trả lời
    1. Bạn chỉnh như sau:

      THay tất cả dòng:
      width: 480px;
      thành:
      width: 300px;

      THay tất cả dòng:
      height: 360px;
      thành:
      height: 250px


      THay tất cả dòng:
      left: 520px !important;
      thành:
      left: 320px !important;

      - Hiện mình đã thêm vào bài viết rồi đó.

      Xóa
  5. Mình ko hiểu sao mà 2 dấu prev và next nó cứ nằm bên trái. Còn khung bài viết nằm bên phải. Mình chỉnh hoài mà nó không nằm 2 bên khung bài viết. Nam hướng dẫn giúp mình nhé! Thanks

    Trả lờiXóa
    Trả lời
    1. Do độ rộng của tiện ích lớn hơn độ rộng của sidebar. bạn hãy chỉnh cho độ rộng tiện ích nhỏ lại nha.

      Nếu muốn cụ thẻ hơn hãy áp dụng nó mình mới có thể biết lỗi khi bạn áp dụng được. :))

      Xóa
  6. Bạn ơi Trang thích có khung bình luận như bạn vây...bạn có thể hướng dẫn cho mình được không?....

    Trả lờiXóa
    Trả lời
    1. Hiện tại mình giới thiệu rất nhiều cách để làm thủ thuạt này và có nhiều style khác nhau bạn có thể chọn ở đây XEM NGAY

      Xóa
  7. Giúp mình với! hai nút Prev và Next cứ nằm trên topmenu ko à dù mình đã cố chỉnh sửa độ rộng cho hợp lý rồi! Thêm nữa là màu nền của phần tóm tắt bài viết trong tiện ích hơi tối. Do đó, dù được đặt đặt mặc định là trong suốt rồi thì vẫn chẳng thấy hình ở phía sau! Mình muốn đổi background từ màu đen thành màu khác nhạt hơn thì thay ở chỗ nào vậy! Cảm ơn Namkna http://hoailegal.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Hãy áp dụng để được trợ giúp nha bạn,

      Xóa
  8. Sao hình ảnh lại mờ thế bạn nhỉ...http://thuviencode.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Nguyên nhân chính là do ảnh của bạn nhỏ trong khi trên slider bạn lại phóng nó to gần gấp đôi thì nó sẽ mờ là không tránh khỏi bạn ak. Khi đăng bài bạn hãy sử dụng các hình ảnh có chất lượng cao và độ rộng tối thiểu bằng chiều rộng của slider bạn đang áp dụng nha :)

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

    Trả lờiXóa
  10. bạn ơi mình làm dk rồi, sihuong.blogspot.com
    nhưng mình muốn sữa 1 chút theo ý mình, bạn xem trang của mình nhé và chỉ dùm mình là mình muốn dòng chữ tiêu đề đó nằm giữa cái backgroud chứ không nằm tít ở dưới cùng thì phải làm thế nào
    - cái nữa là mình muốn hình ảnh trong slides nó co dãn đúng kích thước thì phải làm thế nào vì mình có ý định design 1 số ảnh riêng để đặt vào đó thôi, kích thước của khung là 730x360
    mong bạn chỉ dùm thanks bạn nhiều.

    Trả lờiXóa
  11. ah còn nữa muốn chỉnh lại thời gian chuyển ảnh lâu hơn thì phải làm thế nào bạn nhỉ? thanks bạn nhiều.

    Trả lờiXóa