Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Membuat widget maintenance di blogger

views

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

&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

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.