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

Penulisan Symbol HTML Entities

Image
ASCII simbol Symbol Entity Name Entity Number Description Å’ &OElig; &#338; Uppercase ligature OE Å“ &oelig; &#339; Lowercase ligature OE Å  &Scaron; &#352; Uppercase S with caron

[JS][PHP] Membuat Websocket Javascript

Image
Cara membuat websocket dengan Javascript (JS) dan PHP Update: Simple Websocket Requirements: PHP 5.6+ (minimum)  Websocket merupakan standard baru untuk berkomunikasi, dan cocok untuk aplikasi chat, live server, live listener. Hampir sama dengan AJAX namun perbedaannya ada pada kecepatan dan CPU usage pada device client maupun server. Intinya lebih ringan lah. Websocket ini dapat menerima request apapun dan mendistribusikannya secara instant dari perubahan data sebelumnya. Berikut Cara membuat websocket tanpa NODEJS menggunakan Pure Javascript dan PHP: websocket.js /** websocket steam */ var socket; socket_start(); //start websocket function socket_start() { if (!socket) { //if socket is null console.log('WebSocket Started'); //start server socket = socket_server(); } try { socket.onopen = function (msg) { //console.log('socket initialized'); }; socket.onmessage = function (msg) { var data = JSON.parse(msg.data);

[JS] Google Recaptcha V3 Complete Code

Image
Requirements: jQuery (if not it will automated added into pages)  if (typeof jQuery == 'undefined' || !window.jQuery) { var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true; hs.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'; document.getElementsByTagName('head')[0].appendChild(hs); document.getElementsByTagName('body')[0].appendChild(hs); document.head.appendChild(hs); document.body.appendChild(hs); } Recaptcha Site Key And Secret (backend): Get Here //Set site key as global variable const g_site_key = 'YOUR_SITE_KEY'; Main Code: //loader (function () { submitDisable(); download_script('https://www.google.com/recaptcha/api.js?render='+g_site_key+'&render=explicit', function () {

[CSS] Disabled Element

*:disabled, *[disabled] { opacity: 0.5; color: #666666; cursor: not-allowed; pointer-events: none; } Example: Disabled Button <button disabled>Disabled Button</button>

[JS] Print console log into div

Image
HTML <div id="debug"></div> Pure Javascript (function () { var old = console.log; var logger = document.getElementById('log'); console.log = function (message) { if (typeof message == 'object') { logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />'; } else { logger.innerHTML += message + '<br />'; } } })(); Using jQuery // Using jQuery if (typeof console != "undefined") if (typeof console.log != 'undefined') console.olog = console.log; else console.olog = function() {}; console.log = function(message) { console.olog(message); $('#debug').append('<p>' + message + '</p>'); }; console.error = console.debug = console.info = console.log

How to Display Icon Blog In speed dial Browser

Image
Input Below Codes into <head>HERE</head> <link rel='icon' sizes='192x192' href='URL_IMAGES' /> <link rel='shortcut icon' href='URL_IMAGES' sizes='192x182' type='image/x-icon'> <link rel='apple-touch-icon' href='URL_IMAGES' /> <meta name='msapplication-square310x310logo' content='URL_IMAGES' /> <meta name='msapplication-TileImage' content='URL_IMAGES?w=270' />

Stylish Full Sitemap Blogger

Image
How to Create Full Sitemap Blogger Pink Table Style Read How to async defer CSS JS perfectly Here the HTML <div id='wrapper'> <div id="bp_toc"></div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="https://www.web-development.cf/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script></div> Here The CSS @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body{   background:#ecf0f1;   font-family:'Open Sans';   color:#444;   line-height:normal; } #wrapper{   margin:30px auto;   max-width:600px; } a:link { color:#fc4f3f; text-decoration:none; outline:none; transition:all .25s; } a:visited:hover { color:#fc4f3f; text-decoration:none; } a:visited,a:link:hover { color:#444; text-decoration:n

Add CSS Minifier Tool to Website

Simple way to add CSS minifier to an websites. Here the codes: HTML <div class="next-wrap"> <div id="cssminifier"> <span class="clear"></span> <textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea> <div class="button-group"> <div class="box"> <input class="opt1" id="stripAllComment" type="checkbox" /> <label for="stripAllComment">Strip all comments</label> <input class="opt2" id="superCompact" type="checkbox" /> <label for="superCompact">Super compact</label> <input class="opt3" id="betterIndentation" type="checkbox" /> <label for="betterIndentation">Keep ind

How To Modifying Post Views On Homepage To Be Different

Image
Sometimes we as the blog owner was bored to see the look of the blog, one of them post view on the homepage.   Well, we can get rid of this boredom by modifying the post appearance on the homepage to be different.   We can freely modify the post homepage display is different, eg combine the grid and list view, or we modify the first post view is different from other posts.   This trick I have applied to some Company template.   If you would like to try it, please follow the way below.   Please find the code below   <b:includable id='main' var='top'> Scroll down a bit, then please delete the following code:           <b:if cond='data:post.isDateStart'>          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>             &lt;/div&gt;&lt;/div&gt;           </b:if>         </b:if>         <b:if cond='data:post.isDateStart'>           &lt;div class=&quot;date-ou