Posts

Showing posts with the label HTML

HTML Select Complete Countries

<div class="input-group select2-bootstrap-operator"> <select class="form-control select2-single" tabindex="-1" aria-hidden="true"> <option></option> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI" disabled="disabled">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO"&g

Glowing Text Loading Animation

Image
Glowing Text Loading Animation CSS body{ margin:0px;padding:0px;background:#262222; } UL{ position: absolute; top:50%; left:50%; display: flex; transform: translate(-50% ,-50%); } ul li{ list-style: none; letter-spacing: 15px; font-size: 5em; font-family: fantasy; color:#484848; animation: ani 1.2s linear infinite; } ul li:nth-child(1){ animation-delay: .2s; } ul li:nth-child(2){ animation-delay: .6s; } ul li:nth-child(3){ animation-delay: .8s; } ul li:nth-child(4){ animation-delay: 1.0s; } ul li:nth-child(5){ animation-delay: 1.4s; } ul li:nth-child(6){ animation-delay: 1.8s; } ul li:nth-child(7){ animation-delay: 1.12s; } @keyframes ani { 0%{ color:#44848; text-shadow: none; } 90%{ color:#44848; text-shadow: none; } 100%{ color:#fff900; text-shadow: 0 0 7px #fff900,0 0 70px #fff123; } } HTML <ul> <li>L</li> <li>O</li> <li>A</li> <li>D</li> <li

Javascript Debug Protector

Image
How to protect javascript from developer tools ? here the answer. put this code into your page or template before closing body ( </body> ) <script src="https://cdn.jsdelivr.net/gh/dimaslanjaka/Web-Manajemen@master/js/protector.js" async></script> This script functions to hide the output from console.log, console.error, console.warning, and so on. and will also notify visitors that the site being opened is in a time suspension, because the visitor is opening the developer tools in his browser. This article about : protect javascript from debugging hide javascript console from developer tools protect site from debugging

Konversi DOM element ke HTML string

Mengubah dom document sebuah elemen kedalam HTMl string biasa <div id="elemenTersedia"></div> <script> function htmlFromDom(ClonedNode) { var target = document.getElementById('element-helper'); if (!target) { document.body.innerHTML += '<div id="element-helper" style="display:none"></div>'; target = document.getElementById('element-helper'); } target.innerHTML = ''; var wrap = document.createElement('div'); wrap.appendChild(ClonedNode); return wrap.innerHTML; } /* Penggunaan dalam pembuatan element */ var elem = document.createElement('p'); elem.id = 'IDELEMENT'; elem.innerHTML = 'text element'; // print secara langsung juga bisa document.write(htmlFromDom(elem)); // atau append ke element yang tersedia document.getElementById('elemenTersedia').innerHTML = htmlFr

How To Embed Blogger Video Iframe To Be Responsive

Image
How to Embed Blogger's Iframe Video to Be Responsive - Actually the video uploaded on Blogger doesn't need to be responsive because it's displayed with a size of 320x266 so that it can be safe on all device sizes. But of course it makes it less comfortable watching the video when watched via a PC or laptop because of the small embed video size. So if we embed an iframe video uploaded on Blogger to be responsive, this will be better because the video can appear full according to the width of the posting page and to suit all device sizes. Actually, before this I have shared how to embed videos that are uploaded on Blogger using video elements to be responsive , but it seems that now the trick is not working anymore. So now I share the trick to embed videos uploaded on Blogger to be responsive using iframe or amp-iframe elements so that this is the same as embed Youtube videos. Videos uploaded in Blogger posts must have a maximum size of 100MB, if the size of

Alternative Widget Translator for blog

Image
Example Translator Languages English Indonesian Afrikaans Albanian Arabic Armenian Azerbaijani Basque Belarusian Bengali Bulgarian Catalan Chinese Croatian Czech Danish Dutch English Esperanto Estonian Filipino Finnish French Galician Georgian German Greek Gujarati Haitian Creole Hebrew Hindi Hungarian Icelandic Indonesian Irish Italian Japanese Kannada Korean Latin Latvian Lithuanian Macedonian Malay Maltese Norwegian Persian Polish Portuguese

Bootstrap 4 Auto Progress Bar

Image
Press F12 for console debug requirements: 1. jQuery 2. Bootstrap 4 css 3. https://rawcdn.githack.com/dimaslanjaka/Web-Manajemen/f3dfa14a3848a8282eb39b1e2f01e1d6e62d7c44/js/jquery.progressBarTimer.min.js Read How to async defer CSS JS perfectly attribute info: countdown = to start countdown data-callback = function name of callback data-warning = bar warning style data-success = bar success style data-base = bar progress style HTML code <div data-callback="fn" countdown="5"></div> <div data-callback="fi" countdown="10"></div> Javascript code var elm = $("[countdown]"); function fc() { console.log("callback Succedeed") } function ctd(elm) { //main function var tl = 0 < elm.attr("countdown") ? elm.attr("countdown") : 5, bs = elm.data("base") ? elm.data("base") : "bg-info",

Symbol Matematika HTML format

Image
Math Symbols simbol matematika dan penulisan dalam html HTML. Symbol Entity Name Entity Number Description ∀ &forall; &#8704; For all ∂ &part; &#8706; Part ∃ &exist; &#8707; Exist