TẠO NÚT BẤM "DEMO" CHO WEB/BLOG

Nút bấm "Demo" là nút bấm khá quan trọng trong các trang Web/Blog chia sẻ về các thủ thuật, nút bấm này sẽ dẫn khách tham quan đến một bản mẫu minh hoạ cho thủ thuật đó.

Có khá nhiều cách để các bạn làm nút bấm này nhưng để được một nút bấm "Demo" ưng ý bạn phải tốn nhiều công sức và cần đến một trong các phần mềm hỗ trợ (Photoshop chẳng hạn...).

Thủ thuật tôi sắp trình bày ở đây khá đơn giản, chỉ cần trong tay các bạn có 2 hình nút bấm "Demo" là các bạn có thể tạo ra một nút bấm khá đẹp để minh hoạ cho bài viết của mình.

Mời các bạn rê chuột vào các mẫu nút bấm phía dưới để thấy hiệu ứng đổi màu nút hoặc đổi màu chữ "Demo" nha!!! (các bạn chờ trang load xong thì hiệu ứng mới có hiệu lực).

Tương tự như cách làm nút "Download" cho Web/Blog, các bạn chỉ việc thay thế link ảnh nút "Download" bằng link ảnh nút "Demo" là xong.

Các bạn có thể xem cách làm TẠI ĐÂY.

Nếu chưa có ảnh của nút "Demo" các bạn bấm vào thẻ phía dưới để xem và tải nút "Demo" về upload lên host riêng rồi thay thế link vào, hoặc các bạn có thể bấm phải chuột vào nút bấm chọn Copy link location để lấy link thay vào là xong.

Xem và tải nút Demo

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

More about →

NÚT BẤM LÊN ĐẦU TRANG XUỐNG CUỐI TRANG

Tôi có sưu tầm từ trang Web nước ngoài một vài mẫu nút bấm lên đầu trang và xuống cuối trang dùng cho Web/Blog.

Ứng với mỗi mẫu là code để chèn vào Blog, các bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán code vào, bấm Lưu lại là xong.


Bạn bấm vào Xem thử để trải nghiệm nút bấm nha!!!


Xem thử

Dưới đây là hình minh hoạ và code của các mẫu nút bấm, bạn thích cái nào thì copy code bên cạnh để dán vào Blog

<div id="navigation_up_down_37339"><script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/1-37339-right.js"></script></div>



 
<div id="navigation_up_down_79523"><script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/2-79523-right.js"></script></div>

 <div id="navigation_up_down_89846"><script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/3-89846-right.js"></script></div>

 <div id="navigation_up_down_8685"><script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/4-8685-right.js"></script></div>

<div id="navigation_up_down_60107"><script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/5-60107-right.js"></script></div>

<div id="navigation_up_down_30337"><script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/6-30337-right.js"></script></div>

<div id="navigation_up_down_21622"><<script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/7-21622-right.js"></script></div>

 <div id="navigation_up_down_42562"><script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/8-42562-right.js"></script></div>

 <div id="navigation_up_down_90798"><script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/9-90798-right.js"></script></div>

<div id="navigation_up_down_58760"><script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/10-58760-right.js"></script></div>



Cám ơn Anh "Giarô" đã giúp dunghennessy hoàn thành bài viết này.

▀▄▀▄▀▄dunghennessy.blogspot.com▄▀▄▀▄▀

More about →

TẠO NÚT BẤM "DOWNLOAD" CHO WEB/BLOG

Trên các trang Web/Blog chia sẻ, các bạn thường thấy họ cho download một số phần mềm, tiện ích... thông qua các nút bấm "DOWNLOAD" hoặc xem thử thông qua nút "DEMO". Tuỳ theo các trang Web/Blog mà các nút bấm này khá đẹp, có hiệu ứng động, khi rê chuột vào nó sẽ thành hình khác hoặc chữ Download sẽ biến thành màu khác...

Để làm việc này, các bạn phải có một số chương trình (phần mềm) hỗ trợ như là: Photoshop hoặc các phần mềm tạo nút bấm chuyên nghiệp...

