Cara Membuat Tombol Show dan Hide Komentar Blog AMP - informasiajib

Cara Membuat Tombol Show dan Hide Komentar Blog AMP

Hallo semuanya ! Beberapa waktu yang lalu saya sudah membuat postingan tentang Cara Membuat Tombol Show dan Hide Komentar Blog / website Non AMP. Maka berbeda dengan postingan kali ini, saya akan membagikan tips serupa namun khusus untuk blog yang menggunakan template AMP yang dimana mendukung sistem komentar Disqus dan juga facebook.

Membuat tampilan kolom komentar menarik adalah salah satu cara yang bisa dilakukan untuk memanjakan para pengunjung blog agar nyaman ketika berkomentar pada sebuah halaman postingan. Banyak yang dilakukan oleh para blogger dan salah satunya dengan membuat efek show and hide pada kotak komentar.

Jika pada tampilan asli atau default kotak komentar akan muncul sempurna, Akan berbeda jika Memasang efek show and hide, yang dimana mengharuskan pengunjung untuk mengklik tombol show untuk membuka kotak komentar dan jika ingin menutupnya tinggal klik Hide maka kotak komentar yang tersebut akan kembali tertutup. Baiklah tanpa basa-basi langsung saja ikuti dan praktekan tutorial dibawah ini bagaimana cara membuat serta memasangnya.

Membuat Efek Show Hide Komentar Disqus

  • Pastikan kode javaScript dibawah ini sudah dipasang di atas &lt;/head&gt;&lt;!--<head/>--&gt; blog kalian.
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
  • Pastekan CSS dibawah ini pada style amp-custom di edit Tema Blog AMP kalian
*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.disqus{margin:0 -8px;padding:0 0 20px;font-family:Roboto,sans-serif;}
.disclaimer_box{width:100%;padding:2px;background:linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);border-radius:6px;}
.disclaimer_box .content{background:#fff;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.disclaimer_box .content p{margin:0;padding:0}
.buka-komen,.tutup-komen{font-family:Roboto,sans-serif;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:5px 7px;display:block;min-width:54px;text-align:center;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;}
.buka-komen{margin:20px 0;cursor:pointer;}
.tutup-komen{margin:20px 0 0;cursor:pointer;}
  • Untuk mengedit warna kalian ganti #11589D dengan kode warna yang kalian inginkan. Dan jangan lupa sesuaikan font nya juga.
  • Cari kode dibawah ini 
<b:includable id='comments' var='post'>
...................................
</b:includable>
  • Kemudian pastekan kode berikut ini dibawah <b:includable> pada kode di atas.
            <b:includable id='disquscomments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='open-comment'/>
<div class='disclaimer_box'>
  <div class='content'>
    <b>Comment Policy:</b> Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
  </div>
</div>
<div class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide,open-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Buka Komentar'>Buka Komentar</div>
<div class='tutup-komen' hidden='' id='tutup-komen' on='tap:komen.hide,tutup-komen.hide,buka-komen.show,close-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Tutup Komentar'>Tutup Komentar</div>
</b:if>
             <div class='disqus' hidden='' id='komen'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/ampdisqus_blogger4.html?shortname=kompi-minimalis&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=11589D&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;title=&quot; + data:blog.pageName' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'/>
</amp-iframe>
              </div>
            </b:includable>
  • Ganti kode kompi-minimalis  dengan shortname Disqus blog Kalian.
  • Simpan kode <div id='close-comment'/> ke atas kode Related Post kalian.
  • Kemudian cari dan hapus kode dibawah ini
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
  •  Kalian ganti dengan kode berikut ini
<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='disquscomments'/>
  •  Simpan Tema dan lihat hasilnya.

Membuat Efek Show Hide Komentar Facebook

  • Pastikan kode JavaScript dibawah ini sudah terpasang di atas &lt;/head&gt;&lt;!--<head/>--&gt; blog kalian.
<script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/>
  • Tambahkan kode CSS dibawah ke style amp-custom blog kalian.
*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.fb-comments{margin:0 -8px;padding:0;font-family:Roboto,sans-serif;}
.disclaimer_box{width:100%;padding:2px;background:linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);border-radius:6px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.disclaimer_box .content{background:#fff;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.disclaimer_box .content p{margin:0;padding:0}
.buka-komen,.tutup-komen{font-family:Roboto,sans-serif;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:5px 7px;display:block;min-width:54px;text-align:center;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;}
.buka-komen{margin:20px 0;cursor:pointer;}
.tutup-komen{margin:20px 0 0;cursor:pointer;}
  •  Kalian sesuaikan warna yang di inginkan dengan mengganti #11589D  dengan kode warna tombol show hide yang di inginkan.
  • Cari kode dibawah ini
<b:includable id='comments' var='post'>
............
............
............
</b:includable>
  • Kalian pastekan kode berikut ini dibawah </b:includable> pada kode di atas.
            <b:includable id='fbcomments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='open-comment'/>
<div class='disclaimer_box'>
  <div class='content'>
    <b>Comment Policy:</b> Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
  </div>
</div>
<div class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide,open-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Buka Komentar'>Buka Komentar</div>
<div class='tutup-komen' hidden='' id='tutup-komen' on='tap:komen.hide,tutup-komen.hide,buka-komen.show,close-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Tutup Komentar'>Tutup Komentar</div>
</b:if>
<div hidden='' id='komen'>
<div class='fb-comments' id='fb_comments'>
<amp-facebook-comments data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'>
</amp-facebook-comments>
</div>
</div>
            </b:includable>
  • Simpan kode ini <div id='close-comment'/> di atas kode Related Post blog kalian.
  • Cari kode dibawah ini dan hapus
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
  •  Ganti dengan kode berikut ini
<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='fbcomments'/>
  • Simpan tema dan lihat hasilnya. 

Sumber : kompiajaib
Show Comments

0 Response to "Cara Membuat Tombol Show dan Hide Komentar Blog AMP"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel