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.
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://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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNklNe-aKD62gP-xIclQ9QAlI9mWNAzEZ9VxaZ470t0Y57vfRgfOkwfUMmNeeVKMTKEva3gpu8WRsRa8dOPT4Wdq6ENlD7-vMepahNdw-_q0fCMjSIaIAUZTOg8phNUIjb-DgL7Tip5FZT/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>
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.
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
Anh Dung oi blog sao e lam ko dc, hinh nhu e nghi no bi gi o code thu 2 (...feed\...\...)
@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
O e thay roi
Code thu 2 anh sua roi Cam on Anh nhieu de thu xem sao
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
hê hê cuối cùng cũng hagnf cũng về
Thank anh Dũng :X
ANh ơi chỉnh lại chiều ngang cho cái tiện ích này như nào
@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
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
:| 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
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?
em thấy load hơi chậm.
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.
Trông đẹp thật nhưng cũng hơi rờm rà. :)
Tiêu chí thẩm mỹ thì ổn nhưng tiêu chí tốc độ thì lại... yếu.
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!
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ẻ!
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote] thử
» 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.