Tiện ích auto Move Image Slider cho Blogger

Có rất nhiều bài về các bài viết về tạo tiện ích Featured Post đã được giới thiệu trong Vnblognet.com – Đây là dạng bài viết nổi bật được đặt tại những vị trí bắt mắt. Nay xin giới thiệu tiếp với các bạn tiện ích auto Move Image Slider với carousel cho Blogger với các hình ảnh tự động chuyển động giống Tạo ảnh chuyển động cho blog bằng marquee.



Vị trí đặt tiện ích này hiệu quả nhất tại phần đầu trang phía dưới tiêu đề.

1. Bước đăng nhập Blogger để thực hiện

Truy cập vào blogger account  >> Thiết kế (Design)  >>  Chỉnh sửa HTML (Edit/Html) để bắt đầu tiến hành thực hiện chèn code tạo tiện ích auto Move Image Slider với carousel cho Blogger

2. Chèn mã CSS

Nhấn phím CTRL_F để tìm code ]]>
Thay thế code trên bằng đoạn code sau:

#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirnHeU98YQWIb5L-pgR-kEv8uZbTTZ_Sk7l3nHy8M5gg9cN4MUjumpvKimuCOrAHbsUy1-fGO7P5CM1f3W5JauRD9dsYP9lRyjYO6Y6Mfw9bthiCRtWXiwqsy5Uh2gH7jdxbd6O4ZfyA/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
]]>

3. Chèn mã javascript

Nhấn phím CTRL_F để tìm code
Thay thế code trên bằng đoạn code sau:

Sau khi chèn mã CSS và javascript, bạn Lưu mẫu (Save Template) lại.

4. Chèn mã HTML

Bạn vào Thiết kế (Design)  >> Phần tử trang (Page Elements)  >> Thêm tiện ích(Add A Gadget) >> Html/Javascript
Và dán đoạn code dưới vào trong phần nội dung của Html/Javascript

Bạn chỉ cần thay thế các link bài viết và link hình ảnh tương ứng trong bước 4 trên để tạo những hình ảnh cùng link dẫn cho tiện ích của bạn là xong.
Để tránh trưởng hợp đường dẫn file javascript bị hỏng bạn hãy tải về tập tin nén hai file javascript để sao lưu.

Bạn tham khảo thêm bài viết Upload (.js) Files lên host free OpenDrive - Javascript Files để biết được hướng dẫn cách upload File Js lên host free.
VnBlognet Dịch và biên tập theo: anshuldudeja