• Newsletter
  • Contact Us
Tuesday, August 16, 2022
  • Login
  • Register
BabaK BeluR
ADVERTISEMENT
  • Home
  • Lifestyle
  • Food
  • Travel
  • Health
  • Ratu Shop
No Result
View All Result
  • Home
  • Lifestyle
  • Food
  • Travel
  • Health
  • Ratu Shop
No Result
View All Result
BabaK BeluR
No Result
View All Result

Cara Membuat Tombol Disqus di Blog Valid AMP

Disqus Valid AMP

BabaK BeluR by BabaK BeluR
November 3, 2021
in Blogger
Reading Time: 2 mins read
1.1k 11
0
1.3k
SHARES
1.8k
VIEWS
Share on FacebookShare on TwitterShare on PinterestShare on TumblrShare on Wechat

Pembahasan Artikel BabaKBeluR.com kali ini, Cara Membuat Tombol Disqus di Blog Valid AMP

Disqus di Blog Valid AMP

RelatedPosts

Cara Membuat Notifikasi Cookie di Blogger Valid AMP

Cara Memasang Post Twitter ke Postingan Blog AMP

Cara Memasang Google Maps di Blog Valid AMP

Cara Upgrade Akun Google Adsense Hosted ke Non Hosted

Pembahasan kali ini adalah bagaimana cara memasang tombol show hide di komentar Disqus, dengan salah satu alasan agar loading di komentar Disqus tersebut dapat dikurangi sehingga jika ingin berkomentar terlebih dahulu kita harus mengklik tombol show komentar tersebut. Trik ini banyak di posting oleh para blogger karena ini merupakan tampilan komentar yang menarik dan di sempurnakan oleh Kang Adhy Suryadi pada blognya.

Sekarang kita akan bahasa bagaimana cara memasang tombol show hide/ buka tutup komentar tersebut, sehingga jika ingin berkomentar anda terlebih dahulu harus mengklik tombol tersebut.

Berikut kita mulai langkah membuat tombol Show Hide/ Buka Tutup pada Komentar Disqus untuk tamplate AMP

Langkah pertama anda harus memasang JS di bawah ini seperti cara-cara yang sudah kita pelajari di artikel-artikel sebelumnya

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

Untuk Template Anda yang sudah pernah memasang komentar Disqus anda dapat mencari cari kode seperti dibawah ini

Spoiler title
<amp-iframe expr:src='"https://cdn.rawgit.com/babakbelur1819/Disqus-Comment/dfb57015/Disqus-Comment.html?shortname=BabaKBeluR&fontBodyFamily=sans-serif&fontLinkColor=e8554e&url=" + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'>

Lalu kemudian ganti kode tersebut dengan kode dibawah ini:

Spoiler title
<amp-accordion> <section> <h4> <span class='show-more'>Show Disqus Comment</span> <span class='show-less'>Hide comment</span> </h4> <amp-iframe expr:src='&quot;https://cdn.rawgit.com/babakbelur1819/Disqus-Comment/dfb57015/Disqus-Comment.html?shortname=babakbelur&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive'resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'width='600'> <div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div> </amp-iframe> </section> </amp-accordion>

Ganti Shortname babakbelur yang di tandai diatas dengan shortname Disqus milik anda sendiri. Langkah selanjutnya adalah temukan kode

komentar disqus komen
komentar disqus komen
Spoiler title
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'> <style amp-custom='amp-custom'> /*<![CDATA[*/

Dan langkah terakhir pada kode diatas silahkan anda dapat tambahkan CSS dibawah ini

Spoiler title
.section[expanded] .show-more,section:not([expanded]) .show-less{display:none;}
.disqus-comments h4{padding:8px 10px;text-align:center;color:#000;background:#f5f5f5;border:none;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:.3s box-shadow ease;-webkit-transition:.3s box-shadow ease;text-shadow:0 0 0;clear:both}
.disqus-comments h4:hover {box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);}
.disqus-comments amp-iframe{margin-left:-8px;margin-right:-8px}

