Saturday, January 2, 2021
  • Home
    • Donate
    • Liên Hệ Tân Hồng IT
    • Yêu Cầu Phần Mềm, Thủ Thuật
    • Hướng dẫn tải File
  • Tài Liệu
  • Phần Mềm
  • Công cụ
  • Thủ Thuật
  • Download
  • Giải trí
  • Kiến thức
Tân Hồng IT
  • Home
    • Liên Hệ TanHongIT – các bạn có thể liên hệ với TanHongIT.Net Tại Đây
    • Donate – TanHongIT.Net
    • Yêu Cầu Phần Mềm, Thủ Thuật
    • Hướng dẫn tải File, phần mềm và các loại tài liệu khác trên TanHongIT.Net
  • Orther
    • Tool Online
      • Test Code Online
      • EnCoder SVG
      • HTML Converter
    • ShareVui – Online Movies
  • Tài Liệu
  • Code
    • PHP
    • Java
    • JavaScript
  • Kiến thức
  • Phần Mềm
  • Công cụ
  • Thủ Thuật
  • Download
  • Giải trí
No Result
View All Result
  • Home
    • Liên Hệ TanHongIT – các bạn có thể liên hệ với TanHongIT.Net Tại Đây
    • Donate – TanHongIT.Net
    • Yêu Cầu Phần Mềm, Thủ Thuật
    • Hướng dẫn tải File, phần mềm và các loại tài liệu khác trên TanHongIT.Net
  • Orther
    • Tool Online
      • Test Code Online
      • EnCoder SVG
      • HTML Converter
    • ShareVui – Online Movies
  • Tài Liệu
  • Code
    • PHP
    • Java
    • JavaScript
  • Kiến thức
  • Phần Mềm
  • Công cụ
  • Thủ Thuật
  • Download
  • Giải trí
No Result
View All Result
Tân Hồng IT
No Result
View All Result
Home blogger

Code Button tạo nút Demo và Download cực đẹp cho Blogspot / Blogger

Tân Hồng by Tân Hồng
19/05/2018
in blogger, Thủ Thuật, thủ thuật blogspot
Reading Time: 5Phút đọc
A A
0
QUẢNG CÁO

Trên Internet hiện nay có rất nhiều blog làm về mảng game, phần mềm, chia sẻ tài liệu, template thì ta sẽ thường chia sẻ những đường link vào bài viết để người dùng download hay xem demo trước. 

Để làm nổi bật các đường link này chúng ta nên kết hợp với các Button để người dùng dễ dàng nhìn thấy và giúp trang trí thêm để làm đẹp cho blog của bạn nhé.

Và bài viết này mình xin chia sẻ cho các bạn đoạn code tạo nút Demo Và Download đẹp cho Blogspot / Blogger và hướng dẫn chèn code vào blog luôn nhé.

Hướng dẫn tạo nút Demo và Download đẹp cho Blogspot / Blogger.

Đầu tiên các bạn truy cập vào Blogger. Sau đó nhấn vào Chủ Đề rồi nhấn Chỉnh Sửa HTML.


Bước tiếp theo bạn kiểm tra xem template của bạn có đoạn code bên dưới chưa, nếu chưa thì chèn thêm nó vào trước thẻ đóng </head> (Mẹo tìm nhanh bằng cách nhấn Ctrl + F sau đó nhập jquery.min.js để tìm nha)

<script src=’//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js’/>


Tiếp đến bạn tìm đến trước thẻ đóng ]]></b:skin> hoặc </style> chèn đoạn Code bên dưới vào vào trước hai thẻ trên và bấm Save (Lưu chủ đề).

#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}

Và cuối cùng: Khi bạn viết bài viết, để chèn nút Demo và Download thì bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào tương ứng nơi bạn muốn hiện:

<div id="wrap">
<a href="https://tanhongit.net" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="https://tanhongit.net/" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>

Lưu ý: Các bạn thay link https://tanhongit.net/ thành link các bạn muốn nhé!

Mong Bài viết thủ thuật này sẽ giúp ích được cho các bạn.

 

via henrydoan
CHÚC CÁC BẠN THÀNH CÔNG NHÉ
5 / 5 ( 2 votes )
Tags: bloggerThủ Thuậtthủ thuật blogspot
ShareTweetSend
Bài viết trước

