Bắt đầu thủ thuật:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọan code bên dưới vào trước thẻ đóng </head>
<script type="text/javascript" src="http://data.fandung.com/js/jquery.js"></script>
<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: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
4. Save template.
5. Tạo 1 widget HTML/Javascript rồi dán code bên dưới vào:
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;
jtext = "Comments";
jshowPostDate = true;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
numposts = 6;
label = "Film";
home_page = "http://www.fandung.com/";
</script>
<div class="accordion">
<script src="http://data.fandung.com/js/recent-post-Jquery/accordion/j-label-fix.js" type="text/javascript"></script>
</div>
- Nếu muốn hiển thị bài viết cho cả blog thì đổi link javascript(code màu xanh) ở trên thành link bên dưới:
http://data.fandung.com/js/recent-post-Jquery/accordion/j-post-fix.js
Tham khảo hiệu ứng jQuery từ Web Designer Wall
Chúc các bạn thành công.
quá tuyệt , với sideshow này ko phải add link , image thủ công :D
Hay quá rất gọn gàng va đẹp mắt. good!thanks FD
Bạn ơi thủ thuật hiện đường dẫn "» Home » Thu Thuat Blog" ở đâu vậy.
@abc :bạn tham khảo bài viết này :
http://fandung.blogspot.com/2009/05/tao-thanh-navbar-breadcrumb-on-gian-cho.html
điểm 10 cho chất lượng :D
đùa nhiều Recent post xịn wá hoa hết cả mắt chẳng biết nên xài cái nào cho blog đây
cảm ơn bác fd nha
Cảm ơn Thủ thuật rất rất thú vị. Qúa hay ! Thanks FanDung nhiều nha!
hic , tìm mòn mắt ko thấy mã màu của tiêu đề để đổi :(( , Fan Dung help mình với :|
@Admin : cái tiêu đề màu cam đó hả bạn, code của nó đây :
jacolor = "#E67C15";
Còn nếu là cái tiêu đề màu đen thì bạn thử thêm đoạn code màu vào class này thử xem :
.accordion h3
tiêu đề màu đen bạn à . thêm đoạn .accordion h3 vào chỗ nào hả bạn :| , mình ko biết về javacrip :((
ko fải bạn à, đây là code CSS
ở trong code trên, bạn sẽ thấy đọan code như bên dưới :
.accordion h3 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
Thêm đọan code in đậm vào như bên dưới :
.accordion h3 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
color: #f00;
}
Bạn thay đổi trị màu theo ý bạn là được
đã làm đc thanks :D
sao mình làm y hệt như vậy mà nó không có hiệu ứng trượt nhỉ, toàn hiện tất cả thôi :(
@loc8meng2 : bạn thử xem file demo của mình có chạy được ko. Nếu file demo ko chạy thì là do host 110mb.com , do nó load ko đc file JS nên nó mới hiện tất tần tật ra.
Nếu ko load đc file JS thì bạn download gói file JS của mình về, rồi kiếm file tương ứng của thủ thuật, rồi up lên host riêng của bạn.
Còn nếu file demo mà chạy được, còn bạn làm không chạy thì là do lỗi của bạn, bạn thử kiểm tra lại xem nhé.
nghe nói google web có cho up file js mà anh Dũng ? sao anh ko hổ trợ bài viết up file js lên đó cho anh em blogger đi ! cảm ơn bài viết này e thấy thật chuyện nghiệp !
Hi,
Tui muon (ảnh thumbnail và phần tóm tắt) duoc hien thi len phia tren khi click chuột vào thanh header tuong ung. Phai sua lam sao ha ban.
Lam
Cái này có thể phân trang được ko bác FD? Nếu được thì làm thế nào hướng dẫn với nhé, thanks b nhiều!
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.