Cara Memasang Tombol Notifikasi Disqus di Navigasi Menu atau di Top Menu

Cara Memasang Tombol Notifikasi Disqus di Navigasi Menu atau di Top Menu. Bermacam Gaya untuk menarik perhatian pengujung Blogger salah satu di bagian Komentar .. merka mencari dan mencari gaya  keren dan mudah  gar pengujung tertarik selalu mengujungi blog mereka
 nah salah satu gaya lgi tren sekarang di blogger adalah Notifikasi Disqus .

Notifikasi Disqus yg saya bagikan ini termasuk keren juga menambah kan tombol pada bagian Navigasi Menu..

Ok langsung di bahas aja ...

Langkah Yang Pertama 
Login ke Blogger dan Klik TEMA > Edit TEMA

Pada bagian Edit Tema Cari]]></b:skin>atau<style>setelah ketemu masukan kode ini tepat di atas code ]]></b:skin> atau dibawah code <style>

/* Notification */
.growl-notice{display:none;width:auto;padding:50px;line-height:normal;opacity:.99;font-size:18px;color:#222;background:#fff;position:fixed;right:0;top:35%;left:0;max-width:600px;z-index:99;margin:auto;overflow:hidden;text-align:center;box-shadow:0 0 3rem -1rem rgba(0,0,0,0.7);transition:all 300ms cubic-bezier(0.250,0.100,0.250,1.000);transition-timing-function:cubic-bezier(0.250,0.100,0.250,1.000);animation:bounceInDown 1.5s}.growl-notice:after{content:'';position:absolute;left:0;top:0;right:0;height:0.15rem;text-align:center;margin:auto;background-image:linear-gradient(50deg,#f1c40f,#74b9ff);background-position:50%;background-repeat:no-repeat}
.growl-notice:hover{box-shadow:0 2px 5px 0 rgba(0,0,0,0.1)}#activator{text-decoration:none}
@media screen and (max-width:800px){.growl-notice{padding:20px;font-size:16px;max-width:480px;top:45%}}
#disqus-notif{display:none}

Langkah Yang Ke 2
Cari atau Temukan Code ini</body>atau&lt;!--</body>--&gt;&lt;/body&gt;
dan letakan code dibawah ini tepat di atas nya atau bisa juga di bawah </footer> :

<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='Close'><i class='fa fa-times'/></a>
<div class='header-1'><h4>Notifications</h4></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://metaltailaco.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>

Dan ini Juga

<script type='text/javascript'>
//<![CDATA[
// Recent Comments Disqus
$(function(){$(".notif-show").on("click",function(){$("#disqus-notif").addClass("active").focus()});$(".close-1").on("click",function(){$("#disqus-notif").removeClass("active")})});
$(function(){$(".notif-show").on("click",function(){$("#overlay-1").addClass("active").focus()});$(".close-1").on("click",function(){$("#overlay-1").removeClass("active")})});
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank');
//]]>
</script>

Langkah Yang Ke 3
Sisipkan Code ini dibagia Navigasi Menu atau di Top Menu di template blog anda

<li><a class='notif-show' href='javascript:;' itemprop='url'><span itemprop='name'>Disqus</span></a></li>

Contoh : 

<ul>
    <li><a class='ripplelink' href='/'><i aria-hidden='true' class='fa fa-home'/> Home</i></a></li>
    <li><a class='ripplelink' href='/p/karaoke.html'>Karaoke</a></li>
    <li><a class='ripplelink' href='/p/toko-kasir.html'>Toko Kasir</a></li>
    <li><a class='ripplelink' href='/p/blogger-template.html'>Template</a></li>
    <li><a class='ripplelink' href='/p/tutorial-komputer.html'>Komputer</a></li>
    <li><a class='ripplelink' href='/search/label/Video Karaoke'>Video Karaoke</a></li>
-------------Letekan disini------------------
</ul>

Untuk Melihat Demonya Kunjugi Idntheme

Langkah Yang Ke 4
Sipan Template
Yupss Sekian Dulu pembahasan : Cara Memasang Tombol Notifikasi Disqus di Navigasi Menu atau di Top Menu semoga bermanfaat