"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://data-traidatmui.appspot.com/scripts/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] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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://data-traidatmui.appspot.com/scripts/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

Tham khảo code tympanus.net

Xem khác cùng chủ đề

9 nhận xét | Viết lời bình

8/09/2011 08:42:00 CH Trả lời

Thanks!

Mình Muốn Cho nó nằm bên trái thì chỉnh code ở chỗ nào vậy?

Admin
8/09/2011 09:34:00 CH Trả lời

Tiện ích này nếu để bên trái thì nó sẽ ngược lại hoàn toàn và thấy không hợp lý lắm. Tuy nhiên nếu bạn muốn chỉnh sửa lại thì có thể chỉnh sửa các phần như:

right:-336px; Thành left:-336px;

Phần thuộc tính float của .re_slideout ul li div img bạn sửa lại thành float:right;

Và mở file JS (slideout_rand_post.js) và bỏ các dấu âm (-) trước thuộc tính marginLeft.

8/09/2011 10:50:00 CH Trả lời

Cảm ơn nhiều! Mình đã làm được rồi.
Nhưng cái randtitle và shuffle nó không hiển thị bạn chỉ dùm mình cái

Admin
8/09/2011 10:57:00 CH Trả lời

Bạn chỉnh thuộc tính margin trong .randtitle{ lại thành margin:0px 0px 5px 335px;

8/09/2011 11:12:00 CH Trả lời

Thanks! votay

Mình Làm được rồi. cungly

Tiện ích rất hay!

8/10/2011 08:13:00 SA Trả lời

- Nếu mình dùng thủ thuật này áp dụng vào blog, khi click vào một link trong blog thì phần hiển thị ngẩu nhiên có thay đổi không ?

Admin
8/10/2011 08:16:00 SA Trả lời

Đây là tiện ích hiển thị bài viết ngẫu nhiên nên mỗi lần load trang thì nó sẽ tự động thay đổi bài viết một cách ngẫu nhiên thôi bạn lleu

9/24/2011 12:05:00 SA Trả lời

xin lỗi ! Mình không trộn được bài . Và khi rê chuột vào nó cũng không đổi màu hoặc dịch sang bên trái

p/s: Chỉnh sửa file js ở đâu vậy bạn

9/24/2011 04:17:00 SA Trả lời

phần này của em không hiểu sao. nó cứ đơ như con cơ ấy anh à. Chỉ chuột vào mà không nhúc nhích gì cả. @@. Giúp em cái nhé :D

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang