Dark
Beranda Tips Blogger Trik Blogger

Cara Memasang Tombol Notifikasi Disqus Di Navigasi Sajian Atau Di Top Menu

Oleh Admin
4 Mar 2019
Cara Memasang Tombol Notifikasi Disqus di Navigasi Menu atau di Top Menu. Bermacam Gaya untuk menarik perhatian pengujung Blogger salah satu di bab Komentar .. merka mencari dan mencari gaya  keren dan mudah  gar pengujung tertarik selalu mengujungi blog mereka
 nah salah satu gaya lgi tren kini di blogger yaitu Notifikasi Disqus .

Notifikasi Disqus yg aku bagikan ini termasuk keren juga menambah kan tombol pada bab Navigasi Menu..

Ok eksklusif di bahas aja ...

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

Pada bab Edit Tema Cari]]></b:skin>atau<style>setelah ketemu masukan instruksi ini sempurna 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:&#39;&#39;;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 sempurna di atas nya atau dapat 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 agar bermanfaat
Tags :
Berbagi :