Tiện ích "Điểm danh hàng ngày" với cookie siêu cute dành cho Blogger

How to create Rollup widget for your 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 :)

Cách thực hiện

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS vào trước thẻ ]]></b:skin>

@-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://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}

2Tìm đến thẻ </body> và dán đoạn Javascript vào trước thẻ đó

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

3Tiếp tục dán đoạn HTML sau đây vào trước đoạn code ở bước 2

<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 Iris Tips, +1 cho bạn nè
<a id="close-btn" href="javascript:void(0)" onclick="closeAlert();">Close</a>
</div>
</div>
</div> 

• DEMO

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!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm