Tạo tiện ích điểm danh hàng ngày cho Blogger


Hello mọi người !

Hôm nay mình xin chia sẻ tới các bạn cách tạo widget điểm danh hàng ngày trên blog nhé. Tiện ích này khá hữu ích đấy.
Các bước thực hiện:

B1. Vào Blog -> Mẫu -> Chỉnh sửa HTML tìm đến thẻ ]]></b:skin> và dán code sau trước nó. 
@-webkit-keyframes _opacityb{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-moz-keyframes _opacityb{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes _opacityb{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-webkit-keyframes zoomInb{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes zoomInb{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}#rollcall-alert{position:absolute;top:50px;left:-15%;z-index:1000;width:100%;text-align:center}#rollcall-alert{display:none}@media (max-width:640px){#rollcall-alert{display:none}}#rollcall-alert .alert-box{position:fixed;display:inline-block;background:#ffe201;width:360px;height:38px;line-height:38px;padding:0 0 0 65px;text-align:center}#rollcall-alert .alert-box:before{content:"";position:absolute;top:4px;left:4px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIzTWO4IYsU30vulwoaRC5-tqXkCypfmJVnom617kymaMEVZ7lsDW-4BIc0c6k6IwtYkXbJo8eou76mau9cZyBOkUib23LAYoymhZj4GyM2IbT3ZnUEA0PFKHV6DWIg1JO_ity1Bje8YD/s1600/rollcall.png) no-repeat;background-position:-1px -5px;float:left;width:65px;height:42px;animation:zoomInb 1.5s ease-in-out 0s infinite;-moz-animation:zoomInb 1.5s ease-in-out 0s infinite;-webkit-animation:zoomInb 1.5s ease-in-out 0s infinite}#rollcall-alert .alert-box #close-btn{position:relative;background:#303030;float:right;width:26px;height:26px;margin:6px 5px 0 0;text-indent:-9999px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}#rollcall-alert .alert-box #close-btn:before{position:absolute;top:-6px;left:6px;content:"\f00d";font-family:FontAwesome;color:#fff;font-size:18px;text-indent:0}#rollcall-alert .alert-box #close-btn:hover{background:#434242}#rollcall-alert .alert-box .rc-btn{position:relative;background:#0bc377;float:right;width:90px;height:26px;line-height:26px;margin:6px 5px 0 0;color:#fff;text-align:center;text-transform:uppercase;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}#rollcall-alert .alert-box .rc-btn .txt{position:absolute;top:0;left:0;z-index:9;display:block;width:90px;height:26px}#rollcall-alert .alert-box .rc-btn .bg{display:block;background:#f4811f;height:26px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;animation:_opacityb 1.0s ease-in-out 0s infinite;-moz-animation:_opacityb 1.0s ease-in-out 0s infinite;-webkit-animation:_opacityb 1.0s ease-in-out 0s infinite}#rollcall-alert .alert-box .rc-btn:hover{background:#02cc79}#rollup-thanks{clear:both;display:none}.rollup-show{display:inline!important}

B2. Tìm đến thẻ </body> và dán code sau vào trước nó.
<div id="rollcall-alert"><div id="rollup-block"><div class="alert-box fadein-down">Hôm nay bạn điểm danh chưa nhỉ?<a id="close-btn" href="javascript:void(0)">Close</a><a id="quick-attendance" class="rc-btn" href="javascript:void(0)" onclick="setTimeout(function(){$('#rollcall-alert').fadeOut('slow');},5000);"><span class="txt">Điểm danh</span><span class="bg"></span></a></div></div><div id="rollup-thanks"><div class="alert-box fadein-down">Cám ơn bạn đã ghé thăm Hoan Hihi Blog, +1 cho bạn nè<a id="close-btn" href="javascript:void(0)" onclick="closeAlert();">Close</a></div></div></div> <script type="text/javascript">//<![CDATA[function createCookie(e,t,n){if(n){var o=new Date;o.setTime(o.getTime()+24*n*60*60*1e3);var r="; expires="+o.toGMTString()}else var r="";document.cookie=e+"="+t+r+"; path=/"}function readCookie(e){for(var t=e+"=",n=document.cookie.split(";"),o=0;o<n.length;o++){for(var r=n[o];" "==r.charAt(0);)r=r.substring(1,r.length);if(0==r.indexOf(t))return r.substring(t.length,r.length)}return null}function eraseCookie(e){createCookie(e,"",-1)}document.addEventListener("DOMContentLoaded",function(){[].forEach.call(document.querySelectorAll(".rc-btn"),function(e){e.addEventListener("click",function(){document.getElementById("rollup-block").style.display="none",document.getElementById("rollup-thanks").classList.add("rollup-show")})})}),$(document).ready(function(){readCookie("hide")||$("#rollcall-alert").show(),$("#close-btn").click(function(){return $("#rollcall-alert").hide(),createCookie("hide",!0,1),!1})});//]]></script> 

B3. Lưu mẫu lại và kiểm tra xem nó có hoạt động không nhé.
------------------
P/s: Thay Hoan Hihi Blog Thành tên blog bạn. nếu có bất cứ thắc mắc hay câu hỏi nào các bạn cứ comment phía dưới nha. 
Tạo tiện ích điểm danh hàng ngày cho Blogger Tạo tiện ích điểm danh hàng ngày cho Blogger Reviewed by Unknown on tháng 12 15, 2017 Rating: 5

14 nhận xét:

  1. Trả lời
    1. Widget này cho vui mắt thôi :3 nó sẽ biến mất sau 1 ngày khi bạn click vào điểm danh kể cả khi F5 lại trang :3

      Xóa
    2. À tui hiểu rồi mục đích chỉ là trang trí

      Xóa
  2. Cũng được. để thêm vào trang xem

    Trả lờiXóa
  3. Rảnh ghé thawmg blog tui nhé ông Hoan :v

    Trả lờiXóa

Được tạo bởi Blogger.