Với các blog làm về mảng game, phần mềm, chia sẻ tài liệu... thì thường chia sẻ những đường link để người dùng download hay xem demo. Để 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à làm đẹp blog của bạn.
Bộ code này dùng để làm button bằng CSS3 đẹp tuyệt. Khi bạn đưa trỏ chuột vào button thì sẽ thấy hiệu ứng rất hay. Bộ code này đi kèm với Fontawesome, với bộ icon đa dạng và phong phú giúp bạn có thể tùy chỉnh icon tùy thích.
Bước 1: Truy cập vào Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Thêm thư viện FontAwesome vào bằng cách thêm đoạn code này vào sau thẻ <head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/
Nếu blogger của bạn có đoạn tương tự thì có thể bỏ qua hoặc thay bằng đoạn code trên
Bước 3: Thêm đoạn CSS này trước thẻ đóng ]]></b:skin> hoặc </style>
- Bạn có thể thay thế chỗ content bằng mã của icon bạn thích trong thư viện FontAwesome: http://fontawesome.io/icons/
- Mình đã liệt kê sẵn 1 số mã màu đẹp hay dùng: blue, green, red, orange, purple, yellow, pink, grey, turquoise, midnight, asbestos, dark.
- Và thay thế tên demo-button, download-button,buy-button bằng tên mà bạn thích khi bạn thêm icon vào.
Bước 4: Save Template (Lưu mẫu) lại.
Bước 5: Khi viết bài viết, để chèn nút Demo, Download, Xem mẫu, Tải về, Mua ngay thì bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào tương ứng.
Bạn có thể thay đổi màu theo mã màu ở trên
Lưu ý: Thay đường link https://www.kenh28.com/ thành đường link Download của bạn.
Bộ code này dùng để làm button bằng CSS3 đẹp tuyệt. Khi bạn đưa trỏ chuột vào button thì sẽ thấy hiệu ứng rất hay. Bộ code này đi kèm với Fontawesome, với bộ icon đa dạng và phong phú giúp bạn có thể tùy chỉnh icon tùy thích.
Bước 1: Truy cập vào Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Thêm thư viện FontAwesome vào bằng cách thêm đoạn code này vào sau thẻ <head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/
Nếu blogger của bạn có đoạn tương tự thì có thể bỏ qua hoặc thay bằng đoạn code trên
Bước 3: Thêm đoạn CSS này trước thẻ đóng ]]></b:skin> hoặc </style>
a:active{position:relative;top:1px;left:1px}
#all-button{text-align:center}
#all-button a{padding:10px 20px;color:#fff;text-align:center;border:0;cursor:pointer;border-radius:3px;display:inline-block;font-weight:500;-webkit-box-shadow:inset 0 -4px rgba(0,0,0,0.15);box-shadow:inset 0 -4px rgba(0,0,0,0.15);color:#fff;max-width:220px;line-height:30px;font-size:16px;text-transform: uppercase;margin:10px}
#all-button a:hover{-webkit-box-shadow:inset 0 -54px rgba(0,0,0,0.15);box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff}
.demo-button:before{content:'\f1d9';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.download-button:before{content:'\f019';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.buy-button:before{content:'\f07a';font-family:fontawesome;display:inline-block;margin:0 8px 3px 0;vertical-align:middle}
.blue{background:#3498db;}
.green{background:#2ecc71}
.red{background:#e74c3c}
.orange{background:#e8930c}
.purple{background:#9b59b6}
.yellow{background:#FFD600}
.pink{background:#F889EB}
.grey{background:#bdc3c7}
.turquoise{background:#1abc9c}
.midnight{background:#2c3e50}
.asbestos{background:#6d7b7c}
.dark{background:#454545}
- Bạn có thể thay thế chỗ content bằng mã của icon bạn thích trong thư viện FontAwesome: http://fontawesome.io/icons/
- Mình đã liệt kê sẵn 1 số mã màu đẹp hay dùng: blue, green, red, orange, purple, yellow, pink, grey, turquoise, midnight, asbestos, dark.
- Và thay thế tên demo-button, download-button,buy-button bằng tên mà bạn thích khi bạn thêm icon vào.
Bước 4: Save Template (Lưu mẫu) lại.
Bước 5: Khi viết bài viết, để chèn nút Demo, Download, Xem mẫu, Tải về, Mua ngay thì bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào tương ứng.
Bạn có thể thay đổi màu theo mã màu ở trên
Lưu ý: Thay đường link https://www.kenh28.com/ thành đường link Download của bạn.
<div id="all-button"> <a href="https://www.kenh28.com/" class="green demo-button" target="_blank" rel="nofollow">Xem mẫu</a><a href="https://www.kenh28.com/" class="orange download-button" target="_blank" rel="nofollow">Tải về</a><a href="https://www.kenh28.com/" class="blue buy-button" target="_blank" rel="nofollow">Mua ngay</a></div>
