Wednesday, 11 December 2019

How to Install the Disqus Notification Button in the Navigation Menu or in the Top Menu

How to Install the Disqus Notification Button in the Navigation Menu or in the Top Menu

How to Install the Disqus Notification Button in the Navigation Menu or in the Top Menu
Wednesday, 11 December 2019
How to Install the Disqus Notification Button in the Navigation Menu or in the Top Menu 

A variety of styles to attract the attention of the end of Blogger one in the comments section ... they are looking for and looking for a cool and easy style gar end visitors are always visiting their blogs
 now one of the current trends in blogger is Disqus Notification.

The Disqus Notification that I shared, including cool, also adds a button to the Navigation Menu ...

Ok, just discuss it ...

The First Step 
Login to Blogger and click THEME> Edit THEMES

In the Edit Theme section Search]]></b:skin>or<style>after found enter this code directly above the code ]]> </ b: skin> or under the 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}


Step 2
Search or find this code</body>or&lt;!--</body>--&gt;&lt;/body&gt;
place the code below right above or below </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>

And this too

<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>

Step 3
Insert this code in the navigation menu or in the top menu in your blog template

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

Example: 
<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>
To See Kunjugi Idntheme's Demos

The 4th Step Yipss
Sipan Template
First discussion: How to Install the Disqus Notification Button in the Navigation Menu or in the Top Menu may be useful
How to Install the Disqus Notification Button in the Navigation Menu or in the Top Menu
4/ 5
Oleh

If you like articles on this blog, please subscribe for free via email.

Load comments

Comments