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:
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).<!-- 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.
Nhận xét
@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óaBạ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.
Xóa- 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ữ
hi namkna!
Trả lờiXóađú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!
cả phần này:
Xóaol#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 đề
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?
Trả lờiXóaNam hướng dẫn và fix giúp mình nhé! Thanks
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óaBạn chỉnh như sau:
XóaTHay 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 đó.
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óaDo độ 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.
XóaNế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. :))
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óaHiệ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óaGiú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óaHãy áp dụng để được trợ giúp nha bạn,
XóaSao hình ảnh lại mờ thế bạn nhỉ...http://thuviencode.blogspot.com/
Trả lờiXóaNguyê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óaNhận xét này đã bị tác giả xóa.
Trả lờiXóabạn ơi mình làm dk rồi, sihuong.blogspot.com
Trả lờiXóanhư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.
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