[Yêu cầu] - Kwick jQuey cho tiện ích Random posts
Thứ Tư, 12 tháng 10, 2011
Tiện ích bài viết ngẫu nhiên (random posts) nói chung cũng là 1 trong những tiện ích ít người dùng, trước kia mình cũng có post vài bài viết về tiện ích này, mới nhất là ở bên mothuthuat.com, nhưng làm biếng, vẫn chưa rinh về đây. Hôm nay có người yêu cầu, mình sẽ hướng dẫn 1 style mới của tiện ích này, đó là kết hợp hiệu ứng kwick từ jQuery cho tiện ích này.
Xem DEMO
Hiệu ứng Kwick này cũng khá mượt, trước kia mình nhớ là có thấy nó ở trong 1 template nào đó của joomla, sau này lại thấy cộng đồng blogspot Việt dùng. Và mình cũng đã đọc qua 1 bài hướng dẫn chèn cái Kwick này vào blogspot luôn (nhưng giờ thì không nhớ blog nào nữa). Tính qua đó copy code về để chuẩn bị thủ thuật cho nhanh, nhưng ko nhớ, nên phải đi lang thang view source và xào nấu lại.
Hình ảnh minh họa
Theo yêu cầu mình sẽ kết hợp hiệu ứng Kwick này vào tiện ích random posts. Và ở đây tiện ích sẽ giữ nguyên kích thước như bản gốc mà 1 số template đang dùng.
Bài này cũng đơn giản, các bạn chỉ cần tạo 1 tiện ích HTML/javascript và dán code bên dưới vào là được:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src='http://fandung.googlecode.com/svn/trunk/js/noct.js' type='text/javascript'></script>
<style type="text/css">
.kwicks { position:relative;width: 960px; height: 320px;}
.kwicks li{width: 192px;height: 320px;display: block;overflow: hidden;padding: 0px; }
.kwicks li img {width:720px;height:320px;}
.fadeout {
border-right:1px solid #aaa;
display: block;
position: absolute;
right: 0;
width: 300px;
height: 320px;
z-index: 4;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheNAAojpy0UxPmqeZOPcHR_0VoVbSL8Alq6GjovoQLOCW_BtTTHscpvTSOPcRKUcHTVnNK5FixhyphenhyphenwPB_EeLGkSilpaLz_T6P-ffuRzlx95cG5rP8nMsZ7iyCI0aP-RE6nkDTowfBLXG283/) repeat-y scroll top right transparent; }
.cmkwick {position: absolute;right:10px;bottom:80px;font-weight:bold;font-size:60px;line-height: 1;opacity: 0.5;text-shadow: black 0px 0px 5px;cursor: pointer;color:#fff; }
#kwick_5 .fadeout { border-right:none }
.kwicks.horizontal li {margin-right: 0px; float: left; }
.kwicks.vertical li { margin-bottom: 5px; }
.kwicks .excerpt {
background: #fff;
color: #000;
opacity: 0.6;
filter:alpha(opacity=90);
position: absolute;
padding: 10px;
bottom: 0px;
display: block;
width: 100%; }
.excerpt strong {font-family: "Arial",Arial,Helvetica,san-serif;font-weight: normal;letter-spacing: 0.4px;height: 66px;line-height: 26px;font-size: 14px;display:block;text-transform:uppercase; }
.kwick_style {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: absolute;}
#kwick_1 {left: 0px; width: 192px;}
#kwick_2 {width: 192px; left: 192px; }
#kwick_3 {width: 192px; left: 384px; }
#kwick_4 {width: 192px; left: 576px;}
#kwick_5 {right: 0px; width: 192px;}
#jquery-rd-posts-loading {background:#136eab;text-align:center;width:960px;}
</style>
<div id="jquery-rd-posts">
<div id="jquery-rd-posts-loading">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06W3DafPb5axNAX5EkkTHIp-ywEALX7H_Nf-zNvJ4KdNvrwvmqDNW6-LvU8rbdRySFIJolAD2XcFZqoSGM7kFajoR0Vbkce0PvINkggashmjFR1_zFoh9XqZg6b0eMrz3Oo0aGKvdkeyH/s550/loading.gif" />
</div>
</div>
<script src='http://fandung.googlecode.com/svn/trunk/js/noct.js' type='text/javascript'></script>
<style type="text/css">
.kwicks { position:relative;width: 960px; height: 320px;}
.kwicks li{width: 192px;height: 320px;display: block;overflow: hidden;padding: 0px; }
.kwicks li img {width:720px;height:320px;}
.fadeout {
border-right:1px solid #aaa;
display: block;
position: absolute;
right: 0;
width: 300px;
height: 320px;
z-index: 4;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheNAAojpy0UxPmqeZOPcHR_0VoVbSL8Alq6GjovoQLOCW_BtTTHscpvTSOPcRKUcHTVnNK5FixhyphenhyphenwPB_EeLGkSilpaLz_T6P-ffuRzlx95cG5rP8nMsZ7iyCI0aP-RE6nkDTowfBLXG283/) repeat-y scroll top right transparent; }
.cmkwick {position: absolute;right:10px;bottom:80px;font-weight:bold;font-size:60px;line-height: 1;opacity: 0.5;text-shadow: black 0px 0px 5px;cursor: pointer;color:#fff; }
#kwick_5 .fadeout { border-right:none }
.kwicks.horizontal li {margin-right: 0px; float: left; }
.kwicks.vertical li { margin-bottom: 5px; }
.kwicks .excerpt {
background: #fff;
color: #000;
opacity: 0.6;
filter:alpha(opacity=90);
position: absolute;
padding: 10px;
bottom: 0px;
display: block;
width: 100%; }
.excerpt strong {font-family: "Arial",Arial,Helvetica,san-serif;font-weight: normal;letter-spacing: 0.4px;height: 66px;line-height: 26px;font-size: 14px;display:block;text-transform:uppercase; }
.kwick_style {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: absolute;}
#kwick_1 {left: 0px; width: 192px;}
#kwick_2 {width: 192px; left: 192px; }
#kwick_3 {width: 192px; left: 384px; }
#kwick_4 {width: 192px; left: 576px;}
#kwick_5 {right: 0px; width: 192px;}
#jquery-rd-posts-loading {background:#136eab;text-align:center;width:960px;}
</style>
<div id="jquery-rd-posts">
<div id="jquery-rd-posts-loading">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06W3DafPb5axNAX5EkkTHIp-ywEALX7H_Nf-zNvJ4KdNvrwvmqDNW6-LvU8rbdRySFIJolAD2XcFZqoSGM7kFajoR0Vbkce0PvINkggashmjFR1_zFoh9XqZg6b0eMrz3Oo0aGKvdkeyH/s550/loading.gif" />
</div>
</div>
- Save widget lại. sau đó vào code template, chèn đoạn code bên dưới vào trước thẻ đóng </body>
<script type="text/javascript">
home_page = "http://www.fandung.com/";
kwlabel = "Film";
</script>
<script src="http://fandung.googlecode.com/svn/trunk/js/jquery-rd-post-v2.js" type="text/javascript"></script>
- Mình chọn chèn vào vị trí cuối cùng để không tạo cảm giác blog load chậm.home_page = "http://www.fandung.com/";
kwlabel = "Film";
</script>
<script src="http://fandung.googlecode.com/svn/trunk/js/jquery-rd-post-v2.js" type="text/javascript"></script>
- Các bạn thay http://www.fandung.com/ và Film thành tên miền của blog bạn và tên nhãn mà bạn muốn hiển thị bài viết.
- Khuyên cáo : nên chọn 1 nhãn nào đó để hiển thị mà thôi, không nên lấy cả blog để hiển thị, do nếu feed càng nhiều bài viết thì tiện ích load càng chậm.
- FDNav - Phân trang cho blogspot
- Update tiện ích recent posts
- Update bộ đếm số lần đọc bài viết cho blogspot - v3.1
- Tạo tab nội dung đơn giản với jQuery
- PNO - Recent posts : Thêm 1 style mới cho tiện ích Recent posts
- Pro TabNews mang phong cách của VnExpress
- Hiển thị bài viết ngoài trang chủ giống trang news.zing.vn
- Tiện ích Recent Comments cho cho 1 bài viết cụ thể
- Cách post code HTML, XML, Javascript ... vào bài viết với Greasemonkey
- Tiện ích Recent posts khá ấn tượng với jQuery
- [ Yêu cầu ] : Hiển thị bài viết ngoài trang chủ giống template Revolution City
- [ Yêu cầu ] : Tạo thanh HotNews cho blog (sử dụng mootools)
Comments[ 0 ]
Đăng nhận xét