10/21/2011

Tiện ích bài viết ngẫu nhiên hiệu ứng Slide Out bằng JQuery

(Traidatmui.com) – Bài viết hôm nay mình chia sẻ cùng các bạn một style tiện ích bài viết ngẫu nhiên mới so với các phong cách trước. Thủ thuật này sẽ tạo một tiện ích Random Posts với hiệu ứng Slide Out, tiện ích này sẽ được ẩn phía bên phải và hiện ra khi bạn rê chuột vào ảnh thumb. Hơn nữa còn có một tiện ích giúp bạn có thể trao đổi qua lại giữa các bài viết trong list có sẵn. Có thể nói bạn hơi khó hình dung ra đươc, để thấy rỏ tiện ích này bạn có thể xem demo bên dưới.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>

<script src="http://traidatmui-tips.googlecode.com/files/jquery.min.v1.4.1.js" type="text/javascript"></script>
<style type='text/css'>
.re_slideout {
font-family:arial;
position:fixed;
right:-336px;
top:100px;
margin:0;
padding:0;
}
.randtitle{
font-family:times;
background:#eee;
margin:0px 0px 5px -52px;
padding:4px;
font-size:10px;
color:#fb4201;
text-shadow:1px 1px 1px #666;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;}

.rp_shuffle{
background:#222 url(https://lh5.googleusercontent.com/-dAn_9NVANm4/Tj4p-IE6gNI/AAAAAAAAAeM/9mC4ER8Fz-Q/shuffle.png) no-repeat 10px 50%;
width:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursor:pointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.re_slideout ul{
margin:0;
padding:0;
list-style:none;
}
.re_slideout ul li{
width: 370px;
margin-bottom:3px;
display:none;
}
.re_slideout ul li div{
display: block;
line-height:15px;
width: 370px;
height: 82px;
background:#eee;
border:1px solid #333;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.re_slideout ul li div img{
width:70px;
padding:2px;
float:left;
margin:4px 5px 0px 4px;
border:1px solid #ccc;

}
.re_slideout h2 {
font-size:15px;
height:46px;
margin:4px 0px 0px 20px;
display:block;
text-shadow:1px 1px 1px #000;
padding-top:1px;
background:transparent;
}
.re_slideout a{color:#000;}
.re_slideout a:hover{color:#666;}

</style>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLL5aIOBSEgXRAxzMU0cQJWAVHAIsRF8aUxWh3mHwSnL3Jn-Imu6Z7hPiZrK7RkcDkk-z05KDFsyT7skQi_T3GnTnJLd_HaOHLmUZoMk1cgsMRcgwqshUKYNjWMb-G7S3sdOYRhiiD6gc4/";
showRandomImg = true;
imgwidth = 70; //độ rộng ảnh thumb
imgheight = 68; //chiều cao của ảnh thumb
aBold = true;
text = "nhận xét";
showPostDate = true;
numposts = 15; //số bài viết hiển thị
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div id="re_slideout" class="re_slideout">
<div class="randtitle"><b>RANDOM POSTS</b></div>
<script src="http://traidatmui-tips.googlecode.com/files/slideout_rand_post.js" type="text/javascript"></script>
<span id="rp_shuffle" class="rp_shuffle"></span>
</div>

Bạn chỉnh sửa theo hướng dẫn trên cho phù hợp, lưu ý là số bài viết hiển thị mình đã mặc định trong file script là 5 bài viết, nếu muốn chỉnh sửa lại số bài hiển thị có thể mở file JS lên và mặc định lại

7. Save tiện ích lại là xong

Chúc bạn thành công

Share this post

0 nhận xét

:)

:-)

:))

=))

:(

:-(

:((

:d

:-d

@-)

:p

:o

:>)

(o)

[-(

:-?

(p)

:-s

(m)

8-)

:-t

:-b

b-(

:-#

=p~

:-$

(b)

(f)

x-)

(k)

(h)

(c)

cheer

© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0

Posts RSS ∙ Comments RSS
Back to top