Loading post navigation ...
 
 

Pro page

27
Nhận xét

Làm cho nút "Read More..." (Đọc thêm) trông pro hơn

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Modify "Read More" Buttom
[FD's BlOg] - Hôm nay mới ngồi chỉnh sửa giao diện, và có 1 chút kinh nghiệm mới chia sẻ cho anh em. Bài viết này mình sẽ hướng dẫn cách làm cho liên kết (nút)"Read More..." trông đẹp hơn, bắt mắt hơn.

- Tiện ích "Read More..." là một trong những thủ thuật cơ bản đầu tiên của 1 blogger, nó không những tạo nên bố cục gọn gàng, mà còn giảm thiểu dữ liệu load trên trang chính.
- Như các bạn đã biết, tiện ích "Read more..." khi cài vào mặc định nó là một link liên kết bằng chữ bình thường. Hôm nay mình sẽ hướng dẫn các bạn thay đổi nó thành một liên kết hình ảnh và kèm theo hiệu ứng.

Xem demo:

- Trước khi thực hiện việc này, bạn cần tạo 2 ảnh dạng nút nhấn (kiểu buttom):
+ Ảnh 1 : là ảnh sẽ hiển thị khi ta chưa rê chuột vào.
+ Ảnh 2 : là ảnh sẽ hiển thị khi ta rê chuột vào.

Và một gợi ý nho nhỏ, ta nên tạo 2 ảnh có cùng 1 màu, và ảnh 1 có màu sậm hơn, ảnh 2 có màu nhạt hơn, khi đó ta rê chuột vào sẽ có cảm giác ảnh bị mờ đi, trông cũng khá đẹp.

Lưu ý : 2 ảnh phải có đồng nhất về kích thước cũng như đồng nhất về khung ảnh, tức là các điểm ảnh tương tự nhau phải nằm ở những vị trí tương tự nhau. Khi đó ta rê chuột vào sẽ không tạo ra cảm giác ảnh bị dịch chuyển. (Phần này thiêng về thiết kế đồ họa). Và nếu ảnh để background thì phải cho trùng với background của bài viết. Tốt nhất không nên dùng background cho ảnh.

Và sau đây là cách thực hiện:
1. Đăng nhập blog.
2. Vào bố cục (Layout).
3. Vào chỉnh sửa Code HTML (Edit code HTML)
4. Nhấp chọn mở rộng tiện ích.
5. Chèn đọan code CSS bên dưới lên ngay trên dòng ]]></b:skin> :
.readmore-fd {
width: 101px;
height: 24px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(link ảnh 1);
}
.readmore-fd:hover {
background-image:url(link ảnh 2);
}
Chú ý:
- Đọan code màu đỏ chính là kích thước của ảnh.
- Thay code màu xanh bằng link hình của bạn.

6. Tìm đến đọan code sau :

<div class='post-body entry-content'>
<data:post.body/>
<span class='rmlink'><a expr:href='data:post.url'>Read More...</a></span>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


7. Thay dòng code màu đỏ bằng dòng code bên dưới:
<a class='readmore-fd' expr:href='data:post.url'/>

8. Và nó sẽ trông giống như thế này:

<div class='post-body entry-content'>
<data:post.body/>
<span class='rmlink'><a class='readmore-fd' expr:href='data:post.url'/></span>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


9. Save template lại. Như vậy đã xong.

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


Enter your mail address:

27

Ngankvn ®

Đẹp Quá Thank !!!

fandung-tester

hihi, cảm ơn, cái này mình chế 100% đó, tự nhiên hứng lên rồi tự tay thiết kế ảnh rồi sửa code luôn.

Có cần "thuê" mình thiết kế cho 1 cái buttom như vậy ko. :))

Ngankvn ®

Oh !!! Thiết kế dùm thì tốt quá :D , nhìn sao cho VIP nhé :)) , đang tạm xài cái hình ở bài này !!!

Phan Dũng

xài cái hình ở bài này ko đc đâu, tại hình đó có hình nền trùng với nền của bài viết của mình, nên cài sang blog của bạn nó sẽ khác, trông ko đẹp đâu.

Thứ 2 là bạn fải nói mình thiết kế làm sao chứ, ví dụ cái hình khi ko có chuột vào sẽ màu gì, đưa vào sẽ màu gì, rồi có cần thay đổi màu chữ ko, rồi kích thước to hay nhỏ. để mình còn biết chứ.

Ngankvn ®

Thank Phan DŨng Nhiều nhé :) , Cái Nút nhìn đẹp lắm , Rất là Hợp Tông !!!
Mấy bữa nay bận quá ko có thời gian qua đây "Lục lọi" :D

Ngankvn ®

À còn nữa ,Khi lần đầu tiên vào Trang chủ , thì Rê chuột lên cái nút Readmore ko thấy file ảnh thứ hai ( Hover ), phải đợi một lúc nó mới load tới , có cách nào ko ???

Phan Dũng

Ko có gì :D, lỡ hứa phải làm thôi.

Cái trường hợp bạn nói là trang chủ load chưa kịp nên mới như vậy, bên mình cũng thế. Mình chưa tìm được cách khắc phục. ko biết có cách nào ko nữa :D.

Mấy bữa nữa về Tây Ninh rồi, bỏ hoang blog mất thôi. :(

vinhnguyenbmt

Mẫu tem của mình không có thẻ data:post.body, vậy làm sao làm được nút read more? Bạn giúp mình với nhé. Mình dùng mẫu sau:
(Name: Lotus Flower
Designer: Isnaini
URL: www.blogspottemplate.com)
Thank.

fandung

thẻ <data:post.body&gt là cơ dể chứa nội dung bài viết, tại sao blog bạn không có.

Hãy tìm kĩ lại nhé, nhớ chọn "Mở rộng mẫu tiện ích " khi tìm thì mới thấy.

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

Trí

Bạn có thể hướng dẫn cách gán button cho tiện ích "Mở rộng/thu gọn" không ? Cái "Read more" thì mình làm được rồi nhưng cái này thì bó tay :(

fandung

@Trí : cái tiện ích thu gọn mở rộng mình có bài hướng dẫn rồi mà, bạn thực hiện nó ko thành công à??

Trí

Cái đó mình cũng làm được nhưng mà không gán button cho chữ "Mở rộng" được

Phan Dũng

@Trí : bạn có thể comment ở thủ thuật "Thu gọn/ mở rộng" đó ko, như thế mình đễ trả lời hơn, không rõ bạn đang nói tới bài nào.

Trí

Để nói rõ hơn chút, chủ đề mục này là "Làm cho nút "Read More..." (Đọc thêm) trông pro hơn", nhưng cái mình muốn hỏi là "Làm cho nút "Show/Hide" (Mở rộng/Thu gọn) trông pro hơn" :), áp dụng cách trên không được.

Trí

Hình minh họa hhttp://c.uploadanh.com/upload/0/534/0.681713001248081586.jpg

fandung

cái này mình phải xem code của thủ thuật mới nói rõ được.

Nhưng bạn thử thay chữ "Xem thêm.../Quay lại" thành các hình ảnh thử xem.

Taiki

Code http://sites.google.com/site/taikisblogsite/java/my-blog.txt?attredirects=0 , rãnh thì xem dùm mình :)

Phan Dũng

@Taiki : bạn ko nói vấn đề của bạn, mà đưa code cho mình xem, mình biết giúp bạn sao???

Taiki

À mình đang nói vấn đề "Làm cho nút "Show/Hide" (Mở rộng/Thu gọn) trông pro hơn" ấy, tại mới đổi cái Profile nên 8-}

TIÊU NHỊ CHÂU

Bạn ơi mình thử làm rồi mà sao cái nút readmore của mình nó không nằm ở trang chính là lại nằm ở bên trong bài viết luôn. Có cách nào khắc phục ko, chỉ cho mình với! Help!

Nguyễn Đức Linh

Hi, cám ơn bài tut này của FD, đây là sản phẩm theo cách làm của FD, chỉ có khác là Conquydo07 thay link ảnh 1 bằng 1 hình động. Nhìn hay phết

Mời anh em ghé blog http://conquydo07.blogspot.com/

eu

Hiện tại blogger có chức năng readmore, anh có thể chỉ cho e và các bạn cách tuỳ chỉnh code để có nút readmore pro hơn không. Em sử dụng code anh làm nhưng nó không ra. mong nhận được hồi âm anh sớm.

Gain Capital

MẸO VẶT:
Để tạo 2 ảnh : rõ và bóng mờ,các bạn có thể truy cập vào trang www.Cooltext.com

xfilesonic

https://lh5.googleusercontent.com/-yibJfqaU-JI/TiVoDkxh9oI/AAAAAAAAADs/WVmAdxllKr8/vbdbfdbdfb.png
anh oi~ blog em xai nut button readmore mà nó bị lệch như thế này anh có cách nào cho read more xuong ngang hàng nhau được không . Thanks

mAn ĐiezEl

mình làm xong!vẫn không có gì thay đổi :D

Thao Trinh
Xuan Mai

Lúc này tớ xin phần mềm gỡ bỏ ứng dụng sẽ giúp laptop các bạn sử dụng nhẹ hơn và không lag nữa, tuy nhiên còn có sản phẩm huong dan thay doi dns vào facebook giúp chị em có thể xài facebook mà không sợ bị hack.Sẵn tiện mình cũng hướng dẫn cài đặt phần mềm opera cho máy tính giúp các bạn xài dễ dàng hơn trong việc lướt web



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» 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.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home