Cara Membuat Recent Comments Disqus keren di Blogger




Cara Membuat Recent Comments Disqus keren di Blogger
Cara Membuat Recent Comments Disqus keren di Blogger : Di kesempatan sore ini saya akan share cara membuat recent comment disqus di bogger, mungkin sudah banyak juga para blogger yang sudah berbagi artikel seperti ini. Tapi tidak ada salahnya juga saya share kembali ya. Untuk anda yang ingin membuat recent comments disqus di blogger maka ini akan secara otomatias dapat membantu dan mempermudah pengunjung untuk mengetahui semua komentar disqus terbaru yang ada pada blog anda.

Memasang recent comment disqus ini mungkin saya rasa tidak begitu penting barang kali ya, namun tentunya ada juga dari sisi lain dengan kita memasang recent comment disqus ini mempunyai sebuah manfaat yang bagus untuk blog. Nah mengapa demikian? karena  sistem komentar disqus tidak memberikan notifikasi komentar pada dashboard blog anda maka dari itu apabila anda menggunakan disqus comments pada blogspot, recent comment disqus ini sangat cocok untuk blog anda


untuk anda yang menggunakan komentar blogger maka jika anda ingin memasang recent comment disqus ini, tidak akan muncul di blog anda, itu jika anda belum mendaftarkan blog anda ke Disqus, bila anda ingin menggantikan komentar blogger ke komentar disqus maka bisa anda daftar dulu Cara Memasang Komentar Disqus di Blogger dan jika anda tidak menggunakan disqus pada blog anda, maka jangan anda terapkan pada blog langkah-langkah yang saya berikan ini, karena widget recent comment disqus ini hanya berfungsi untuk komentar disqus. Selain komentar disqus, seperti komentar bawaan blogger tidak akan muncul pada blog anda nantinya, makanya di wajib kan untuk Daftar dan Instal Widget Disqus Di Blog anda.

Bagi anda yang sudah mendaftarkan blog anda ke disqus dan ingin menerapkan widget recent comments disqus di sidebar blog anda, maka bisa anda ikuti cara penerapannya di bawah ini, karena saya sudah membuat artikel ini cara penerapannya dengan mudah meskipun anda masih pemula atau newbie seperti saya. Cara nya sangat mudah anda hanya perlu menambahkan widget baru beserta kode scriptnya ke dalam kolom html.
bagi anda yang sudah penasaran ingin membuat recen comment disqus nya bisa anda simak dengan baik langkah-langkah di bawah ini secara teliti ya, agar nanti anda paham cara penerapannya.
Untuk anda yang ingin melihat demonya bisa anda lihat video gif nya di atas ya, saya sengaja membuat video gif nya, karena recent commnet disqus akan saya copot.

Jangan lupa baca juga Cara Aktifkan Iklan Disqus Pada Blog:

Cara Membuat Recent Comments Disqus keren di Blogger

1. pastikan anda sudah masuk di dasbhor milik anda sendiri
2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Selanjutnya anda Temukan kode dibawah seperti ini </head>, dan di letakan di atas kode tadi. oh ya widget recent comment disqus ini menggukan font awesome, jadi tambahkan saja code di bawah ini di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
4. Selanjutnya anda tambahkan kode CSS di bawah ini di atas kode </head> atau sebelumnya
<style type='text/css'>
/* Animation */
@keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}
/* Recent Comments Disqus */
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}
.header-1 h4{font-size:18px;float:left;color:#fff}
.header-1 img{float:right}
.notif-show{position:fixed;top:10px;right:10px;z-index:997;color:#fff!important;background:rgba(0,0,0,0.2);font-size:16px;font-weight:normal;width:auto;padding:6px 8px;cursor:pointer;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:2px;transition:all .6s}
.notif-show:hover{background:#2e9eff;animation:rubberBand 1s}
#disqus-notif{position:fixed;background:#fff;z-index:999;width:25%;top:0;right:-769px;bottom:0;transition:all .5s}
#disqus-notif.active{right:0}
#overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}
#disqus-notif .close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:15px;top:-7px;visibility:hidden;opacity:0;transition:all .5s}
#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:6px;font-size:35px;font-weight:700;color:#fff}
#disqus-notif .close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}
#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}
#RecentComments img.dsq-widget-avatar{margin:0 10px 0 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:#ced6e0;font-size:12px}
#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}
#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:1px solid rgba(0,0,0,0.08)}
#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:700;font-size:14px;margin:7px 0 0 0}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f8cf82;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}
#RecentComments .dsq-widget-item pre code{color:#000}
#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}
@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}#disqus-notif .close-text{display:none}}
</style>
5. Tahapan Selanjutnya anda tambahkan juga kode di bawah ini dan bebas mau di letakkan di mana yang pastinya di antara kode <body> dan </body> atau bisa juga anda tambahkan sebelum kode </body>
<a class='notif-show' href='javascript:;'><i class='fa fa-bell'/></a>
<div id='overlay-1'/>
<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><img alt='Disqus Logo' src='https://3.bp.blogspot.com/-GxPuYrEWjRA/Wt6bJW3fSbI/AAAAAAAAE1E/gUdQHSaGUXMs_QfK1mIm0JF9qvHd2xFFwCLcBGAs/s1600/Disqusq.png' title='Disqus'/></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://mizipediacom.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>
6. Dan jangan lupa anda ganti kode yang di tandai dengan username Disqus blog anda. Bila anda ingin mengedit setelan recent comment disqus tersebut.
num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180

Nilai Keterangan
num_items=20
Jumlah komentar yang muncul
hide_mods=0
Ganti 0 dengan 1 untuk menyembunyikan komentar admin
hide_avatars=0
Ganti 0 dengan 1 untuk menyembunyikan avatar
avatar_size=32                  
Ukuran gambar avatar
excerpt_length=180
Jumlah tulisan komentar yang tampil


7. Jika sudah anda mengikuti langkah-langkah seperti di atas, jangan lupa anda klik save tempate, dan lihat hasilnya.7. Selanjutnya anda tambahkan kode di bawah ini sebelum atau di atas kode </body>
<script defer='defer' 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>

Jangan lupa baca juga Cara Membuat Tombol Show Hide Komentar disqus Di Blogger

Demikian penjelasan pada sore ini, semoga bermanfaat untuk anda dan selamat mencoba. salam sukses.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect