[DISQUS] Mengatasi Plaintext URL Menjadi Link Hidup Otomatis

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 membuat komentar di disqus dan menyertakan sebuah url, maka url tersebut otomatis akan menjadi Link Hidup. Penyebab dari masalah ini adalah dari template yang menggunakan sistem komentar Disqus. Karena di pengaturan Disqus muncul fitur baru yang memungkinkan tulisan berupa link akan otomatis menjadi link hidup dan ini memang cukup mengganggu.

Bagaimana Cara Mengatasinya ?

Kunjungi disqus.com > Klik Gambar Avatar User Kamu (pojok kanan atas) > View profile > Admin Menu > pilih salah satu situs mu yang akan di edit. > klik menu Settings > Advanced > Hapus / Uncheck pada Affiliate Links > Save.

Selesai. Demikian Cara Mengatasi Plaintext URL Disqus Otomatis menjadi Link Hidup

In Article Ads And Single Ads Shortcode Wordpress With WP AMP NINJA Plugin

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" height=100 type="adsense" data-ad-client="ca-pub-7975270895217217" data-ad-slot="7382733759">
</amp-ad>';
} else {
  return '<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-XXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
       }
}
add_shortcode('ads', 'IAA');

Add shortcode [ads] in every post Location.
Replace ad-client and ad-slot with your in article ads client and slot number.

Add Shortcode Responsive Adsense

Goto Adsense.Google.com -> My Ads -> Ad New -> Choose Text And Image Ads -> Choose Responsive Ads -> Get Code from <ins until </script> dont copy script.js above <ins>.

//Single Adsense
function adsens($atts) {
   extract(shortcode_atts(array(
      'adsid' => h50,
      'height' => 250,
   ), $atts));
    $google_code = '<ins id="'.$adsid.'" class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';
$ampr = '<amp-ad layout="fixed-height" id="'.$adsid.'" height='.$height.' type="adsense" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXXXXXX"></amp-ad>';
$urlamp = (isset($_SERVER['HTTPS']) ? "https" : "http") . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];

if (strpos($urlamp,'wpamp') !== false) {
    return $ampr;
} else {
return $google_code;
}
}
add_shortcode('adsense', 'adsens');

add shortcode [adsense height="50" id="YOURID"]
Change number 50 to your defined height in pixel (px).
YOURID change with your defined ID (if you have css to styling this ads).

Done. In Article Ads And Single Ads Shortcode Wordpress With WP AMP NINJA Plugin hope be functionally for your adsense.

Schema Blogposting Untuk Blogger AMP

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;:&quot;<b:if cond='data:top.showTimestamp'><data:post.lastUpdatedISO8601/></b:if>&quot;,&quot;publisher&quot;:{&quot;@type&quot;:&quot;Organization&quot;, &quot;name&quot;:&quot;Dimas Lanjaka&quot;, &quot;image&quot;: { &quot;@type&quot;:&quot;ImageObject&quot;, &quot;url&quot;:&quot;<b:if cond='data:post.firstImageUrl'><data:post.firstImageUrl/></b:if>&quot;, &quot;width&quot;:&quot;60&quot;, &quot;height&quot;:&quot;60&quot; }, &quot;logo&quot;: { &quot;@type&quot;:&quot;ImageObject&quot;, &quot;url&quot;:&quot;<b:if cond='data:post.firstImageUrl'><data:post.firstImageUrl/></b:if>&quot;, &quot;width&quot;:&quot;60&quot;, &quot;height&quot;:&quot;60&quot; } },&quot;author&quot;:{&quot;@type&quot;:&quot;Person&quot;, &quot;name&quot;:&quot;Dimas Lanjaka&quot;},&quot;description&quot;: &quot;<b:if cond='data:blog.metaDescription'><data:blog.metaDescription/><b:else/><b:if cond='data:post.snippet'><data:post.snippet/></b:if></b:if>&quot;,&quot;image&quot;:{ &quot;@type&quot;:&quot;ImageObject&quot;, &quot;url&quot;:&quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/><b:else/><b:if cond='data:post.firstImageUrl'><data:post.firstImageUrl/> <b:else/>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWiS2_YRxGbS1fO0VctqNIlxFAoHTf4sjFHko8EYilguaPJniFU5asEg6CN7OLFPpJrTQbq35bLSLYxIEvWkGC5sj9SHkWylkFOiBOgmW1WsVECAdDbnI1v1sxneyIt30zv3-j9ysfjlKK/w200-c-h150/no-image.png</b:if></b:if>&quot;, &quot;width&quot;:&quot;622&quot;, &quot;height&quot;:&quot;415&quot;}}
</script>
</b:if>

Simpan template. Cek di https://search.google.com/structured-data/testing-tool/u/0/?hl=en#url=https://domain.mu/post.html.

https://domain.mu/post.html ganti dengan url post blog kamu

