Tin mới đăng:

Tạo Slider cho 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. 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 Blogger. 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.

Hình ảnh minh họa
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/_xpQK9GsnDPs/TOxSyrTi7KI/AAAAAAAAAmw/i4FOV7EzbIQ/s000/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
background: url(http://3.bp.blogspot.com/_xpQK9GsnDPs/TOxSzDyhK7I/AAAAAAAAAm0/EOkU1_3E9Y0/s000/next.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 đề
- 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>
<script src='http://buixuandoanh.com.vn/js/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>
- 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://www.xuandoanh.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
Trong đó:
Thay http://www.xuandoanh.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.
Bước 3: Lưu tiện ích lại.
                                  Chúc bạn thành công

Tạo Slider cho bài viết mới nhất trượt ngang cho Blogger Tạo Slider cho bài viết mới nhất trượt ngang cho Blogger
9/10 356 bình chọn

Chia sẻ:

Xin chào! Mình là Bùi Xuân Doanh. Mình muốn được chia sẻ cùng các bạn những gì mình biết.

Theo dõi tôi trên Facebook Or Youtube


Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Quản trị

    Admin Bùi Xuân Doanh

    Click để Chat với Admin! Click để Chat với Admin!

    Email: buixuandoanh@gmail.com

    Hotline: 0983.379.818

Tư vấn Kỹ thuật