» » Hiển thị bài viết trên Blogspot dạng trượt với hiệu ứng JQuery giống accordion template
Người đăng: | 02/04/2011 | 15:02

Hiển thị bài viết trên Blogspot dạng trượt với hiệu ứng JQuery giống accordion template

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

(Traidatmui.com) – Trước đây mình đã có dịp chia sẻ đến các bạn một thủ thuật thuật hiển thị bài viết dạng trượt với hiệu ứng Jquery (bạn có thể xem tại đây), tuy nhiên ở thủ thuật trước chúng ta chỉ thực hiện đối với các bài mới nhất trên blog hay cùng một nhãn. Hôm nay với hiệu ứng đó mình sẽ giúp các bạn hiển thị cho tất cả các bài viết trên trang chủ hay các trang nhãn trên blog của bạn. Tất cả các bài viết trên trang blog của bạn sẽ hiển thị một bài viết đầy đủ và các bài viết khác sẽ chỉ hiển thị tiêu đề và hiển thị đầy đủ khi bạn click vào thanh tiêu đề đó. Bạn có thể xem hình ảnh minh họa bên dưới và click demo để xem accordion-template sẽ thấy rỏ hơn.



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 mở rộng tiện ích (Expand Widget Templates)
5. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>
.post-header {
font-size:12px;
background: #eee url(http://lh5.ggpht.com/_BTztXRwC9ik/TNQPad_DI_I/AAAAAAAAEu4/wtICtukiAws/arrow-square-fd1.gif) no-repeat right -51px;
color:#000;
width:99%;
margin:0px;
padding:5px}
.post-header a{color:#000;}
.post-header a:hover{color:#0000ff;}
#main-wrapper .headactive {
background-position: right 5px;}

6. Chèn tiếp code bên dưới vào sau thẻ <head>
<script src='http://data-traidatmui.appspot.com/scripts/jquery-1.2.6.min1.js' type='text/javascript'/>
<script type='text/javascript'>
var accordionpost=true;
</script>
<script src='http://data-traidatmui.appspot.com/scripts/accordionpost.js' type='text/javascript'/>

7. Bây giờ bạn hãy tìm đến code như bên dưới hoặc tương tự
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

8. Thay toàn bộ code vừa tìm được thành code bên dưới
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title post-header'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title post-header'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

9. Bây giờ bạn tìm đến code sau hoặc tương tự
<div class='post-body entry-content'>
...........................................................
phần ở giữa này tùy mỗi template mỗi khác, bạn chú ý phần mở đầu và kết thúc
..........................................................

</div>
</b:includable>
<b:includable id='status-message'>

10. Chèn vào code vừa tìm được đoạn code như bên dưới
<div class='accpostingan'>

<div class='post-body entry-content'>
...........................................................
..........................................................

</div>
</div>
</b:includable>
<b:includable id='status-message'>

Code được chèn vào là code màu đỏ, bạn chú ý cần phải xác định đúng các thẻ đóng thì template sẽ không bị lỗi nếu không bạn sẽ không save template lại được

11. Cuối cùng save template lại

Chúc bạn thành công

Tham khảo Accordion template

Chuyên mục:

Không có nhận xét nào