Xem Thêm các bài viết:

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 Download và nú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:

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


<!-- Tạo nút Demo và Download cho bài viết STAR -->
#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)}}
<!-- Tạo nút Demo và Download cho bài viết END -->


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

<!-- Tạo nút Demo và Download cho bài viết STAR -->
<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>

<!-- Tạo nút Demo và Download cho bài viết END -->


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!

Share on Google Plus

About NGOCHUYGSM