Cara Memasang Komentar Disqus Di Blog - Hello, friend of Key Solution, in the article you are reading this time with the title Cara Memasang Komentar Disqus Di Blog, we have prepared this article well for you to read and retrieve information from it. Article All, Article Tutorial Blog, which we write, you can understand. Alright, happy reading.

Title : Cara Memasang Komentar Disqus Di Blog
link : Cara Memasang Komentar Disqus Di Blog

Cara Memasang Komentar Disqus Di Blog

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:'';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:'';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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_w4jONeY81P5Sjs4-qY-zNK7MzryNNR_gGNgggQxdUOX9BlHAl8kBFE_Wv8E6By-DjcjoIXJ3p6ngBEQxtN9B448Gc9xkuIQrNr3cun0gCKEVU-hq_sG7kbIQb3CQpDXlp14Z2KTO_luq/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.

That's all Articles Cara Memasang Komentar Disqus Di Blog

Past stories Cara Memasang Komentar Disqus Di Blog this time, hopefully can benefit you all. okay, see you in another article posting.

in the article you are reading this time with the title Cara Memasang Komentar Disqus Di Blog with the link address https://keysolution4u.blogspot.com/2017/02/cara-memasang-komentar-disqus-di-blog.html

Tweet