Sponsor

Navigation

Cara Memasang Komentar Disqus Di Blog

Cara Memasang Notifikasi Komentar Disqus di Blog - Fungsi dan cara kerja widget ini adalah menampilkan komentar-komentar Disqus terbaru pada blog sobat. Yang hadir dalam tampilan simple dan keren dengan efek yang sederhana.

Cara Memasang Notifikasi Komentar Disqus di Blog - Pada saat waktu senggang, saya coba untuk mencari tutorial tentang blog dan pada akhirnya saya fokus pada 1 Web IDBLANKER dan mencoba 1 tutorial disana tentang Cara Memasang Komentar Disqus Di Blog. Dan sekarang saya akan mencoba untuk membagikanya untuk anda. Fungsi dan cara kerja widget ini adalah menampilkan komentar-komentar Disqus terbaru pada blog sobat. Yang hadir dalam tampilan simple dan keren dengan efek yang sederhana.

Berikut Tutorial Cara Memasang Notifikasi Komentar Disqus di Blog

1. Masuk ke Blogger > Template > Edit HTML > Kemudian tambahkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* CSS Notifikasi Komentar Disqus */
.header-1 {background:#fff;border-bottom:1px solid #ddd;height:30px;padding:15px;overflow:hidden}
.header-1 h4{font-size:15px;float:left;margin:5px;padding:2px;color:#555}
.header-1 img{float:right}
.notif-show{position:fixed;top:10px;right:10px;z-index:9997;color:#fff!important;background:#444;padding:10px;font-size:13px;border-radius:4px}
#disqus-notif.active{right:0}
#disqus-notif{position:fixed;background:#fff;z-index:9999;width:30%;border-left:3px solid #e2e2e2;top:0;right:-500px;bottom:0;transition:all .7s ease-in-out}#overlay-1.active{background:rgba(53,58,61,.9);position:fixed;z-index:9998;overflow:hidden;width:100%;height:100%;top:0;left:0}.close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:-15px;top:-7px;visibility:hidden;opacity:0;transition:all 250ms ease-in-out}.close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-80px,0,0);transform:translate3d(-80px,0,0)}
.close-1{position:fixed;margin-left:-50px;margin-top:20px;font-size:35px;font-weight:700;color:#fff!important}
#RecentComments{display:block;width:100%;margin:0 auto;padding:10px 0 10px 20px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:90%;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2e9fff;font-size:12px}
#RecentComments p.dsq-widget-meta a:hover{color:#2e87e7}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#2e87e7;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;margin-top:8px;color:#2e9fff;font-weight:700;font-size:14px}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
.count-1{background:#ED1E24;padding:2px 5px;font-size:11px;border-radius:3px;position:absolute;top:-8px;left:-20px}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
#RecentComments .dsq-widget-item pre:before{content:&#39;&#39;;position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments .dsq-widget-item pre:after{content:&#39;&#39;;font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
@media screen and (max-width:480px) {#disqus-notif{width:100%}.close-1{margin:0;color:#444!important}}

tambahkan kode HTML

Selanjutnya tambahkan kode HTML di bawah ini tepat di bawah kode <body> atau <body

<a class='notif-show' href='javascript:;'><i class='fa fa-comments-o'></i><span class='count-1'>New!</span></a>
<div id='overlay-1'></div>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='Close'>&#215;<span class='close-text'>Close</span></a>
<div class='header-1'><h4>Notifications</h4><a href='https://disqus.com' target='_blank' title='Disqus'><img alt='Disqus Logo' src='https://1.bp.blogspot.com/-JFEyRh5BHdQ/VlHXQWcj3pI/AAAAAAAAC64/G6B6vuxjiYs/s1600/disqus-1.png'/></a></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://duniablanter.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>
</div>

duniablanter ganti dengan user name disqus sobat.

Tambahkan Kode Javascript

Langkah Terakhir, tambahkan kode Javascript di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Notif Komentar 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")})});
//]]>
</script>

Jika di Blog sobat belum terdapat Link Font Awesome, tambahkan stylesheet font awesome di bawah ini tepat di atas </head>

<link type='text/css' rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'/>

Simpan Template...
Semoga Tutorial ini bermanfaat. Terimakasih.
Share
Banner

Muhammad fikriansyah

Post A Comment:

4 comments:

  1. kalo biar sugesnya di ilangin gimana gan ?

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. admin, klo menambahkan menu disqus gimana?


    visii back yo?

    ReplyDelete
  4. berat ga min kalai di pasang di blog? takut jadi lemot :0

    ReplyDelete

Pembaca yang baik selalu meninggalkan jejaknya,
Silahkan berkomentar dengan bahasa yang sopan ^_^
[ - ] Dilarang berkomentar menggunakan Live Link !!!
[ - ] Dilarang promosi disini !
[ - ] Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten !!!
[ - ] Dilarang menulis kata - kata kotor,sara,dan hal - hal yang berbau p*rn*
[ - ] Dilarang Bertanya jika tidak sesuai dengan postingan

===== SEKIAN DARI ADMIN TERIMA KASIH ^_^ =====