Posts

How to Create Dark Style Table Sitemap Blogger

Image
This is version 2 from Blogger sitemap per table <div-sitemap id='wrapper'> <div-sitemap dir="ltr" style="text-align:left;" trbidi="on"> <div-sitemap class="table-of-content" id="table-of-content"> <div-sitemap class='loading'><img class='loading' src='https://res.cloudinary.com/dimaslanjaka/image/fetch/http://www.robosoftin.com/asset/custom/img/icon-load.gif'></div-sitemap></div-sitemap> </div-sitemap> </div-sitemap> <script async='async' custom-element='div-sitemap' src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <link href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css' rel='stylesheet'> <link href='https://codepen.io/dimaslanjaka/pen/zwwNGj.css' rel='stylesheet preload' scoped=''> <script

@ Font-face Google Fonts Roboto And Open Sans

Image
In a website will not be separated from the use of fonts. Among the free font web providers is Google Fonts . How to use custom fonts from Google Fonts is quite easy because the external CSS from the font is already provided. Stay copied and installed on the web. Unfortunately however, the use of external CSS links such as CSS links for Google Fonts will cause CSS blocking rendering .For example CSS links for Google Fonts like the following: <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"> But actually there is a way to avoid blocking rendering CSS from Google Fonts is by using @font-face is installed directly in the CSS style blog. Well for that, I provide @font-face Google Fonts for Roboto and Open Sans that can be used to replace the external CSS links of Google Fonts. Roboto: @font-face { font-family: 'Roboto'; font-style: normal;

SVG Social Media Icon With Sass CSS

First use: CSS Base: Normalize ( https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css ) and Vendor Prefixing: Autoprefixer ( <script src="https://rawgit.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js" crossorigin="anonymous"> </script> <script>window.autoprefixer || document.write('<script src="/autoprefixer.js">\x3C/script>')</script> ) SASS CSS // Thanks to codepen.io/alaingalvan for suggesting this color variable: $background: hsl(210, 45, 10) // http://www.paulirish.com/2012/box-sizing-border-box-ftw/ html box-sizing: border-box *, *:before, *:after box-sizing: inherit html background: $background font-size: .625em // 10px for rems .soc display: block font-size: 0 list-style: none margin: 0 padding: 48px // IE8 padding: 4.8rem text-align: center li display: inline-block margin: 12px // IE8 margin: 1.2rem a, svg display: b