cach tao nut download cho blogspot

Cách tạo nút Demo và Download đẹp cho Blogspot (Blogger)

Khi viết bài cho blog đôi khi chúng ta phải cho phép khác truy cập tải một file nào đó. Thường thì chúng ta chỉ cần dẫn link tải file đó là được tuy nhiên nếu để mặc định rất khó nhìn. Bởi vậy, hôm nay mình sẽ hướng dẫn các bạn tạo nút Downloadnút Demo cho Blogspot.

Demo nút Download và Demo đẹp

Các bạn có thể xem ví dụ trực tiếp tại đây. Hoặc xem ảnh bên dưới:

tao nut download cho blogspto

Cách tạo nút Download đẹp cho Blogspot

Nút Download cho Blogspot này được viết từ CSS, HTML và jQuery. Để thêm nút Download trước tiên các bạn cần thêm mã CSS và jQuery vào template. Đầu tiên các bạn vào Blogspot chọn Chủ đề rồi chọn tiếp Chỉnh sửa HTML rồi thêm mã CSS dưới đây vào trước mã ]]></b:skin> hoặc </style>.


/* TruongKen Chấm 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)}}

Lưu ý: Code trên nếu bạn nào có ít kiến thức về CSS thì có thể tùy ý thay đổi màu sắc hiển thị. Nếu ai không biết thì cứ thế copy tất vào.

Sau đó các bạn thêm mã jQuery 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 đó chọn Lưu chủ đề để lưu lại các thay đổi. Bây giờ mỗi khi viết bài bạn chỉ cần thêm đoạn mã  bên dưới vào nơi muốn hiển thị nút Demo và Download. Lưu ý: sửa dấu # thành link tải tệp tin và link demo nha.


<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>

Như vậy là mình đã hướng dẫn các bạn cách tạo nút Demo và Download cho Blogspot chỉ với mấy bước đơn giản. Chúc các bạn thành công!

6

Không có Bình luận

Viết bình luận