WMI

Css border or so-called border css these properties could allow us to determine the style and the border color of an element. Here I will give some examples of commonly used and may be useful. SOME TYPES OF BORDER CSS 1. none 2. dotted 3. dashed 4. solid 5. double 6. groove 7. ridge 8. inset 9. outset : Do not define the border line : Defines a dotted line border. : Defines a dotted line border. Defining a full line border. Defining a double line border. : Defines a 3D grooved border line. : Defines a 3D ridged border line. : Defines a 3D inset border line. : Defines a 3D outset border line. How to use it: none <p style = "border: 3px none; # 000000; padding: 20px;"> Do not define the border line </ p> Does not define the border line dotted <p style = "border: 3px dotted; # 000000; padding: 20px; align: center;"> Defines a dotted line border. </ p> Defining a dotted line border. dashed <p

Text Animation CSS and FontAwesome Import font-awesome from cdn ->  https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css CSS: @import url('https://fonts.googleapis.com/css?family=Anton|Roboto'); .word { font-family: 'Anton', sans-serif; perspective: 1000px; perspective-origin: 200px 40px; } .word span { cursor: pointer; display: inline-block; font-size: 100px; user-select: none; line-height: .8; } .word span:nth-child(1).active { animation: balance 1.5s ease-out; transform-origin: 0% 100% 0px; } @keyframes balance { 0%, 100% { transform: rotate(0deg); } 30%, 60% { transform: rotate(-45deg); } } .word span:nth-child(2).active { animation: shrinkjump 1s ease-in-out; transform-origin: bottom center; } @keyframes shrinkjump { 10%, 35% { transform: scale(2, .2) translate(0, 0); } 45%, 50% { transform: scale(1) translate(0, -150px); } 80% { transform: scale(1) translate(0, 0); } } .word span:n

Responsive Menu Hover Effect : Call jquery library -> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' async='async'></script> SCSS -> @import url("https://fonts.googleapis.com/css?family=Anton|Josefin+Sans"); ::-webkit-scrollbar { width: 10px; height: 10px; background-color: white; border-top: 1px solid #000; } ::-webkit-scrollbar-thumb { background-color: #1a1a1a; height: 5px; } * { box-sizing: border-box; } /*html, body { width: 100%; min-height: 100%; margin: 0; padding: 0; background: #000; } .page { width: 720px; float: left; position: relative; left: 50%; margin-left: -360px; padding: 10px; } .page h1, .page p { float: left; width: 100%; color: #fff; font-family: 'Josefin Sans', sans-serif; } .page h1 { text-transform: uppercase; margin-top: 115px; text-align: center; letter-spacing: 10px; } .page p { line-height: 20pt; font-size: 14pt

