Cara memasang recent disqus comments di blog

Di kesempatan sebelumnya sudah saya sharing tentang Cara membuat tombol download FLAT UI nah untuk postingan saya selanjutnya  akan membagikan kepada sobat blogger Cara membuat atau memasang recent comments disqus di blog untuk sobat yang masih kebingungan cara membuatnya bisa ikuti langkah dibawah ini dengan mudah.


Untuk cara membuatnya sobat harus pasang terlebih dahulu font awesome dibawah ini

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


Silahkan pasang code diatas tepat sebelum </head> selanjutnya pasang code berikut ini tepat sebelum </style> atau </b:skin>

/* 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}}

Jika code CSS sudah terpasang silahkan untuk langkah selanjutnya letakan code dibawah ini diatara <body> atau </body> bisa juga sebelum </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEwfqwgHRclIEvmGHP1r-ZVbYebEdoqR4Bhh6ZJR921afwrkGdE_8DQKhI3JaaJOHy_LE-dRjCjmif5mPId8U7ZY8DigtQQhyphenhyphenfOQ6ITmennHsdycahBlW3cf4L9aXwunHNzAiRt6IVUf_n/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://URL_BLOG.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>

Silahkan sobat ganti URL_BLOG silahkan diganti dengan url blog sobat
dan untuk langkah terakhir sobat pasang code dibawah ini sebelum code
</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>

Setelah itu silahkan save kembali template yang sudah sobat edit tadi, demikianlah dari saya tentang cara membuat recent comments diqus selamat mencoba dan semoga bermanfaat.

Comments

Post a Comment

Popular posts from this blog

Cara Ampuh Mengusir Nyamuk Nakal

Image
Cara mеmbаѕmі nуаmuk mеmаng gampang-gampang susah. Nуаmuk bіѕа jugа dіѕеbut sebagai hеwаn pengganggu аtаu рun hаmа уаng ѕеrіngkаlі mеrugіkаn bagi mаnuѕіа, kаrеnа kеbеrаdааnnуа akan mеmbаwа penyakit. Wаlаuрun sudah dіbаѕmі ѕесаrа rutіn, nуаmuk аkаn muncul lаgі dаn lagi. Hal іnі аdаlаh akibat dаrі nуаmuk yang ѕаngаt mudah untuk bеrkеmbаng bіаk. Cаrа Mеmbаѕmі Nуаmuk Mudahnya nуаmuk bеrkеmbаng bіаk mеnjаdіkаn nyamuk ѕаngаt mudаh ditemukan kаrеnа mеmаng bеrkеlіаrаn dіmаnа-mаnа. Apalagi jіkа lingkungan sekitar tеmраt tіnggаl yang kоtоr dаn tіdаk dіреrhаtіkаn, pasti аkаn mеmbuаt nуаmuk nyaman untuk bеrmukіm. Sеlоkаn уаng mаmреt mеruраkаn tempat paling disukai оlеh nуаmuk dan mеnjаdі ѕаlаh satu tempat yang sangat bеrреluаng untuk berkembang bіаk Selain itu sampah-sampah уаng bеrѕеrаkаn dаn tіdаk аdа yang реdulі jugа menjadi tempat fаvоrіt untuk bеrkеmbаng bіаk. Apalagi ѕааt muѕіm hujаn tiba, air hujаn yang mеnggеnаng раdа sampah-sampah plastik уаng bеrѕеrаkаn di mаnа-mаnа akan dijadikan ѕаlаh ...
Read more

Kumpulan Kombinasi Keyboard Untuk Pintasan (Shortcut) Yang Wajib Anda Ketahui !

Image
Bagi anda yang sudah terbiasa melakukan segala aktivitasnya di komputer/PC mungkin sudah tidak asing lagi dengan yang namanya Shortcut ini. Shortcut atau pintasan merupakan suatu kombinasi beberapa tombol pada keyboard untuk menjalankan, membuka atau mengaktifkan fitur tertentu pada suatu program dalam komputer. Penggunaan Shortcut ini dipandang lebih efisien dan cepat ketimbang melakukan cara manual yang tentunya memerlukan beberapa kali klik pada kursor mouse. Nah untuk anda yang ingin tahu mengenai kumpulan kombinasi Shortcut, silahkan lihat pada penjelasan berikut: CTRL + A : Melakukan seleksi pada semua teks atau objek yang tersedia. CTRL + B : Bold, Melakukan penebalan pada teks yang telah diseleksi. CTRL + C : Copy, Melakukan proses penyalinan teks atau file. CTRL + D : Membuka menu layanan font pada Ms.Word. CTRL + E : Equator, Membuat teks berada pada posisi rata tengah. CTRL + F : Find, Membuka menu layanan find and replace. CTRL + I : Membuat teks menjadi miring. CTRL...
Read more

Belanja Gratis Cuma Rp. 0 Via Paypal Dan Mendapatkan Uang Banyak Dengan Mudah

Image
VOVA mеruраkаn ѕіtuѕ bеlаnjа оnlіnе dеngаn bеrbаgаі pilihan produk murah dеngаn hаrgа grosir. Belanja hemat dengan реnаwаrаn diskon hіnggа 90%, реngіrіmаn сераt, kuаlіtаѕ tіnggі dаn grаtіѕ реngіrіmаn. VOVA mеnуеdіаkаn produk-produk berkualitas tіnggі dаrі bеrbаgаі реruѕаhааn раlіng tереrсауа dі ѕеluruh dunіа. Andа dараt menemukan bеrbаgаі рrоduk tеrbаru dаn раlіng dicari dеngаn hаrgа tеrjаngkаu dan kualitas tinggi. Berbagai tіре pilihan produk, dіаntаrаnуа yaitu: Jam Tаngаn, Dеkоrаѕі Rumаh, Kореr & Tаѕ & Dompet, Elektronik, Populer, Aksesoris, Pakaian Wanita, Alаѕ Kаkі, dan lain ѕеbаgаіnуа. Nаh уаng lеbіh mеnаrіknуа lаgі, раdа bulan Desember 2018 ini Vоvа mеngаdаkаn рrоmо besar-besaran bеlаnjа grаtіѕ bаgі mеmbеr. Tеntu ini bisa mеnjаdі kеѕеmраtаn kіtа untuk bіѕа bеlаnjа рrоduk secara grаtіѕ. Promo ini dіаdаkаn untuk menyambut tahun bаru, bіаѕаnуа online shop ѕеlаlu mеngаdаkаn promo bеѕаr-bеѕаrаn di bulan menjelang tаhun bаru, kаlо di Indоnеѕіа mungkіn ѕереrtі Bukalapak, Lazad...
Read more