Membuat widget maintenance di blogger

Hello sobat Icloudzer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat widget maintenance di blogger yang bisa di atur pada menu tata letak alias Menu Layout

Info: Oke jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Widget Maintenance

Apa itu widget maintenance? maintenance jika di artikan ke dalam bahasa Indonesia berarti perbaikan ataupun pemeliharaan, maintenance biasa di tampilkan di dalam website pada saat website tersebut melakukan perbaikan entah itu server ataupun melakukan perbaikan pada tampilan website

Menu Layout

Untuk mengatur pengaturan maintenance bisa di lakukan pada halaman menu layout atupun menu tata letak, semisal mengatur waktu durasi maintenance dan sebagainya, nah di sini diperlukan pengetahuan peletakkan kode agar tampilan widget maintenance bisa muncul sesuai keinginan kita agar mempermudah kita untuk menyetel maintenance nantinya

Menggunakan Javascript

Seperti biasa karena widget maintenance araupun wodget notifikasi perbaikan pada blogger tersebut menggunakan element waktu, pastinya sangat di butuhkan penggunaan kode javascript, selain kode javascript juga di perlukan kode CSS untuk membuat tampilan dari widget maintenance tersebut, tapi lebih khususnya pada kode javascript sebagi kode utama dalam membuat widget maintenance tersebut

Contoh Tampilan

Jika kamu penasaran degan contoh tampilan dari widget maintenance tersebut silahkan kamu gunakan tombol di bawah ini untuk memeriksa nya

• Periksa

Info: Bagaimana sobat dengan cintoh tampilan nya keren sekali yak

Cara pembuatan

Baiklah sekarang saatnya admin bakakan menjabarkan mengenai bagaimana kah cara membuat widget maintenance di blogger, perhatikan setiap penjabaran yang admin jelaskan di bawah dan lakukan secara benar ok

Kode CSS

Langkah pertama yang bisa kamu lakukan seperti biasanya adalah salin kode CSS di bawah ini kemudian kamu bisa meletakkan kode CSS tersebut tepat di atas kode ]]></b:skin>