Today I combine the share button for Line and BBM with other social share buttons like Facebook, Twitter, Google+, Tumblr, LinkedIn, Pinteres, and Whatsapp. To combine all the share buttons, I found the responsive social sharing buttons pretty cool. Then I slightly modify it to add a share button for Line and BBM and customize it with Blogger for easy pairing and running. All icons on this social sharing responsive use SVG, so there is no need to link font icons like the Awesome Font and of course support all modern browsers. For the tutorial Please follow the steps below. Make sure your blog is already using any version of the jquery library. Please save the following CSS style code above </ head> code. <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /*<![CDATA[*/ .rrssb-buttons{box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:10px;height:36px;margin:0;pa

In the previous article I once shared a tutorial on Installing Sticky Functions On Blogger Widgets , this time I will share a tutorial with the same function that is to make a particular widget sticky or float following the page when scrolled down and up. This tutorial is an improvement as well as answering your comment from the previous tutorial which when the page is scrolled down sticky widget will pass the Footer Wrapper and it will be a bit annoying because it blocks the widgets that are installed in the Footer area. I will share this code more suitable to be installed on all content in Sidebar or can also be installed on one particular widget. For buddy who want to try it, please follow tutorial  How to Make Sticky Widget in Sidebar Blog . How to Create a Sticky Widget in Blog Sidebar 1. Login to Blogger --> Go to Template editor -->  Put below script before </body> tag <script type='text/javascript'> //<![CDATA[ $(function() { if ($(&#

Apakabar semua... Jumpa lagi dengan topik Snippet (Html/CSS). Kali ini kami akan share Snippet SEO RESPONSIVE AUTHOR BOX untuk blog kalian nih. Author Box ini mempunyai kelebihan dalam SEO. Yaitu: Ditambah Schema Structure Untuk: Persons Organization OrganizationRole Responsive: Author box ini fleksibel untuk semua macam ukuran device user, mulai dari java, bb, android, iphone, dan desktop sekalipun Cekidot kode nya vroo.... HTML: <div class="dimaslanjaka" itemscope="" itemtype="http://schema.org/contributor"> <div class="about-author" itemscope itemprop="Person" itemtype="http://schema.org/Person"> <h3> <i class="fa fa-user-circle-o"> </i> About Author: </h3> <img align="left" src="https://res.cloudinary.com/dimaslanjaka/image/fetch/https://imgdb.net/images/3184.jpg" itemprop="image"/>

If you happened to be holding promos and goods and service also aired on the blog, maybe one of the ways to attract the interest of visitors to follow ongoing promo can be tested by adding a countdown. With such expected visitors will jump list or follow the promo because see calculate a pullback so they feel worried not goto the promo hehehe .... For that I find simple countdown with javascript in JSFiddle Snippet . which later became Fox I look H:M:S and add the style as in the Fiddle below. Demo If interested to try it out please use the codes below. 1. Copy the CSS code below and save it in the style of your blog. @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(htt

The CSS #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); } Demo: Check This Footer Page Header Content THE STICKY WILL BE APPEARED ON BOTTOM THIS PAGE Footer Sticky Additional Content Done. I Hope this article (CSS sticky Fixed Footer) be help you Incoming Terms: CSS Sticky Footer | Fixed Footer | CSS Sticky Bottom Page | Sticky Bottom Fixed | Sticky Fixed Bottom | CSS Sticky

Bootstraps 4, HTML, CSS, dan JS Framework yang paling populer di dunia. Latest Bootstraps 4 CDN Bila Anda hanya perlu menyertakan CSS dan JS Bootstrap yang dikompilasi, gunakan CDN Bootstrap, yang disediakan bebas oleh kawan-kawan Max CDN. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="htt

How to Install Advertising Box on Blog - On this occasion I will discuss about the tutorial to create an ad box on the blog size 125x125 pixels. Maybe you already know that the activities of writing articles on blogs is now no longer just a hobbyist release or fill the void of time. Creating a blog and managing it well and correctly can also produce material in the form of money that most of the bloggers make it as one of the livelihood Displaying or creating ad space in the form of banners on the website / blog is usually used as a separate business opportunity by a blog or website that has many visitors and has popularity in search engines. But do not rule out your new blog can bid by the advertise to put their ads into the blog you have. If you are interested in providing or creating an ad box on a blog, follow the blogger tutorial that I will explain below. I need to say before you make a box de blog ad is a matter to consider in displaying the ad banner space is the loca

Definisi dan Penggunaan Atribut defer adalah atribut boolean. Saat ini, ia menentukan bahwa skrip dijalankan saat halaman selesai diurai. Catatan: Atribut defer hanya untuk skrip eksternal (seharusnya hanya digunakan jika atribut src ada). Catatan: Ada beberapa cara skrip eksternal dapat dijalankan: Jika async hadir: Script dijalankan secara asynchronous dengan sisa halaman (script akan dieksekusi saat halaman melanjutkan penguraian) Jika async tidak hadir dan menunda hadir: Script dijalankan saat halaman selesai diurai Jika tidak ada async atau defer yang ada: Script diambil dan dijalankan segera, sebelum browser melanjutkan penguraian halaman Nah berikut kode untuk defer loading multiple css : <script type="text/javascript"> var loadCSSFiles = function() { var links = ["//example.com/css/custom.css", "//fonts.googleapis.com/css?family=PT+Sans", "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css&quo