Kwick jQuey cho tiện ích Random posts

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. Hôm nay mình sẽ hướng dẫn 1 style mới của tiện ích này, Tiện ích được Fandung xây dựng khá công phu và đẹp mắt, đó là kết hợp hiệu ứng kwick từ jQuery cho tiện ích này

Hiệu ứng Kwick này cũng khá đẹp, 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. Hôm nay chia sẻ lại cho các bạn để các bạn có thêm sự lựa chọn cho giao diện đẹp mắt hơn !

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='https://script-viettin24h.googlecode.com/svn/trunk/random-post.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/AVvXsEgxp0LCqHvc8tMP0QyeldVqRwYa51C4wivCKJ6Ed0EYrppQKmKLBThBmaiz7W28aUUFVG3gXCLyPk4KNzJeWHvcC3NrOVN8hDO-HQIggvZC6Vk5ukkcrCrOZXoU737MlUK02jnxbThEwNwJ/) 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/AVvXsEjXlNIsGl_cytublRfyzHEjRcAwjXes45uTK6jwmScpxNLIDib5p8yAubNqFXevF-rYIJPCeAJJPcNGYDbQ2UD2KpFKMxSH7wjtnLM79obrdtDqhHPXYzmuFvG04XH6y8tIQsAmDpwLC-Y3/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://viettin24h.com/";
kwlabel = "Blogspot%20tips";
</script>https://script-viettin24h.googlecode.com/svn/trunk/randompost.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://viettin24h.com/ và Blogspot%20tips 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.

- Theo mình các bạn nên chọn 1 nhãn nhất định ! Nếu dùng cho cả bài viết load sẽ chậm
- Các bạn nên download file .JS về và upload lên host riêng để dùng ổn định hơn và tránh die
Chúc các bạn thành công!