Skip to main content

Cara Mudah Membuat Tombol Komentar Disqus Buka Tutup Dengan Pop Up Seperti Kompiajaib

Cara Mudah Membuat Tombol  Komentar Disqus Buka Tutup Dengan Pop Up Seperti Kompiajaib
www.azid45.web.id - Cara Mudah Membuat Tombol  Komentar Disqus Buka Tutup Dengan Pop Up Seperti Kompiajaib. pada akhir-akhir ini kang Adhy Suryadi telah update tampilan templatenya. Diantara tampilan yang di update seperti, tampilan menu header pada menu dektop ketika di scroll tulisan kompiajaib mengecil, sidebar blog sticky tidak lagi fixed, terdapat toggle sidebar yang dapat show dan hidden sidebar tersebut, mengganti tampilan search box dengan gaya yang lebih elegan, terdapat icon android, serta yang paling menarik adalah perubahan button buka tutup disqus menjadi fixed dengan pop up tampil melayang pada bagian kanan blog. Pembaharuan ini semua dengan mudah diterapkan pada blog AMP dengan inpect kode template kompiajaib.com tersebut. Lantas apakah kita sebagai pengguna blog Non AMP bisa juga menggunakan gaya tampilan buka tutup komentar disqus tersebut?.

Pertanyaan inilah yang membuat penasaran, akhirnya saya bereksperimen dengan waktu yang agak panjang tentunya. Maklum saya adalah orang pemula pada dunia blogger, jadi dalam ilmu koding baik css maupun javascript masih belajar dan ATM (amati tiru dan modifikasi). Setelah bebarapa kali percobaan, akhirnya ketemu juga solusi untuk membuat buka tutup disqus dengan pop up fixed seperti kompiajaib. Dari hasil eksperimen saya, menyimpulkan, perlu adanya perubahan sedikit pada CSS dan peletakkan kode HTML buka tutup komen disqus dan tampilan kode comments.

Jika sobat pengguna template Non AMP dan ingin membuat tombol buka tutup komentar disqus dengan gaya pop up melayang pada blog maka disini solusinya. Jangan khawatir, ternyata tidak hanya blog AMP yang hanya bisa seperti itu akan tetapi blog Non AMP juga bisa menampilkan gaya pop up disqus seperti yang digunakan oleh kompiajaib. Baiklah jika sobat tertarik untuk membuat button buka tutup disqus dengan pop up melayang pada blogger seperti kompiajaib, sobat bisa mengikuti langkah-langkahnya dibawah ini:

PERHATIAN!
Sebelum mengeksekusi tutorial ini, alangkah baiknya sobat backup template sobat terlebih dahulu agar jika terjadi kesalahan bisa menggunakan template yang sudah di backup tadi dan tidak menyesal di kemudian hari. Adapun untuk template yang saya jadikan eksperimen adalah template kompi flexible Non AMP versi 8.

Pertama, sobat masuk blogger - menuju menu theme - pilih edit HTML. Jika sudah masuk, pastikan hapus kode CSS ".comments" agar nantinya agar kode cssnya tidak saling tindih. Jika sudah, langkah awal sobat bisa copas kode berikut ini dan letakkan diatas kode </head>

<style>
/* Comment Button */
.buka-komen,.tutup-komen{background:#04549d;color:#fff;}
.buka-komen,.tutup-komen{font-size:16px;line-height:1.3em;padding:10px;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;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
.buka-komen{margin:20px 0;cursor:pointer;}
.tutup-komen{margin:0;cursor:pointer;border-bottom:1px solid #ddd;-webkit-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;display:none}

.comments1{margin:0 0 20px 0;padding:20px 20px 0;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);height: 100vh;width: 600px;max-width: 100%;overflow-x:hidden;right:0;position:fixed;z-index:99999;}
.comments{background:rgba(0,0,0,.5);width:100%;height:100vh;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;display:none}
.comments1::-webkit-scrollbar{display:none}
.comments1{animation:animateright 0.4s}@keyframes animateright{from{right:-600px;} to{right:0;}}
</style>

Kedua, cari kode <div class='comments' id='comments'> dan ganti kode tersebut dengan kode dibawah ini

<div id='open-comment'/>
<div aria-label='Buka Komentar' class='buka-komen fontroboto' id='buka-komen' onclick='document.getElementById(&quot;comments&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;;jump(&quot;open-comment&quot;)' role='button' tabindex='0'>Buka Komentar</div>
<div class='comments' id='comments'>
<div class='comments1'>
<div aria-label='Tutup Komentar' class='tutup-komen fontroboto' id='tutup-komen' onclick='document.getElementById(&quot;comments&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;;jump(&quot;close-comment&quot;)' role='button' tabindex='0'>Tutup Komentar</div>
  <div id='disqus_thread'/>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;}
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</div>
</div>
</div>

Ketiga, langkah selanjutnya sobat bisa copas kode berikut ini dan letakkan kode tersebut tepat diatas kode </body>

<script>
//<![CDATA[
var shortname = "https-al-islamk-blogspot-com";
function jump(t){var e=document.getElementById(t).offsetTop;window.scrollTo(0,e)}var lazyaddthis=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&lazyaddthis===!1||0!=document.body.scrollTop&&lazyaddthis===!1)&&(!function(){var t=document,e=t.createElement("script");e.src="//"+shortname+".disqus.com/embed.js",e.setAttribute("data-timestamp",+new Date),(t.head||t.body).appendChild(e)}(),lazyaddthis=!0)},!0);
//]]>
</script>

