, bạn ấy muốn tiện ích Feature Slideshow trên blog ebeat5.blogspot.com có nút chuyển slide sang trái và sang phải giống như trang
Trang playrecords.net được tạo trên nền Wordpress nên kiểu slideshow rất phức tạp. Sau khi nghiên cứu, tôi đã tích hợp nó thành một gói slideshow tương thích cho blogspot và có một số điều chỉnh như tạo thêm phần tiêu đề và tóm tắt cho từng slide ảnh để người đọc có thể nắm bắt thông tin cơ bản về slide ảnh. Slideshow này có sự hỗ trợ của thư viện Mootools giúp cho kiểu trình chiếu nội dung và hình ảnh mượt mà hơn.
Bước 1. Đăng nhập Blogger vào Design >> Edit HTML và đặt đoạn code dưới đây vào trước thẻ </head>.
Trong đoạn code trên ở dòng đầu tiên chú ý các tham số width:560px;height:200px thể hiện chiều rộng và chiều cao cho panel slide (bạn Hoang Lee có thể điều chỉnh 200px thành chiều cao tương thích theo ý thích của bạn).
Bước 2. Đặt đoạn code sau đây vào một tiện ích HTML/JavaScript và tiện ích này có thể nằm ở trên hoặc dưới phần Blog Posts
<!-- Featured Content Slider Started -->
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 6000,
slideInfoZoneOpacity: 0.8,
showCarousel: false,
slideInfoZoneSlide: false
});
}
window.addEvent('domready', startGallery);
</script>
<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>
<div class='imageElement'>
<h3>
Đây là tiêu đề bài viết 1</h3>
<p>
Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='
URL_Bài viết 1' title=''></a>
<img alt='' class='full' src='
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcRKAp3oUedXgPR-uGuphhiSeYRvsfi0jiY6ZXQ6iJekLlPopcfGpyfVr852n8JL1RUhuRPwHKv2V-FqSefAnArfAfLwRl6mpiNW1-362TeS6hxg-wJCqcy6fLYChytVxDnq4TAc98k6k/s0/1.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>
Đây là tiêu đề bài viết 2</h3>
<p>
Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='
URL_Bài viết 2' title=''></a>
<img alt='' class='full' src='
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ3VobxqYmASI-deVU9vfZF0ppb85Jse6_2gn76dRd1DO0GGOHKZ-4aN81-VDP3lFLHyUcL0GN8Zfq5ZJJOhpPbs7w0c7YR159Yj70g_dgonaBsyzrstXN6sRd2u6rxwlikD1FzlKjPWQ/s0/2.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>
Đây là tiêu đề bài viết 3</h3>
<p>
Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='
URL_Bài viết 3' title=''></a>
<img alt='' class='full' src='
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQfOishumH2_fBIuFTgy_3IuYwdH7Z2j9j0DckoALnvfU9qZDj7Z7G62cg6iX07fspQKkTkyZuvoPjSIVjyIBUgPVDh4fzXVjuMPLkTgPOzSY0Ds1hjAVrQDAw03SF_9fp_J-7lpcA1HI/s0/3.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>
Đây là tiêu đề bài viết 4</h3>
<p>
Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='
URL_Bài viết 4' title=''></a>
<img alt='' class='full' src='
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jMeQL_Lvyt5rQICOfFoUtg2dn4l7IEeUdsBD-o3q54VEi-ta5tLms5T273Cgr7FZLyYO31fy7akguf6J9eZpjkQYC689Kk-lTlVh__Z-Pr3LezdZZSU4iX6RILuRDJ57DXYsMT5SV-o/s0/4.jpg' style="width:560px;height:200px"/>
</div>
<div class='imageElement'>
<h3>
Đây là tiêu đề bài viết 5</h3>
<p>
Thay thế đoạn văn này bằng nội dung mô tả tóm tắt cho bài viết liên quan đến hình ảnh này.</p>
<a class='open' href='
URL_Bài viết 5' title=''></a>
<img alt='' class='full' src='
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiESkKLqV3-876JA6zkc1qCIA3-InpVkKLvqVzpgAig9wTMx8yTjPnYNk8mIRBQy4iL3NrGnAlhzDoo5uYUhQpddat_gmJzXeaTQ3ApvLxdkvfADGGw86LMkcpC2AOUgsfRqgVINjjNWO4/s0/5.jpg' style="width:560px;height:200px"/>
</div>
……. // Xóa dòng này nếu bạn không muốn thêm slide
</div></div></div></div>
<!-- Featured Content Slider End -->
