Membuat Buka Tutup Komentar dengan Pop-up
Salah satu fitur menarik dari blog Kompi Ajaib miirp kang Adhy adalah tombol buka-tutup komentar dengan pop up. Bagaimana cara membuatnya? Yuk, kita coba buat sendiri di blog masing-masing.
Akhir-akhir ini kang Adhy Suryadi telah update tampilan templatenya. Salah satu perubahan signifikan adalah tampilan menu header pada menu dektop yang akan mengecil ketika di-scroll, sidebar blog sticky tidak lagi fixed, toggle sidebar yang dapat show-hide, tampilan search box yang lebih elegan, icon android, dan yang paling menarik adalah tombol buka tutup komentar Disqus dengan pop up.
Lalu bagaimana cara membuat tombol komentar disqus buka tutup dengan pop up seperti Kompiajaib? Setelah bebarapa kali percobaan, akhirnya ketemu juga solusi untuk membuat buka tutup disqus dengan pop up fixed. Untuk membuatnya diperlukan adanya beberapa perubahan pada CSS, peletakkan kode HTML buka tutup komen disqus, dan tampilan kode comments.
Untuk kamu pengguna template Non AMP dan ingin membuat tombol buka tutup komentar disqus dengan gaya pop up melayang pada blog maka inilah 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.
Cara Pertama
Baiklah jika kamu tertarik untuk membuat button buka tutup disqus dengan pop up melayang pada blogger seperti kompiajaib, sobat bisa mengikuti langkah-langkahnya di bawah ini. Jangan lupa, lakukan backup terlebih dahulu pada tempalte blog kamu sehingga jika ada masalah, kamu bisa mengembalikannya seperti semula.
Pertama, masuk ke dashboard Blogger lalu pilih menu Theme - Edit HTML. Cari dan hapus kode CSS .comments agar nantinya kode yang dimasukkan tidak saling tindih.
Jika sudah, salin script berikut ini dan letakkan sebelum </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;}}
Selanjutnya cari kode <div class='comments' id='comments'> dan ganti dengan script di bawah ini:
<div id='open-comment'/>
<div aria-label='Buka Komentar' class='buka-komen fontroboto' id='buka-komen' onclick='document.getElementById("comments").style.display="block";document.getElementById("tutup-komen").style.display="block";document.getElementById("buka-komen").style.display="none";jump("open-comment")' 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("comments").style.display="none";document.getElementById("tutup-komen").style.display="none";document.getElementById("buka-komen").style.display="block";jump("close-comment")' role='button' tabindex='0'>Tutup Komentar</div>
<div id='disqus_thread'/>
<script type='text/javascript'>
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
</script>
</div>
</div>
</div>Berikutnya tambahkan kode berikut sebelum 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>Klik tombol Save dan lihat hasilnya.
Cara Kedua
Karena struktur kode setiap template itu berbeda-beda, kadang cara di atas tidak tampil sebagaimana mestinya. Apabila masih gagal, silahkan coba menggunakan cara berikut. Cara kedua ini tidak banyak melakukan perubahan, tetapi cukup mengubah tata letak dan menambah kode saja. Baiklah untuk template buatan kompiajaib yang terdapat komentar buka tutup disqus bisa mengikuti langkah dibawah ini.
Seperti pada langkah pertama, cari dan hapus semua kode css .comments
Tambahkan script di bawah ini sebelum </style> :
.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;}}Cari kode <div class='comments' id='comments'> lalu ganti dengan kode berikut:
<div aria-label='Buka Komentar' class='buka-komen fontroboto' id='buka-komen' onclick='document.getElementById("comments").style.display="block";document.getElementById("tutup-komen").style.display="block";document.getElementById("buka-komen").style.display="none";jump("open-comment")' 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("comments").style.display="none";document.getElementById("tutup-komen").style.display="none";document.getElementById("buka-komen").style.display="block";jump("close-comment")' role='button' tabindex='0'>Tutup Komentar</div>
<div id='disqus_thread'/>
<script type='text/javascript'>
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
</script>
</div>
</div>
</div>Klik tombol Save dan lihat hasilnya. Semoga membantu.
di saya gak tampil kolom komennya masta
BalasHapus