WMI

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

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