WMI

If my friend had more than one blog and want to show the other blog to another blog can use this iframe. Due to the usefulness of this iframe is to show another blog to our blog. Of course in using iframe some like and others do not. Sukanya we can read and read other blogs within a blog. And perhaps less joy iframe page that we love bebanya will increase because they have opened two blogs at once. Automatic loading time will increase as well. For that to this blog is not too heavy I would love iframe example by displaying a page from one of this blog as well. The code that we use are: <iframe> </ iframe> Medium astribut frequently used are: ALIGN = "left / right" FRAMEBORDER = "borderline" WIDTH = "width" HEIGHT = "high" SCROLLING = "auto / yes / no" SRC = "url address to be in the show" Below is an example of iframes zoom I took from one of the pages of this blog. And the following code

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

I also share responsive AMP social sharing buttons for Blogger AMP HTML. Responsive AMP social sharing button is quite complete ie the share button for Facebook, Google+, Twitter, Pinterest, LinkedIn, Tumblr, Whatsapp, SMS, and Email, Adding BBM and Whatsapp Here Tutorial . If you want to try installing it yourself, please follow the steps below. Please save the js amp-social-share code above </ head> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/> </b:if> Then add this Css into your Template. /* Social Share */ .sharethis{position:relative;margin:20px 0;padding:0;font-size:0} .sharethis .tw,.sharethis .gp,.sharethis .pi,.sharethis .fb,.sharethis .li,.sharethis .wa,.sharethis .ta,.sharethis .sms,.sharethis .em{width:11.111111%;height:30px;line-height:30px;margin:0;text-align:center;display:inli

It turns out that in AMP there are some standard action codes or shortcodes to make it easier to give certain commands to an element such as redirect, print, show, hide, toggle, scroll to, and focus on input. With these commands we do not need an AMP plugin to perform its function. The commands are as below. AMP.navigateTo() Will be redirect to choosen url <button on="tap:AMP.navigateTo(url='http://bing.com')">bing.com</button> AMP.print() will be print current active pages <button on="tap:AMP.print">Print this page</button> Show, Hide, Toggle Visibility show, hide text and visibility toggle function <button on="tap:normal-element.show">Show text</button> <button on="tap:normal-element.hide">Hide text</button> <button on="tap:normal-element.toggleVisibility">Toggle Visibility now</button> <div id="normal-element" hidden>   I was

Komponen amp-pixel berperilaku seperti img img gambar sederhana. Dibutuhkan satu URL saja, namun memberikan variabel yang bisa digantikan oleh komponen dalam string URL saat melakukan request. Lihat bagian substitusi (ampproject-org) untuk rincian lebih lanjut. Dalam contoh dasar ini, pesan ampli memberi sedikit permintaan GET sederhana ke URL yang diberikan dan mengabaikan hasilnya. <amp-pixel src="https://foo.com/tracker/foo" layout = "nodisplay"></amp-pixel> Nah kali ini saya akan share bagaimana cara Memasang Histats Di AMP Menggunakan amp-pixel . Ikuti langkah-langkah nya dibawah ini: Masuk Ke http://histats.com, login atau register (-Baca-> Bagaimana Cara Daftar Histats ) Pilih akun website histat anda atau buat Akun Website Baru Buat Counter Code (HIDDEN TRACKER). Pilih No JavaScript di bagian code section ambil source img nya -> <img src="disini" /> Histats Amp-Pixel Kemudian silahkan pasang kode berikut di

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"/>

Installing a recent post widget is one way to minimize bounce rate blog by providing information for the latest posts on readers. With so readers will easily find the most warm posts on the blog. Many kinds of recent post widgets like recent posts or recent carousel shaped posts. Well this time I will share a blogger widget recent posts are quite simple and stored in the sidebar blog. In addition to simple, recent posts widget has a fairly light loading, so you need to try also hehehe ... Demo If you are interested to try it, please follow the steps below. Please save the following CSS code above </head> code (you may need to customize some sections to customize it to the theme you are using). <style> /*<![CDATA[*/ ul#recent-posts{width:100%;margin:0 auto;padding:0!important;list-style-type:none} ul#recent-posts li{background:#FFF;padding:0!important;margin-bottom:10px;overflow:hidden;width:100%;height:auto;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-

Cara mempercepat loading fonts blog (webfonts). Sekian banyak kode yang saya implementasikan namun belum ada yang mempercepat loading font. Nah berikut tutorialnya: Metode 1. Taruh atau ambil fonts (ttf,woff, dan lainnya) di cdn  Lalu pasang htaccess berikut: # Apache config <FilesMatch ".(eot|ttf|otf|woff)"> Header set Access-Control-Allow-Origin "*" </FilesMatch> # nginx config if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){ add_header Access-Control-Allow-Origin *; } 2. Gunakan Non-Blocking CSS Loading <link rel="stylesheet" type="text/css" href="fonts.css" media="none" onload="this.media='all';"> <link rel="stylesheet" type="text/css" href="style.css" media="none" onload="this.media='all';"> 3. Bedakan fonts model dengan CSS h1 { font-family: Arial, serif; } /* basic system font */ .fontsloaded h1 { font-f