Cara Membuat Komentar Disqus Onclick Event Pada Template Bawaan Blogger

Cara Membuat Komentar Disqus Onclick Event Pada Template Bawaan Blogger

Cara Membuat Komentar Disqus Onclick Event Pada Template Bawaan Blogger ternyata susah-susah gampang, susahnya karena tidak memahami struktur HTML serta CSS, gampangnya dimana???..di google banyak tuh sumbernya.... eits...!!! tapi jangan salah ya, tidak semua informasi yang kita cari di google sesuai dengan yang diharapkan. Apalagi di aplikasikan ke Template terbaru Bawaan Blogger ini, tentu bagi yang awam seperti saya ini akan pusing tujuh keliling.

" USAHA BERBANDING LURUS DENGAN HASIL "

Istilah diatas memang benar adanya, karena setelah saya mencoba dan mencoba dengan kendala serta dengan kekurangan yang ada akhirnya saya berhasil menerapkan Cara Membuat Komentar Disqus Onclick Event Pada Template Bawaan Blogger. Tujuan membuat Komentar Disqus Onclick Event ini agar loading blog kita cepat sehingga pengunjung betah berlama-lama di blog kita.

Berikut cara yang saya lakukan agar Komentar Disqus Onclick Event Berhasil di terapkan Pada Template Bawaan Blogger :

BIASAKAN BACKUP TAMPLATE SEBELUM KAMU MODIFIKASI

#comments{display:none;}
.post-comment-link {visibility:hidden;}
#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:center;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s}
#disqusshow:hover,#disqusshow:active{color:#f8695f}.bg-photo-overlay { display:none; }
.sticky .centered-top {display: none;}
.page_body .centered>#footer {display: none;}

Kode CSS diatas Kamu letakkan sebelum kode:

]]></b:skin>

Cari kode ini:

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

Kemudian isi atau kode di antara <b:includable id='comments' var='post'> dan </b:includable> kamu hapus, sehingga menjadi seperti ini:

<b:includable id='comments' var='post'>
<script async='async' type='text/javascript'>//<![CDATA[
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>
<b:if cond='data:view.isPost'>
<div id='disqusshow' onclick='load_Comments()'>Load comments</div><div id='disqus_thread'/>
</b:if>
</b:includable>

Kemudian kamu letakkan kode dibawah ini sebelum </body> :

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
var disqus_shortname = &quot;hangek&quot;;
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();//]]>
</script>
<script async='async' type='text/javascript'>
!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
//<![CDATA[
function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="hangek";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}
//]]>
</script>
</b:if>

var disqus_shortname = &quot;hangek&quot; ganti dengan Shortname Disqus kamu. kemudian kamu Save.
Load comments

Popular posts

Tanaman Hias Apung Aquascape Atau Kolam Amazon frogbit

Tanaman Hias Cryptocoryne Untuk Aquascape Dan Aquarium

Tanaman Hias Aquascape Atau Aquarium Cabomba caroliniana

Cara Merubah Tampilan Template Contempo Blogger

Kisah Singkat Dibalik Terbentuknya Logo Terkenal Di Dunia

Gunakan Google Lighthouse Untuk Meningkatkan Performa Website

Daftar Nama Domain Yang Dimiliki Oleh Google