Posts

Showing posts with the label CSS

Full page blogger css

Image
How to show only content on blogger page <style> @media only screen and (min-width: 1025px) { #sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display: none !important; } #main-wrapper { width: 150% !important; /*98% default*/ } .post { width: 150% !important; /*98% default*/ } #comments { width: 150% !important; /*98% default*/ } .post-title, .post-labels, post-icons, post-author { display: none !important; } } </style> OR <style scoped="" type="text/css"> #outer-wrapper { margin: 0 auto; text-align: left; float: none; background-position: center !important; } #post-wrapper { width: 100%; max-width: 100%; margin: 0 auto; text-align: left; float: none; background-position: center !important; } .post-body, .post { background-position: cente

Load CSS Asynchronously

Load CSS Asynchronously Usage: loadCSS('//CSS_URL'); loadCSS('//raw.githack.com/PrismJS/prism-themes/master/themes/prism-vs.css');

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

Disable Mouse Dragging CSS JS

Image
CSS <style> body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style>

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",

[CSS] Disabled Element

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

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