Cara Memasang Fitur Komentar di Tumblr

Kalo ngomongin penyedia jasa blog gratis, kira-kira apa yang bakalan kamu pikirin? Biasanya yang terpikir itu Blogspot, Wordpress, Drupal, sama Tumblr. Iya ngga? Nah, di post ini, saya mau sedikit ngasih tutorial yang ada kaitannya sama Tumblr. Kalo tips / trik buat blogspot & wordpress udah beberapa kali saya tampilin di blog ini. :D

Kali ini saya mau bahas tentang cara memasang Komentar (Comment box) di tumblr. Soalnya, tumblr dulu memang ngga nyediain layanan Comment Box, ngga kaya Blogspot sama Wordpress. Sekarang Tumblr udah integrasi sama Disqus.com, terutama buat template-template yang default. Tapi ada beberapa juga template yang belom terintegrasi sama Disqus. Nah, bagi yang baru pertama maenan Tumblr bingung juga caranya buat masang kotak komentar (comments box).

Contoh tampilan kotak komentar Disqus di Tumblr


Pilihannya sebenernya ada dua buat masang kotak komentar (comment box) ini. Tergantung template-nya. Pertama template Tumblr yang emang udah ada comment box nya (sekarang udah ada semua kalo yang default), atau masang comment box sendiri bagi template yang memang belom terintegrasi.

Caranya gimana ngecek kalo template kita sudah integrasi sama Disqus? Gampang. :P Tinggal buka https://www.tumblr.com/customize, terus di Theme Options di bar kiri, apa ada kolom Disqus Shortname? Kalo ada berarti udah terintegrasi. Kalo belom, brarti belom.

Cara buat yang udah terintegrasi itu gampang banget. Kamu tinggal ikutin deh langkah di bawah.

Cara Pertama >> Template Tumblr yang udah terintegrasi

1. Jadi pertama-tama buka alamat http://disqus.com di browser kamu.

2. Kalo udah dibuka, pilih Add Disqus to Your Site di menu atas. Kalo Scroll ke bawah sedikit, nanti tombol itu juga ada di sisi sebelah kanan. Atau pilih Sign Up di main menu sisi kanan atas.

3. Di halaman registrasi pertama, tinggal isi aja data-data yang ada di situ. Klik Next step, isi lagi, terus tinggal Finish Registration.


Tampilan halaman registrasi. Perhatikan kolom shortname Disqus. Isi dengan nama yang kamu inginkan.

4. Habis itu, kamu langsung diarahin ke halaman pemilihan platform blog. Tinggal pilih aja, kalo Tumblr yaa pilih lambang Tumblr aja.
Pilih platform tumblr

5. Nah, habis ini, akan masuk halaman Setting Instructions. Di halaman itu, kamu bakalan ditunjukin beberapa pilihan buat ngatur Comments box mu. Mulai dari General buat ngatur tampilan comments box, Website URL, dll. Isi semuanya. Terus ada Moderators buat setting ada momod tambahan atau ngga. Filter untuk ngatur apa ada kata-kata yg harus difilter. Dan yang terakhir Advanced buat ngatur Default avatar dll.

6. Kalau sudah, langsung aja klik link Settings > Your Site > Customize. Terus, masukin shortname akun disqus kamu yang udah ada di instruksi no 2. Habis itu, tinggal SAVE, beres deh. :D

Theme Option


Cara kedua, buat template yang belom terintegrasi dengan Disqus.


1. Asumsinya udah daftar Disqus.com yaa... :D

2. Di halaman Setup Instruction, kamu pilih Install Disqus Manually. Perhatiin gambar di bawah deh.



3. Habis itu, kamu langsung dianter ke halaman Tumblr Manual Installation Instructions.

4. Di situ sebenernya udah dijelasin dengan lengkap langkah - langkahnya. Tapi pake bahasa inggris. Kalo bingung bahasa inggrisnya, tinggal pake google translate, atau tanya temen sebangku, temen sekamar, kakak, atau mamah papah. :V Hahaha, tapi karena saya baik, saya translate-in yaa. :3

5. Langkah pertama, buka https://www.tumblr.com/settings/ terus pilih Edit Theme.

6. Pilih Edit HTML.

7. Tekan CTRL+F, lalu cari kode </head>. Nah, terus Copy Paste kode berikut persis SEBELUM (di atas) code </head> tadi.
<meta name='text:Disqus Shortname' content='' />

8. Tekan CTRL+F kode {/block:Posts}. Terus Copy Paste kode di bawah ini persis setelah kode {/block:Posts} tadi.
{block:IfDisqusShortname} <div id="disqus_thread"></div><script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'GANTI PAKE SHORTNAME DISQUS LO'; // Required - Replace <example> with your forum shortname var disqus_url = '{Permalink}'; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();</script><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a> {/block:IfDisqusShortname}


9. Pilih Update Preview, terus Save.

10. Pilih Appearance Options, terus ganti isian di Shortname Disqus mu dengan shortname mu. :D

11. Udah deh. Save.

Buat nampilin Jumlah Komentar di post mu, ikutin yaa langkah berikut :
1. Langkah pertama, buka https://www.tumblr.com/settings/ terus pilih Edit Theme.

2. Pilih Edit HTML.

3. CTRL+F kode {/block:Posts} terus, copy Paste kode di bawah, SETELAH (di bawah) kode {/block:Posts}.
{block:IndexPage}<a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a><script type="text/javascript"> var disqus_shortname = '{text:Disqus Shortname}'; (function () { var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = '//' + disqus_shortname + '.disqus.com/count.js'; (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s); }());</script>{/block:IndexPage}
4. SAVE. Udah deh, beres. :D

Nah, demikianlah tutorial cara memasang Fitur Komentar di Tumblr. Kurang lebihnya saya ucapkan terimakasih. Sekian. :D


Note : Kalo ada pertanyaan, tinggal tanya aja yaa di komentar box di bawah. Jangan malu-malu. Adminnya baik kok. :V hahaha.

tag : komentar, tumblr, disqus.
SHARE

anjaryes

Hi. I’m Designer of Yokotrix Blog. I’m a Geek. I inspired to make things looks better.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 komentar:

Post a Comment

Comment Here