CSS Spoiler Only With Label And Input

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; 
font-size: 16px; 
line-height: 1; 
} 
.spoiler label { 
cursor: pointer; 
background: #26272a; 
margin: 0; 
padding: 4px 18px 4px 22px; 
outline: none; 
border-radius: 3px; 
color: #efefef; 
transition: all .3s ease-in-out; 
display: inline; 
font-size: 12px; 
font-family: arial, san-serif; 
line-height: 1; 
position: relative; 
} 
.spoiler input[type=checkbox] ~ label:before { 
content: ""; 
height: 0; 
width: 0; 
border-width: 4px 4px 4px 7px; 
border-style: solid; 
border-color: transparent transparent transparent #fff; 
position: absolute; 
top: 7px; 
left: 8px; 
} 
.spoiler input[type=checkbox]:checked ~ label:before { 
content: ""; 
height: 0; 
width: 0; 
border-width: 7px 4px 4px 4px; 
border-style: solid; 
border-color: #fff transparent transparent transparent; 
position: absolute; 
top: 8px; 
left: 8px; 
} 
.spoiler input { 
position: absolute; 
left: -999em; 
opacity: 0; 
} 
.spoiler .content_box { 
width: 100%; 
border: 1px solid #ddd; 
background: #efefef; 
height: auto; 
padding: 6px 10px; 
margin: 8px 0 0; 
overflow: hidden; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 
.spoiler .content_box .content { 
display: none; 
} 
.spoiler .content p { 
padding: 0; 
margin: 0 
} 
.spoiler .content p img { 
margin: 4px 0 0; 
max-width: 100%; 
height: auto; 
} 
.spoiler input[type=checkbox]:checked ~ .content_box .content { 
display: block; 
-webkit-animation: slide-down .3s ease-out; 
-moz-animation: slide-down .3s ease-out; 
} 
@-webkit-keyframes slide-down { 
0% { 
opacity: 0; 
-webkit-transform: translateY(-100%) 
} 
100% { 
opacity: 1; 
-webkit-transform: translateY(0) 
} 
} 
@-moz-keyframes slide-down { 
0% { 
opacity: 0; 
-moz-transform: translateY(-100%) 
} 
100% { 
opacity: 1; 
-moz-transform: translateY(0) 
} 
} 

Then please use the HTML code below each will insert a spoiler inside the post (in HTML mode). 

<div class="spoiler">  
  <span class="spoiler_title">Spoiler: 
  </span>  
  <input type="checkbox" id="item-1">  
  <label for="item-1">Hint
  </label>  
  <div class="content_box">    
    <div class="content">      
      <p>Save content here.....
      </p>      
      <br/>      
      <p>Or you can save images here......
      </p>    
    </div>  
  </div>
</div>

Note the item-1 code in the input and label tags must be the same. If you want to use more than 1 spoiler in the post, then change item-1 to item-2 , item-3 , and so on for second spoiler, third spoiler, and so on. 

And keep in mind! It turns out that in AMP HTML can not save the amp-img inside the spoiler, unless the spoiler opens first. 

AMP Social Sharing Button Added BBM and WhatsApp

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.

Add below code into above </body> tag.

Find code below in html editor (template blogger)

<b:includable id='shareButtons' var='post'>
............
............
............
</b:includable>

then add below codes Under code </b:includable>
And please save the code below where you want to display the button, usually below the post.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

---

So how to make AMP Social Sharing Button added BBM and WhatsApp, hopefully useful.

Responsive AMP Social Sharing Button

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>

Then add this Css into your Template.

Then Search this code:

<b:includable id='shareButtons' var='post'>
............
............
............
</b:includable>

then save this code below </b:includable>

Then please save the code below where you want to display the share button.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

---

So article about how to create responsive social sharing button on the amp / Responsive Amp Social Sharing Button, hopefully this article useful

Shortcode amp list (new)

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 initially hidden. Succedeed
</div>

---

Scroll To

Scrolling to top, bottom, center, and slowly scrolling pages.

  <button on="tap:normal-element2.scrollTo">ScrollTo</button>
  <button on="tap:normal-element2.scrollTo('position' = 'bottom')">ScrollTo Bottom page</button>
  <button on="tap:normal-element2.scrollTo('position' = 'center')">ScrollTo Center page</button>
  <button on="tap:normal-element2.scrollTo('duration' = 5000)">ScrollTo Slowly inside page</button>

<div id="normal-element2">
  Scroll to other section pages.
</div>

---

Focus

focus to class="focus". This function like hyperlink page <a href=".focus">focus</a>

<button on="tap:input-element.focus">Focus to</button>

---

Combine The Commands

combine two of command and more. Like this combined of Scrolling and focus commands function

<button on="tap:normal-element2.scrollTo('position' = 'center'), input-element.focus">ScrollTo and Focus functions</button>

---

Please use as needed.
       Source: Github.

---

So article about Shortcode amp list (new), may be useful to increase knowledge about AMP Functions