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

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/AVvXsEiRsAMYAc8jineR8XqoDC4ttABA96x3Ys0SdiiYjRRdzY-aexcAgrbfmw_6r4dHmRN_5-XXoyIxAkVPAF96MkZF0FmxTbkSM0UHcaa6TOYePG71hlzz4O_PTYeR9YvBnqTnOhzuKTB_NfTP/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>