[Thủ thuật] Tiện ích bài viết ngẫu nhiên hiệu ứng Slide Out bằng JQuery

– 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ể copy code và dán vào Notepad và save lại với name.html

» 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. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<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>


<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj699Oc85J3uyy8GqTLUtFZTBQNKzQGxwbHV_I8ly64CY-CmlaiI5PLlwnb8GhWGj9UjyJ9gtKEwNxtOMuNg4JFL4BsGFxu0N2OxaBhi3L2mKwpcFg_9QYbz-8kZRsaMqSd3a3fqxqaT8zh/";
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.CHOIBLOG-HOME.BLOGSOPT.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

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

ST:
Địa chỉ bài viết: http://www.traidatmui.com/2011/08/tien-ich-bai-viet-ngau-nhien-hieu-ung.html