Loading post navigation ...
 
 

Pro page

19
Nhận xét

[Yêu cầu] - Kwick jQuey cho tiện ích Random posts

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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/AVvXsEgV3DTIL_7tEU5ZBymi9ZqGvLghjM2BH9DBMYBb_gmzmSobsmVevQK_XdHnZhchiVOn2tNHFxyP2yzuyqbT-49U1EQAzcc7aY9mRnJ9JtV7tFNJyIKPESrD_-JYiZ0eQR3FbCSC8Ozg3-VA/) 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://lh3.googleusercontent.com/-Hsco_af9Y9s/TpWche0coHI/AAAAAAAAB7k/TJDT_5DfN30/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.
- Các bạn thay http://www.fandung.com/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.


Enter your mail address:

19

Pig

gọn gàng và đẹp quá anh Dũng ạ; nhưng em thấy vừa bị lỗi font tiếng Việt

Nathan, P

Anh Dung oi blog sao e lam ko dc, hinh nhu e nghi no bi gi o code thu 2 (...feed\...\...)

Phan Dũng

@pikarock: thật ra lỗi font là do host của mình thôi, không hiểu sao nó hay bị lỗi font khi chọn giá trị max-result lớn, nếu chọn max-result gần bằng với tổng số bài viết thì sẽ không gặp vấn đề này, còn khi chèn vô blog thì không có việc lỗi font đâu. nó cũng giống như các tiện ích Recent khác thôi.

@Nathan, P : ah, mình quên mất, đó là ở code thứ 2, chèn kiểu đó vô nó ko chịu. fix ngay

Nathan, P
Nathan, P

O e thay roi
Code thu 2 anh sua roi Cam on Anh nhieu de thu xem sao

Nathan, P

anh Dung oi... anh biet lam trang rieng tren Blogger... mà độ rộng, dộ dài cua no minh co the lam cho toan trang trên man hinh dc ko?
E co chinh an het tat ca cac widget nhung no khong the dài ra duoc a ak`...Giup e.. Cam on a nhieu

tranbac

hê hê cuối cùng cũng hagnf cũng về

Thank anh Dũng :X

tranbac

ANh ơi chỉnh lại chiều ngang cho cái tiện ích này như nào

Phan Dũng

@Nathan, P : chưa hiểu đc ý của bạn muốn hỏi gì ???

alobabyday : em thấy các con số 960px , 192px, muốn cho nó nhỏ lại thì sửa các con số này, lưu ý là 192x5=960 đó nha, thay đổi cho tỉ lể để tiện ích được đẹp hơn.
Còn muốn thay đổi chiều cao thì là 320px đó.
Ngoài ra còn phải đổi trong file javascript nữa, đoạn code đó nè :
<img src="'+imgurl+'" width="700" height="320">

tại mình làm biếng add cho nó class để tiện tùy chỉnh

Phan Dũng

anh đã fix lại file js và thêm code CSS cho thẻ IMG rồi, em coi mà update lại nha

.kwicks li img {width:720px;height:320px;}

đem 2 thuộc tính này ra ngoài để tiện chỉnh sửa

tranbac

:| những file JS ào cần sửa vậy :| sửa mãi ở chỗ widget chỉnh kiểu gì nó cũng k bé lại

Nathan, P

y la, Em muốn để cái kwick JQ ramdom posts trên một trang nhất định tại blogger (ko phải là bài đăng)... Rồi e đã thêm những cái CSS để các widget khác (#HTML9, #HTML10...{display:none) không hiện lên tại cái trang đó.. Em muốn là chỉnh độ dài và độ rộng của nó ra hết toàn trang trên màn hình luôn?

Điện Tử ChipKool

em thấy load hơi chậm.

Phan Dũng

anh có nói trong thủ thuật rồi, tiện ích random posts là vậy đó, nó chỉ nhanh nếu link feed có ít bài viết.

Công Nghệ Thủ Thuật

Trông đẹp thật nhưng cũng hơi rờm rà. :)

BinhTienBeach

Tiêu chí thẩm mỹ thì ổn nhưng tiêu chí tốc độ thì lại... yếu.

Tổ ấm mèo

anh Dung huong dan em lam menu giong http://ngoisao.net dc khong a? em tim khong ra cho nao de post yeu cau thu thuat nen em post o dau luôn, anh thong cam!

Đạo sĩ chăn gà

Chào FanDung, ngưỡng mộ bạn đã lâu. Mình là chicken nên không rành biết về blogspot. May nhờ có những trang thủ thuật như của bạn. Cám ơn nhiều!
Nhân tiện, do trang mình cũng có 1 mục về Blogspot để vừa giới thiệu cho những chicken khác, vừa để lưu trữ phòng khi hữu sự nên thi thoảng mình sẽ "rinh" một số tips của các bạn về nhà mình (đương nhiên là có khai báo nguồn gốc rõ ràng).
Mình đã add link của bạn trên blog của mình. Nếu bạn và các bạn hữu ở đây không chê thì mời bạn ghé thăm: http://www.shareallworld.com
Cuối tuần vui vẻ!

Vịnh

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote] thử



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home