Nhạc Liên Khúc Tuấn Vũ 1-2-3-4-5 Tải Miễn Phí Chất Lượng Cao Lossless

Bài tiếp theo

Anhdv Boot 2018 – Hướng dẫn Tạo USB BOOT cứu hộ máy tính đa năng hỗ trợ chuẩn UEFI – Legacy

Tân Hồng

Tân Hồng

Không có một lời khuyên hay câu triết lý nào có đủ khả năng để áp đặt vào mọi hoàn cảnh trong cuộc sống của chúng ta cả. Nó luôn có những ngoại lệ riêng biệt...

Liên quan Posts

hinh thu nho cua tab chrome
Internet-mạng

Bật xem trước hình thu nhỏ của Tab trong Google Chrome

30/10/2019
adobe animate cc 2020
Adobe

Download Adobe Animate CC 2020 Hiệu ứng tương tác cho website chuyên nghiệp

29/10/2019
Khóa Học An Ninh Mạng – Ứng Dụng Python Và Web (Cyber Security – Python and Web)
Internet-mạng

Khóa Học An Ninh Mạng – Ứng Dụng Python Và Web (Cyber Security – Python and Web)

08/09/2019 - Updated on 24/09/2019
Bộ Video Hướng Dẫn Tăng Tốc Máy Tính Của Bạn (Speeding Up Your PC)
Kiến thức

Bộ Video Hướng Dẫn Tăng Tốc Máy Tính Của Bạn (Speeding Up Your PC)

28/08/2019 - Updated on 23/09/2019
chuyen doi giua raid sang ahci
Sửa Chữa Laptop

Cách chuyển đổi SATA Mode, bật AHCI, chuyển đổi giữa RAID sang AHCI, IDE sang AHCI hoặc ngược lại trong Windows 10, 8.1, 8, 7

26/07/2019
download extension dark mode cho zalo tren may tinh
Internet-mạng

Hướng dẫn tạo Dark Mode cho Zalo Phiên Bản Chat Web Trên Máy Tính (Extension Dark Mode Zalo)

25/07/2019
tong hop top cac trang rut gon link kiem tien online
Affiliate Marketing

Tổng Hợp Top Các Trang Rút Gọn Link kiếm Tiền Online Tốt Nhất 2019

24/07/2019
Download Anhdv Boot 2019 Và Tạo USB BOOT cứu hộ máy tính đa năng
Boot

Download Anhdv Boot 2019 – Tạo USB BOOT cứu hộ máy tính đa năng

10/05/2019 - Updated on 21/08/2019
Bài tiếp theo
Anhdv Boot 2018

Anhdv Boot 2018 - Hướng dẫn Tạo USB BOOT cứu hộ máy tính đa năng hỗ trợ chuẩn UEFI - Legacy

Tải EVKey - Bộ gõ tiếng việt mới hoàn hảo - Thay thế Unikey - Khắc phục lỗi dấu gợi ý

Chia sẻ Khoá học phân tích kỹ thuật tổng thể và thị trường chứng khoán - Swing Trading 101

Chia sẻ Khoá học HTML5 + CSS3 + Thiết kế web Bootstrap dễ dàng cho người mới bắt đầu - Tải Free

0 0 vote
Article Rating
Subscribe
Đăng nhập
Thông báo về
guest
guest
0 Comments
Inline Feedbacks
View all comments
  • Trending
  • Comments
  • Latest
Tải Và Cách Crack IDM 6.32

Tải Và Cách Crack IDM 6.35 Build 10 Vĩnh Viễn Mới Nhất 2019 – Không Báo Fake Serial [UPDATE]

27/11/2018 - Updated on 14/11/2019
IDM Full Toolkit - Crack IDM Tiện Lợi - Không Báo Fake Serial

IDM Full Toolkit – Crack IDM Tiện Lợi – Không Báo Fake Serial

10/08/2018 - Updated on 14/11/2019
Download DLC Boot 2019 v3.6 - Bộ Công Cụ Tạo USB Boot Đa Năng Cứu Hộ Máy Tính, PC

Download DLC Boot 2019 v3.6 – Bộ Công Cụ Tạo USB Boot Đa Năng Cứu Hộ Máy Tính, PC

