Tạo thông báo popup bật lên trên blogger

Xin chào các bạn, nhân dịp này mình sẽ chia sẻ cách làm popup thông báo phục vụ mục đích khuyến mãi.

Thông báo bật lên này sẽ phù hợp nếu bạn có trang web cửa hàng trực tuyến hoặc trang bán sản phẩm mà bạn có thể sử dụng cho mục đích quảng bá sản phẩm hoặc dịch vụ của mình.

Thông báo bật lên mà mình chia sẻ sử dụng sessionStorage hoặc cookie tạm thời để cửa sổ bật lên không xuất hiện liên tục.

Tạo thông báo popup bật lên trên blogger
Tạo thông báo popup bật lên trên blogger

Vì vậy cửa sổ bật lên sẽ chỉ xuất hiện khi khách truy cập lần đầu tiên mở trang web/blog của bạn, và sẽ không xuất hiện lại sau khi khách nhấp vào nút đóng, tất nhiên điều này sẽ tốt vì khách truy cập không cảm thấy bị quấy rầy.

Cách tạo thông báo popup bật lên trên Blogger

Bước 1: Kiểm tra theme của bạn có cài đặt jQuery chưa? nếu bạn chưa có bạn có thể sao chép mã bên dưới và đặt nó phía trên thẻ: </head> hoặc &lt;!--</head>--&gt;&lt;/head&gt;

Bước 2: Sao chép mã CSS bên dưới và đặt nó phía trên thẻ: ]]></b:skin>

