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

CSS for a cookie policy

.cc-banner .cc-btn:last-child,.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-window{left:20px;bottom:20px;transition:opacity 2s ease,width 1s ease,height 1s ease;opacity:.8;width:200px;height:150px;animation-name:CookieAnimIdle;animation-timing-function:ease-in-out;animation-duration:8s;animation-iteration-count:infinite}@keyframes CookieAnimIdle{100%,20%{transform:rotate(0)}40%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}}.cc-window:hover{animation-play-state:paused;width:400px;height:350px;transform:translate(50px,100px)}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-w

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

JavaScript Call Random CSS file

Image
Someone talk to stack overflow like this : I am trying to rotate random CSS sheets via JS - I have the following script but when I am using it - it doesnt seem to work ? function getRand(){ return Math.round(Math.random()*(css.length-1)); } var css = new Array( '<link rel="stylesheet" type="text/css" href="css/1.css">', '<link rel="stylesheet" type="text/css" href="css/2.css">', '<link rel="stylesheet" type="text/css" href="css/3.css">', '<link rel="stylesheet" type="text/css" href="css/4.css">' ); rand = getRand(); document.write(css[rand]); Appreciate any help? The best answer is : Try to create the link element programmatically and appending it to the head function applyRandCSS(){ var css = ["css/1.css", "css/2.css", "css/3.css", "css/4.css"

Create External Link Icons Using SVG without JavaScript In Blogger

Image
Demo How ? interested in the style of External Link Icons Using this SVG ? Copy below style code before </head> section in your template : <b:if cond='data:blog.pageType == &quot;item&quot;'> <style> /*<![CDATA[*/ .post-body a[href^="http://"]:after, .post-body a[href^="https://"]:after {   content: '';   background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23e8554e' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;   background-size: 14px 14px;   width: 14px;   height: 14px;   display: inline-block;   margin-left: 3px;   vertical-align: -2px } .post-body .tr-captio

Search Box With Pure CSS Simple

Simple Widget Blogger search box with pure CSS. Here the HTML: <form id="searchthis" action="/search" style="display:inline;" method="GET" target="_top"> <!-- Search box for blogger by Namanyay Goel //--> <input id="namanyay-search-box" name="q" size="40" type="text" placeholder=" Type Keywords... "/> <input id="namanyay-search-btn" value="Search" type="submit"/> </form> The Pure CSS #namanyay-search-btn { background:#0099ff; color:white; font: 'trebuchet ms', trebuchet; padding:10px 20px; border-radius:0 10px 10px 0; -moz-border-radius:0 10px 10px 0; -webkit-border-radius:0 10px 10px 0; -o-border-radius:0 10px 10px 0; border:0 none; font-weight:bold; } #namanyay-search-box { background: #eee; padding:10px; border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px; -webkit-border-radius:10px 0 0 10px; -o

Random Posts Widget Blogger

Image
How to create random posts widget blogger (simple and stylish). 1. Login to dashboard blogger -> navigate to layout tab -> create widget html/javascript -> insert this code to the widget. <style scoped='' type="text/css"> #arlina-random ul{list-style:none;margin:0;padding:0}#arlina-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;} #arlina-random li:last-child{border-bottom:0;} #arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline} </style> <div id='arlina-random'>Memuat...</div> <script> //<![CDATA[ // Random Post Widget var homePage = ' https://www.web-development.cf ',     maxResults = 10 ,     containerId = 'arlina-random'; function getRandomInt(min, max) {     return Math.floor(Math.random() * (max - min + 1)) + min; } function shuffleArray(arr) {     var i = a

SCSS Animate Hover Scale Letters

Demo HTML Full Page <!DOCTYPE html><html><head> <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet" /> <style>html, body { height: 100%; } body { background: #e74c3c; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: 'Passion One', cursive; } .scale { font-size: 10vw; text-transform: uppercase; letter-spacing: 4px; color: #fff; cursor: pointer; } .scale span { display: inline-block; -webkit-transition: -webkit-transform 0.1s; transition: -webkit-transform 0.1s; transition: transform 0.1s; transition: transform 0.1s, -webkit-transform 0.1s; } .scale span:hover { -webkit-animation: rotate-scale-up 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; anim

LESS CSS Animasi Ajaib (Magic Sphere)

Image
Demo Full Page Code <!DOCTYPE html><html class=''> <head><script src='console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="nofollow"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111&q

Making this energized header with CSS3 properties

Image
Patterns come and patterns go. The ones that stick around the longest do as such since they take care of a specific issue. A pattern that is well known right presently for that very reason, is sticky components; components that act typically until we parchment, and after that keep up their nearness on the page by one means or another. The pattern begun with sidebars, yet where it's truly developed in notoriety is headers. Why? Since headers have a tendency to contain route, and steady route is prevalent with clients. In this instructional exercise we'll make a header that adheres to the highest point of the viewport, however so it doesn't meddle with the substance, will limit it when the client looks down the page. This is what it will look like when we're set: In the event that you'd get a kick out of the chance to take after alongside the code, you can  download it here. The HTML The HTML for our illustration is truly straightforward, all we need is a

Pug Preporcessor + SCSS border animation without svg

PURE CSS Using PUG Preprocessor + SCSS to create border animation without SVG HTML Code Normal HTML (Compiled | Before converted to PUG) <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css"/> <div class="bb"></div> PUG CODE (After Converted from NORMAL HTML) script(src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js') link(rel='stylesheet', href ='https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css') .bb CSS Code: NORMAL CSS (Before converted to SCSS): .bb, .bb::before, .bb::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .bb { width: 200px; height: 200px; margin: auto; background: url("https://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png&q