Cara Buat Komentar Disqus Buka Tutup Blog AMP

Cara buat komentar Disqus buka tutup untuk blog AMP sebagai salah satu cara untuk mengurangi beban blog ketika diakses. Jadi dengan demikian akan menjadikan blog lebih ringan dan cepat ketika dibuka.

Komentar Disqus

Kolom komentar dalam sebuah blog penting arti kehadirannya karena dapat berfungsi sebagai interaksi terhadap sesama pengunjung blog dan juga kepada pemilik blog.

Misalnya saja ada pengunjung blog yang setelah membaca salah satu artikel mungkin ada poin-poin tertentu yang tidak paham, maka dengan memanfaatkan kolom komentar bisa mengajukan pertanyaan kepada pemilik blog.

Pada platform Blogspot memang sudah menyediakan fitur kolom komentar secara default, namun banyak teman2 Blogger yang ahli dalam bidang template Blogger menambahkan fitur komentar lainnya seperti komentar Facebook dan juga komentar Disqus. Atau bahkan hanya memasang komentar disqus saja pada blognya.

Diantara kelebihan dari komentar Disqus adalah dapat diatur siapa saja yang bisa meninggalkan komentar, artinya bisa mencegah anonymouse untuk nimbrung berkomentar pada postingan kamu. Disqus juga bisa edit komentar dari pengunjung. Disqus juga bisa memproteksi komentar yang mengandung link.

Bagi pengunjung yang ingin meninggalkan komentar pada sebuah blog bisa login dengan menggunakan akun Disqus itu sendiri maupun juga dengan akun media sosial populer lainnya. Jadi lebih memudahkan pengunjung untuk meninggalkan sebuah komentar. Atau bagi yang suka dengan komentar dengan emoticon, Disqus juga bisa lho.

Komentar Disqus Buka Tutup

Tertarik untuk memasang komentar Disqus di blog AMP kamu? Namun khawatir akan membuat loading blog menjadi lebih lambat. Jika demikian kamu bisa mencoba membuat komentar Disqus dengan model buka tutup. Bagaimana caranya ya? Selesaikan membaca artikel ini ya temans.

Baiklah biar tidak menambah rasa penasaran, temans yang masih Pemula juga bisa melakukannya sendiri, berikut cara membuat komentar Disqus buka tutup untuk blog AMP yaitu :

Pertama silahkan cek di template Blogger yang saat ini dipakai, apakah sudah terdapat kode amp-iframe seperti dibawah ini :

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

Jika belum, kamu bisa menambahkan kode tersebut sebelum kode &lt;/head&gt;&lt;!--<head/>--&gt;

Jika langkah diatas sudah dilakukan, selanjutnya adalah menambahkan kode CSS seperti dibawah ini pada bagian AMP-Custom, untuk memudahkan pencarian kamu bisa menggunakan CTRL+F dan ketikkan amp-custom :

*{-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;}

• Selanjutnya adalah mencari kode seperti dibawah ini :

<b:includable id='comments' var='post'>

Atau yang seperti ini :

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

Kemudian copy kode dibawah ini dan paste-kan dibawah kode diatas :

<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 tinggalkan komentar yang sesuai dengan topik pada postingan halaman ini. Komentar yang berisi tautan aktif tidak akan ditampilkan.

  </div>

</div>

<div aria-label='Buka Komentar' 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'>Buka Komentar</div>

<div aria-label='Tutup Komentar' 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'>Tutup Komentar</div>

</b:if>

             <div class='disqus' hidden='' id='komen'>

<amp-iframe expr:src='&quot;https://cdn.rawgit.com/Arlina-Design/redvision/c265155f/disqus_amp.html?shortname=cara-pemula&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>

Gantilah shortname cara-pemula dengan shortname disqus milik kamu sendiri ya. Oiya sampai disini belum selesai ya Temans, masih ada beberapa langkah lagi untuk menyelesaikannya.

• Selanjutnya yaitu mencari kode seperti dibawah ini :

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

• Kemudian menggantinya dengan kode berikut ini :

<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='disquscomments'/>

Nah agar ketika kolom komentar ditutup dan layar akan menampilkan artikel terkait, maka kamu bisa menambahkan kode berikut :

<div id='close-comment'/>

di atas kode related post / artikel terkait. Selesai.

Nah Temans, silahkan simpan template Blogger kamu dan cek pada postingan apakah kolom komentar Disqus sudah model buka tutup atau belum. Jika sudah berarti kamu sudah berhasil membuatnya. Selamat mencoba.

*)Credit kode KompiAjaib

Berbagi :