Bước 3: Sao chép mã HTML bên dưới và đặt nó ở phía trên thẻ: </body> hoặc &lt;!--</body>--&gt;&lt;/body&gt;

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
/* Popup notification by giahuy code */
.giahuyIconNotif{background:transparent;z-index:2;cursor:pointer;position:absolute;width:25px;top:8px;right:100px} /* untuk mengatur posisi icon edit bagian top dan right */
.giahuyIconNotif path{fill:#444} /* warna icon lonceng */
.giahuyIconNotif svg{width:100%;height:100%;vertical-align:middle} /* ukuran icon lonceng */
.giahuyIconNotif:before{content:'';display:block;width:12px;height:12px;background-color:#f09800;border:2px solid #fefefe;border-radius:50%;position:relative;top:12px;left:-2px;-webkit-animation:indicatornotif 1s ease infinite;-moz-animation:indicatornotif 1s ease infinite;animation:indicatornotif 1s ease infinite} /* lampu kedip warna #f09800 */
@-webkit-keyframes indicatornotif{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-moz-keyframes indicatornotif{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes indicatornotif{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.ghuyPopUp{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:0;box-sizing:border-box;box-shadow:0 5px 12px rgba(0,0,0,0.2);border-radius:20px;font-family: Nunito Sans;z-index:999999999;display:none}
.giahuyContentPop{position:relative;width:600px;height:400px;background:#fff;border-radius:20px;display:flex;box-shadow:0 5px 15px rgba(0,0,0,0,1)}
.giahuyContentPop .giahuyImgPop{position:relative;width:300px;height:400px;display:flex;justify-content:center;align-items:center}
.giahuyContentPop .giahuyImgPop::before{content:'';position:absolute;width:250px;height:250px;background:#fff0c7;border-radius:50%}
.giahuyContentPop .giahuyImgPop img{position:relative;max-width:250px;z-index:1}
.giahuyContentPop .contentGiahuy{position:relative;width:300px;height:400px;display:flex;justify-content:center;align-items:center}
.giahuyContentPop .content h3{color:#333;line-height:1em;font-weight:300;font-size:2em}
.giahuyContentPop .contentGiahuy h2{font-size:4em;color:#f09800;line-height:1em}
.giahuyContentPop .contentGiahuy h2 span{color:#333;font-size:0.75em;text-transform:uppercase}
.giahuyContentPop .contentGiahuy p{font-weight:300}
.giahuyContentPop .contentGiahuy a{display:inline-block;padding:10px 20px;background:#f09800;color:#fff;margin-top:15px;text-decoration:none;border-radius:10px}
.giahuyContentPop .contentGiahuy a:hover{opacity: 0.9}
.giahuyPopClose{position:absolute;top:20px;right:20px;width:40px;height:40px;background:#f3f3f3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:25px;background-position:center;cursor:pointer;border-radius:50%;z-index:10}
@media (max-width: 767px){
.ghuyPopUp{margin:50px 0}
.giahuyContentPop{width:300px;height:auto;flex-direction:column}
.giahuyContentPop .giahuyImgPop{height:200px;transform:translateY(-50px);top:55px}
.giahuyContentPop .giahuyImgPop::before{background:#fff;height:300px;width:300px}
.giahuyContentPop .contentGiahuy{height:auto;text-align:center;padding:20px;padding-top:20px}
.giahuyPopClose{top:-50px;right:-10px;background:#f3f3f3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23444'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:25px;background-position:center;box-shadow:0 5px 12px rgba(0,0,0,0.2)}}
/* css for darkmode, please adjust the class if it's different or you can delete this section */
.dark-mode .ghuyPopUp h3,.dark-mode .ghuyPopUp p{color:#444}
.dark-mode .giahuyIconNotif:before{border:2px solid #444}
.dark-mode .giahuyIconNotif path{fill:#989b9f}
<div class='ghuyPopUp'>
	  <div class='giahuyContentPop'>
		<div class='giahuyPopClose'/>
	     <div class='giahuyImgPop'>
		<img src='https://www.giahuy.net/image/-ZiU5tmN4XfY/YU2N2wj-YnI/AAAAAAAAE_E/Sjv4yALURiccQ3N_CiVIL456Ut5VMRKqQCLcBGAsYHQ/s0-rw/mua-ngay.gif'/>
	</div>
	<div class='contentGiahuy'>
		<div>
	<h3>Khuyến mãi đặc biệt</h3>
	<h2>50 <sup>%</sup> <span>off</span></h2>
	<p>Bản vẽ hệ thống điện năng lượng mặt trời với thanh toán qua email.</p>
	<a href='https://www.giahuy.net/2021/08/ban-ve-he-thong-dien-nang-luong-mat-troi-ap-mai-1mwp.html' target='_blank'>Mua ngay</a>
     </div>
   </div>
  </div>
  </div>
<script type='text/javascript'>
//Popup notification by giahuy code
var show = 5000;
var popSession = sessionStorage.getItem('popSession');if(popSession === null){$(window).bind('load',function(){setTimeout(function(){$('.ghuyPopUp').fadeIn("slow");popSession = sessionStorage.setItem('popSession',true)},show)})}
$(".giahuyPopClose").click(function(){$(".ghuyPopUp").fadeOut("slow")}
);$(".giahuyIconNotif").click(function(){$(".ghuyPopUp").fadeIn("slow")});</script>

Bước 4: Sao chép mã bên dưới đặt phía trên tiêu đề, nếu bạn sử dụng theme median-ui, bạn có thể đặt nó dưới thẻ: <div class='navicon right'>, để điều chỉnh đúng vị trí bạn hãy xem mã CSS ở trên.

<div class='giahuyIconNotif'>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(3.500000, 2.000000)'><path d='M10.1405897,17.5694629 C10.4180311,17.32187 10.8438152,17.306518 11.140035,17.5494941 C11.4658769,17.8167678 11.5115565,18.2954075 11.2420632,18.6185658 C10.5777028,19.4801758 9.54987935,19.989855 8.45625097,20 L8.45625097,20 L8.23912504,19.9908542 C7.23082501,19.9176829 6.2975965,19.4204774 5.67931074,18.6185658 L5.67931074,18.6185658 L5.61360047,18.5268524 C5.42043825,18.2101289 5.48511904,17.7924702 5.78133891,17.5494941 C6.10718078,17.2822203 6.58979525,17.3275237 6.85928854,17.6506819 C6.97764172,17.807587 7.11806508,17.9468539 7.27627317,18.0642323 C7.69914856,18.37647 8.23018908,18.5084076 8.75154604,18.4307656 C9.272903,18.3531235 9.74145234,18.0723239 10.0532134,17.6506819 L10.0532134,17.6506819 L10.0620854,17.6506819 Z M8.46512298,-4.79616347e-14 C11.5348397,-4.79616347e-14 14.9771809,2.16454026 15.3675495,5.64012319 L15.3675495,5.64012319 L15.3675495,7.45270568 C15.5008238,8.10690808 15.8070074,8.7142317 16.2547509,9.2124945 C16.2812788,9.24258861 16.3050326,9.27498109 16.325727,9.30928289 C16.7316898,9.92038415 16.9645715,10.62847 17,11.3594369 L17,11.3594369 L16.973384,11.5442147 C17.0039701,12.5445164 16.6701014,13.5222546 16.0329505,14.2982842 C15.2192877,15.1762511 14.1069384,15.724711 12.9100018,15.8380994 C9.96166621,16.1617418 6.98632378,16.1617418 4.03798823,15.8380994 C2.85854477,15.7169871 1.76556768,15.1687337 0.968271552,14.2982842 C0.32061592,13.5333882 -0.0232529078,12.5603384 0.00122207695,11.5618126 L0.00122207695,11.5618126 L0.00122207695,11.4386274 C0.0499997173,10.6857871 0.301205421,9.95964452 0.728727186,9.33567972 L0.728727186,9.33567972 L0.799703295,9.24769028 C1.24431614,8.74732875 1.550059,8.1408792 1.68690465,7.48790145 L1.68690465,7.48790145 L1.68690465,5.67531896 L1.73596444,5.57406421 C1.88512364,5.31699255 2.17563111,5.16663879 2.47988876,5.19955716 C2.82217862,5.23659034 3.09704701,5.4964 3.15078688,5.83369996 L3.15078688,5.83369996 L3.15078688,7.64628245 C3.15423731,7.6784545 3.15423731,7.71089878 3.15078688,7.74307083 C2.96605585,8.65082423 2.5438164,9.49441706 1.92644901,10.1891773 C1.68869608,10.5647756 1.55412081,10.9955098 1.53608042,11.4386274 L1.53608042,11.4386274 L1.53608042,11.6322041 C1.5163842,12.2554331 1.72432594,12.8647465 2.12163331,13.3479982 C2.67246619,13.9122665 3.40906548,14.2619232 4.19768448,14.33348 C7.05196634,14.641453 9.93151171,14.641453 12.7857936,14.33348 C13.5959515,14.2597331 14.3505573,13.893366 14.9062048,13.3040035 C15.2840021,12.832157 15.4819205,12.2432918 15.4651417,11.6410031 L15.4651417,11.6410031 L15.4651417,11.4386274 C15.4469401,10.9940255 15.3157095,10.5612015 15.0836451,10.1803784 C14.4405839,9.49350507 13.9935016,8.64922252 13.7883311,7.73427189 C13.7848807,7.70209983 13.7848807,7.66965556 13.7883311,7.6374835 L13.7883311,7.6374835 L13.7883311,5.81610207 C13.5310427,3.15882094 10.8605666,1.51341839 8.53609909,1.51341839 C7.54785763,1.51116468 6.57587086,1.76276992 5.71479879,2.24373075 L5.71479879,2.24373075 L5.60933557,2.2960794 C5.3925253,2.38362843 5.14447476,2.36825807 4.93831291,2.24943144 C4.69779074,2.11080037 4.55240903,1.8533283 4.55890889,1.57750418 C4.56540876,1.30168007 4.72275991,1.05122495 4.96954965,0.923889133 C6.03654057,0.326071387 7.23966405,0.00808271832 8.46512298,-4.79616347e-14 Z'/></g></svg>
</div>

Chú ý: Trong mã var show = 5000; "5000" nghĩa là một cửa sổ bật lên sẽ xuất hiện trong vòng 5 giây, vui lòng điều chỉnh tùy theo nhu cầu của bạn.

Trên đây là hướng dẫn tạo thông báo popup bật lên trên blogger. Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!
Khi cuộc đời cho bạn cả trăm lý do để khóc, hãy cho đời thấy bạn có cả ngàn lý do để cười.

Đăng nhận xét

Cám ơn bạn đã quan tâm đặt câu hỏi với chúng tôi!
Chúng tôi sẻ phản hồi sớm nhất cho bạn.
Chúc bạn một ngày tốt đẹp!