Kemudian simpan Template anda dan lihat hasilnya.

Demikian tadi artikel tentang Cara Membuat Tombol Disqus di Blog Valid AMP anda. Dan jika anda memliki pertanyaan seputar Cara Membuat Tombol Disqus di Blog Valid AMP ini ataupun anda ingin sharing informasi silahkan berkomentar melalui disqus di bawah dan jangan lupa like fanspage, Subscribe Youtube channel kami di samping artikel ini, jangan lupa share artikel ini jika bermanfaat. Terima kasih telah berkunjung.

BabaKBeluR.com : Jika Artikel ini Menarik dan Bermanfaat Silahkan Memilih Reaksi Terhadap Artikel ini. Bagikan Artikle ini Ke Social Media, Anda Juga Dapat Berdonasi Melalui: Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain babakbelur.com – Terima kasih.
Tags: blogspotdisqus
Share505Tweet316Pin114ShareShare
Previous Post

Cara Membuat Klapertart Panggang Enak original Sederhana

Next Post

Cara Memasang Komentar Disqus Pada Blog Valid AMP

BabaK BeluR

BabaK BeluR

Blogger, Pencinta Fotografi dan VideoGrafi

Related Posts

Cookies bar blogger valid amp

Cara Membuat Notifikasi Cookie di Blogger Valid AMP

November 10, 2021
1.9k
twitter blogger
Blogger

Cara Memasang Post Twitter ke Postingan Blog AMP

November 2, 2021
1.8k
Google Maps AMP
Blogger

Cara Memasang Google Maps di Blog Valid AMP

November 2, 2021
1.8k
upgrade akun adsense
Blogger

Cara Upgrade Akun Google Adsense Hosted ke Non Hosted

November 2, 2021
1.8k
DISQUS on web
Blogger

Cara Memasang Komentar Disqus Pada Blog Valid AMP

November 2, 2021
1.8k
Blogger

SEO Gambar Melibatkan untuk Meningkatkan Traffic Situs Anda

August 25, 2021
1.8k
Next Post
DISQUS on web

Cara Memasang Komentar Disqus Pada Blog Valid AMP

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

I agree to the Terms & Conditions and Privacy Policy.

Premium Content

hemoglobin

Hemoglobin: Fungsi, Nilai Normal, Nilai Tidak Normal

November 8, 2021
1.8k
forex online

Cara Cepat Belajar Forex Untuk Pemula

November 3, 2021
1.8k
lemon appricote

Cara Membuat Lemon Apricot Cake Sederhana

November 22, 2021
1.8k

Dapatkan Info Menarik GRATIS!!

Browse by Category

  • Beauty (7)
  • Blogger (26)
  • Crypto (6)
  • DIY (2)
  • Education (60)
  • Food (61)
  • Forex (6)
  • Health (25)
  • Lifestyle (10)
  • Photography (20)
  • Religion (13)
  • Travel (36)
Facebook Twitter Pinterest Telegram Instagram Youtube RSS
BabaK BeluR

BabaK BeluR Mengenai Tips dan Trik Blogger, Teknik Fotografi, Resep Masakan, Ebook, Traveling, Religi, Kesehatan, Kecantikan, Kreatif, Crypto

Categories

  • Beauty
  • Blogger
  • Crypto
  • DIY
  • Education
  • Food
  • Forex
  • Health
  • Lifestyle
  • Photography
  • Religion
  • Travel
  • About Us
  • Table of Content
  • Blog PLR
  • Placing ad
  • Disclaimer
  • Terms of Service
  • Privacy Policy
  • Contact Us

© 2021 BabaKBeluRcom - Premium news & magazine by BabaKBeluRcom.

No Result
View All Result
  • Home
  • Lifestyle
  • Food
  • Travel
  • Ratu Shop
  • Contact Us
  • Login
  • Sign Up

© 2021 BabaKBeluRcom - Premium news & magazine by BabaKBeluRcom.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

*By registering into our website, you agree to the Terms & Conditions and Privacy Policy.
All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.
 

Loading Comments...