Nếu bạn muốn cài đặt tiện ích này cho blogspot của mình thì hãy thực hiện theo các bước sau đây.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.
Đặt đoạn code sau đây vào trước thẻ </head>
<script src='http://hacodeproject.googlecode.com/files/jquery4accordion.js' type='text/javascript'/>
<style type='text/css'>
.accordion{width:300px;border-bottom:solid 1px #c4c4c4}
.accordion h3{background:#e9e7e7 url(http://bit.ly/fCBbB0) no-repeat right -51px;padding:7px 15px;margin:0;font:bold 13px Arial,Tahoma,sans-serif;border:solid 1px #c4c4c4;border-bottom:none;cursor:pointer;color:blue;text-align:justify}
.accordion h3:hover{background-color:#e3e2e2}
.accordion h3.active{background-position:right 5px}
.accordion p{background:#f7f7f7;margin:0;line-height:1.5em;padding:10px 15px 20px;border-left:solid 1px #c4c4c4;border-right:solid 1px #c4c4c4;text-align:justify}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
<style type='text/css'>
.accordion{width:300px;border-bottom:solid 1px #c4c4c4}
.accordion h3{background:#e9e7e7 url(http://bit.ly/fCBbB0) no-repeat right -51px;padding:7px 15px;margin:0;font:bold 13px Arial,Tahoma,sans-serif;border:solid 1px #c4c4c4;border-bottom:none;cursor:pointer;color:blue;text-align:justify}
.accordion h3:hover{background-color:#e3e2e2}
.accordion h3.active{background-position:right 5px}
.accordion p{background:#f7f7f7;margin:0;line-height:1.5em;padding:10px 15px 20px;border-left:solid 1px #c4c4c4;border-right:solid 1px #c4c4c4;text-align:justify}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
Lưu Template.
Trong phần CSS ở trên, chú ý tham số width:300px, bạn cần điều chỉnh chiều rộng tương đương với chiều rộng tại vị trí đặt tiện ích.
Bước 2. Vào Page Elements, thêm một tiện ích HTML/JavaScript và đặt toàn bộ đoạn code dưới đây vào phần Nội dung của tiện ích.
<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;
jimgwidth = 50;
jimgheight = 50;
jfntsize = 11;
jacolor = "#000";
jasize = "2";
jaBold = true;
jtext = "";
jshowPostDate = false;
sumtitle = 28;
jsummaryPost = 90;
numposts = 7;
label = "Thủ thuật Blogger";
home_page = "http://huynh-nhat-ha.blogspot.com/";
</script>
<div class="accordion">
<script src="http://hacodeproject.googlecode.com/files/accordion-recentposts4allposts.js" type="text/javascript"></script>
</div>
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;
jimgwidth = 50;
jimgheight = 50;
jfntsize = 11;
jacolor = "#000";
jasize = "2";
jaBold = true;
jtext = "";
jshowPostDate = false;
sumtitle = 28;
jsummaryPost = 90;
numposts = 7;
label = "Thủ thuật Blogger";
home_page = "http://huynh-nhat-ha.blogspot.com/";
</script>
<div class="accordion">
<script src="http://hacodeproject.googlecode.com/files/accordion-recentposts4allposts.js" type="text/javascript"></script>
</div>
Nếu bạn sử dụng tiện ích Bài viết mới nhất với hiệu ứng đàn xếp cho một nhãn nào đó thì thay file js được đánh dấu màu đỏ thành như sau:
http://hacodeproject.googlecode.com/files/accordion-recentposts4label.js
Và đặt tên nhãn ở dòng label = "Thủ thuật Blogger";
Bạn cần phải thay huynh-nhat-ha thành tên blogspot của bạn nữa nhé.
0 nhận xét