Template Kompi Ajaib Gratis: #MODUL 10 TUTORIAL BUAT ONE CLICK SHOW BUTTON DISQUS

Selamat datang di #modul 10 yang merupakan modul terakhir untuk membahas seputar dunia blogging pada level dasar. Kali ini kita akan bahas tentang tutorial membuat one click show button disqus. Pengaplikasiannya sangatlah mudah, pastikan sobat sudah baca dan mempelajari materi sebelumnya pada #modul 9, jika belum maka pastinya akan mengalami kendala ketika sobat langsung loncat ke modul 10 ini. Bisa lihat di : SITEMAPS

Fungsi utama dari tombol komentar ini adalah selain untuk memperindah UI (User Interface) namun juga agar lebih rapi dalam penempatan, dengan begitu pengunjung blog akan merasa nyaman ketika bersafari di situs sobat. Konsep ini juga mimin pakai pada website master dzgn serta dibeberapa situs partner.

Langsung saja simak ulasan berikut ini sampai habis, baca secara urut dan sobat juga boleh dengan langsung mempraktikkan materi ini. Pada pemaparan kali ini mimin anggap semuanya sudah memiliki username disqus, jika belum tau bagaimana cara membuat komentar disqus bisa lihat di : BUAT DISQUS

1. Pertama, Login terlebih dahulu ke dashboard BLOGGER, lalu pilih TEMA>EDIT HTML

2. Kedua, klik CTRL+F untuk mencari letak kode ]]></b:skin> kemudian letakkan script CSS berikut ini di atas kode ]]></b:skin> tersebut

 
/* Call Disqus On Click by MASTERDZGN.COM */
button#masterDisqus {
    background-color: #008c5f; /* Warna tombol */
    color: #fff;
    font: normal 600 16px Tahoma,sans-serif;
    line-height: 0px;
    text-align: center;
    width: 100%;
    border-width: 0px;
    padding: 20px 10px;
    cursor: pointer;
    transition: all .5s ease;
    border-radius: 3px;
    -moz-border-radius: 3px;
}
button#masterDisqus:hover {
    background: #1d2129; /* Warna tombol ketika disorot */
}

3. Ketiga, coba cek apakah pada template sobat sudah ada script JQuery atau belum, jika belum maka tambahkan script berikut ini di bawah kode <head> namun apabila sudah ada, sobat bisa lanjut saja pada langkah berikutnya

 <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

4. Keempat, sobat cari kode <div class='comments' id='comments'> lalu letakkan script HTML berikut ini di bawah kode tersebut

 
<div class="disqus-blogger-comment-block"/>
<button id="masterDisqus">Load Comment</button> <!--Tulisan di tombol -->

5. Kelima, cari kode </body> kemudian letakkan script berikut ini di atas kode tersebut

 <b:if cond='data:view.isPost'> <script> //<![CDATA[
    // Call Disqus On Click by MASTERDZGN.COM
    window.disqus_blogger_current_url = $('link[rel=canonical]').attr('href');
    window.disqus_shortname = 'MasterDzgn'; // Ganti dengan shortname Disqus kamu
    $('#ignielDisqus').on('click', function(){
    $.ajax({
        type: 'GET',
        url: '//' + disqus_shortname + '.disqus.com/blogger_item.js',
        dataType: 'script',
        cache: true
    });
    $(this).fadeOut();
    });
//]]> </script> </b:if>

Catatan : ganti keterangan highlight merah MasterDzgn dengan shortname disqus sobat. Untuk mengetahui shortname disqus sobat, bisa lihat pada menu setelan di dashboard disqus.

Baik sekian pemaparan materi kali ini pada #modul 10 tentang tutorial buat one click show button disqus. Materi ini menjadi penutup untuk modul teknik dasar blogging. Pada materi di modul berikutnya akan membahas lebih banyak mengenai CSS Style atau topiknya terfokus ke bagaimana cara memperindah tampilan interface blog supaya terlihat menarik dan bisa memanjakan mata visitor.

Penasaran dengan materi berikutnya? nantikan update terbarunya di menu : SITEMAPS. Jika ada kendala atau error saat mengaplikasikan modul 10 ini, silahkan tanyakan pada kolom komentar di bawah. Terima kasih sudah berkunjung dan semoga harimu menyenangkan.

Halaman

#MODUL 10 TUTORIAL BUAT ONE CLICK SHOW BUTTON DISQUS