Share code tạo nút Demo và Download đẹp cho Blogspot

Hầu như các blog hiện nay viết theo hướng "Share All", do vậy việc chia sẻ file là không thể thiếu. Hôm nay mình sẽ hướng dẫn các bạn thêm nút Demo và Download đẹp cho Blogspot bằng HTML, CSS và jQuery.

Hướng dẫn tạo nút Demo và Download trên Blogspot

Ảnh phía trên là demo, tuy nhiên thực tế còn đẹp hơn vậy bởi khi bạn trỏ chuột vào nó sẽ tạo gợn sóng rất đẹp. Bây giờ bắt đầu thực hiện 3 bước đơn giản sau để thêm nút Download này vào bài viết Blogspot nha.

Bước 1:

Đầu tiên các bạn vào Blogger chọn "Chủ đề" rồi chọn "Chỉnh sửa HTML" sau đó thêm đoạn code CSS dưới đây vào trước mã ]]></b:skin> hoặc </style>

/* Code Share By TruongKen.Net */
#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#e67e22}
.tombolripple.tdua{background:#3498db}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
/* END CODE */

Các bạn có thể tự thay đổi lại màu sắc cho phù hợp với sở thích của mình nha.

Bước 2:

Vẫn ở mục chỉnh sửa ở bước 1, chúng ta sao chép tiếp mã dưới đây vào trước thẻ </body>

<script type="text/javascript">
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>

Sau đó các bạn lưu lại là xong phần code trong template.

Bước 3:

Cuối cùng mỗi khi viết bài viết, các bạn muốn thêm nút demo và download vào đâu thì sử dụng đoạn code dưới đây để hiển thị

<div id="wrap">
  <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>
  <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
</div>

Các bạn thay dấu "#" bằng liên kết đến Demo và Download. Nên lưu code này vào đâu đó vì mỗi khi cần dùng ta phải sử dụng nó.

Kết luận

Như vậy, chỉ với ba bước đơn giản các bạn sẽ có ngay nút Demo và Download đẹp cho các bài viết của mình. Đây là demo mình làm thử các bạn có thể test: Demo. Chúc các bạn thành công!