WMI

.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

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

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

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"

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

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

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

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