Tạo nút Demo, Download, Buy Now, Contact độc đáo cho Blogspot
DEMO
Bước 1: Vào Blog => Chủ đề => Chỉnh sửa HTML => Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin> => Dán đoạn code dưới đây vào phía trên thẻ </b:skin> => Lưu lại chủ đề.
.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: Vào Blog => Chủ đề => Chỉnh sửa HTML => Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body> => Dán đoạn code dưới đây vào trên thẻ </body> => Lưu lại chủ đề.
<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: Vào Blog => Chủ đề => Chỉnh sửa HTML => Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head> => Dán đoạn code dưới đây vào phía trên thẻ </head> => Lưu lại chủ đề.
<script src='https://dl.dropboxusercontent.com/s/bzshz3mw3eonw2x/0-jquery-3.2.1.js'></script>
Bước 4: Chèn trực tiếp đoạn code bên dưới vào phần HTML của trang, bài viết Blogspot.
<div style="text-align: center;">
<ul class="button">
<li><a class="demobtn ripplelink" href="Link đường dẫn">DEMO</a></li>
<li><a class="downloadbtn ripplelink" href="Link đường dẫn">DOWNLOAD</a></li>
<li><a class="buynowbtn ripplelink" href="Link đường dẫn">BUY NOW</a></li>
<li><a class="contactbtn ripplelink" href="Link đường dẫn">CONTACT</a></li>
</ul>
</div>
<div class="clear"></div>
