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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHEX77Z0LdREhZhOwB_RmqX7ZE6KgpIVM3HsRpW3tg-7u5f4NGLPQ8GNBZfkyAGasw8wAiLLh-mRVQlzkNxszD_V6khfhQXbWlQWT_5Jj0ybFhZ5spAL4zyWjvbiMd5yC9iSdc3vCPVJs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyX6Qnr4kPDxxU826r6-1hRIwtN4r9v_rEujI68LDbfzdh98tHgBhXuoceMP7KTRXO9caMlDBNFz290AlhfMi3hMiCh4kS0YDDodHYo5_96-CuSPWXrICVlEYOQwCeRtkUcITO-_u_GA/s1600/prev-namkna-blogspot.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6AqP2l7AhvaD0S8aTVUIyTO3xBzoeY2ScN7M0-61hJsCHedXOahpiykr3utYflpxHM9DuptBr1E7epKXjMEv51QbRyN9zb1izE8LAeIA-VYMTv4MbHKfbYukxaZAIgfqaxUexW1Mvy9o/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHEX77Z0LdREhZhOwB_RmqX7ZE6KgpIVM3HsRpW3tg-7u5f4NGLPQ8GNBZfkyAGasw8wAiLLh-mRVQlzkNxszD_V6khfhQXbWlQWT_5Jj0ybFhZ5spAL4zyWjvbiMd5yC9iSdc3vCPVJs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyX6Qnr4kPDxxU826r6-1hRIwtN4r9v_rEujI68LDbfzdh98tHgBhXuoceMP7KTRXO9caMlDBNFz290AlhfMi3hMiCh4kS0YDDodHYo5_96-CuSPWXrICVlEYOQwCeRtkUcITO-_u_GA/s1600/prev-namkna-blogspot.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6AqP2l7AhvaD0S8aTVUIyTO3xBzoeY2ScN7M0-61hJsCHedXOahpiykr3utYflpxHM9DuptBr1E7epKXjMEv51QbRyN9zb1izE8LAeIA-VYMTv4MbHKfbYukxaZAIgfqaxUexW1Mvy9o/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.