WMI

Disqus merupakan sebuah layanan komentar di dunia maya yang bisa di pakai dalam berbagai situs populer, seperti blog WordPress, Blogspot, Tumblr bahkan juga website besar seperti CNN.com dapat diintegrasikan dengan Disqus untuk mendukung layanan diskusi bagi para pengguna di dunia maya. Disqus juga dapat diintegrasikan dengan berbagai jenis CMS seperti Joomla, Drupal, Squares pace, Yola Site, Doku Wiki dan Chimp. Disqus dapat menjadi solusi alternatif layanan komentar dari sistem komentar bawaan blog itu sendiri karena lewat Disqus dapat memfasilitasi komentar-komentar yang ada dari pengguna blog secara lebih baik. Disqus dapat langsung dihubungkan dengan berbagai situs sosial media seperti Facebook, Twitter, Google Plus dan lain-lain. Dengan menghubungkan Disqus dan akun sosial media maka komentar yang ditampilkan di Disqus akan secara otomatis muncul di akun jejaring sosial si pengguna. Cases Namun pada saat user atau visitor me...

Adsense Shortcode Wordpress Compatible With WP AMP NINJA Plugin Call Adsense JavaScript (adsbygoogle.js) function saotn_loadAdsByGoogleJs() { wp_register_script( 'google-adsense', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', '', '', true ); wp_enqueue_script( 'google-adsense' ); } add_action( 'wp_enqueue_scripts', 'saotn_loadAdsByGoogleJs' ); Create In Article Ads Shortcode Goto Adsense Dashboard -> My Ads -> Add New -> Choose In Article Ads -> Set with your defined settings -> Get Code from <ins until </script> dont copy script.js above </ins>. //In Article Ads function IAA($atts) { $urlamp = (isset($_SERVER['HTTPS']) ? "https" : "http") . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; if (strpos($urlamp,'wpamp') !== false) { //echo 'Car exists.'; return '<amp-ad layout="fixed-height...

Structure BlogPosting pada AMP merupakan hal istimewa. Dijamin bila keyword density (kata-kata/kalimat yang berhubungan dengan title/judul post) banyak akan ditampilkan dalam card view di posisi kedua di google. (Cek Screenshot). Nah kali ini saya akan share bagaimana cara menempatkan schema Blogposting/BlogPosting Rich Card di blogger. Berikut tutorial nya: Taruh kode dibawah ini di bawah <article .....>: <b:if cond='data:blog.pageType == "item"'> <script type='application/ld+json'> {&quot;@context&quot;:&quot;http:\/\/schema.org&quot;,&quot;@type&quot;:&quot;BlogPosting&quot;,&quot;mainEntityOfPage&quot;:&quot;<data:blog.url/>&quot;,&quot;headline&quot;:&quot;<data:blog.pageTitle/>&quot;,&quot;datePublished&quot;:&quot;<b:if cond='data:post.timestamp'><data:post.timestamp/></b:if>&quot;,&quot;dateModified&quot;:...

unfortunately the  details  and  summary tags are not allowed in AMP HTML.   So the CSS spoiler only with details and summary can only be used for HTML5 templates only.   For CSS only spoilers to be used in HTML5 and AMP HTML then we need another way to create them.   Still remember with my post about fixed slide Blogger popular posts AMP HTML ?   There I used the  label label  and  input  for the  close  widget button.   From there I can idea to make CSS spoiler only with label and input .   The Demo can be tried in  amp-iframe  Codepen.io below.   How cool is not it?   If you want to try it on your blog, please follow the steps below.   Please save the CSS code below in your blog's CSS style .   .spoiler .spoiler_title {  display: inline;  float: left;  margin: 3px 10px 0 0;  padding: 4px 0;  fo...

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...

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...