15/04/2019 - Updated on 21/08/2019
Download Và Cách Crack Full IDM 6.33

Download Và Cách Crack Full IDM 6.35 Build 10 Vĩnh Viễn Mới Nhất 2019 – Không Báo Fake Serial [UPDATE]

07/05/2019 - Updated on 14/11/2019

Cách đổi trạng thái biểu tượng cảm xúc Angry thành “Dislike ” trên Facebook

124

Chia sẻ Khoá học Adobe InDesign CC – Hướng dẫn đầy đủ cho bạn về InDesign

32

Chia sẻ khóa học Cách giải khối Rubik 3×3 cho người mới bắt đầu

26

[UDEMY] Chia sẻ Khoá học 15 cách học tiếng anh – 15 Ways To Learn English

24
phuong thuc get post trong php

Bài 13: Phương thức GET và POST trong PHP

06/02/2020
chuoi string va cac ham xu ly trong php

Bài 12: Chuỗi (String) Và Các Hàm Xử Lý Chuỗi Trong PHP

25/01/2020
cac ham xu ly mang php

Bài 11: Các hàm xử lý mảng (Array) trong PHP

19/01/2020 - Updated on 21/01/2020
mang array trong php

Bài 10: Mảng (Array) Trong PHP

16/01/2020

Bài Viết Mới

phuong thuc get post trong php

Bài 13: Phương thức GET và POST trong PHP

06/02/2020
chuoi string va cac ham xu ly trong php

Bài 12: Chuỗi (String) Và Các Hàm Xử Lý Chuỗi Trong PHP

25/01/2020
cac ham xu ly mang php

Bài 11: Các hàm xử lý mảng (Array) trong PHP

19/01/2020 - Updated on 21/01/2020
mang array trong php

Bài 10: Mảng (Array) Trong PHP

16/01/2020
code web nam moi 2020

Share Code Đếm Ngược Chào Mừng Năm Mới 2020 Với Hiệu Ứng Tuyệt Đẹp

14/01/2020
ham function trong php

Bài 9: Hàm (Function) Trong PHP

14/01/2020

Mới Cập Nhật

phuong thuc get post trong php

Bài 13: Phương thức GET và POST trong PHP

06/02/2020
chuoi string va cac ham xu ly trong php

Bài 12: Chuỗi (String) Và Các Hàm Xử Lý Chuỗi Trong PHP

25/01/2020
cac kieu du lieu php

Bài 3: Những kiểu dữ liệu trong PHP

07/12/2019 - Updated on 25/01/2020
cac ham xu ly mang php

Bài 11: Các hàm xử lý mảng (Array) trong PHP

19/01/2020 - Updated on 21/01/2020
mang array trong php

Bài 10: Mảng (Array) Trong PHP

16/01/2020
code web nam moi 2020

Share Code Đếm Ngược Chào Mừng Năm Mới 2020 Với Hiệu Ứng Tuyệt Đẹp

14/01/2020

Tân Hồng IT là Trang Chia sẻ Kiến Thức, Tài Liệu, Khóa Học, Công Nghệ Thông Tin, Phần Mềm, Thủ Thuật, Tiện Ích Máy Tính

DMCA.com Protection Status

Donate – Xin Ủng Hộ Đóng Góp

DONATE
Hung1001 | LinuxTeamVN
  • About
  • Donate
  • Contact
  • Download File
  • Request
  • Other

© 2019 Facebook - Chia sẻ Kiến Thức, Công Nghệ Thông Tin , Phần Mềm, Thủ Thuật, Tiện Ích Máy Tính Tân Hồng IT.

No Result
View All Result
  • Home
    • Donate
    • Liên Hệ Tân Hồng IT
    • Yêu Cầu Phần Mềm, Thủ Thuật
    • Hướng dẫn tải File
  • Tài Liệu
  • Phần Mềm
  • Công cụ
  • Thủ Thuật
  • Download
  • Giải trí
  • Kiến thức

© 2019 Facebook - Chia sẻ Kiến Thức, Công Nghệ Thông Tin , Phần Mềm, Thủ Thuật, Tiện Ích Máy Tính Tân Hồng IT.

sponsored
wpDiscuz
0
0
Would love your thoughts, please comment.x
()
x
| Reply