Thông báo: Chúng tôi luôn cần có thêm những thành viên sáng tạo, chuyên nghiệp và sẵn sàng cháy hết mình với công việc! Tham gia

How to Add pop up multi notification in blogger Website

How to Add pop up multi notification in blogger Website

Hello Everybody, on this occasion I will share a tutorial on How to Add pop up multi notification on blogger Website is the main features to show the Coding Part of any programming language like HTML, CSS, JS etc. So I will share blogger Share to pop up multi notification on blogger features code in this post.

different from what I will share this time, this pop up can display multiple notifications inspired by the google adsense site. the look is not 100% the same because the name is also an inspiration if it's 100% the same it's a copy of the name.

How to Add Multi-Notification Pop Ups on Blogger

please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin>

css
/* multi pop up by wendy code */ .wcIconNotif{position:relative;width:35px;height:35px;display:flex;left:-10px} .wcIconNotif path{fill:#444} .wcIconNotif:before{content:attr(aria-label);position:relative;display:flex;padding:5px;font-size:10px;width:13px;height:13px;background-color:#e40101;color:#fefefe;justify-content: center;align-items: center;border-radius:50%;position:relative;top:-7px;left:9px;} .fullClose{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .1s ease;background:transparent;opacity:0;visibility:hidden} .wcNotif{position:fixed;opacity:0;visibility:hidden;z-index:999999;overflow-y:auto;top:0;right:20px;background:#fff;border:1px solid #ddd;width:350px;height:auto;max-height:400px;display:block;border-radius:3px;color:#48525c;box-shadow:10px 10px 35px rgba(0,0,0,0.1),-10px -10px 35px rgba(0,0,0,0.1);transition:all .3s ease;} .wcNotif:before{content:"";position:fixed;top:0;right:30px;border:10px solid;border-color:transparent transparent #fff transparent;opacity:0;visibility:hidden;transition:all .3s ease;} .wcNotif li{border-bottom:1px solid #f1f2f4;padding:10px 20px 10px 0;display:block;align-items:center;margin:0 20px 0 -15px} .wcNotifStart .more{margin:5px 0 0 -5px;font-size:12px} #wcCheckPop:checked ~ .wcNotif{visibility:visible;opacity:1;top:80px} #wcCheckPop:checked ~ .wcNotif:before{visibility:visible;opacity:1;top:62px} #wcCheckPop:checked ~ .wcNotif + .fullClose{visibility:visible;opacity:1} #wcCheckPop,.wcPopMenu{display:none} .wcPopMore{display:flex;align-items:center; font-weight:900; color:#262d3d;padding:0 5px} .wcPopMore span{flex-grow:1} .accorIcon{position:relative;flex-shrink:0; display:flex;align-items:center;justify-content:center; width:12px;height:12px;margin-right:15px} .wcPopMenu:checked ~ .wcPopMore span{color:#f89000} .wcPopMenu:checked ~ .wcPopMore .accorIcon:before, .wcPopMenu:checked ~ .wcPopMore .accorIcon:after{background-color:#f89000} .wcPopMenu:checked ~ .wcPopMore .accorIcon:after{visibility:hidden;opacity:0} .wcNotifStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0; transition:all .2s ease; opacity:.8} .wcPopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px} @media screen and (max-width:480px){ #wcCheckPop:checked ~ .wcNotif{top:0} .wcNotifStart{border-top:1px solid #f1f2f4;margin-top:30px} .wcNotif{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0;padding-top:25px} .wcNotifClose{position:absolute;top:8px;right:15px;width:40px;height:40px;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='%2348525c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:35px;background-position:center;} .wcNotifClose:before{content:'Close';position:relative;right:35px;top:10px;font-size:15px;color:#48525c;} .wcNotif:before{display:none} } /* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */ .darkMode .wcIconNotif path{fill:#989b9f} .darkMode .wcNotif,.darkMode .wcPopMore{background:#2d2d30;color:#fefefe;border:none} .darkMode .wcNotif:before{border-color:transparent transparent #2d2d30 transparent} .darkMode .wcNotif li,.darkMode .wcNotifStart{border-color:rgba(255,255,255,.1)}

and put this bell icon code where you want it, you can group it in the icon header section. and the part that I marked aria-label='5' number 5 please adjust it according to the number of notifications

if you use the median-ui v1.5 template, you can put it after the <!--[ Profile button ]--> code, skip the first </b:if> code so that it doesn't get pinched by the conditional homepage tag.

html
<label aria-label='5' class='wcIconNotif' for='wcCheckPop'> <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> </label>

Finally, put the code below above the footer code , it's actually free anywhere as long as it's still in the body tag, I personally prefer to put it above the footer to make it neater.

html

<input id='wcCheckPop' type='checkbox'/> <div class='wcNotif'> <label class='wcNotifClose' for='wcCheckPop'/> <ul class='wcNotifStart'> <li> Lorem ipsum dolor sit amet consectetur. <input class='wcPopMenu' id='pop-menu1' name='multi-popup' type='checkbox'/> <label class='wcPopMore' for='pop-menu1'> <span class='more'>Selengkapnya</span> </label> <div class='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. </div> </li> <li> Lorem ipsum dolor sit amet consectetur. <input class='wcPopMenu' id='pop-menu2' name='multi-popup' type='checkbox'/> <label class='wcPopMore' for='pop-menu2'> <span class='more'>Selengkapnya</span> </label> <div class='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. </div> </li> <li> Lorem ipsum dolor sit amet consectetur. <input class='wcPopMenu' id='pop-menu3' name='multi-popup' type='checkbox'/> <label class='wcPopMore' for='pop-menu3'> <span class='more'>Selengkapnya</span> </label> <div class='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. </div> </li> <li> Lorem ipsum dolor sit amet consectetur. <input class='wcPopMenu' id='pop-menu4' name='multi-popup' type='checkbox'/> <label class='wcPopMore' for='pop-menu4'> <span class='more'>Selengkapnya</span> </label> <div class='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. </div> </li> <li> Lorem ipsum dolor sit amet consectetur. <input class='wcPopMenu' id='pop-menu5' name='multi-popup' type='checkbox'/> <label class='wcPopMore' for='pop-menu5'> <span class='more'>Selengkapnya</span> </label> <div class='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. </div> </li> <!-- tambah notifikasi di atas sini --> </ul> </div> <label class='fullClose' for='wcCheckPop'/>

the part that I marked needs to be considered pop-menu1 and so on, if you want to add a notification to 6 then the writing is as below. and place it above the </ul> . tag

html
<li> Lorem ipsum dolor sit amet consectetur. <input class='wcPopMenu' id='pop-menu6' name='multi-popup' type='checkbox'/> <label class='wcPopMore' for='pop-menu6'> <span class='more'>Selengkapnya</span> </label> <div class='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. </div> </li>

if you have finished editing it, don't forget to click save, ok so that's how to make multi notification pop ups on blogger, hopefully it's useful and thank you for visiting.

Đọc thêm :
Đánh Giá Bài Viết:
Khi tôi là chính bản thân mình, tôi hạnh phúc và có kết quả tốt !

6 nhận xét

  1. Cảm ơn vì đã chia sẻ
    1. Cảm ơn bạn vì đã đóng góp
  2. Cái này tích hợp với wp được ko ad
    1. cái này chỉ áp dụng cho blogspot thôi bạn
    2. Ò. hơi tiếc
  3. hiii