Điểm danh hàng ngày với Blogger

Đây là một widget khá vui mắt, giúp độc giả có thể check-in hàng ngày trên website của bạn. Khi bạn nhấn vào nút "Điểm danh", 5s sau widget sẽ tự động đóng lại. Đặc biết kết hợp với cookie, khi bạn nhấn vào nút X (đóng) tiện ích sẽ không xuất hiện lại cho đến 24h sau kể cả khi bạn làm mới lại trang. Ngoài ra bạn có thể biến tấu tiện ích thành một lời thông báo của Admin hay một banner quảng cáo cũng không tệ phải không nào :)

Bạn nào thích thì hãy thực hiện cùng StarThảo-IT nhé!
Bước 1: Blogger -> Chủ đề -> HTML
Bước 2: Các bạn tìm thẻ  ]]></b:skin> và chèn đoạn CSS sau vào trước thẻ đó:

@-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:500px;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://2.bp.blogspot.com/-H80UcSdG2zw/WKCBgg_6OrI/AAAAAAAAFGU/XZAAYbJ_hX0mKqu40uoIUfo0KW9L62EiwCLcB/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}

Các bạn có thể tùy chỉnh kích thước dòng thông báo bằng cách thay đổi : "500px" thành kích thước mà bạn mong muốn.
Bước 3: Các bạn tìm thẻ  </body> và dán đoạ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');},7000);"><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 Blog StarThảo-IT, +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>

Đoạn code ở bước 3, mình đã gộp javascript với html lại rồi đó.
Lưu ý: khi nhấn vào nút X (đóng) tiện ích sẽ không xuất hiện lại cho đến 24h sau kể cả khi bạn làm mới lại trang. Để xem lại demo tiện ích bạn có thể clear cookie hoặc xem trang bằng trình duyệt ẩn danh.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
                                                                                                                      code: Iris Tips