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
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...
<script type='text/javascript'>/*<![CDATA[*/
const maintenanceEndOn = 'October 10 2022 00:00:00 GMT+07:00';
/*]]>*/</script></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'> © 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