Tạo nút Demo - Download với hiệu ứng hover màu sắc tuyệt đẹp cho blogspot Jumat, 26 Januari 2018
Với nhiều nút Demo, download được chia sẻ ở nhiều trang web thì hầu hết đều để nền cũng như hiệu ứng Hover khá quen thuộc. Chính vì thế, để tạo sự mới lạ, sự thu hút và tăng tính chuyên nghiệp cho blogspot thì hôm nay mình sẽ chia sẻ cho các bạn nút Demo - Download với hiệu ứng hover kèm theo màu sắc hài hòa tuyệt đẹp cho Blogspot ! Demo các bạn có thể xem ngay bên dưới.
Các bước thực hiện
Bước 1: Chèn đoạn CSS sau vào dưới thẻ <style> của Blogspot:
Bước 2: Chèn đoạn JS sau vào phía trên thẻ </head>:
Bước 3: Vì nó có nhiều hiệu ứng CSS nên khi chèn sẽ cần rất nhiều thẻ như SVG, RECT... Chính vì vậy mình đã dùng JS rút gọn như ở bước 2. Ở bước này là bước chèn vào nơi hiển thị. Khi chèn vào bài viết hay 1 trang, các bạn chuyển sang chế độ HTML rồi chèn đoạn JS sau vào nơi muốn hiển thị Button:
Url Demo, download là liên kết tới 1 Demo hay Download. VD: http://demo.linkthuthuat.com/2018/01/demo-button-khanhbloggerdotcom.html
title url là tiêu đề liên kết, bạn có thể không cần thêm nó !
VD CODE:
VD:
<script>
demotkn ("XEM DEMO", "http://demo.linkthuthuat.com/2018/01/demo-button-khanhbloggerdotcom.html");
</script>
Với một Button với nhiều hiệu ứng màu sắc hover như vậy nhưng khi chèn vào blog thì rất nhỏ gọn đúng không nào ! Mặc dù là JS nhưng nó KHÔNG hề ảnh hưởng đến tốc độ tải trang nhé !
Hi vọng với nút Demo - Download với hiệu ứng hover màu sắc tuyệt đẹp này sẽ giúp blog các bạn đẹp hơn như cái nút :v cũng như tăng tính chuyên nghiệp hơn !
Chúc các bạn thành công !
Bước 1: Chèn đoạn CSS sau vào dưới thẻ <style> của Blogspot:
.btn_tkn {
transition: .4s;
position: relative;
display: inline-block;
width: 160px;
font-size: 1em;
font-weight: bold;
line-height: 45px;
text-align: center;
text-transform: uppercase;
background-color: transparent;
cursor: pointer;
text-decoration:none!important;
font-family: 'Roboto', sans-serif;
font-weight:900;
font-size:15px;
letter-spacing: 0.045em;
}
.btn_tkn svg {
position: absolute;
top: 0;
left: 0;
}
.btn_tkn svg rect {
//stroke: #EC0033;
stroke-width: 2;
stroke-dasharray: 353, 0;
stroke-dashoffset: 0;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
}
.btn_tkn span{
background: rgb(255,130,130);
background: -moz-linear-gradient(left, rgba(255,130,130,1) 0%, rgba(225,120,237,1) 100%);
background: -webkit-linear-gradient(left, rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);
background: linear-gradient(to right, rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8282', endColorstr='#e178ed',GradientType=1 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.btn_tkn:hover svg rect {
stroke-width: 1;
stroke-dasharray: 123, 660;
stroke-dashoffset: 607;
}
.btn_tkn:hover {letter-spacing: 0.3em}
}
Bước 2: Chèn đoạn JS sau vào phía trên thẻ </head>:
<script>
function demotkn (textdemo, linkdemo, titlelinkdemo) {
document.write ("<center><a href='" + linkdemo + "' title='" + titlelinkdemo + "' target='_blank' class='btn_tkn'><svg width='160' height='45'><defs><linearGradient id='grad1'><stop offset='0%' stop-color='#FF8282'/><stop offset='100%' stop-color='#E178ED' /></linearGradient></defs><rect class='vxt_tkn_contetw3' x='5' y='5' rx='13' fill='none' stroke='url(#grad1)' width='150' height='35'></rect></svg><span>" + textdemo + "</span></a></center>");
}
</script>
Bước 3: Vì nó có nhiều hiệu ứng CSS nên khi chèn sẽ cần rất nhiều thẻ như SVG, RECT... Chính vì vậy mình đã dùng JS rút gọn như ở bước 2. Ở bước này là bước chèn vào nơi hiển thị. Khi chèn vào bài viết hay 1 trang, các bạn chuyển sang chế độ HTML rồi chèn đoạn JS sau vào nơi muốn hiển thị Button:
<script>Văn bản hiển thị đơn giản là text sẽ hiển thị của button, ví dụ: XEM DEMO chẳng hạn.
demotkn ("văn bản hiển thị", "url demo, download", "title url");
</script>
Url Demo, download là liên kết tới 1 Demo hay Download. VD: http://demo.linkthuthuat.com/2018/01/demo-button-khanhbloggerdotcom.html
title url là tiêu đề liên kết, bạn có thể không cần thêm nó !
VD CODE:
<script>Như đã nói thì đối với những bạn không quan tâm SEO thì có thể bỏ title URL, lúc đó code sẽ là:
demotkn ("XEM DEMO", "http://demo.linkthuthuat.com/2018/01/demo-button-khanhbloggerdotcom.html", "Tạo nút Demo - Download với hiệu ứng hover màu sắc tuyệt đẹp cho blogspot");
</script>
VD:
<script>
demotkn ("XEM DEMO", "http://demo.linkthuthuat.com/2018/01/demo-button-khanhbloggerdotcom.html");
</script>
Với một Button với nhiều hiệu ứng màu sắc hover như vậy nhưng khi chèn vào blog thì rất nhỏ gọn đúng không nào ! Mặc dù là JS nhưng nó KHÔNG hề ảnh hưởng đến tốc độ tải trang nhé !
Hi vọng với nút Demo - Download với hiệu ứng hover màu sắc tuyệt đẹp này sẽ giúp blog các bạn đẹp hơn như cái nút :v cũng như tăng tính chuyên nghiệp hơn !
Chúc các bạn thành công !
cmt đầu :3
BalasHapusVãi khánh :3
HapusButton ngon :)) Mà có JS không thích
BalasHapusđọc kĩ bài viết đi man :v
HapusCó gì đâu em chỉ nói là Không thích JS thôi mà :v
Hapusvì sao ko thích
HapusNó có cái gì đó nó không thiện cảm :v Với cả em méo biết gù về JS :)) Chưa học cái JS với cả chưa biết học từ đâu :v
Hapuskhông hiểu thì thôi
HapusKhông hiểu :v Đang tính học mà trên yt họ đây không hiểu gì :)
Hapuscần ko a sennd giáo trình qua cho mak học
HapusCó chứ được thì tốt qua em cx muốn học JS lắm :))
Hapustối send cho
HapusTối đi học cmnr mai send cx đc :v
HapusChất quá em
BalasHapusCảm ơn anh :v (nói hộ Khanh)
Hapusthanks a Đức nhé <3
Hapusp/s Duy: thanks :3
Không có gì em :)) (Nói hộ Đức)
HapusP/s Khanh: KCJ a :v
xàm vl. cút đi @@
HapusDuma câu quen thuộc :v
HapusĐẹp, mới lạ, chất,... Rất sáng tạo đó anh!
BalasHapusthannks e
Hapusuk tối fix
BalasHapusLỗi đó mà không thấy á :v
BalasHapusđã bảo là tối fix. ko hiểu hả
BalasHapusBiết rồi cơ mà lúc trc a không thấy à?
BalasHapusms bị mak
BalasHapusEm.không rõ khi em vài thì thấy bị rồi :v
BalasHapusHaha ra nút button hả :v
BalasHapus<3
HapusCông nhận cái gì của anh đều khó xài thật :v K thích js tý nào cả a ạ :3
BalasHapusđã đọc bài viết chưa e
HapusTính đọc bài không kĩ :v
HapusHaha choáng @@!
HapusMéo thích JS :v
BalasHapusMeto JS đẹp cơ mà méo hiểu gì :v
Hapusđúng toàn mấy thánh éo bik js là ko thích js. HD kĩ thế kia, tối ưu thế kia. ko thích js thì xài amp đi =)
HapusKhông biết mới ghét :v
HapusKhanh đâu rồi mà không thấy Rep cmt nhỉ?
BalasHapusquẩy từ hôm qua =)
HapusĐi cổ vũ á :v
Hapusừ
HapusThế chắc Hôm qua đi đón U23 VN rồi :))
Hapuscó chứ :v cơ mak 2h ms tới HN. đông vl dã man
HapusXem trên TV đông nghịt người :v mà tới tận 7giờ mới về đến Lăng Bác :))
Hapushọp xog ms về :v
HapusTại đông quá lên cũng không đi đc nhanh lên mới chậm :v
Hapusbutton hay phết
BalasHapusthanks a ạ <3
HapusA tưởng cái ủng hộ là trang donate cơ.
BalasHapus:v
Hapus
Hapusủng hộ :v sao đặt link ads civi?
đặt tạm v :v nhác tạo cái unghotoi
HapusTạở cái mega ấy cho dễ a
Hapusko thích mega
HapusMega rút card or ATM cho dễ
Hapusko bik xài nên ko thích =)
HapusHaha giả thiết giống Duy :))
HapusĐẹp. Mà button có js :(
BalasHapusem nghĩ bác nên đọc hết bài vik
HapusJS là để thay cho mấy cái thẻ SVG... Đó bác không anh hưởng đến speed gì đâu...
Hapusđù man hay quá Duy :v
HapusHay gì ta nói xàm mà chứ có biết gì đâu :v
Hapuscứ tưởng nó hiểu ...
HapusNó hiểu là ai?
Hapusmày đó Duy =.=
HapusVch Duy hiểu mà :v
Hapussao bảo ko bik trên kìa
HapusNói thôi chứ trong đầu vẫn hiểu cái đó là thay cho thẻ khác vì bài viết có ghi :v
Hapusừ đúng r :v bài ghi rõ ra mak :v nhiều ng cứ cop code r paste hay nhiều ng cứ lướt qua thấy js là ko thích vì nặng chứ có đọc đâu =)
HapusBài ghĩ rõ chẳng nhẽ Em lại không nhìn thấy :v
HapusTâm lý của tất cả là cứ thế cop Code về mà chỉ nhìn code không nhìn bài viết :v
Hapus(y)
Hapusfixed !
BalasHapusẸp óa ang ùng è :)
BalasHapusBác nói clgt?
HapusKhanh đẹp trai quá. đang dùng nè
HapusSai cmnr Đẹp quá đang dùng nè Duy Handsome ạ :))
HapusXAMLONISREAL
HapusÔi tên cầu thủ kg biết ai chế hay phết. Mà dịch sai hết r @-@
Hapus@@ tên gốc là gì nhỉ
HapusHình như thay L thành R hay sao ý
Hapusxàm
Hapus.
HapusVch xàm :v Xàm vc
HapusLại còn ( . ) Cái nữa
Hapusko bik ns j
HapusCạn lời :v
HapusTuyệt vời <3
BalasHapusthanks a ạ <3
HapusTuyệt vời ^^
BalasHapusTuyệt vời là clgt?
Hapusthanks
HapusDuy bị bệnh dow à hay đẹp thì tui khen tuyệt vời vậy thôi :D
Hapusdow là bệnh gì thế?
Hapushiểu đơn giản là NGu :3
Hapusdow mà là Ngu á :v
HapusBệnh dow là bệnh đầu óc không phát triển bình thường khuôn mặt những ng bị bệnh dow giống nhau đó :)
Hapus:v show mặt ae xem Duy êy :v
HapusThật là bệnh dow bị thế á -_-
Hapus.
HapusHaha
Hapusđẹp trai hơn các bạn nhiều :v
HapusLệ rơi bản 2.0 :)
HapusĐẹp hơn a đó :v
HapusThích thì a thử show mặt a lên xem :v
HapusTui max đẹp trai rồi :)
HapusCỡ lệ rơi bản v3
HapusShow lên đi
HapusVãi lợn đó đjt m3
HapusĐùa không giám show mặt :v
HapusHaha
HapusHa ha :v
HapusTuyệt vời
BalasHapusBắc chước tui à -_-
Hapusnó có ^^ đâu mà bắt trước ...
Hapushaha
HapusHaha
HapusHaha concac OK :)))))
Hapusm ns ai v
Hapusm ns ai v Duy
HapusDuy vô học :)
Hapusquên là đã đc học :v
HapusNói với thằng Tiểu Bảo đó :v
HapusTớ có học nhá :D
Hapusmà biết concac là gì không?
Hapushình như tiểu bảo cũng lớn tuổi hơn m đó Duy :v
HapusTiều Bảo sn bao nhiêu vậy ?
Hapushình như 2k2 :v
Hapus2k2 á thế lớn hơn rồi :v
HapusMà a Khanh snbn vậy?
Hapus2k3
HapusDuy tưởng mình không biết à ? khinh nhau quá r đó concac là "con cá (c)" nhé :)
HapusKhinh nhau? e đâu khinh a...
HapusDuy 2k5 nói thật :v
HapusHaha vaiz lz gắt
Hapusvaiz lz gắt? vaiz lz là cai gi vậy?
HapusLà v a i l o n đó :v
HapusV a i l o n đó? Là gì?
HapusVãi lợn
HapusVãi lợn :v Lợn cx có vãi
HapusHỏi xàm :)
HapusCó dấu ? Đâu mà hỏi... Nói xàm vvj
HapusCái nút Demo rất bắt mắt người xem để tuần này test :v
BalasHapushjhj :p
HapusĐẹp thật, chào starquoc :v
HapusChào ông có gì liên hệ qua Gmail nhé ngày mai là tui comeback lại rồi
HapusOkay ông huhu :<
HapusQuốc làm.gì mà comeback vậy ?
Hapus:v comeback blog hay fb gì ấy
Hapuslớn tuổi hơn m đó Duy
HapusQuốc lớn tuổi hơn á?
Hapushọc cao đẳng
Hapustại anh ý không giới thiệu ib toàn gọi ông với tôi thôi à :D
HapusKhanh lúc trc cũng v :v h bik tuổi r gọi anh đi :v
HapusỪ gọi là anh thôi :v
HapusAnh Quốc có gì em xin lỗi nhé bấy lâu không biết toàn xưng tôi :v
HapusKhông sao đâu em :v
HapusHihi bấy lâu em không biết :v
HapusHihi ừ em :v
HapusMong anh bỏ qua :v
HapusButton đẹp :c bác Duy check ib em phát nhé.
BalasHapusthanks bn :3
HapusCó gì hỏi luôn chứ không thích inbox riêng tư cho lắm :v
HapusChất
BalasHapusthanks gái <3
HapusGái á? Ngọc Tính là gái :v
Hapusthì thấy Ngọc ngọc j kìa :v
HapusĐúng rồi tính là gái đó, tên thật Nguyễn Trần Tính Ngọc ở gần nhà mình tên hơi kì tính là gái đó :V
HapusDuy xin sđt vs địa chỉ có gì ib lquen :v
HapusXin tính đó :v
HapusTưởng anh có?
HapusĐừng kêu bằng anh nữa tui ngại lắm :)
HapusLớn hơn không kêu anh thì kêu gì?
HapusXuân hô bình thường thôi :) còn không thì kêu bằng cha cũng đc
HapusỪ em sẽ ghé qua :v
HapusLớn tuổi hơn thì gọi là anh là đúng rồi còn gọi khá nó ngượng lắm :v
HapusỪ
HapusRa bài mới thôi nào e, copy paste các bài hay cũng đc mà. Giờ a k làm thế là hết sạch ý tưởng rồi, khiếp người, 1 bài toàn cứ trên dưới 100 comments :v
BalasHapusvâng e sẽ cố gắng. trc h bỏ rơi linkthuthuat nên mấy hôm nay phải chăm lại nó
HapusOk e :D
HapusA Khanh đang res lại theme LTT á?
Hapusừ a res xong r (y)
HapusRes cái nhìn đẹp hơn hẳn chứ lúc chưa Res vào nhìn loạn mắt chỉ muốn out :))
Hapushaha
HapusEm.nói đúng không :v
Hapuschuẩn :v
HapusHaha best :v
HapusBài này chắc nhiều cmt nhất
HapusLượng cmt quá khủng
Hapusmình thấy bài kia hơn 200 cmt kìa
HapusĐẹp đó bn
BalasHapusthanks
Hapusđẹp quá
BalasHapus