WMI

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

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

All I needed was to expel every single forward slice in a string utilizing Javascript. Remove Forward Slash (/) Using JavaScript Function function FSlash(func){ var x = func,    n = x.replace(/\//g,''); return n  } //Usage Using Variable var nx = "4x/4/4/5/6/7//532///45/"; //Call Variable Into Function Name    document.write(FSlash(nx)); //You can combine from function too Demo : CodePen The vital part to note here is the consistent articulation /\//g . The bit of the string you need supplanting is composed between the first and last forward cuts – so on the off chance that you needed the word 'work area' supplanted you would compose/work area/g. As the character we need to expel is an uncommon case you need to escape it utilizing an oblique punctuation line, generally the code will read the twofold forward cut as a remark thus quit preparing the line. At last, the g implies apply the substitution internationally to the string with the goa

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

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

   I will provide another option of the label widget that can be made dropdown, it looks exactly the same as the dropdown in the archive widget. The purpose of changing the look of this label widget is to save space on the blog page if in my blog there are many labels that make the blog look narrow because it is not just a label widget that is on the blog. In addition your blog will look more tidy and professional. For those who want to mecobanya, please follow the following tutorial: Replacing the Label Widget Function to Be Dropdown 1. Go to Blogger> Template> Then find this code <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'> <data:label.name/> </a> </b:if> ( <data:label.count/>)