Hiển thị một danh sách các bài viết gần đây bên sidebar của bạn (Scrolling/Ticker Recent Post Gadget For Blogger) là một cách tuyệt vời để giữ khách truy cập của bạn bận rộn. Có rất nhiều tiện ích bài viết gần đây bạn có thể sử dụng, nhưng namkna thủ thuật này chắc chắn sẽ gây sự chú ý của độc giả khi truy cập vào blog của bạn.
Widget bài viết mới nhất (gần đây) này tương tự như các bài viết gần đây với hình thu nhỏ nhưng có thêm chức năng cuộn (Scrolling). Nó kết hợp các plugin vticker jQuery để tạo ra một hiệu ứng trượt đơn giản và kiểu dáng đẹp và cuộn các bài viết. Tiện ích được giới thiệu bởi stylifyyourblog.
Ảnh minh họa:
Làm thế nào để add Scrolling Recent Post cho blogger?
1- Đăng nhập (login) vào Blog2- Vào Bố cục (Lay out)
3- Chọn Thêm tiện ích (Add gadget)
4- Tạo một widget HTML/Javarscip và Thêm đoạn code bên dưới vào:
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script style='text/javascript' src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/recentpostticker.js" ></script> <script style='text/javascript' src='http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/recentpostswiththumbnailsv3.js'></script> <script style='text/javascript'> var numposts = 7; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 100; $(document).ready(function () {$('#sai').vTicker({ speed: 500, pause: 3000, showItems: 3, animation: 'fade', mousePause: false, height: 0, direction: 'up' });}); </script> <div id="sai"> <script src='http://namkna.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> </div>Trong đó:
- Nếu blog bạn đã có thư viện Jquery thì hãy loại bỏ code màu xanh đi.
- Thay http://namkna.blogspot.com/ thành URL blog của bạn.
- numposts =7; là số lượng bài viết muốn hiển thị.
- showItems:3 Số bài viết hiển thị trong 1 lần chuyển động.
- speed: 500, thời gian chuyển động
- pause: 3000, thời gian dừng sau mỗi lần chuyển động
- var showpostthumbnails = true; hiển thị ảnh thumbnail nếu không muốn thì thay true thành false
- var showcommentnum = false; Nếu muốn hiển thị số comment thì thay flase thành true
- var showpostdate = false; Nếu muốn hiển thị ngày đăng thì thay flase thành true
- var showpostsummary = false; Nếu muốn hiển thị mô tả thì thay false thành true
- width:55px;height:55px Chiều rộng và cao của ảnh thumbnail
- float:right Ảnh ở bên phải tiêu đề nếu muốn bên trái thì thay right thành left
Chú ý:
Một điều rất quan trọng. Tiện ích có thể xảy ra tình trạng hiệu ứng di chuyển có thể khônghoạt động, có thể do mâu thuẫn giữa một số plugin jQuery đã có trong Blog của bạn, giải pháp phổ biến nhất để điều này là thêm mã sau đây vào cuối tiện ích:
<script type='text/javascript'> jQuery.noConflict(); </script>
Nếu hiệu ứng di chuyển vẫn không làm việc thì bạn có thể loại bỏ bất kỳ plugin jQuery khác trong blog.
Nhận xét
Bạn ơi !Cho mình "thọ giáo" vài điều với!
Trả lờiXóaMình đã thử gắn code của bạn giới thiệu vào blog nhưng có lẽ do blog của mình đã gắn các icon cảm xúc nên hai code đó "đánh nhau" hay sao ấy.Khi mình gắn vô thì các icon biến mất hết và danh sách bài đăng đứng im lìm chứ không cuộn như mong muốn.
Nhờ bạn chỉ cách giúp mình để chỉnh sửa lỗi này được không bạn?Vì mình rất thích hiệu ứng này.
Cám ơn bạn trước nhé!
Nhập đoạn này cuối tiện ích:
Xóa<script type='text/javascript'>
jQuery.noConflict();
</script>
Cám ơn bạn đã trả lời cho mình nhé!Mình đã thử thêm đoạn code vào nhưng nó vẫn đứng nguyên mà không cuộn bạn ạ.Hic!
Trả lờiXóa2 bài này khác nhay mà em. Một bài là bài viết mới nhất còn một bài là bài đăng phổ hiến. Em muốn kết hợp vào loại nào.
Trả lờiXóaTất nhiên là được nhưng em sẽ phải chấp nhạn một thực tế là sẽ làm chạm blog của em đi vì thủ thuạt đó cần có javarscipt.
Trả lờiXóaPhần hiệu ứng trượt em có thể mô tả rõ hơn ý tưởng của em không! :))
Trả lờiXóaĐã viết bài mới cho em: Popular Posts dạng Slides trượt dọc cho Blogger
Trả lờiXóaNếu Nam làm thêm cho anh em cái nút Tạm dừng- chạy tiếp được thì tốt quá
Trả lờiXóathanks
Cho thêm nút đó sẽ cần thêm 1 script khác. Đoạn scrip đó khá nặng như thế sẽ gây ảnh hưởng tới load nên minhg không cho vào.
XóaCảm ơn Nam nhiều, nhờ Nam mình làm được cái Popular posts khá đẹp phù hợp với giao diện blog mình
XóaKhông có gì rất vui vì có ích với bạn.
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaNam vui lòng cho hỏi mấy vấn đề nhé:
Trả lờiXóa1) Mình muốn bo tròn ảnh thumbnail thì làm thế nào vậy?
2) Đổi màu của tiêu đề bài viết khác với màu của "nhận xét" (đối với bài hướng dẫn này)
Mong bạn giúp nhé!
Cảm ơn bạn!
1. Bo tròn ảnh sửa đoạn:
Xóaimg.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}
Thành:
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;border:1px solid #999;border-radius:50%;}
2- ĐỔi màu tiêu đền bài viết: thêm trước thẻ ]]></b:skin>
.clearfix a{color:#066 !important}
.clearfix a:hover{color:#333 !important}
#066 là mã màu chưa dê chuột.
#333 là mã màu khi dê chuột
Cảm ơn Nam rất nhiều!
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaCô mê những thủ thuật của cháu mà làm mãi không thành cô nhờ cháu chỉ giúp
Trả lờiXóatrong blog honganh cô làm thành công rồi nhưng trong blog thiên đường khi cô thay đường linh của blog thiên đường vào là không có gì cả . không biết vì sao chau nhỉ? mong cháu chỉ giúp
Trả lờiXóaCô xem lại xem blog đó đã đăng ký feed chưa nha cô. Nếu chưa thì cô làm theio bài này trước nha; Đăng ký và cài đặt Feedburner Atom cho Blogspot
Xóaanh ơi - thay bài viết mới nhất bằng một nhãn được không gì !
Trả lờiXóaTất nhiên là được!
XóaEm tìm đoạn code như bên dưới:
http://namkna.blogspot.com/feeds/posts/default
thay thế nó thành:
http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips
Trong đó Blogspot-tips là tên nhãn muốn hiển thị nha.
anh chỉnh khoảng cách giữa hai bài giúp em - nó cách xa quá anh ơi
Trả lờiXóahttp://tinnet3s.blogspot.com/
Em dán đoạn code bên dưới trước thẻ ]]><b:skin> nha:
Xóa.clearfix {margin-top: -10px !important}
Chỉnh lại -10px cho thích hợp nha.
Bạn giúp mình tí nha. Mình Có cái thanh chạy ngang và một recen pot mà không có cái nào hoạt động được cả. Mình cũng đã xóa hết mấy cái java mà vẫn vậy. Cám ơn bạn nhiều
Trả lờiXóaMình vào thấy nó hoạt động bình thường mà bạn.
Xóamình làm giống như cậu chỉ thì có hiển ra nhưng chỉ hiện tiêu đề cùng với ảnh chứ không có 1 đoạn nội dung kèm theo bên dưới, vậy làm thế nào để có cả 1 đoạn nội dung của bài đó ở dưới tiêu đề?
Trả lờiXóaBạn phải thay đoạn bên dưới:
Xóavar showpostsummary = false;
thành:
var showpostsummary = true;
Trong bài viết mình có hướng dẫn ở phần tùy chỉnh rồi mà bạn.
bài viết hay quá, cho chữ tiêu đề in đậm được ko vậy anh?
Trả lờiXóaChữ tiêu đề nó đã in đậm rồi mà. Em có thể xem demo sẽ thấy rõ hơn .
Xóaanh Nam ơi làm sao để có lằn gạch ngang ngăn cách giữa 2 bài vậy anh Nam,em làm nó không giống demo.
Trả lờiXóaNếu chèn vào sidebar thì em thêm đoạn sau trước thẻ ]]></b:skin>
Xóa.sidebar li{border-bottom:1px solid #bbb;}
cho m hỏi tại sao khoảng cách giữa tiêu đề bài viết dòng trên với dòng dưới cách nhau xa vậy b? muốn cho gần lại ntn b? thanks...nè bạn: http://hotgirlbuonchuyen.blogspot.com/
Trả lờiXóaCâu hỏi của bạn chung chung vì trong blog của bạn có một số phần tiêu đề cách nhau rất xa, Trog comment này mình sẽ hướng dẫn trog bài viêt. Bạn tìm 2 đoạn bên dưới:
Xóa.post {
border-bottom:1px solid #EEEEEE;
margin:0.5em 0 1.5em;
padding-bottom:1.5em;
}
.post h3 {
color:#955D4C;
font-family:georgia;
font-size:27px;
font-weight:normal;
line-height:1.4em;
margin:0.25em 0 0;
padding:0;
}
sửa lại thành:
.post {
border-bottom:1px solid #EEEEEE;
margin:5px 0 5px;
padding-bottom:5px;
}
.post h3 {
color:#955D4C;
font-family:georgia;
font-size:27px;
font-weight:normal;
line-height:1.4em;
margin:5px 0 0;
padding:0;
}
mình đã đổi các thuộc tính em thành px giờ bạn chỉnh lại px của các thuộc tính mafrgin và padding trong 2 đoạn đã chỉnh sửa trên nha.
Mình muốn lọc bài viết theo nhưng label khác nhau thì làm sao hả N ? cám ơn N
Trả lờiXóaBạn sửa đoạn:
Xóa<script src='http://namkna.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
thành:
<script src='http://namkna.blogspot.com/feeds/posts/default/-/Tên nhãn?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
Chỉnh lại tên nhãn thành tên nhãn bạn muốn sử dụng với thủ thuật này.
Thanks N mình đã làm được còn nếu mình muốn dữ liệu với nhiều label có chọn lựa thì pải làm sao hả N
Trả lờiXóaHiện tại đoạn code chạy với một label thôi bạn ak, hiệu ứng này cũng khá nặng nên nếu bạn đặt nhiều tiện ích sẽ khiến cho trang của bạn load chậm đó.
Xóathanks ad, em thấy style của thằng này cũng đẹp nè => Tạo widget bài viết mới nhất (recent post) cho blogger
Trả lờiXóa