Tạo nút Demo, Download, Buy Now và Liên hệ đẹp cho Blogspot (Blogger)

10:07 CH

#1

Demo, Download, Buy Now và Liên hệ là những nút bấm khá phổ biến đối với các blog chia sẻ thủ thuật. Hôm nay sửa chữa điện thoại sẽ chia sẻ với các bạn Tạo nút Demo, Download, Buy Now và Liên hệ cực đẹp cho Blogspot (Blogger) phong cách Material Design với hiệu ứng gợn sóng (Ripple) độc đáo.


Tạo nút Demo, Download, Buy Now và Liên hệ đẹp cho Blogspot (Blogger).

Bước 1: Vào Chủ đề > Chỉnh sử HTML, và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demobtn {display:inline-block;position:relative;font-family:'Source Sans Pro', Helvetica, sans-serif;font-size:14px;margin:0 3px;background:#3498db;color:#fff!important;padding:10px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.demobtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.demobtn:before {content:'\f1d8';display:inline-block;vertical-align:top;margin-right:10px;margin-top:-5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.downloadbtn {display:inline-block;position:relative;font-family:'Source Sans Pro', Helvetica, sans-serif;font-size:14px;margin:0 3px;background:#fc4f3f;color:#fff!important;padding:10px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.downloadbtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.downloadbtn:before {content:'\f019';display:inline-block;vertical-align:top;margin-right:10px;margin-top:-5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.buynowbtn {display:inline-block;position:relative;font-family:'Source Sans Pro', Helvetica, sans-serif;font-size:14px;margin:0 3px;background:#71DB00;color:#fff!important;padding:10px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.buynowbtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.buynowbtn:before {content:'\f07a';display:inline-block;vertical-align:top;margin-right:10px;margin-top:-5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.contactbtn {display:inline-block;position:relative;font-family:'Source Sans Pro', Helvetica, sans-serif;font-size:14px;margin:0 3px;background:#ecac00;color:#fff!important;padding:10px;text-transform:uppercase;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.contactbtn:hover {opacity: .8;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.contactbtn:before {content:'\f003';display:inline-block;vertical-align:top;margin-right:10px;margin-top:-5px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.ripplelink{position:relative;overflow:hidden;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;z-index:0}
.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.animate{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}
@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}

Bước 2: Tìm đến thẻ </body> và dán đoạn javascript sau đây vào trước thẻ đó.

<script type='text/javascript'>
//<![CDATA[
$(function(){var t,i,s,e;$(".ripplelink").click(function(h){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(i=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:i,width:i})),s=h.pageX-$(this).offset().left-t.width()/2,e=h.pageY-$(this).offset().top-t.height()/2,t.css({top:e+"px",left:s+"px"}).addClass("animate")})});
//]]>
</script>

Bước 3: Thêm thư viện jQuery bên dưới vào trước thẻ </head> nếu blog của bạn chưa có.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

Bước 4: Khi đăng bài hãy viết theo cú pháp bên dưới.

<div style="text-align: center;">
<ul class="button">
<li><a class="demobtn ripplelink" href="YOUR-LINK-HERE">DEMO</a></li>
<li><a class="downloadbtn ripplelink" href="YOUR-LINK-HERE">DOWNLOAD</a></li>
<li><a class="buynowbtn ripplelink" href="YOUR-LINK-HERE">BUY NOW</a></li>
<li><a class="contactbtn ripplelink" href="YOUR-LINK-HERE">CONTACT</a></li>
</ul>
</div>
<div class="clear"></div>

Từ khóa tìm kiếm: tạo nút download trong blogspot, code nút download, code tạo nút download, tạo nút xem thêm, code tạo nut download, code blogspot, tao nut download.

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