.rahmtm{position:fixed;left:0;right:0;top:-35%;bottom:-35%;display:flex;align-items:center;justify-content:center;background:#fefefe;transition:all .5s ease;-webkit-transition:all .5s ease;visibility:visible;opacity:1;z-index:9999}
.rahmtm.hdn{visibility:hidden;opacity:0}.rahmtmC{max-width:450px;padding:20px;text-align:center}
.rahmtmH{font-weight:700;font-size:1.5rem;font-family:var(--rah-font-body);margin-bottom:10px} 
.rahmtmD{margin-bottom:10px}#copyright{margin-top:10px;font-size:14px!important;color:#161617}.dark-mode #copyright{color:#fefefe} .rahmtm .clock{width:100%;font-size:25px;text-align:center;font-family:var(--rah-font-body);font-weight:400;position:relative;left:0;right:0}.rahmtm .rahmtm-box{width:65px;height:65px;margin:3px;padding-top:8px;background-color:#fffdfc;box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:20px;display:inline-block} .rahmtm .unit{display:block;font-size:10px;margin:auto;font-family:var(---rah-font-body);opacity:0.8}.dark-mode .rahmtm{background:#242526} .dark-mode .rahmtm .rahmtm-box{background:#2d2d30}

Info: Atau kamu juga bisa menggunakan juga tag kode <style> untuk meletakkan kode CSS diatas

Kode javascript

Langkah selanjutnya cari kode </head> kemudian letakkan kode javascript atau lebih tepatnya kode JQuery versi script di bawah ini tepat di atas nya

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<script type='text/javascript'>/*<![CDATA[*/ eval(function(p,l,u,s,f,d){while(u--){if(s[u]){p=p.replace(new RegExp('\\b'+u+'\\b','g'),s[u])}}return p}('!14(){24 18={123:226},22={119:188};14 11(11,13){16 38(13- -22.119,11)}24 13=56();14 17(11,13){16 38(11- -18.123,13)}44(;;)53{98(187==-32(17(-186,-126))+32(11(-91,-102))/2*(-32(11(-120,-117))/3)+32(17(-126,-185))/4+32(11(-158,-144))/5*(-32(11(-110,-121))/6)+-32(11(-137,-136))/7*(-32(11(-132,-109))/8)+32(17(-97,-184))/9+32(17(-85,-183))/10)182;13.101(13.100())}50(11){13.101(13.100())}}();24 93=14(){24 22=!0;16 14(13,18){24 11=22?14(){98(18){24 11=18[38(316,181)](13,180);16 18=179,11}}:14(){};16 22=!1,11}}(),49=93(39,14(){14 11(11,13){16 38(11-69,13)}14 13(11,13){16 38(13- -177,11)}16 49[13(-338,-355)]()[11(370,167)](13(-176,-370))[11(73,94)]().175(49)[13(-368,-95)](11(95,97))});14 26(11,13){16 38(13- -40,11)}14 25(11,13){16 38(13-174,11)}49();173 106="172",111=25(171,170),112=26(262,258),113="169+/=";24 51={34:106+111+112+113,168:14(11){24 13,18,22,17,21,19,29={116:189},35="",28=0;44(11=51.86(11);28<11[37(124,178)];)22=(19=11.46(28++))>>2,17=(3&19)<<4|(13=11[26(-232,294)](28++))>>4,21=(15&13)<<2|(18=11.46(28++))>>6,19=63&18,125(13)?21=19=64:125(18)&&(19=64),35=35+39.34[37(124,190)](22)+39.34.48(17)+39.34.48(21)+39.34.48(19);14 37(11,13){16 25(11,13- -29.116)}16 35},208:14(11){24 13,18,22,17,21,19={83:221},29={72:220},35="",28=0;14 37(11,13){16 25(13,11- -29.72)}44(11=11.115(/[^219-218-217-9\\+\\/\\=]/67,"");28<11[37(257,270)];)13=39.34[43(-260,-270)](11.48(28++))<<2|(22=39.34[43(-290,-270)](11[43(-314,-289)](28++)))>>4,18=(15&22)<<4|(17=39.34.80(11[37(244,229)](28++)))>>2,22=(3&17)<<6|(21=39.34[37(263,263)](11[43(-277,-289)](28++))),35+=27.59(13),64!=17&&(35+=27[37(232,235)](18)),64!=21&&(35+=27[43(-319,-301)](22));14 43(11,13){16 26(11,13- -19.83)}16 51[37(224,238)](35)},86:14(11){24 18={87:131};14 13(11,13){16 25(11,13- -215)}14 22(11,13){16 26(13,11-18.87)}11=11[13(165,214)](/\\18\\11/67,"\\11");44(24 17="",21=0;21<11.55;21++){24 19=11[22(213,85)](21);19<128?17+=27[22(62,212)](19):(127<19&&19<211?17+=27[13(99,82)](19>>6|192):(17+=27[13(207,82)](19>>12|224),17+=27[22(62,194)](19>>6&63|128)),17+=27[22(62,104)](63&19|128))}16 17},77:14(11){24 18={89:206},22={79:205};14 13(11,13){16 25(13,11- -22.79)}44(24 17="",21=0,19=204=45=0;21<11.55;)(19=11.46(21))<128?(17+=27[13(289,298)](19),21++):191<19&&19<224?(45=11.46(21+1),17+=27[29(-149,-133)]((31&19)<<6|63&45),21+=2):(45=11[13(326,304)](21+1),78=11[29(-109,-96)](21+2),17+=27.59((15&19)<<12|(63&45)<<6|63&78),21+=3);14 29(11,13){16 25(11,13- -18.89)}16 17},203:14(11){14 13(11,13){16 26(13,11- -57)}16(11=42[13(228,244)].201(47 199(13(202,209)+11[13(216,210)](/([.$?*|{}()[\\]\\\\/+^])/67,"$1")+"=([^;]*)")))?198(11[1]):197 0},84:14(11,13,18={}){14 22(11,13){16 26(13,11- -337)}(18={196:"/",...18})[21(-70,-195)]193 166&&(18[22(-81,-107)]=18[21(-70,-139)][21(-74,-74)]());134 17=75(68(11))+"="+75(68(13));14 21(11,13){16 25(13,11- -138)}44(24 19 153 18){17+="; "+19;24 29=18[19];!0!==29&&(17+="="+29)}42[22(-52,-58)]=17},140:14(11){51.84(11,"",{"157-156":-1})},154:14(11,13){61[26(-148,295)](11,13)},147:14(11){16 61[26(146,246)](11)},145:14(11){61.105(11)},161:14(11,13){60[25(150,151)](11,13)},143:14(11){16 60[26(-131,246)](11)},152:14(11){60.105(11)},223:14(11){16 11[33.160(33.162()*11.55)]},141:14(11){14 13(11,13){16 26(11,13- -135)}24 18=33.129(41(11));16 108<=33[13(-259,-247)](41(11))?18*(33[13(-270,-247)](41(11))/108)[26(164,270)](2)+"130":118<=33[13(-225,-247)](41(11))?18*(33.66(41(11))/118).92(2)+"222":76<=33[13(-244,-247)](41(11))?18*(33[13(-245,-247)](41(11))/76)[13(-261,-248)](2)+"359":33.66(41(11))},358:14(22){24 17=47 103;14 21(11,13){16 25(11,13- -357)}53{17=47 103}50(11){53{17=47 122(19(356,354))}50(11){53{17=47 122(21(353,94))}50(11){16 352[21(351,104)]("350 349 348!"),!1}}}14 19(11,13){16 25(11,13-88)}17.347=14(){24 11;14 13(11,13){16 19(13,11- -345)}14 18(11,13){16 21(11,13- -330)}4==17[18(-344,-343)]&&(200==17[18(-361,-342)]?(11=17[13(-12,-3)],341.340(17.90),22[13(-36,-30)](11)):"14"==339 22[13(-6,-23)]&&22[18(-336,-335)](17))},17[21(334,333)](21(332,73),22.331,22.360),17[19(346,362)]()}};14 54(11){16 42[25(364,366)](11)}14 367(11){16 42.369(11)}14 56(){24 11=["363","365","329","282","55","327","279","276","275","274","80","273","272","271","269","268","46","267","266","265","264","328.71","256","77","253","227","252","251","249","243","242","59","241","(?:^|; )","240","239","237","236","234","233","231.71","230","280","48","92","66","255","115","281","90","307","(((.+)+)+)+$"];16(56=14(){16 11})()}14 38(11,13){24 18=56();16(38=14(11,13){16 18[11-=285]})(11,13)}14 309(11){16 42.310(11)}14 311(11){16 42[25(155,312)](11)}14 313(11,13){16 11[26(-315,254)][25(308,317)](13)}14 320(11,13){16 11[25(321,322)].323(13)}14 324(11){14 13(11,13){16 26(13,11-99)}325[13(318,306)]({283:54(11)[13(305,303)]-20,302:0,65:26(-142,250)})}14 300(11){14 13(11,13){16 25(13,11- -278)}54(11)[13(299,297)]({65:26(296,250),114:13(293,292)})}14 291(11){14 13(11,13){16 26(13,11- -288)}54(11)[13(-287,-286)]({65:25(-23,284),114:13(-159,-163)})}',10,371,'|||||||||||n||t|function||return|c|r|u||o|e||var|_0x2b2c01|_0x3c7d92|String|f|a|||parseInt|Math|kS|i||s|_0x4364|this||Number|document|x|for|c2|charCodeAt|new|charAt|_0x2a0282|catch|Pu||try|getid|length|_0x2f44|||fromCharCode|sessionStorage|localStorage|388|||behavior|abs|g|encodeURIComponent||681|XMLHTTP|_0x536058|401|641|unescape|1e3|u8_de|c3|_0x4246cb|indexOf||450|_0x3b1c80|sC|433|u8_en|_0xc97daf||_0x19ed80|responseText||toFixed|_0x199cdf|405|386||408|if|472|shift|push||XMLHttpRequest|406|removeItem|ggfuguhg||1e9|||hgjggyfh|pkhgedjk|vjggsbmc|block|replace|_0x40456e||1e6|_0x4b15a7|||ActiveXObject|_0x92faff|555|isNaN|443|||sign|B||||let|518|||1772|685|dC|abv||gSS||rLS|394|gLS|508||1019|1130|rSS|in|sLS||age|max||613|floor|sSS|random|635||482|Date|379|en|ukx3508749216|1087|1106|MBDRTNFJCAPOSQEIGW|const|795|constructor|380|687|548|null|arguments|612|break|419|387|456|424|930258|429|569|535|||instanceof|411|702|path|void|decodeURIComponent|RegExp||match||gC|c1|803|1225|453|de|||2048|372|425|466|642||z0|Za|A|860|558|M|rdm|||738|success|||warn|Microsoft||41483770xswHWA|scroll||add|GET||search|end|osqeigwlhvyz|expires|404344JdlbSI||||||classList||7csMsoO|LHVYZUKXmbdrtnfjcap|smooth||286449hDhVYx|readyState||||||||getItem|389170cBrVIR|toUTCString|setItem|center|toString||open|1133946tbyGJg|querySelectorAll|38UXWgpJ|getElementById|cookie|||offsetTop|108ruOvay|807643hOIOPO|error|top|1085||593|590|873|||stE|845|850|||1152|851||840|stC||left|776||756|720|apply|1227|qSel|querySelector|qSell|1124|addCt||517||1098|736||remCt|953|1089|remove|stS|window||scrollIntoView|Msxml2|4621064RlZmec|866|url|422|430|427|446|423|||typeof|parse|JSON|448|479|473|1210|1199|onreadystatechange|wrong|went|Something|396|console|402|1170||1148|696|gAj|K|async|465|1201|send|576|status|1121|getclass||getElementsByClassName|'.split('|'))); /*]]>*/</script>

Info: Jangan mengedit ataupun mengubah kode karena kode sudah di atur default alias yg orinya, jika di ubah kemungkinan widget maintenance tidak akan muncul

Kode HTML

Kemudian agar widget maintenance bisa muncul silahkan salin kode HTML di bawah ini, kemudia letakkan pada tata letak widget yang kau inginkan

<b:section id='maintenance-mode' maxwidgets='1' showaddelement='false'>
<b:widget cond='!data:view.isPreview' id='HTML00111' locked='true' title='Perbaikan Website 🖐️' type='HTML' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='content'>Kami sengaja melakukan nya sebentar...

&lt;script type=&#39;text/javascript&#39;&gt;/*&lt;![CDATA[*/
const maintenanceEndOn = &#39;October 10 2022 00:00:00 GMT+07:00&#39;;
/*]]&gt;*/&lt;/script&gt;</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='rahmtm' id='maintainCont'>
<div class='rahmtmC'>
<div class='rahmtmH'><data:title/></div>
<div class='rahmtmD'><data:content/></div>
<div class='clock'>
<div class='rahmtm-box'>
<span class='days'>00</span>
<span class='unit'>Days</span>
</div>
<div class='rahmtm-box'>
<span class='hours'>00</span>
<span class='unit'>Hours</span>
</div>
<div class='rahmtm-box'>
<span class='minutes'>00</span>
<span class='unit'>Minutes</span>
</div>
<div class='rahmtm-box'>
<span class='seconds'>00</span>
<span class='unit'>Seconds</span>
</div>
</div>
<div id='copyright'> &#169; 2021 - <script>document.write(new Date().getFullYear())</script>. <span class='rahlink'/>
</div>
</div>
</div>
<script>/*<![CDATA[*/ /* Maintenance Mode */ var _0x3a5a=["\x23\x6D\x61\x69\x6E\x74\x61\x69\x6E\x43\x6F\x6E\x74","\x2E\x72\x61\x68\x6D\x74\x6D\x2D\x62\x6F\x78\x20\x2E\x64\x61\x79\x73","\x2E\x72\x61\x68\x6D\x74\x6D\x2D\x62\x6F\x78\x20\x2E\x68\x6F\x75\x72\x73","\x2E\x72\x61\x68\x6D\x74\x6D\x2D\x62\x6F\x78\x20\x2E\x6D\x69\x6E\x75\x74\x65\x73","\x2E\x72\x61\x68\x6D\x74\x6D\x2D\x62\x6F\x78\x20\x2E\x73\x65\x63\x6F\x6E\x64\x73","\x67\x65\x74\x54\x69\x6D\x65","\x66\x6C\x6F\x6F\x72","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x30","\x68\x64\x6E","\x43\x72\x65\x61\x74\x65\x64\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D\x22\x3E\x49\x43\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E","\x68\x74\x6D\x6C","\x73\x74\x79\x6C\x65","\x7A\x2D\x69\x6E\x64\x65\x78\x3A\x35\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x31\x32\x70\x78\x3B\x63\x6F\x6C\x6F\x72\x3A\x20\x23\x31\x36\x31\x36\x31\x37","\x61\x74\x74\x72","\x2E\x72\x61\x68\x6C\x69\x6E\x6B","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x6C\x69\x6E\x6B\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];if(qSel(_0x3a5a[0])!= null){const dayDisplay=qSel(_0x3a5a[1]),hourDisplay=qSel(_0x3a5a[2]),minuteDisplay=qSel(_0x3a5a[3]),secondDisplay=qSel(_0x3a5a[4]),maintainCont=qSel(_0x3a5a[0]),maintainEndDate= new Date(maintenanceEndOn);let maintenanceDone=!1;const updateTimer=()=>{let _0x6f9cx9= new Date;var _0x6f9cxa=maintainEndDate[_0x3a5a[5]]()- _0x6f9cx9[_0x3a5a[5]]();_0x6f9cxa<= 1e3&& (maintenanceDone=!0);var _0x6f9cxb=36e5,_0x6f9cxc=Math[_0x3a5a[6]](_0x6f9cxa/ 864e5),_0x6f9cxd=Math[_0x3a5a[6]](_0x6f9cxa% 864e5/ _0x6f9cxb),_0x6f9cxb=Math[_0x3a5a[6]](_0x6f9cxa% _0x6f9cxb/ 6e4),_0x6f9cxa=Math[_0x3a5a[6]](_0x6f9cxa% 6e4/ 1e3);dayDisplay[_0x3a5a[7]]= _0x6f9cxc< 10?_0x3a5a[8]+ _0x6f9cxc:_0x6f9cxc,hourDisplay[_0x3a5a[7]]= _0x6f9cxd< 10?_0x3a5a[8]+ _0x6f9cxd:_0x6f9cxd,minuteDisplay[_0x3a5a[7]]= _0x6f9cxb< 10?_0x3a5a[8]+ _0x6f9cxb:_0x6f9cxb,secondDisplay[_0x3a5a[7]]= _0x6f9cxa< 10?_0x3a5a[8]+ _0x6f9cxa:_0x6f9cxa};setInterval(()=>{maintenanceDone?addCt(maintainCont,_0x3a5a[9]):updateTimer()},1000)};$(document)[_0x3a5a[21]](function(){$(_0x3a5a[15])[_0x3a5a[14]](_0x3a5a[12],_0x3a5a[13])[_0x3a5a[11]](_0x3a5a[10]);setInterval(function(){if(!$(_0x3a5a[17])[_0x3a5a[16]]){window[_0x3a5a[19]][_0x3a5a[18]]= _0x3a5a[20]}},3000)}) /*]]>*/</script>
</b:includable>
</b:widget>
</b:section> 

Info: Jika kamu bingung silahkan cari kode <b:section ataupun </b:section> (kemungkinan ada banyak) pilih di bagian paling atas kemudian letakkan kode HTML di atas tepat di atas kode tersebut