Jquery Slideshow cho Blogger Sidebar

Một đoạn mã hay giúp cho người làm Blog tạo ra được một ấn tượng đẹp trên chính Blog do mình tự thiết kế. Nó sẽ Slideshow trình diễn cho bạn bè thấy, mỗi lần xem Blog. Có thể bạn sẽ đặt vào đây những tấm ảnh khác mà bạn thích, đó là tùy ở bạn.

Mình vừa sưu tập được trên Web site của BloggerTrix, đó là một trang Web lớn với rất nhiều Source Code hữu dụng. Cách làm không khó khăn gì, nó chẳng yêu cầu nào khó đâu. Việc đầu tiên là bạn đã có Account trên Google chưa? Nếu chưa có, bạn hãy vào trang: Làm thế nào đăng ký tài khoản Google?  nhé, ở nơi đây mình sẽ hướng dẫn cho bạn một cách tường tận.

Nếu như đã có trang Google rồi, các bước còn lại có trình tự như sau:
1. Log in vào Blogger Dashboard.
2. Tạo 1 Widget HTML hoặc một trang HTML mà bạn muốn đặt Source Code bên dưới. Có thể bạn muốn đặt trong Template cũng được, ở chổ nào mà bạn muốn, chẳng hạn ở những phần <data:post.body/> hoặc <post-footer-line post-footer-line...> nhưng phải mã hóa Code. Trong Blog của mình có phần mã hóa Code nằm trên phần Comments cho Blogger.
3. Add Code dưới đây vào phần bạn chọn và cho xuất bản. Nhớ làm xong thao tác nào, bạn cũng cần phải Save để ghi lại nhé.

<style> #slideshow {margin:50px auto;position:relative;width:410px;height:240px;padding:10px;box-shadow: 0 0 20px rgba(0,0,0,0.4);} #slideshow > div {position:absolute;top:5px;left:-1px;right:10px;bottom:10px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script> $(function() { $("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000); }); </script> <br /> <div id="slideshow"> <div> <div style="text-align: center;"> <img alt="" class="icon-action" src="http://bit.ly/2svL0A3" height="208" width="400" /></div> </div> <div> <div style="text-align: center;"> <img alt="" class="icon-action" src="http://bit.ly/2rC4tLg" height="212" width="400" /></div> </div> <div> <div style="text-align: center;"> <img alt="" class="icon-action" src="http://bit.ly/2svqKhE" height="261" width="400" /></div> </div>

Ghi chú:

.Ở những đoạn Code sau như:
width:410px, height:240px, 
http://bit.ly/2svL0A3. 
http://bit.ly/2rC4tLg, 
http://bit.ly/2svqKhE. 
Bạn có thể thay đổi được giá trị. Riêng ở những địa chỉ mà bạn thấy đó, có màu đỏ là do những địa chỉ đó đã được mình dùng ứng dụng ở địa chỉ bitly.com để rút gọn Link. Trên thực tế, ứng dụng rút gọn Link có rất nhiều, bạn có thể link vào chuỗi rút gọn Link nầy để chọn nhé.

Chúc bạn thành công.

Người viết: Nguyễn Đạt Khánh