Trong giới hạn bài viết này, tôi chia sẻ với các bạn cách tạo nút bấm "DOWNLOAD" có hiệu ứng động (thay đổi hình hoặc chữ Download đổi màu khi rê chuột vào) mà không cần phải nhờ phần mềm hỗ trợ nào hết chỉ cần bạn dán code và thay đổi link ảnh vào mà thôi...

Bạn bấm vào "Xem thử" để xem vài mẫu nút bấm "DOWNLOAD" nha.

Xem thử

Khi đang soạn bài bình thường, muốn nút bấm "DOWNLOAD" này xuất hiện ở đâu, bạn chỉ cần bấm vào thẻ HTML ở phía trên khung soạn thảo để sang chế độ HTML rồi dán code phía dưới vào, sau đó bấm thẻ VIẾT để trở về chế độ soạn thảo bài viết tiếp tục.

 Đây là code của nó:

<a href="http://dunghennessy.blogspot.com/" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitiYTUtoAhekuuXVmJxIq5mGQKKtluZHFrFXul3kiRo_bpxCRkvTCSgzkg_GY5yGYO6C56sVkf6JliuBhZREqNdK5rvIjO3nujIXM2mW5AB0oR6ciZgN3QR5SuCtDwHCINcS1M1U4JA-g/s1600/cooltext655930958.png';" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1NzZYKuY7N-RYv6tIVIJ1VpTtABqCaWYU5YH0DgQI0aCbPd4F8L0KIPAcQg-hDqrUDYT-6ZZDbplXREtYYyHtax2SPJCnRiPZikZz8Wlno_88YjQna1Ow1tKrUik9vEsJ_jgWaOJhhyphenhyphenI/s1600/cooltext655930958MouseOver.png';" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitiYTUtoAhekuuXVmJxIq5mGQKKtluZHFrFXul3kiRo_bpxCRkvTCSgzkg_GY5yGYO6C56sVkf6JliuBhZREqNdK5rvIjO3nujIXM2mW5AB0oR6ciZgN3QR5SuCtDwHCINcS1M1U4JA-g/s1600/cooltext655930958.png" /></a>

Bây giờ, bạn thay đổi các dòng lệnh màu đỏ, xanh, vàng để phù hợp với blog của mình, trong đó:

* Link màu đỏ: là link mà mình muốn nút bấm liên kết đến (có nghĩa là khi bấm vào nút này sẽ đưa bạn đến link download phần mềm nào đó để download).

* Link màu xanh (2 link): đây là hình ảnh ban đầu của nút bấm khi chưa rê chuột vào.

* Link màu vàng: đây là hình ảnh sẽ thay đổi khi rê chuột vào. 

Bạn chưa có ảnh nút bấm "DOWNLOAD"???. Mời các bạn bấm vào hình phía dưới để tham khảo một số mẫu nút bấm, nếu thích thì tải về upload lên lấy link để thay vào.

Xem và tải nút "DOWNLOAD"

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

More about →

TẠO NÚT "BACK TO TOP" CHO BLOGGER

Để tạo điều kiện thuận lợi cho khách tham quan khi đọc xong bài có thể quay về đầu trang nhanh chóng, bạn phải tạo cho Blog một nút bấm phía dưới cuối trang, khi bấm vào nút này lập tức sẽ đưa khách "về đầu trang".

Đầu tiên, bạn đăng nhập vào blog, chọn Thiết kế > Thêm tiện ích > Thêm HTML/Javacript rồi dán tòan bộ code dưới đây vào ô trống phía dưới, sau cùng bấm Lưu



<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf5MWgojh3hv6T3eY4LtE2kTjmzn9EnZmMxWHI3bJtU4sN-JlqwGlz9FvQPEAcFm4EntkdAsspMXnUV22Uc7Gh2ZdeOq-ze8K7FnBMO9qoEQuzmsktG9UvRfBAlHG365oCz1OJM4n3KMZW/s1600/vers-haut-icone-7320-48.png" /></a>

Bạn có thể thay đổi hàng chữ "Back to Top" thành hàng chữ nào mình thích (thí dụ: về đầu trang, lên trên...), nếu không thích hình mũi tên này, bạn cũng có thể thay đổi đường link "http:....png" bằng đường link hình của mình. (bạn VÀO ĐÂY để kiếm thêm một số hình mũi tên, thích cái nào thì tải về upload lên, rồi lấy link hình thay vào)

More about →