Keempat, langkah terakhir adalah save template sobat dan lihat hasilnya.

Buka tutup komentar disqus pop up seperti kompiajaib untuk template buatan kompiajaib

Perlu diperhatikan sebagaimana yang saya jelaskan diawal, bahwa eskperimen yang saya buat adalah menggunakan template buatan kompiajaib "kompi flexible Non AMP versi 8" namun untuk template kompiajaib selain template kompi flexible yang menggunakan sarana buka tutup disqus, sobat bisa mengikuti tutorialnya berikut, agar tidak banyak perombakan ulang akan tetapi cukup perubahan tata letak kode dan penambahan kode ".comments" saja. Baiklah untuk template buatan kompiajaib yang terdapat komentar buka tutup disqus sobat bisa mengikuti langkah dibawah ini:

Pertama, cari kode css .comments

kurang lebih kode cssnya seperti  dibawah ini

.comments{margin:0 0 20px 0;padding:20px 20px 0;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);display:none}

Jika sudah ketemu, hapus saja kode tersebut dan ganti dengan kode css dibawah ini

.comments1{margin:0 0 20px 0;padding:20px 20px 0;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);height: 100vh;width: 600px;max-width: 100%;overflow-x:hidden;right:0;position:fixed;z-index:99999;}
.comments{background:rgba(0,0,0,.5);width:100%;height:100vh;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;display:none}
.comments1::-webkit-scrollbar{display:none}
.comments1{animation:animateright 0.4s}@keyframes animateright{from{right:-600px;} to{right:0;}}

Kedua, cari kode <div class='comments' id='comments'> maka akan terlihat kode sebagai berikut:

<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById(&quot;comments&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;;jump(&quot;open-comment&quot;)' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='tutup-komen' id='tutup-komen' onclick='document.getElementById(&quot;comments&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;;jump(&quot;close-comment&quot;)' role='button' tabindex='0'>Tutup Komentar</div>
<div class='comments' id='comments'>
  <div id='disqus_thread'/>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;}
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</div>

Darikode di atas sobat tinggal memindahkan kode tutup-komen di bawah kode <div class='comments' id='comments'> dan diatas kode tutup-komen tambahkan kode <div class='comments1'> dan jangan lupa tambahkan penutup </div> dibawah kode </script>. Untuk hasilnya akan tampak sebagai berikut:

<div aria-label='Buka Komentar' class='buka-komen fontroboto' id='buka-komen' onclick='document.getElementById(&quot;comments&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;;jump(&quot;open-comment&quot;)' role='button' tabindex='0'>Buka Komentar</div>
<div class='comments' id='comments'>
<div class='comments1'>
<div aria-label='Tutup Komentar' class='tutup-komen fontroboto' id='tutup-komen' onclick='document.getElementById(&quot;comments&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;;jump(&quot;close-comment&quot;)' role='button' tabindex='0'>Tutup Komentar</div>
  <div id='disqus_thread'/>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;}
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</div>
</div>
</div>

Ketiga, sobat bisa save template dan lihat hasilnya.

Untuk lihat demonya sobat bisa lihat dibawah ini atau klik disini



Demikianlah cara membuat tombol buka tutup komentar disqus pop up melayang pada blog Non AMP seperti kompiajaib.com, Semoga berhasil dan bermanfaat.

UPDATE 4 JULI 2019

agar tidak doble scroll bar maka saya display none scroll bar disqus agar lebih rapi. Meskipun di display none area disqus tetap bisa di scroll bar ke bawah. Jika sobat pernah buat tutorial disini tambahkan saja .comments1::-webkit-scrollbar{display:none} dan anismasi dengan kode css .comments1{animation:animateright 0.4s}@keyframes animateright{from{right:-600px;} to{right:0;}}
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar
Close Disqus