Tạo nút nhấn tùy thích cho Blog

Chúng ta thường hay thấy ở trên website, blog có những nút nhấn Demo hay Download rất đẹp kèm theo cả hiệu ứng di chuột nữa. Vậy tại sao ko ...



Chúng ta thường hay thấy ở trên website, blog có những nút nhấn Demo hay Download rất đẹp kèm theo cả hiệu ứng di chuột nữa. Vậy tại sao ko tự làm cho mình một nút để tiện sử dụng nhỉ? Blog của bạn sẽ sinh động hơn nhiều đấy.


Ah, view sources để lấy code, nhưng sao nó dài ngoàng thế này? Uhm, đúng là lấy code nhưng ta sẽ bỏ đoạn dài ngoàng đó vào một chỗ, khi nào cần dùng thì cầm tai nó kéo ra :D

Bạn nào muốn cái nút của mình thì làm theo dưới đây nhé. Các cao thủ đừng chém em nhé.
/*nutnhan*/
a.nutnhan{text-align:center;border:1px solid #202020;padding:5px 10px;line-height:50px;font-size:120%;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;text-decoration:none;background-color:#2E2E2E;color:#FFF;-moz-box-shadow:0 1px 2px #000,inset 0 1px 100px #202020;-webkit-box-shadow:0 1px 2px #000,inset 0 1px 100px #202020;box-shadow:0 1px 2px #000,inset 0 1px 100px #202020}
a.nutnhan:hover{background-color:#00BE98;-moz-box-shadow:0 1px 2px #00251E,inset 0 1px 100px #00251E;-webkit-box-shadow:0 1px 2px #00251E,inset 0 1px 100px #00251E;box-shadow:0 1px 2px #00251E,inset 0 1px 100px #00251E}

Các bác nhét đoạn code trên vào trước thẻ ]]></b:skin>   
 Đoạn code trên là mình view sources rồi coppy phần css về chỉnh sửa lại thông số màu sắc, kích thước cho phù hợp với Blog thôi chứ nhiều chỗ cũng chả hiểu nó để làm gì. Các bạn cũng sửa lại theo ý thích nhé.

Để lôi nó ra khi viết bài thì dùng đoạn html sau:

<div class="separator" style="clear: both; text-align: center;">
<a class="nutnhan" href="#" rel="nofollow" target="_blank">Xem Demo</a>&nbsp;
<a class="nutnhan" href="#" rel="nofollow" target="_blank">Tải Về</a></div>
 Dòng trên cùng đại loại là căn cho nó ở giữa trang
Dòng thứ 2 và 3 thay # bằng link demo và download

Muốn chèn thêm hình ảnh nữa thì các bạn cứ view sources cái nút nào mình thích rồi nghiêm cứu nha :D

BÌNH LUẬN

Tên

add-on,4,Affiliate,1,Blogger,12,Blogger Template,7,Blogger Tricks,5,Cs-cart,5,permalink,2,rehub,2,seo,2,Video,1,WooCommerce,4,Wordpress,27,Wordpress Plugin,22,Wordpress theme,16,yoast seo,1,
ltr
item
DATVNN.COM: Tạo nút nhấn tùy thích cho Blog
Tạo nút nhấn tùy thích cho Blog
https://4.bp.blogspot.com/-WcDNnbgaHow/V0NDkiCMKmI/AAAAAAAAALA/mnqxxTs72NkcuU663F1gh3sk7jZP-FS2ACLcB/s1600/tao-nut-nhan.png
https://4.bp.blogspot.com/-WcDNnbgaHow/V0NDkiCMKmI/AAAAAAAAALA/mnqxxTs72NkcuU663F1gh3sk7jZP-FS2ACLcB/s72-c/tao-nut-nhan.png
DATVNN.COM
https://www.datvnn.com/2016/05/tao-nut-nhan-tuy-thich-cho-blog.html
https://www.datvnn.com/
https://www.datvnn.com/
https://www.datvnn.com/2016/05/tao-nut-nhan-tuy-thich-cho-blog.html
true
2621903661232250745
UTF-8
Đã tải tất cả bài viết Không tìm thấy bài viết nào XEM TẤT CẢ Đọc thêm Trả lời Hủy trả lời Xóa Bởi Home TRANG BÀI VIẾT Xem Tất Cả ĐỀ NGHỊ CHO BẠN NHÃN LƯU TRỮ TÌM KIẾM TẤT CẢ BÀI VIẾT Không tìm thấy bất kỳ bài viết phù hợp với yêu cầu của bạn Về trang chủ Chủ nhật Thứ 2 Thứ 3 Thứ 4 Thứ 5 Thứ 6 Thứ 7 Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec vừa nãy 1 phút trước $$1$$ minutes ago 1 giờ trước $$1$$ hours ago Hôm qua $$1$$ days ago $$1$$ weeks ago hơn 5 tuần trước Followers Follow NỘI DUNG PREMIUM NÀY ĐƯỢC KHÓA BƯỚC 1: Chia sẻ lên mạng xã hội BƯỚC 2: Nhấp vào liên kết trên mạng xã hội của bạn Copy All Code Select All Code All codes were copied to your clipboard Không thể sao chép mã / văn bản, vui lòng nhấn [CTRL] + [C] (hoặc CMD + C với Mac) để sao chép Mục lục