Hii Everyone. Welcome To Piki Blogging Tips. Today we will talk about How To Add Pop Up Flash Sale Widget in Blogger Website. and today I am also trying to make a pop up flash sale that contains a countdown time to promote the products.
and for those of you who have an online store or landing page that uses the blogger platform, you can use this widget to promote the products or services you offer. This pop up flash sale widget will certainly be more interesting and provoke emotions from potential buyers because it has a countdown time so that if they are already interested in our product, they will be even more excited for fear of running out.
I have also optimized this widget to make it easier for you to use, I moved some settings to the layout so you don't have to edit the html edit again if you want to change the promo. following which can be edited via layout.
- set the duration of the flash sale
- enable and disable pop ups
- set the time the pop up appears
- change title ( flash sale )
- change message ( promo ends!)
- change the close button text (hold it down)
- change the text of the open link button ( continue kepo!)
- set link open in same tab or in new tab
How To Install Pop Up Flash Sale Widget in Blogger
Step 1 :- First of All You Need To Log in With Your Blogger Account.
Step 2 :- Now Go To The Theme Section.
Step 3 :- Now Click on Edit HTML.
Step 4 :- Now Copy The Code Given Below And Paste it Above The ]]></b:skin> Tag or </style> Tag in Your Theme.
/* Pop up Flash Sale Widget by PikiBloggingTips */
.wc-fs{background-color:rgba(0,0,0,.5);position:fixed!important;top:0;left:0;right:0;bottom:0;margin:0;width:100%;height:100%;overflow-y:auto;padding:10px 0;z-index:99999999999;opacity:0;display:none;transition:all 0.3s ease}
.wc-fs.show{opacity:1;display:block}
#wc-fs-widget img{width:100%;height:100%;padding:60px 0 30px 0}
#wc-fs-widget{position:absolute;top:45%;left:50%;padding:0;transform:translate(-50%,-50%);border-radius:.5rem;max-width:500px;width:90%;margin:auto;transition:all 0.3s ease}
.wc-fs #wc-fs-widget h2{display:none}
.wc-fs span.wc-dw-btn{position:absolute;display:flex;bottom:2px;width:100%;border-radius:0 0 20px 20px;z-index:2}
.wc-fs .wc-dw-btn button{border:0;outline:0;padding:15px;width:100%}
.wc-fs .wc-dw-btn button.wc-fs-cl{border-bottom-left-radius:20px;background-color:#fff;color:#ff460c}
.wc-fs .wc-dw-btn button.wc-fs-op{border-bottom-right-radius:20px;background-color:#ff460c;color:#fff}
.wcfs-wkwrp{position:absolute;display:flex;align-content:center;padding:10px;width:100%;border-radius:20px 20px 0 0;top:50px;background-color:#f2f3f7;font-size:14px}
svg.wc-fs-svg{background-color:#f2f3f7;box-shadow:-3px -2px 4px rgb(255 255 255 / 90%),5px 5px 8px rgb(0 0 0 / 7%);border-radius:50%;width:30px;height:30px}
svg.wc-fs-svg path{fill:#ff460c}
.wcfs-wkwrp p.wc-fs-tks{padding:5px;font-weight:bold;color:#ff460c;margin-top:0}
#wc-fs-wk #clock span{background-color:#f2f3f7;box-shadow:-3px -2px 4px rgb(255 255 255 / 90%),5px 5px 8px rgb(0 0 0 / 7%);float:left;text-align:center;margin:5px 5px;color: #000;padding:2px 0;border-radius:5px;width:25px;box-sizing:border-box}
Step 4 :- Then put the code below above the </footer> code , you don't need to edit anything, because it will be set later in the layout.
<!-- Pop up Flash Sale Widget by PikiBloggingTips -->
<div class='wc-fs' id='wc-fs'>
<b:section class='wc-fs-widget' id='wc-fs-widget'>
<b:widget id='HTML2' locked='false' title='pengaturan flash sale' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>/* date (required in English) , year, hour, minute, second */
var wcfsWaktu = 'November 30, 2021 00:00:00';
/* change the active status to off if you want to disable it */
var wcfsStatus = 'active';
/* time appears 3 seconds */
var wcfsMuncul = '3000';
/* title */
var wcfsJudul = 'Flash sale';
/* finished text */
var wcfsSelesai = 'Promo End!';
/* left button close */
var wcfsKiri = 'just hold on';
/* right button open */
var wcfsKanan = 'keep going crazy!';
/* open in a new active tab, change it to off if you want to open in the same tab */
var wcfsNewtab = 'active';</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script>
<data:content/>
</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Image5' locked='false' title='flash sale images' type='Image' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWWT3tr6CcgMEgJFd-7PTOgs88Bx2iz1O2QWOzekxEER4jwkAnH9mg0o2MP6OOSzHhFtzIuj6aDD3uLXx_wAHOPq_dWRAhf_pGtjFaAZcVxy-eZskjuJBveWVifBD5YKtILcHcObTiy6I/s1280/IMG_20211125_160306.JPG</b:widget-setting>
<b:widget-setting name='displayHeight'>1280</b:widget-setting>
<b:widget-setting name='sectionWidth'>1017</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='displayWidth'>1280</b:widget-setting>
<b:widget-setting name='link'>#</b:widget-setting>
<b:widget-setting name='caption'/>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<span class='wc-dw-btn'><button class='wc-fs-cl' onclick='wcfsCl()' title='Close'/>
<button class='wc-fs-op' onclick='wcfsOp()' title='Open'/></span>
<div class='wcfs-wkwrp'>
<svg class='wc-fs-svg' viewBox='0 0 24 24'>
<path d='M11.5,20L16.36,10.27H13V4L8,13.73H11.5V20M12,2C14.75,2 17.1,3 19.05,4.95C21,6.9 22,9.25 22,12C22,14.75 21,17.1 19.05,19.05C17.1,21 14.75,22 12,22C9.25,22 6.9,21 4.95,19.05C3,17.1 2,14.75 2,12C2,9.25 3,6.9 4.95,4.95C6.9,3 9.25,2 12,2Z'/></svg>
<p class='wc-fs-tks'/><div id='wc-fs-wk'><div id='clock'/></div></div>
<div class='widget-content'>
<b:tag cond='data:link' expr:href='data:link' id='notif-link' name='a'/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'>
<b:attr cond='data:sourceSet' expr:value='data:sourceSet' name='srcset'/>
</img>
<br/>
<b:if cond='data:caption'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<!-- pop up flash sale design by Pikibloggingtips -->
Note :-
if the error appears More than one widget was found with id: Image5 . Widget IDs should be unique. please change the id Image5 to Image6 or so on.
Step 5 :- Then copy the javascript below and place it above the code </body> or <!--</body>--></body> Tag.
<div class='made-by-wc' style='display:none;'>https://www.wendycode.com</div>
<script>
/*<![CDATA[*/
eval(function(x,e,c,a,_,t){if(_=function(x){return x},!"".replace(/^/,String)){for(;c--;)t[c]=a[c]||c;a=[function(x){return t[x]}],_=function(){return"\\w+"},c=1}for(;c--;)a[c]&&(x=x.replace(new RegExp("\\b"+_(c)+"\\b","g"),a[c]));return x}("0 1=18;5 18(179,180){0 175=53();6 18=5(72,366){72=72-116;0 177=175[72];6 177},18(179,180)}(5(184,167){0 11=18,57=184();214(!![]){146{0 165=-15(11(213))/45*(-15(11(212))/21)+-15(11(210))/48*(-15(11(206))/40)+-15(11(257))/128+15(11(254))/24+15(11(253))/202*(-15(11(252))/196)+-15(11(245))/197*(15(11(243))/201)+-15(11(240))/193*(-15(11(237))/79);30(165===167)232;69 57['192'](57['203']())}135(208){57['192'](57['203']())}}}(53,207));0 3=[1(234),'235',1(236),'238==','241=',1(247),1(249),1(251),1(230),'209',1(215),1(205),1(216),1(218),1(219),1(221),1(222),1(224),1(225),1(130),'226=='],2={'78':227(3[45]),'228':5(33){0 8=1,108,90,67,106,105,74,61,77='',63=17;64(33=2[8(229)](33);63<33['76'];)106=(108=33[8(55)](63++))>>21,105=(48&108)<<40|(90=33[8(55)](63++))>>40,74=(50&90)<<21|(67=33[8(55)](63++))>>24,61=32&67,151(90)?74=61=86:151(67)&&(61=86),77=77+19[8(47)][8(35)](106)+19[8(47)][8(35)](105)+19[8(47)][8(35)](74)+19[8(47)][8(35)](61);6 77},'4':5(28){0 10=1,143=(5(){0 95=!![];6 5(133,68){0 145=95?5(){30(68){0 134=68['129'](133,149);6 68=115,134}}:5(){};6 95=![],145}}()),75=143(19,5(){0 44=18;6 75[44(104)]()[44(136)](44(141))['147']()['101'](75)[44(136)](44(141))});75();0 37=(5(){0 117=!![];6 5(137,73){0 142=117?5(){0 139=18;30(73){0 138=73[139(250)](137,149);6 73=115,138}}:5(){};6 117=![],142}}()),126=37(19,5(){0 7=18,124=5(){0 121=18,70;146{70=204(121(256)+121(255)+');')()}135(211){70=80}6 70},123=124(),98=123[7(246)]=123['153']||{},109=[7(233),'242',7(239),7(244),7(248),7(259),'258'];64(0 85=17;85<109[7(118)];85++){0 60=37[7(231)][7(217)][7(220)](37),102=109[85],92=98[102]||60;60[7(223)]=37['112'](37),60[7(104)]=92[7(104)]['112'](92),98[102]=60}});126();0 103,99,96,110,84,100,43='',46=17;64(28=28[10(127)](/[^261-315-338-9\\+\\/\\=]/148,'');46<28[10(118)];)103=19['78'][10(87)](28[10(35)](46++))<<21|(110=19[10(47)][10(87)](28['150'](46++)))>>40,99=(50&110)<<40|(84=19[10(47)][10(87)](28[10(35)](46++)))>>21,96=(48&84)<<24|(100=19['78'][10(87)](28[10(35)](46++))),43+=12[10(29)](103),86!=84&&(43+=12['59'](99)),86!=100&&(43+=12['59'](96));6 43=2['125'](43)},'144':5(56){0 41=1;56=56[41(127)](/\\337\\336/148,'\\335');64(0 26='',83=17;83<56['76'];83++){0 20=56['65'](83);20<23?26+=12['59'](20):20>164&&20<334?(26+=12[41(29)](20>>24|130),26+=12[41(29)](32&20|23)):(26+=12[41(29)](20>>79|131),26+=12['59'](20>>24&32|23),26+=12[41(29)](32&20|23))}6 26},'125':5(38){0 34=1;64(0 54='',22=17,31=333=62=17;22<38[34(118)];)(31=38[34(55)](22))<23?(54+=12[34(29)](31),22++):31>25&&31<131?(62=38[34(55)](22+45),54+=12[34(29)]((332&31)<<24|32&62),22+=21):(62=38['65'](22+45),132=38['65'](22+21),54+=12[34(29)]((50&31)<<79|(32&62)<<24|32&132),22+=48);6 54}},195=2['4'](3[40])+2['4'](3[128]),199=2['4'](3[17])+2['4'](3[21])+2['4'](3[48]),198=13['166'](2['4'](3[24]));5 53(){0 194=['331','330','329==','327','316','326=','325==','88','169','324=','156','323=','322','150','6\\120(5()\\120','321','147','320','{}.101(\\319\\318\\317)(\\120)','260','339','328','340','354','365','112','364','363','362','361','360','155','359+358+357+356+','355==','353==','144','342','352','351==','350','349','76','65','129','348','59','107','347','(((.+)+)+)+$','346','345','153','344','166','343+','341','314','288==','313','285','284','283','282','170','281','280','279','278=','277==','78','101','276','275'];53=5(){6 194};6 53()}5 111(){0 93=1,94=13[93(173)](2['4'](3[202]))[17];94['107']+=195,94[93(273)](2['4'](3[196]),2['4'](3[197]))}30(13[1(262)](2['4'](3[24]))['76']===17)111();69{30(198[1(58)]!=199)111();69{80['272']=()=>{0 27=1;36 200=158 157(271);188(27(270),200),13[27(25)](2['4'](3[201]))[27(58)]=269,13[27(25)](2['4'](3[193]))[27(58)]=268,13[27(25)](2['4'](3[79]))[27(58)]=267};5 266(){0 114=1;13[114(25)](2['4'](3[163]))[114(116)]['265'](2['4'](3[161]))};30(264=='263'){5 190(){0 71=1,172=13[71(25)](2['4'](3[50]))[71(286)](2['4'](3[168]));80[71(274)](172,'287')}}69{5 190(){0 113=1,191=13[113(25)](2['4'](3[50]))['169'](2['4'](3[168]));80[113(301)]['312']=191}};30(311!='310'){0 88=154[1(164)](1(160));115===88&&13['309'](1(308),5(){171(5(){0 39=18;13[39(25)](2['4'](3[163]))[39(116)][39(307)](2['4'](3[161])),88=154[39(306)](39(160),!17)},305)})};36 186=159=>{0 89=1;36 42=159-158 157();6{'183':81['156'](42/304),'181':81[89(119)](42/303%302),'155':81[89(119)](42/300%162),'170':81[89(119)](42/152%162),'178':42}},52=97=>{0 82=1;97[82(189)]=82(289),171(()=>{0 182=82;97[182(189)]=''},299)},188=(187,185)=>{36 176=298(()=>{0 16=18;36 66=13[16(297)](187);296 14=186(185);66['107']=2['4'](3[295])+14['183']+2['4'](3[122])+14['181']+2['4'](3[122])+14[16(91)]+2['4'](3[122])+14[16(23)]+2['4'](3[140]);36 51=66[16(173)]('294');30(52(51[48]),49==14[16(23)]&&52(51[21]),49==14[16(91)]&&49==14[16(23)]&&52(51[45]),293==14[16(91)]&&49==14[16(91)]&&49==14[16(23)]&&52(51[17]),14['178']<45){292(176);0 174=291;66[16(58)]=2['4'](3[290])+174+2['4'](3[140])}},152)}}}",0,367,"var|_0x453158|Wc|flsar|de|function|return|_0x47eae3|_0xe21fd4||_0x39e107|_0x49d6c1|String|document|_0x595a55|parseInt|_0x482f7b|0x0|_0xc463|this|_0x18efb0|0x2|_0x5a3171|0x80|0x6|0xbf|_0x166ed2|_0x33469e|_0x755489|0xb7|if|_0xb639d9|0x3f|_0x2d5db3|_0x13ae2f|0x97|const|_0x1aacdf|_0x5d0c2d|_0x6c8aad|0x4|_0x1fc4e2|_0x10d4ec|_0x367b9d|_0x541c56|0x1|_0x590175|0x86|0x3|0x3b|0xf|_0x5c2e6b|animateClock|_0x19c7|_0x3081ce|0xb4|_0x42eb21|_0x4fb24e|0xb8|fromCharCode|_0x281787|_0x34b129|c2|_0xac864|for|charCodeAt|_0x22e461|_0x2416dd|_0x3b4cb5|else|_0x33fd19|_0x542c09|_0x58571f|_0x3d1904|_0x3b61ec|_0x83cd74|length|_0x1cbfc7|_keyStr|0xc|window|Math|_0x3381bf|_0x46d218|_0x4add27|_0x1736ab|0x40|0xae|welcomeSession|_0x559e42|_0x2c0af0|0xa9|_0x4fba2e|_0x8358ae|_0x548267|_0x5a3695|_0x2cdac6|_0x2ee042|_0xfce8d4|_0xbe3e65|_0x3f97b2|constructor|_0x53d5be|_0x5674a6|0x9a|_0x435662|_0x1de32e|innerHTML|_0x4a60bd|_0x13708f|_0x4917f0|tmpkcuk|bind|_0x2c8f78|_0x680744|null|0x7e|_0x13d4b8|0xb3|0x94|x20|_0x596f6f|0x14|_0x126ddd|_0x1e723e|_utf8_de|_0x162c6c|0xbc|0x5|apply|0xc0|0xe0|c3|_0x1d88db|_0x16148a|catch|0x83|_0x1a2798|_0x50cc5d|_0x39ac2c|0x12|0xba|_0x1af6e0|_0x1f3e5b|_utf8_en|_0x477063|try|toString|g|arguments|charAt|isNaN|0x3e8|console|sessionStorage|minutes|floor|Date|new|_0x4478f5|0x91|0xe|0x3c|0xd|0x7f|_0x2f33d0|querySelector|_0x4755c1|0x10|getAttribute|seconds|setTimeout|_0x58df57|0x9e|_0x113dd6|_0x23f604|_0xd88970|_0x43a7e9|total|_0x1123b9|_0x4b227e|hours|_0x2f9cb0|days|_0x269849|_0x24ac50|updateTimer|_0x424977|startTimer|0x9b|wcfsOp|_0x1d04c7|push|0xb|_0x4c27a2|tmplkndng|0x8|0x9|inrmdby|orcrdt|_0x2c15ee|0xa|0x7|shift|Function|0xb1|0xb9|0x57780|_0x73d667|ymC3iBPgOUMhrIFb|0xc1|_0x28dd63|0x89|0xc2|while|0x90|0x82|0xa2|0xa4|0xac|0xa3|0x84|0x85|0x81|0x95|0x8c|HE4nyUYgHzxnyUYgHf|atob|en|0xad|0xc3|0x87|break|0xc6|0x93|UVdFUlRZVUlPUEFTREZHSEpLTFpYQ1ZCTk13cnlpcHNmaGt6Y2JtcWV0dW9hZGdqbHh2bjM1NjgwMTkyNzQrLz0|0xb0|0x8d|i6CgMIbzr6KbSmFjrJ|0xaf|0xb6|HIF3pVxbHmY2N64ar8O9O6N0GZQlDI3gi6DdN8PciE5orqK2pk5trmKbpRe1GZc1GZc1GZc1GZc1GZc1GZc1GZc1GZc1GZc1OVbdyU4viUYgiRdcwBFlrUY1GmPar6FoOVbdyU4viUYgiRdjyUYzwBK1GzThwV5lr8P3NV13G8Mty6bkwVxtiIc9imbnwVPaMLYtrBWjyqKhrqJ2i6bciUf9N6YaNvfxDRQbOE3fDZQlyIftG65hpE58wVK3wRe5DRWlpRdlr8FtiUbjrztmwBhbMRdkNVFoM8PjiV1cGkFmMVMbMmX2Nm4vMUCvSBPhMUb5ynexDIW0G6PjymKbyzexyIffy64awVJfO6CbMZdzr6xjyzezDzNvMRFcG8KbpIJdNVxtM609N6CgiUCvG8WhMUKtrmy9DnClpRd3r8Q9DZXlyIf2rUCmiRelG8PtM6h3GzQ2rVYvM6bgGzQfNBC3rndkr8fdy6hhMU48GzQfDZWlpEQvDIW0OIPqNmTeDEllSRQaDE0vAZd4HE4niIbaMZ0|warn|0xc4|0x88|0xbe|0xbd|0xaa|0xbb|0x8f|0xb5|0xab|0xa5|0xa8|0x8e|0x9c|0x98|0xa6|trace|0xa7|turn|A|0x96|aktif|wcfsNewtab|remove|wcfsCl|wcfsKanan|wcfsKiri|wcfsJudul|0xa0|wcfsWaktu|onload|0x8b|0x99|2pscTOa|error|wIPbMf|O61jiUbmSVxtrma|search|SqizSVMnSV4l|__proto__|getItem|classList|log|getElementById|0x92|_blank|r61zr613MBh3rVCgiJ|0x9d|0x11|wcfsSelesai|clearInterval|0x17|span|0x13|let|0xc5|setInterval|0x1f4|0xea60|0xb2|0x18|0x36ee80|0x5265c00|wcfsMuncul|0xa1|0x8a|0x9f|addEventListener|off|wcfsStatus|href|830ZzVCDX|176333BThwcu|Za|2441160qwzPqc|x22|x20this|x22return|className|open|querySelectorAll|HIF3pVxbHkF8Nv5myv58wvQzN6xjN6afy8WhrkW2i6bciUf9DZQlPLYtrBWjyqKhrqK4HE4niIbaMZ07y8Whrz0|wIK3yID9Sv7|SqizSVMnSBKoyl|MUb6Sm5hMUXdNqcdi6D|12DdiddV|DOMContentLoaded|HE4nyUYgHf|setAttribute|add|0x1f|c1|0x800|x0a|n|r|z0|getElementsByTagName|clock|4428FHEgCU|indexOf|HIFlNV0|44262SgTqHR|replace|exception|1356voBLgp|6557353vfDsdO|location|SqizSVMnSVFa|i8i8Sf|info|y6hjil|setItem|Jc4TVJ|HE4cwBN|JqC3iVffNmYgiIChrz77S6T|JVdnMBDfKUbkrU4owBO7S6fnHzxlHqFzymbliEW3wVKhwvWhw6YgOUPbymM5rminwLWuwVdhOUYgMUTfrVCgM6hhyICnOUFvMVKtiEWlMV5kiVY3HE4lHzxhOUhvMVN4P6h3iIWnGk7ji8i8SqibrmK1N64cML1zr63jyE4zymCcwBJgwIKdrEy|HUKtikWzrUYnyn3qi6DdN8PciE5orqJqHzxnimyfy8K1rUX4P6MtrUl9O6XlDRQlDRd8wVK3wRe5DIW0G6hbwVieiRe5DIW0PvW6wVC8Jm40HLylORQfDzJfDzJqHzxlNBKeOUJ4P33xDklxF3TvSROfDEQlSRQfDZJaDZCRDZJaDZDgGRcfDZDgDLlxDvQxDklxD3TvSROfDEQlSRQfDZQaDZCWDklvORQfDEllORTvSRT8ZZT0SRhWDklvORQfDElxOROlSRTlCzOlJZOaDkQlORQaDLQxGElvDcf6JZOaDkQlORQaDLQ3SROlCzTlJnJaGE00GLQ3SzcaGEQ6SRhOF5N6JZXaFLQlORQaDLQxDklxJZXaFLQlORQaDLQxFvl6CzhODZhFDZOaD3TnSRDfDEQlSRQfGLl6CzhODZCVFcTnSRDfDEQlSRQfDZOaD5eqSn07S8F6Mn07wRD|1380197TxGmHW|table|2594360pVKUpG|16SPtjdl|SqizSVMn|prototype|_0x181931".split("|"),0,{}));
/*]]>*/
</script>
Step 6 :- Then Do not Forget To Click on Save Button. Finished.
Method of Use
now please open your layout and it should be at the bottom with id wc-fs-widget
to change / upload images, you can choose the one below with the name flash sale image , then please upload the image as usual and don't forget to change your product link.
and for other settings, you can choose the one above with the name flash sale settings, the contents will look like below.
/* month (required in English), date, year, hour, minute, second */
var wcfsTime = 'December 24, 2021 00:00:00';
/* change the active status to off if you want to disable pop ups */
var wcfsStatus = 'active';
/* pop up time is 3 seconds */
var wcfsAppear = '3000';
/* title */
var wcfsTitle = 'Flash sale';
/* finished text */
var wcfsDone = 'Promo Ends!';
/* left button close */
var wcfsLeft = 'hold on';
/* right button open */
var wcfsRight = 'go on!';
/* open in a new active tab, change it to off if you want to open in the same tab */
var wcfsNewtab = 'active';
I have commented on the code to explain the function of the code, but if you still don't understand, please ask in the comments column below.
Last Words
ok so that's the pop up flash sale widget for blogger that I can share this time, hopefully it's useful and thanks for visiting.
Reference:-
Wendycode.com