Minggu, 11 September 2016

Cara Membuat Komentar Disqus Oneclick

image

Komentar sangat penting untuk Blog, dan memudah kan kita berkomunikasi dengan pengunjung agar pengunjung betah berada di blog kita, jika kita merespon komentar pengunjung yang bertanya atau sekedar nitip Back link tuntu itu sangat berpengaruh untuk blog kita sendiri.

Jika kita tidak sigap dalam merespont komentar, jangan heran pengunjung tidak akan balik lagi ke blog kita.

Di Blog, kita bisa menggunakan komentar bawaan dari Blogger  atau kita bisa memasang komentar Facebook atau kita mamasang komentar dari Disqus nah Disqus yang lagi marak sekarang untuk di pasang dalam Blog.

Mengapa Disqus marak dijadikan tempat komentar di Blog karna mudah dalam pemakaian juga enak untuk di lihat, hanya dengan login lewat akun Disqus,Facebook,Twitter,Atau Google. Jika kita tidak mempunya akun Google kita bisa login lewat Facebook, Jika kita tidak punya Facebook kita bisa login lewat Twitter begitu sebaliknya, jika kita tidak punya akun Google bisa pakai akun Facebook,Twitter, atau dengan Akun Disqus itu langsung

Tertarik ? langsung aja ikuti Tutornya

Cara Membuat Komentar Disqus Oneclick, Cara Memasang Komentar Disqus, Cara Membuat Komentar Disqus, Cara Membuat Memasang Komentar Disqus Untuk Di Blog, Komentar Disqus, Widget Disqus.





1. Kalau di blog sobat sudah terdapat widget Disqus dan semua kode yang berkaitan dengan disqus, silakan hapus terlebih dahulu.

2. Dalam tutorial ini ada kode yang menggunakan fontawesome. Pastikan di dalam template sudah terdapat link fontawesome.

3.Pastikan Blog sobat sudah menggunakan system komentar Disqus

1. Masuk Blogger > Template > Cari kode di bawah ini

Klik dua kali untuk mengcopy


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

2. Tambahkan kode di bawah ini tepat di bawah kode pada langkah di atas

Klik dua kali untuk mengcopy

<b:includable id='disqus-comment' var='post'>
<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>
</b:includable>

Hasilnya

Klik dua kali untuk mengcopy

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

<b:includable id='disqus-comment' var='post'>
<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>

</b:includable>

3. Selanjutnya tambahkan kode di bawah ini sebelum </body>

Klik dua kali untuk mengcopy

<script type='text/javascript'>
var disqus_shortname = &quot;tirtamubien&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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script 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="tirtamubien";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="http://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}
//]]>
</script>
</b:if>

Ganti kode yang ditandai dengan username disqus sobat.

4. Selanjutnya tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>

Klik dua kali untuk mengcopy

/* Disqus Comments */
#comments{display:none;}
.post-comment-link {visibility:hidden;}
#disqus_thread {background:#3EB0E0;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;}
#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;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:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}
#disqusshow:hover,#disqusshow:active{color:#f8695f}

5. Cari kode di bawah ini

Klik dua kali untuk mengcopy

<div class='comments' id='comments'>

6. Tambahkan kode di bawah ini tepat di atas kode pada langkah ke 5

Klik dua kali untuk mengcopy

<div id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>

Hasilnya

Klik dua kali untuk mengcopy


<div id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>

<div class='comments' id='comments'>

7. Untuk menampilkan disqus comment count di halaman index dan postingan, silakan tambahkan kode di bawah ini pada post meta atau post info sesuai template yang digunakan

Klik dua kali untuk mengcopy


<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a>

8. Simpan template.

Klik dua kali untuk mengcopy

Demikian tutorial tentang Cara Membuat Komentar Disqus Oneclick, semoga bermanfaat.

Next

Related


EmoticonEmoticon