Cara Membuat Widget Pop Up Flash Sale di Blog

Widget Flash Sale

Widget ini sudah dioptimalisasi agar lebih mudah digunakan, beberapa setelan sudah dipindahkan ke Tata Letak, agar tidak perlu mengedit lagi di Edit HTML jika ingin merubah iklan promo.
Cara membuat widget pop up flash sale di Blogspot, sebagai berikut ,

• Masuk Bloger
• Tema
• Edit HTML

CSS Pop Up Flash Sale

Letakkan kode di bawah ini , di atas kode ]]></b:skin>

/* pop up flash sale design by wendy code ubah warna cari kode #ff460c */
.wc-fs{background-color:rgba(0,0,0,.5);position:fixed;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:50%;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,.wc-fs #wc-fs-widget h3{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:5px;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}

Kemudian copy paste kode di bawah ini, dan letakkan di atas kode </footer>

<!-- pop up flash sale design by wendy code -->
<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'>/* bulan (wajib bahasa inggris ),tanggal,tahun,jam,menit,detik */
var wcfsWaktu = &#39;November 30, 2021 00:00:00&#39;;

/* status aktif ubah jadi off jika ingin nonaktifkan*/
var wcfsStatus = &#39;aktif&#39;;

/* waktu muncul 3 detik */
var wcfsMuncul = &#39;3000&#39;;

/* judul */
var wcfsJudul = &#39;Flash sale&#39;;

/* teks selesai */
var wcfsSelesai = &#39;Promo Berakhir!&#39;;

/* tombol kiri tutup */
var wcfsKiri = &#39;tahan aja&#39;;

/* tombol kanan buka */
var wcfsKanan = &#39;lanjut kepo!&#39;;

/* buka di tab baru aktif ubah jadi off jika ingin buka di tab yang sama*/
var wcfsNewtab = &#39;aktif&#39;;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;script&gt;
<data:content/>
&lt;/script&gt;
</div>

<b:include name='quickedit'/>
</b:includable>
  </b:widget>
  <b:widget id='Image5' locked='false' title='gambar flash sale' type='Image' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj2bU2mUUQ_yvOthWkwDRg02Hv1XmY2SyoSft-whJrCRIv3JUDLIE6rhkU6M_MnrJURublSpCfR27UM76qMWXONUHnuJZXujtmP7k5WH-vb8magRE1iA8UREOBuHebX3-UAIDx87Hp4bw/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'>https://www.choipanwendy.com/2021/11/paket-birthday.html</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 + &quot;_img&quot;' 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 wendy code and -->

Terakhir copy kode javascrip di bawah ini, kemudian letakkan di atas kode </body>

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

Catatan:
Jika muncul error More than one widget was found with id: Image5. Widget IDs should be unique. atau error HTML2 silakan di ubah id Image5 menjadi Image6 dan HTML2 menjadi HTML3 seterusnya