![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNEvMOFlVnVxFpCPjAFW5JHJoKf2ZYOnLRD5HQMLCbEnQ7SimcRnh95NFM3RHoBy5Z4LddSpF4tW5IPKcJl1Chsd27_BgFRAE3sVmgLS8H10VChxTHo2RQFL1d2zUAXYe7ZPUTd7QLTSl/s200/kwick-ramdon-post-namkna-ngoctra.png)
Hình ảnh minh họa
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBV0mXTjy8MZfCyDMrU80YQm-DeYfcXpNiII4d7hml7gyWFcqKZ1XZYmP3eNdj8tZ7nyAT0j-uBPZYPNhI38K8_LkGuDLwVlr0vZM-f0RfWBN90RoLzm_bb9yL0MZwaYY26w5v3GQq7N-r/s400/ramdon-posr-namkna-ngoctra-3.jpg)
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:
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://dl.dropbox.com/u/70549761/Ramdon-post/namkna-blogspot-com/Kwick-namkna-blogspot-com.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/AVvXsEiiAJxJdGSgYd6tKwODNAK00Bgij1PPs6c0Dy_KnEx_sqUbwJW22S1LcKvTT9AiWLe3OQ8SWy0uL3TTId3cPNvdtYEcpz2L8e3u7kGJTYBA_TtvJLJhO1nhiq6cIp4TMMi-SSVuCVBy124W/) 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/AVvXsEjdgX1CnK24lQn6eJCQXAZ3B7aYkqh9FKPNZwt2ElP2HwCcpSSYW_XiSCvQijY72nHQqTxZSV7txC4tegM2TNc7wfPlxiX52pFB7NoqLtVQ2t6R3ziNa7HplivuaZ8Vzkz1r7A2i5orbTJe/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://viettin365.com/";
kwlabel = "Blogspot%20tips";
</script>
<script src="http://dl.dropbox.com/u/70549761/Ramdon-post/namkna-blogspot-com/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://viettin365.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.
- Lưu ý: bạn nên Download File JS về Tại đây sau đó Upload lên host riêng tránh bị Die host
- Các bạn thay http://viettin365.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.
- Lưu ý: bạn nên Download File JS về Tại đây sau đó Upload lên host riêng tránh bị Die host
Chúc thành công!