Tùy biến nút Read More của Blogspot

/
blogger read more button
Những ai đang dùng chức năng Read More (đọc thêm) mặc định của Blogger sẽ nhận ra là nó không được đẹp cho lắm, vì vậy trong bài này Noct sẽ hướng dẫn cách tùy biến sao cho trông bắt mắt hơn.





Đăng nhập vào phần dashboard >> thiết kế >> chỉnh sửa HTML >> đánh dấu chọn mở rộng mẫu tiện ích. Tìm dòng sau:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Thay thế toàn bộ đoạn ở trên bằng:
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Đọc tiếp</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Đọc tiếp</a>
</b:if></b:if><div class='clear'/>

Tiếp theo, chèn đoạn CSS sau phía trên thẻ </b:skin>
a.jump-link {color:#fff;text-decoration:none}

.jump-link {
float:right;
padding:6px 12px;
margin:20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
display:inline-block;
background: #f48423;
background: -moz-linear-gradient(top, #ffdf9e, #f5b026 5%, #f48423);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.03, #f5b026), to(#f48423));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border:1px solid #e6791c;
border-bottom:1px solid #d86f15;
color:#FFF;
text-shadow: 0 1px 1px #6f3a02; }

.jump-link:hover {
background: #eb7d1d;
background: -moz-linear-gradient(top, #ffdf9e, #f1a91a 5%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffdf9e), color-stop(.03, #f1a91a), to(#f07810));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810')"; /* IE8 only */
border-bottom:1px solid #d86f15; }

.jump-link:focus {
padding:7px 13px;
color:#FFF;
text-shadow: 0 -1px 1px #894906;
border:none;
background: #e47412;
background: -moz-linear-gradient(top, #f07810, #f1a91a 95%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f07810), color-stop(.9, #f1a91a), to(#f07810));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-webkit-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-moz-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; }

Save template lại và xem kết quả. Bạn dễ dàng nhận ra là thủ thuật này không dùng bất cứ image nào nhằm tăng tốc độ tải trang web, ngoài ra thì các blog đang sử dụng Auto-readmore script cũng hoàn toàn có thể  áp dụng code này.
Add a Comment

40 comments

Daniel, right ?
Contact me and I will show you the way to add emoticons to comment form.

4/04/2011 comment-delete

@Noct :Sorry for erease the author name but can u sent me a banner "88x31" for puted on my web and give the credit that you deserved

4/05/2011 comment-delete

I think it is unnecessary, just leave an URL in template or homepage, that is really helpful.

4/05/2011 comment-delete

Thanks for sharing. I learned many skill about CSS5 from this post.

PS: Noct is idol of many blogger now =d>.

4/05/2011 comment-delete

@Tien Nguyen :"Noct is idol of many blogger now"
I think so and u too :D
My idols :))

4/05/2011 comment-delete

Mấy bác nói tiếng gì khó hiểu quá :D

4/05/2011 comment-delete

Đã áp dụng thành công.Rất đẹp, Thanks!

Cảm ơn bạn , mình đã làm thành công

4/19/2011 comment-delete

@2-Sao: Cái blog của bạn =)) quá

4/19/2011 comment-delete

@Noct : Mình thử trên IE sao mà nó lỗi , bạn có cách gì khắc phục không ?

4/19/2011 comment-delete

Blog 2-Sao vào nhin một lúc là mắt toàn sao không luôn =d>

4/19/2011 comment-delete

@2-sao : bạn dùng IE mấy ?

4/19/2011 comment-delete

@Noct : Mình dùng IE 8 .

4/19/2011 comment-delete

IE8 ngoài việc góc cạnh không được bo tròn do thiếu CSS3 thì mình thấy không có lỗi gì cả bạn à.

4/19/2011 comment-delete

Hix , Mình thử blog của bạn thì không thấy lỗi , còn blog của mình thì bị lỗi , sửa hòai mà không biết tại sao , nên thay giao diện luôn :D

4/19/2011 comment-delete

Code này vốn là của bộ Fresh Button Pack, cũng không dễ chỉnh sửa lắm. Nếu thích thì bạn có thể liên hệ để nhận pack đầy đủ các màu khác.

4/19/2011 comment-delete

Tôi đang sử dụng template Webfolio, thử áp dụng thủ thuật trên của tác giả (nhiều lần) nhưng ko thành công (ko biết nguyên do). Cụ thể: chỉ hiện nút "đọc tiếp" ở cuối mỗi bài viết chứ ko "phân đoạn" bài viết như mong muốn. Mong đc tác giả hỗ trợ.

Link template tôi đang dùng:
http://btemplates.com/2010/blogger-template-webfolio/

Bạn hãy phân đoạn cho bài viết nhé, xem hình.

4/20/2011 comment-delete

@noct:
1. Tôi hiểu ý bạn.
2. Đó là cách làm thủ công. Liệu có giải pháp tự động (auto-read more) nào có thể sử dụng kết hợp với thủ thuật đc đề cập trong bài viết này?

Bạn có thể sử dụng thủ thuật Auto-readmore nào cũng được, kết quả vẫn giống như demo, tham khảo script này.

4/20/2011 comment-delete

@noct:
Tôi đã làm được. Cảm ơn bạn đã nhiệt tình giúp đỡ. Mong bạn sẽ tiếp tục hướng dẫn những thủ thuật hữu ích khác để mọi người tham khảo và học hỏi.

Cảm ơn bạn lần nữa.

Cám ơn bạn. Mình vừa gửi yêu cầu đã nhận được. bạn thật nhiệt tình, mong bạn share thêm nhiều code cho anh em blogger nữa

5/05/2011 comment-delete

Noct cho mình hỏi làm thế nào để xóa bỏ hoàn toàn chức năng read more thế, mình có 1 blog ko cần đến chức năng này

lên google tìm thủ thuật readmore auto rồi làm theo từ dưới lên trên là được

7/21/2011 comment-delete

làm sao để nó rút gọn bài đăng lại vậy

Anh có mẫu nào màu hồng ko anh
blog em màu hồng mà nó chèn thêm cái vàng chóe trông thế nào ý >.<

11/29/2011 comment-delete

@Pu 3k*
Thì đổi màu lại chớ có khó gì:D

11/29/2011 comment-delete

@Pu 3k* các màu khác có thể tìm thấy ở đây

11/29/2011 comment-delete

Hê lố pác Noct,
Pác cho em hỏi tí,cái thủ thuật của pác+autoreadmore có = http://www.thuthuatblogger.info/2011/01/auto-reamore-without-javascript-for.html

Ya em muốn hỏi có nên chỉ dùng 1 cái của pác Hà cho cả 2 hơn hay ko thui,tại vì em thấy nếu dùng cái này+autoreadmore nữa thì hơi nhìu,trong khi đó chỉ 1 cái của pác Hà thì đủ cho cả 2,

Xin pác nhẹ tay=d>=d>=d>=d>=d>

12/02/2011 comment-delete

@ngonluanho.net bạn cảm thấy thích cái nào thì cứ dùng cái đó :*

12/02/2011 comment-delete

Rất đẹp.

2/04/2012 comment-delete

Noct ơi cho mình hỏi cái đoạn ".jump-link:focus" là có ý nghĩa gì vậy?

Mình biết cái jump-link và jump-link:hover, nhưng không hiểu cái focus...

Q.B
6/20/2012 comment-delete

bạn thử click lên cái nút readmore ở trên nhưng đừng thả chuột ra thì sẽ biết focus là gì :)

6/20/2012 comment-delete

baì viết hay
nhưng bạn ơi mình thử rồi vì trong tem của mình đang có hai phân "readmore" auto và "đọc tiếp" của tem vì vậy làm thế nào mình thay đc cảu bạn vào trong khi dó mình rất thích cái tiện ich này hic
help me!

7/20/2012 comment-delete

Khi tôi thay thế thì bị lỗi: "Mẫu của bạn không hợp lệ vì thẻ 'div' xuất hiện trong thẻ 'head'.

Error 500" là sao?

Chào bạn
Bạn có thể chỉ giúp mình cái này được ko,mình sử dụng theme này mà khi xem bài đăng lại có 2 banner quảng cáo của google,bạn có thể chỉ mình cách bỏ 2 cái này đi được ko,hoặc là thay bẳng cái banner khác được ko.thank bạn nhiều,đây là theme mà mình dùng:
http://bandatlonganbinhchanh.blogspot.com/2012/08/khu-dan-cu-my-hanh-hoang-gia.html
vị trí banner: 1 cái dưới tiêu đề, 1 cái dưới cuối bài viết.

anh noct ơi

10/03/2012 comment-delete

anh noct ơi anh cóa yh or facebook hk cho em xin nik anh gửi we yh:nh0ckteenst or facebook:nh0ckface007@gmail.com em có thắc mắc về Sữa chữa dessign mog anh giúp đở tks

10/03/2012 comment-delete

Thanks đúng cái mình đang cần

11/12/2012 comment-delete

Cảm ơn bài viết nhiều!

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License