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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

9 nhận xét

  1. Thanks!

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

    Trả lờiXóa
  2. 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.

    Trả lờiXóa
  3. 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

    Trả lờiXóa
  4. Bạn chỉnh thuộc tính margin trong .randtitle{ lại thành margin:0px 0px 5px 335px;

    Trả lờiXóa
  5. Thanks! votay

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

    Tiện ích rất hay!

    Trả lờiXóa
  6. - 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 ?

    Trả lờiXóa
  7. Đâ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

    Trả lờiXóa
  8. 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

    Trả lờiXóa
  9. 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

    Trả lờiXóa