(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ật1. Đăng nhập vào tài khoản
Blogger2. 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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9-lwqyXlduaeMJYeWriQRzkGsJ-h8G0zMvWkoE70U5iK7VnPn_Rv8Oxc2XCsPQhrOemGdoqTo8YtZiHadmxldZmKLX2NzvQUNycfsqFKbZEGluZoh84VGaFEKpnw63i3xH1eRcmWxu_V/";
showRandomImg = true;
imgwidth = 70;
//độ rộng ảnh thumbimgheight = 68;
//chiều cao của ảnh thumbaBold = 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
