Cách tạo nút Demo và Download cho Blogspot

Để tạo nút Demo (xem trước) và nút download trong bài viết Blogspot xin mời các bạn tham khảo bài viết dưới đây

Hướng dẫn cách tạo Demo và nút Download cho Blogger – Blogspot. Đối với nhiều 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. Để tạo hai nút này hãy làm theo hướng dẫn dưới đây.
Code tạo nút Demo và Download đẹp cho Blogspot / Blogger

Các bước tạo nút Demo và Download cho Blogspot / Blogger

1. Đăng nhập vào Blogger
2. Ở menu bên trái chọn Chủ đề ⇒ Chọn Chỉnh sửa HTML
3. Thêm mã dưới đây vào trước thẻ </head>
[<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>]
4. Tìm đến trước thẻ đóng ]]></b:skin> hoặc </style> chèn đoạn css bên dưới vào.
[#wrap {margin: 20px auto;text-align: center;}
#wrap br {display: none;}
.mk-slide, .mk-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;}
.mk-slide2 {border: 2px solid #efa666;}
.mk-slide:hover {background-color: #0099cc;}
.mk-slide2:hover {background-color: #efa666;}
.mk-slide:hover span.circle, .mk-slide2:hover span.circle2 {left: 100%;margin-left: -45px;background-color: #fdfdfd;color: #0099cc;}
.mk-slide2:hover span.circle2 {color: #efa666;}
.mk-slide:hover span.title, .mk-slide2:hover span.title2 {left: 40px;opacity: 0;}
.mk-slide:hover span.title-hover, .mk-slide2:hover span.title-hover2 {opacity: 1;left: 40px;}
.mk-slide span.circle, .mk-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%;}
.mk-slide2 span.circle2 {background-color: #efa666;}
.mk-slide span.title,
.mk-slide span.title-hover, .mk-slide2 span.title2,
.mk-slide2 span.title-hover2 {position: absolute;left: 60px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #30abd5;transition: .5s;}
.mk-slide2 span.title2,
.mk-slide2 span.title-hover2 {color: #efa666;left: 80px;}
.mk-slide span.title-hover, .mk-slide2 span.title-hover2 {left: 80px;opacity: 0;}
.mk-slide span.title-hover, .mk-slide2 span.title-hover2 {color: #fff;}]
4. Lưu Chủ đề.
5. Khi viết bài viết, để chèn nút DemoDownload thì bạn chuyển qua chế độ HTML sau đó dán đoạn HTML sau vào vị trí bạn muốn hiển thị:
[<div id="wrap">
<a class="mk-slide" href="https://cnttls.blogspot.com/" 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 class="mk-slide2" href="https://cnttls.blogspot.com/" 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>]
6. Cuối cùng hãy Xuất bản bài đăng và xem kết quả

BÌNH LUẬN

Tên

After Effects,1,Blogger,33,blogspot,9,CNTT,30,Code Blog,1,Facebook,3,Google,2,Google Drive,1,Kỹ năng Bootstrap,1,Kỹ năng Dreamweaver,1,Kỹ năng Excel,7,Kỹ năng Google Driver,1,Kỹ năng IELTS,6,Kỹ năng Illustrator,1,Kỹ năng lập trình,1,Kỹ năng lập trình hướng đối tượng Typescript,1,Kỹ năng Lumion 3D,1,Kỹ năng nói tiếng Anh,1,Kỹ năng Powerpoint,1,Kỹ năng thiết kế,1,Kỹ năng TOEIC,1,Kỹ năng Unity3D,1,Kỹ năng Word,1,Kỹ năng xin việc - viết CV,1,Microsoft 365,1,Microsoft Excel,4,Microsoft Powerpoint,1,Microsoft Word,2,SEO,1,Seo Blogger,6,SEO Blogspot,1,tao-blogspot-chuyen-nghiep,1,Template Blogger,6,Template Blogspot,1,Template MagOne,1,Template Wordpress,1,Thủ thuật Blogger,27,Thủ thuật Blogspot,1,Thủ thuật máy tính,1,Thủ thuật Wordpress,1,Tin học văn phòng,9,VIDEO KHÓA HỌC,6,Webmaster,2,Windows,2,Wordpress,2,Youtube,1,
ltr
item
Chia sẻ kiến thức - Thủ thuật máy tính: Cách tạo nút Demo và Download cho Blogspot
Cách tạo nút Demo và Download cho Blogspot
Để tạo nút Demo (xem trước) và nút download trong bài viết Blogspot xin mời các bạn tham khảo bài viết dưới đây
https://4.bp.blogspot.com/-iEXXDUGfvLM/W5qGIMVlBtI/AAAAAAAACiU/QLdoPZ24Rokay2MnU-xoqCJ-tUq8YumaQCLcBGAs/s400/code-tao-nut-demo-va-download-dep-cho-blogspot-blogger.gif
https://4.bp.blogspot.com/-iEXXDUGfvLM/W5qGIMVlBtI/AAAAAAAACiU/QLdoPZ24Rokay2MnU-xoqCJ-tUq8YumaQCLcBGAs/s72-c/code-tao-nut-demo-va-download-dep-cho-blogspot-blogger.gif
Chia sẻ kiến thức - Thủ thuật máy tính
https://blog.vinhls.com/2018/10/cach-tao-nut-demo-va-download-cho-blogspot.html
https://blog.vinhls.com/
https://blog.vinhls.com/
https://blog.vinhls.com/2018/10/cach-tao-nut-demo-va-download-cho-blogspot.html
true
987137131202951109
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 Không trả lời Xóa Bởi Home PAGES POSTS Xem tất cả ĐỀ XUẤT CHO BẠN LABEL ARCHIVE SEARCH TẤT CẢ NHỮNG 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 Trở lại trang chủ Sunday Monday Tuesday Wednesday Thursday Friday Saturday 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 xong 1 phút trước $$1$$ minutes ago 1 giờ trước $$1$$ hours ago Hôm qua $$1$$ days ago $$1$$ weeks ago nhiều hơn 5 tuần trước Người theo dõi Theo dõi THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Sao chép tất cả mã Chọn tất cả mã Tất cả các mã đã được sao chép vào clipboard của bạn 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