Arcomp Design: Widget

Dalam artikel kali ini saya akan membagikan Cara Membuat Komentar Disqus Onclick Event, fungsi dari fitur ini adalah menyembunyikan komentar disqus dan untuk mempercepat loading saat membuka halaman postingan di blog. Berikut langkah-langkahnya

Komentar Disqus Onclick Event

Buka Blogger > Pilih menu Tema/Template > Setelah itu klik tombol Edit HTML serta tambahkan kode berikut ini tepat di bawah kode HTML <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>

Kemudia kita tambahkan kode ini tepat di bawah kode <b:includable id='comments' var='post'>

<div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div>
   <div id='disqus_thread'/>

Jika telah kita gabungkan maka hasilnya akan menjadi seperti ini

<b:includable id='comments' var='post'>
   <div id='disqusshow' onclick='load_Comments()'><i class='fa fa-comments'/> Load comments</div> <div id='disqus_thread'/>

Kemudian tambahkan kode CSS di bawah ini sebelum </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Onclick Disqus Comment */
#comments,.comment-form, .comment_reply_form .comment-form{display:none;}
#comments-block{display:none;background:#fff;margin:20px auto;padding:0;}
.comments-blocks button{display:block;margin:25px auto 0;width:100%;outline:none;border:none;cursor:pointer;font-weight:700;height:55px;color:#fff;line-height:55px;padding:0!important;font-size:16px;background:#01a3a4;border-radius:2px}
.comments-blocks button:hover{background:#029091}#disqusshow{position:relative;overflow:hidden;display:block;text-align:left;font-weight:700;font-size:18px;cursor:pointer;letter-spacing:0;line-height:20px;margin:10px auto;padding:10px;background:#00b894;color:#fff;transition:all .3s}
#disqusshow:hover,#disqusshow:active{color:#fff}
</style>
</b:if>

Sesuaikan CSS dengan keinginan kita sendiri

Setelah itu tambahkan kode di bawah ini tepat sebelum </body> atau <!-</body>-></body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
var disqus_shortname = &quot;arcomp-design&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 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="arcompdesign";!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>

Ganti kode yang telah ditandai arcomp-design dengan username disqus sobat

Simpan dan lihat hasilnya di blog sobat

Pemberitahuan

Jika sobat masih mengaktifkan sistem komentar Google+, silahkan sobat nonaktifkan terlebih dahulu supaya kode di atas bisa bekerja dengan baik lalu atur setelan komentar blod dengan cara Klik setelan > Postingan, komentar, dan berbagi > Komentar > dan kemudian sesuaikan menjadi seperti gambar berikut

Demikian artikel tentang Cara Membuat Komentar Disqus Onclick Event, Semoga bermanfaat

Cara Membuat Komentar Disqus Onclick Load

Ari Bagus Hidayat 24 January 2019

Memasang Back To Top di Blog - Mungkin banyak sekali penelusuran tentang cara memasang tombol back to top di blog dan kali ini saya akan berbagi tips tersebut.

Fungsi dari tombol back to top sendiri cukup penting peranannya karena memberikan kemudahan bagi pengunjung yang ingin mengscroll kembali keatas dengan satu tombol.

Cara Memasang Smooth Back To Top Di Blog

1. Pastikan template telah terpasang Fontawesome atau belum. Jika sudah terpasang bisa melewati langkah pertama, jika belum terpasang silahkan Login ke Blogger Dashbor > pilih blog > pilih template > klik edit HTML, simpan kode dibawah ini setelah <head> atau sebelum </head>

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Simpan CSS dibawah ini sebelum ]]></b:skin> atau </style>

 .smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3. Simpan jQuery dan HTML dibawah ini sebelum </body>

 <div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
    $(document).on( 'scroll', function(){
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
    $('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

4. Setelah itu simpan template dan lihat hasilnya.

Baca juga Cara Memasang Font Awesome Di Blog

Dengan tambahan efek Bounce

 <div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
    $(document).on( 'scroll', function(){
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Jika template sudah terpasang tombol back to top, silahkan hapus terlebih dahulu. settingan warna bisa diatur sesuai selera masing-masing.

Demikian artikel tentang Cara Memasang Smooth Back To Top Di Blog, semoga bermanfaat.
Sumber : Arlina Design

Cara Memasang Smooth Back To Top Di Blog

Ari Bagus Hidayat 26 December 2017

Halaman

Social Items

Arcomp Design

Komentar Disqus Onclick Event

Pemberitahuan

Cara Membuat Komentar Disqus Onclick Load

Cara Memasang Smooth Back To Top Di Blog

Dengan tambahan efek Bounce

Cara Memasang Smooth Back To Top Di Blog

Notifications