Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery

Tiếp theo các thủ thuật về "tiện ích các bài viết mới" thì hôm nay mình chia sẻ cùng các bạn một cách trình diễn các bài viết dạng slide trông rất hấp dẫn và mượt mà dành cho blog. Nhược điểm của tiện ích này là sử dụng nhiều file JS nên có thể load hơi chậm, tuy nhiên đổi lại thì các bài viết của bạn được trình diễn đẹp hơn. Ở tiện ích này sẽ được tích hợp các nút như Next, Previous và nút Stop/Play các bài viết. Ở đây mình không chỉ cung cấp cho các bạn một kiểu hiệu ứng cho tiện ích này mà mình sẽ cung cấp một vài kiểu hiệu ứng cho bạn lựa chọn, bạn có thể xem demo để thấy trực quan hơn.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.main-slider{width:414px; /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px; /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.preload div{ height:100%;width:100%; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHlaRMDdcpoXEvdoiK4hC2V5RuvO6MCgk39apTAcwsIb2FtmsbSdEL0hQArxUhC6ZvLJo5cXtMGh_eLigdKjXNHFB6HlRy8yZr7Azipg5A5SmF9lbfULYehOd3KMR_kzlz9M49SAtnow/s16/load-indicator.gif) no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHlaRMDdcpoXEvdoiK4hC2V5RuvO6MCgk39apTAcwsIb2FtmsbSdEL0hQArxUhC6ZvLJo5cXtMGh_eLigdKjXNHFB6HlRy8yZr7Azipg5A5SmF9lbfULYehOd3KMR_kzlz9M49SAtnow/s16/load-indicator.gif) no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:414px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:0px 8px 5px 8px;
color:#fff;
opacity:0.8;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:180px; /*chiều cao của list bài viết bên phải*/
width:310px; /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner li{ cursor:hand; cursor:pointer; list-style:none; padding:0; margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner li.active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOGfdPAZu9Cw-fe7m9AHRxE7iruNUD4xWe70HaTxcNaRjY_1dqSFBOJ2KBI92BpuvD8SntpKfC7Qk_41-OScXSqeJjYxWih_OTBhTJ3BVN6-yy17DpxXOcTU-exrH7IY9G1bPGSEjhOG4/s38/arrow-bg.png) no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner li.active div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikbBYwrjvKgVDRNb0Kzqxh-B3xrmc17fSGr-LAMXU7CXWN0elB-cN5hvprFswieVAXBfbVPucN1zj5NZ-hH-nnLQpBAydAwsJnrd6E14XEelOllI3UFvKy-hS0LxjI2jW-eMR1IXg-b0Q/s100/grad-bg.gif);
color:#FFF;}
ul.navigator-wrap-inner li > div{
background:#333;
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:75px; /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px; /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:2px;
border:#C5C5C5 solid 1px;
}
.button-next,
.button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.button-next {
right:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWK_ixGt_7sEiP62c2A7FM9EYj9ELivAh-ZVPQEbuvwjh6t6EpbTaDYGFHTfU0H8lMp8uBJTQOiYvHKYvIxSOguPO4QYoCe8bukEQVetSV0zR7PUlwMaTCb98RYHklZVp83GQyton4_EY/s38/next.png) no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7b2bQt2Y2dIq78djzuqdGP-G8sZxQR0UDH57KtKeDYNQ14GTXQYZC1ukR5JzeD9SfBn2y9HHJFgaXMsLrhtuctq9NovfwonspIeNXM1eWq50pplPcqa29BbngXs8XgWm9WRsgHmU4WQ/s38/previous.png) no-repeat left center;
}
.button-control {
background:#333;
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
}
.button-control span { display:block; width:100%; height:100%;}
.action-start span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMTEkUVHylQORYmSRwxriE6QnP_GpK2S9pjz73jYzH7TA2LUJmfcbVlCl9xkY93ZVAogj25xJh4bt1bknqoS9ZLWJWonZiEcA7ichbIZL8YQLhkK4od8mu66JuFkGR3ShR-5z-ElC_zs/s16/play.png) no-repeat center center;
}
.action-stop span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE1IrYUM215dQNv8G5hL_QjWC0lsuzSD3fj5z5TIvVXBSDCRrANCgFvNL99WjnmYp8FhOiKyH6sajOsUQmzproKYWdZXeXVeVM3_AF6WdqE9a9iYdAUQejZK8NE8ZdzwSe-VWvaKP6ptI/s16/pause.png) no-repeat center center;
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới

- Ở trên mình chọn kiểu hiệu ứng là (easeOutBounce), bạn có thể chọn kiểu trình diễn khác bằng cách thay (easeOutBounce) thành một trong các tên sau: easeInOutExpo, easeInOutQuad.
- Ở trên mình cho tiện ích hiển thị tất cả bài viết trên blog không theo từng nhãn riêng nên bạn không cần quan tâm đến phần (label = "Advanced blogger";), phần đó mình thêm phụ để bạn nào muốn hiển thị theo nhãn thì sẽ phải quan tâm đến biến này. Để hiển thị theo từng nhãn riêng biệt thì bạn cần thay file JS bên dưới

http://data-traidatmui.appspot.com/scripts/jqslidernews.js

thành file JS sau

http://data-traidatmui.appspot.com/scripts/jqslidernews_label.js

Bạn nhớ sửa tên nhãn (Advanced blogger) lại cho đúng với tên nhãn mà bạn muốn hiển thị cho blog của bạn.

8. Cuối cùng bạn save tiện ích lại là xong.

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

Nguồn : traidatmui.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!

0 Bình Luận:

Đăng nhận xét

☺ Nội quy comments của CGC Forum :
1. Comments không được sử dụng lời lẽ thiếu văn hóa, ảnh hưởng xấu đến chính trị, tổ chức, cá nhân.
2. Không được sử dụng comments với mục đích spam.
Những comments làm trái quy định sẽ bị xóa...!
Xin cảm ơn các bạn đã đóng góp comments và tuân thủ nội quy của blog !
Notice by Admin

CGC Forum | Thủ Thuật