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

Traidatmui.com – 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>
<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.3.js"></script>
<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/script.js"></script>

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://lh4.googleusercontent.com/-TPsUtEKQzA0/TzN1m9oJHAI/AAAAAAAABug/MKqh5Yyz2CU/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://lh4.googleusercontent.com/-TPsUtEKQzA0/TzN1m9oJHAI/AAAAAAAABug/MKqh5Yyz2CU/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://lh6.googleusercontent.com/-JF6BDxbFvT8/TzN1kZh9yfI/AAAAAAAABug/a9qvkaGKbBI/s38/arrow-bg.png) no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner li.active div{background:url(https://lh3.googleusercontent.com/-3166O68fw-c/TzN1mPK7YLI/AAAAAAAABug/Bq7OLInYka4/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://lh3.googleusercontent.com/-NJHX5XNWDJQ/TzN1m7ckUWI/AAAAAAAABug/MeA_exerz4M/s38/next.png) no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://lh3.googleusercontent.com/-D1J3UKSPQrw/TzN1pEXT2KI/AAAAAAAABug/M-3RqyZfmlY/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://lh5.googleusercontent.com/-ORdj9T9-ijA/TzN1oq-vxaI/AAAAAAAABug/wmCTLxgCUyI/s16/play.png) no-repeat center center;
}
.action-stop span {
background:url(https://lh4.googleusercontent.com/-34Ebtf56jbc/TzN1n55BOjI/AAAAAAAABug/wXMS9_HvW1c/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
<script type="text/javascript">
$(document).ready( function(){
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce', // tên hiệu ứng
duration:1200,
auto:true,
mainWidth:414, //độ rộng của phần trình diễn bên trái
mainHeight:300, //chiều cao của phần trình diễn bên trái
navigatorHeight : 100, //chiều cao của list bài viết bên phải
navigatorWidth : 310, //độ rộng của list bài viết bên phải
maxItemDisplay:3,
buttons:buttons});
});
summaryposts = 30; //số ký tự của nội dung phần mô tả
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>

<div id="jslidernews" class="lof-slidecontent">
<script src="http://data-traidatmui.appspot.com/scripts/jqslidernews.js" type="text/javascript">
</script></div>

- Ở 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

Tham khảo code từ landofcoder.com

Xem khác cùng chủ đề

21 nhận xét | Viết lời bình

6/02/2012 09:28:00 SA Trả lời

Nó không hiện bạn ơi, không biết có bị xung đột file js ko xem giúp mình lacdau

6/02/2012 09:31:00 SA Trả lời

link đây http://phimcuatoi.blogspot.com

6/03/2012 09:06:00 CH Trả lời

Giúp mình cái này idontknow

Admin
6/04/2012 12:28:00 SA Trả lời

Có thể xung đột Jquery.min nào đó rồi bạn ạ. Bạn tìm các file Jquery.min nên giữ lại 1 phiên bản mới thôi bạn ạ

6/04/2012 03:39:00 SA Trả lời

Đây là các file jquery trong http://phimcuatoi.blogspot.com
Bạn xem giúp mình nên bỏ cái nào để tiện "đôi đường" nhé Cuoilon
http://penyimpanan-maskolis.googlecode.com/files/labels.js
http://code.jquery.com/jquery-1.7.min.js
http://kauman.googlecode.com/files/slider.js
http://kauman.googlecode.com/files/jqueryslide.js
http://kauman.googlecode.com/files/johnybingung.js

6/14/2012 04:56:00 SA Trả lời

cái này là lofslider mà bạn chơi chỉnh sữa lại ko ghi rõ bản quyền luôn. Pó tay

Admin
6/14/2012 06:27:00 SA Trả lời

Code mình tham khảo tại landofcoder.com thì mình có ghi bên dưới đó bạn ạ.

6/29/2012 07:54:00 SA Trả lời

Admin ơi giúp mình cái này với. sao làm như trên thì nó xuất hiện khung nhưng không thấy bài viết. link: http://www.vanhieu.tk/

Admin
6/29/2012 08:11:00 SA Trả lời

Nó xung đột JQuery đó bạn ah, ban nên xóa các file jquery.min khác chỉ cần để lại 1 Jquery.min.1.5.1.js là đủ rồi bạn.

6/29/2012 08:24:00 SA Trả lời

Admin nói rõ hơn được không. Mình chưa hiểu cho lắm...

Admin
6/29/2012 08:05:00 CH Trả lời

Tức là trong template của bạn có nhiều file jquery.min nên gây ra tình trạng xung đột giờ bạn nên xóa bớt các file jquery.min chỉ để lại 1 file jquery.min mới nhất thôi.

6/29/2012 11:30:00 CH Trả lời

Mình dùng Ctrl+f tìm file jquery.min mà thấy chỉ có file Jquery.min.1.5.1.js để nó lại nhưng van không được. Nản ghê admin ơi. Giúp mình với. Không biết nó xung đột file nào nữa.......

Admin
6/29/2012 11:47:00 CH Trả lời

Trong đó còn 1 file jquery.min.v1.4.1.js nữa bạn ah

6/30/2012 05:34:00 SA Trả lời

Không được rồi Admin ơi. Mình tìm hết file Jquery.min trên template rồi. tìm tất cả và xóa chỉ trừ file jquery.min.1.5.1.js vẫn không được. ADmin cho link dowload file Jquery để mình up lên host xem được không.. thanks admin nhiều................

Admin
6/30/2012 05:40:00 SA Trả lời

Nếu không thành công bạn có thể liên hệ Yahoo traidatmui1901 để mình có thể hỗ trợ thêm.

6/30/2012 07:08:00 CH Trả lời

thanhs admin. de minh nghien cuu vai ngay xem cos duoc khong. minh se lien he sau

Admin
6/30/2012 08:37:00 CH Trả lời

Bạn chú ý mấy đoạn JQuery trong template của bạn

7/01/2012 04:51:00 SA Trả lời

Admin ơi cho mình hỏi 1 tý ngoài lề bài viết này: Mấy ngày gần đây code thống kê của trang www.histats.com nó chạy cả buổi mà không load được. Admin có cách nào giúp với. Cảm ơn nhiều.

Admin
7/01/2012 06:24:00 SA Trả lời

Cái đó là do bên www.histats.com cung cấp nên phụ thuộc vào host bên họ chúng ta không thể can thiệp được bạn ah.

4/03/2013 10:47:00 SA Trả lời

Cái này hay quá, để mình thử xem

7/24/2015 02:16:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang