• Tạo thông báo ngay giữa màn hình với hiệu ứng tuyệt đẹp cho Blogspot

Tạo thông báo ngay giữa màn hình với hiệu ứng tuyệt đẹp cho Blogspot

Chào các bạn, hôm nay mình sẽ chia sẻ đến các bạn một thủ thuật nhỏ Tạo thông báo ngay giữa màn hình với hiệu ứng tuyệt đẹp cho Blogspot.
Với thủ thuật này các bạn có thể tạo thông báo cho độc giả về một sự kiện trên blog của các bạn ví dụ như tuyển cộng tác viên hay một chương trình ưu đãi như giảm giá...
Các bạn có thể thấy demo khi vừa truy cập bài viết này, bạn có thể load lại bài viết này để xem lại demo.

Hướng dẫn thực hiện


Bước 1: Đăng nhập Blogger ➔ Chủ đề ➔ Chỉnh sửa HTML.
Bước 2: Copy và chèn đoạn code bên dưới vào trước thẻ </body> trong template.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(key,value,options){if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);if(value===null||value===undefined){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}
value=String(value);return(document.cookie=[encodeURIComponent(key),'=',options.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
options=value||{};var result,decode=options.raw?function(s){return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
jQuery(document).ready(function ($) {
    if ($.cookie("popup_facebook_box") != "yes") {
        $("#plus-popup-vt").delay(1000).fadeIn("100");
        $("#closebox, #boxclose").click(function () {
            $("#plus-popup-vt").stop().fadeOut("100")
        })
    }
});
//]]>
</script>
<style>
#plus-popup-vt {display: none; background: #FFF; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {width: 100%; position: absolute; top: 30%; left: 0; background:white; padding:25px 0}
  #closebox {float: right; cursor: pointer; position: fixed; right: 20px; top: 25px}
#closebox:before {font-family: FontAwesome; content: &quot;\f00d&quot;; padding: 10px 14px; background: white; color: #888; font-weight: normal; font-size: 32px; border-radius: 50px;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box-plus {width: 1000px; margin: auto; color: #666}
#subscribe-box-plus p {color: #555; padding: 0; margin: 0 0 15px 0; font-size:40px;font-weight:700;font-family:"Roboto Condensed",sans-serif}
#subscribe-box-plus a {color: #555; border: 2px solid #ddd; padding: 5px 0; display: block; margin: 20px 0 0 0; width: 200px; font-size: 20px; font-weight: 300;font-family:"Roboto",sans-serif}
#subscribe-box-plus a:hover,#subscribe-box-plus a:focus{color:#66689c;border:2px solid}
#subscribe-box-plus span {font-family:"Roboto",sans-serif;font-weight:300;font-size:28px; padding: 0; margin: auto; line-height: 1.4}
@media screen and (max-width:768px){#subscribe-box-plus{width:100%}}
</style>
<div id='plus-popup-vt'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box-plus'>
<center><p>Đây là demo cho bài viết</p>
<span>Chào các bạn, đây là demo cho bài viết Tạo thông báo ngay giữa màn hình với hiệu ứng tuyệt đẹp cho Blogspot.
<a href='http://www.pluskienthuc.com'>Trang chủ<i class='fa fa-angle-right'/></a></span></center>
</div></div></div>
</b:if>
Bước 3: Lưu template và ra trang chủ xem nào!

Lời kết

Vậy là hôm nay mình đã hướng dẫn cho các bạn thủ thuật tạo thông báo thật hấp dẫn rồi. Chúc các bạn thực hiện thành công.

Chào các bạn, đây là demo cho bài viết Tạo thông báo ngay giữa màn hình với hiệu ứng tuyệt đẹp cho Blogspot.
Nhấn bất cứ chỗ nào để thoát ra Trang chủ