Showing posts with label Buttons. Show all posts
Showing posts with label Buttons. Show all posts

Sunday, October 16, 2011

Mã để tạo nút Add to Blogger

Blogger cho phép bạn có thể thiết kế những tiện ích mới để người khác có thể thêm vào blogspot của họ. Trước tiên bạn cần tạo code cho tiện ích, sở hữu một website hoặc webblog rồi tạo một form để gửi kết quả tiện ích lên Blogger. Trong form này bạn gắn toàn bộ nội dung tiện ích mà bạn tạo ra. Khi người dùng click vào nút Add to Blogger thì sẽ được dẫn đến Blogger nơi có thể gắn tiện ích vào blog của họ. Bạn có thể xem Demo bằng cách lick vào nút bên dưới để cài đặt tiện ích Recent Post with Thumbnail.




Sau đây là định dạng chung để tạo một nút như vậy:

<form action="http://beta.blogger.com/add-widget" method="post">
<input value="Tên tiện ích" name="widget.title" type="hidden">
<input value="http://www.thuthuatblogger.info" name="infoUrl" type="hidden">
<input value="http://www.thuthuatblogger.info/favicon.ico" name="logoUrl" type="hidden">
<textarea style="display: none;" name="widget.content">
ĐOẠN CODE CỦA TIỆN ÍCH ĐẶT Ở ĐÂY
</textarea>
<input type="hidden" name="widget.template" value="&lt;data:content/&gt;" />
<input id='button' name='button' type="image" src='http://www.blogger.com/img/add/add2blogger_sm_b.gif' value=''/>
</form>

Ở đây chúng ta sử dụng trường input là hidden để người dùng không thể thay đổi thông tin về tiện ích. Trong form này có những phần quan trọng được giải thích như sau:
  • form action="http://www.blogger.com/add-widget" - (bắt buộc): Form của tiện ích cần truyền thông tin đến URL này để được Blogger xử lý. Khuyến nghị dùng phương thức truyền là POST nhưng phương thức GET cũng hoạt động được nếu không có quá nhiều dữ liệu trong tiện ích.
  • widget.title - (không bắt buộc): Đây là tiêu đề tiện ích hiển thị trong tab Page Elements của người dùng khi chỉnh sửa Template. Tiêu đề có thể dài đến 100 ký tự và có thể chứa cấu trúc HTML.
  • infoURL - (không bắt buộc): Sử dụng cái này để xác định một trang mô tả hoặc hướng dẫn về tiện ích. Nó giúp tạo link Learn more trên trang cài đặt tiện ích.
  • logoURL - (không bắt buộc): Có thể thêm URL cho hình ảnh ở đây và hình ảnh sẽ được hiển thị kế bên link Learn more. Ảnh này sẽ được thu nhỏ lại dưới 100x100 pixel.
  • widget.content - (bắt buộc): Đây là nội dung thực của tiện ích, sẽ được hiển thị trên blogspot của người dùng. Nó có thể chứa các đoạn mã, ngoại trừ các thẻ <html>, <body>. Các đoạn mã này giữ nguyên thể, không mã hóa.
  • widget.template - (không bắt buộc): Cái này nhằm chỉ định Template chọn để gắn tiện ích. Nếu không xác định Template thì sử dụng mặc định là <data:title/> hoặc <data:content/>.

Dưới đây là lựa chọn hình ảnh cho nút Add to Blogger:



http://www.blogger.com/img/add/add2blogger_sm_w.gif



http://www.blogger.com/img/add/add2blogger_lg.gif



http://www.blogger.com/img/add/add2blogger_sm_b.gif

Thursday, February 17, 2011

Tạo nút Back to Top siêu đơn giản

Để tạo nút Back to Top ở cuối blogspot, thông thường các blogger sử dụng đến javascript hoặc jQuery. Tuy nhiên nếu dùng script thì ít nhiều cũng ảnh hưởng đến tốc độ tải trang cho blogspot. Tôi xin giới thiệu một cách rất đơn giản mà không hề sử dụng đến script.

Đăng nhập Blogger, vào Design >> Edit HTML. Tìm đến đoạn code nói đến phần bản quyền blog, thường nằm sau thẻ <div id='footer-wrapper'>. Bạn chỉ cần đặt đoạn code dưới đây vào sau thẻ nói trên.

<p style='float:right;'><a href='#top' title="Back to top">&#8657;</a></p>

Lưu Template là OK. Nếu trong Template của bạn có id header (thử tìm xem trong Template có dòng #header hay không) thì có thể thay #top bằng #header.