Hiển thị

Home »
Chủ Nhật, 11 tháng 12, 2011

Tạo nút readmore (Đọc tiếp) cho blogger


(Traidatmui.com) – Có rất nhiều blog đã viết về thủ thuật tạo nút readmore (đọc thêm) cho blogger, tuy nhiên thời gian qua mình vẫn nhận thấy còn nhiều bạn chưa biết đến cách thực hiện thủ thuật này. Vì lý do đó hôm nay mình xin chia sẽ cách làm nút readmore cho blogger để các bạn tham khảo. Với thủ thuật này thì bài viết của bạn sẽ chỉ hiển thị tóm tắt một đoạn nội dung trong bài viết, và bài viết của bạn sẽ hiển thị đầy đủ khi bạn click vào nút readmore này hoặc tiêu đề bài viết.


Hình ảnh minh họa
1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (design) và chọn chỉnh sửa HTML
3. Thêm đoạn code bên dưới vào trước thẻ </head>
<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>


4. Bạn hãy chèn đoạn css bên dưới vào trước thẻ ]]></b:skin>
.readmore {
float:right;
margin:1px 10px 5px 0px;


padding:3px;}
.readmore a{
color:#fff;
padding:3px 5px 3px 5px;
background:#0000ff;
}
.readmore a:hover{
color:#0000ff;
background:#ddd;}


5. Tiếp theo tìm đến đoạn mã như bên dưới
<data:post.body/>


6. Sau đó chèn code sau vào bên dưới code vừa tìm được ở trên
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div></b:if>


Nếu bạn muốn thay nút readmore băng hình ảnh thì bạn chỉ việc thay đoạn text trong code (Đọc tiếp...) thành đoạn mã sau
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWHWcDCtmS704OIAmQfLXSnPyf2JLCn3F-PEzZSzoINwwToWw03iEZucxRH9Fa1Dsf0JAmyov4YaRd87QpoWaiUH7g-lPbFDtSWd7VXBrOotdIVqLgbNDxPTDp2P3msslCgQgCBH6Y50rO/" />


Bạn chỉ việc thay link ảnh trên (dòng màu cam) thành link ảnh mà bạn muốn hiển thị.
7. Sau khi hoàn tất công việc trên bạn save template lại.
8. Bây giờ để sử dụng tính năng này thì trong khi đăng bài thì bạn hãy chèn thêm code vào nội dung bài đăng như sau
Phần nội dung sẽ hiển
<span class="fullpost">
Phần nội dung ẩn đi
</span>


Phần màu xanh đậm chính là đoạn nội dung hiển thị dạng tóm tắt bài đăng của bạn, còn phần màu đỏ đậm là phần còn lại của nội dung bài viết. Phần này sẽ được ẩn đi và hiển thị đầy đủ khi click vào nút readmore.


Để không quên đoạn mã trên bạn hãy làm thêm bước này. Bây giờ bạn chọn phần cài đặt (Settings), vào phần định dạng (Formatting), sau đó bạn cuộn chuột xuống tìm đến phần mẫu bài đăng (Post Template)và dán vào khung đó đoạn mã sau và save lại
Phần nội dung sẽ hiển
<span class="fullpost">
Phần nội dung ẩn đi
</span>


Bây giờ mỗi khi bạn đăng bài thì bạn sẽ thấy dòng mã đó hiển thị trong khung soạn thảo của bạn.

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

You may also...

Comments[ 0 ]


Đăng nhận xét

Hot