Skip to main content
Azid Blogger

follow us

Cara Mudah Membuat Recent Disqus Simple Sederhana Pada Blog Non AMP

Cara Mudah Membuat Recent Disqus Simple Sederhana Pada Blog Non AMP

www.azid.web.id - Cara Mudah Membuat Recent Disqus Simple Sederhana Pada Blog Non AMP. Sobat mungkin sering lihat recent disqus pada blog AMP pada era milenial ini yang memang di dominasi oleh blog AMP menurut saya. Namun apakah recent disqus ini juga digunakan pada blog Non AMP?. Dari pencarian di google ternyata dari beberapa blog sudah menampilkan tutorial terkait recent disqus pada blogger yang tentunya itu digunakan untuk blog Non AMP. Memang pada dasarnya recent disqus bisa digunakan pada blog Non AMP karena didalamnya terdapat berbagai java script dan JQurey, dan untuk blog AMP tentunya script tersebut akan di tolak dan mengalami error valid AMP. Lantas mengapa bisa digunakan pada blog AMP?, dari pertanyaan ini bahwa sobat perlu memahami bahwa script tersebut bisa sobat buat dengan exitensi HTML dengan hosting pihak ketiga seperti github yang kemudian menggunakan layanan untuk menampilkan script tersebut seperti cdn.staticaly.io. Dengan layanan tersebut sehingga yang awalnya recent disqus seharusnya hanya bisa digunakan pada blog Non AMP ternyata juga bisa digunakan pada blog AMP dengan bantuan hosting ketiga eskitensi HTML serta bantuan script amp-iframe dan lightbox.

Adapun untuk blog non AMP sendiri sebenarnya sudah ada tutorialnya seperti Arlina Design dan kompiajaib.com. Akan tetapi menurut saya tampilannya terlalu ramai untuk milik Arlina Design dan masih menampakkan JQuery pada template sehingga akan mempengaruhi kecepatan blog kita. Dari sinilah akhirnya, saya bereksperiment apakah bisa eskitensi HTML recent disqus bisa digunakan pada blog Non AMP juga? Ternyata jawabannya adalah bisa. Untuk membuat recent disqus tersebut saya memiliki dua opsi yaitu pertama dengan menggunakan script java script page menu yang digunakan kompiajaib.com pada templatenya kompiflexible Non AMP versi 8. Script tersebut saya desain dan edit ulang agar penampilannya layaknya recent disqus simple dan sederhana yang digunakan dan pernah di share juga oleh kompiajaib.com pada artikelnya. Untuk opsi yang kedua adalah tetap menggunakan css dan script tag khusus AMP namun pada blog kita tetap blog Non AMP. Jika sobat berminat, bisa menyimak tutorial pada setiap opsinya.

Membuat Recent Disqus Simple Sederhana Dengan Java Script dan Iframe

Pada tutorial ini saya sengaja memberikan dua opsi membuat recent disqus yaitu dengan java script dengan bantuan iframe dan yang kedua dengan script AMP namun digunakan pada blog Non AMP. Untuk model pertama, sobat bisa simak caranya di bawah ini:

Pertama, langkah awal adalah sobat terlebih dulu login blogger dan menuju menu theme kemudian pilih edit HTM. Pada menu edit HTML sobat bisa cari kode </header>, jika sudah ketema letakkan kode berikut tepat dibawah kode </header>

<a class='icon_disqus' href='javascript:void(0);' onclick='openDisqus();menurecentdisqusOn();addClassBody();' title='Menu'>
<svg height='24px' viewBox='0 0 24 24' width='24px'><path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M9,9H19V11H9V9M9,13H17V15H9V13Z' fill='none'/></svg>
</a>
<div id='menurecentdisqus' onclick='closeDisqus();menurecentdisqusOff();removeClassBody();'/>

PENTING:
peletakkan diatas tergantung template, jika header pada template sobat merupakan model terbaru yang dapat melayang dan ukuran ramping maka bisa menggunakan cara diatas, akan tetapi jika cara diatas setelah sobat view dan hasilnya terletak tidak didalam menu header maka sobat bisa memindahkannya diatas </header>

Kedua, cari kode </head> atau /head jika sudah ketemu, sobat bisa meletakkan kode berikut ini

<style>
/* Recent Disqus */
.disqus-recent {background:#fff;position:fixed;top:0;right:0;bottom:0;height:100%;height:100vh;width:300px;padding:0;z-index:9999;-webkit-animation-name:slideInRight;animation-name:slideInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;overflow:visible}
.disqus-recent iframe{height:100%;height:100vh;width:300px;position:absolute;top:0;left:0;bottom:0}
.icon_disqus svg path{fill:$(disqus.color)}
.disqus-recent a{color:$(disqus.color.hover)}
.disqus-recent{overflow:hidden;display:block;}
.disqus-recent a{display:block;text-align:center;text-decoration:none}
.icon_disqus,.disqus-recent a.closebtn{display:none}
.disqus-recent a:hover{background-color:#555;color:#fff}
#menurecentdisqus{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:999;cursor:pointer}
.disqus-recent{position:fixed;top:0}
.icon_disqus{position:relative;top:0}
.disqus-recent{height:100%;width:300px;z-index:9999;right:-250%;overflow-x:hidden;transition:.5s}
.icon_disqus{height:57px;line-height:60px;display:block}
.icon_disqus svg{width:26px;height:26px;vertical-align:-8px}
.disqus-recent a.closebtn{position: fixed;margin-left: -40px;margin-top: 16px;color: #fff;transition: all .3s}
.disqus-recent a{text-align:left}
</style>

Ketiga, cari kode </body> jika sudah ketemu letakkan script berikut tepat diatas kode </body>

<script>
//<![CDATA[
function openDisqus(){document.getElementById("recent-disqus").style.right="0"}function closeDisqus(){document.getElementById("recent-disqus").style.right="-300px"}function menurecentdisqusOn(){document.getElementById("menurecentdisqus").style.display="block"}function menurecentdisqusOff(){document.getElementById("menurecentdisqus").style.display="none"};
//]]>
</script>

Keempat, klik simpan template terlebih dahulu kemudian klik F5. Jika sudah klik menu layout dan buatlah widget baru dengan wiget HTML/Java script. jika sudah masukkan kode berikut ini pada kolom widget yang sobat buat tadi kemudian simpan widgetnya.

<div class='disqus-recent' id='recent-disqus'>
<iframe frameborder='0' height='400' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.statically.io/gh/Azidzainuri/kode-azid/a2c3f1aa/disqus-recent.html?shortname=https-al-islamk-blogspot-com&amp;fontBodyColor=555555&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=2B0C93&amp;linkHoverColor=333333' title='Contact' width='100% loading='lazy''>
<img height='400' layout='fixed-height' noloading='' placeholder='' src='https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png' width='100%'/>
</iframe>
</div>

Pastikan short name ubah dengan short name disqus sobat.
Dengan menggunakan widget sobat akan mudah untuk mengubah short name disqus sobat.

Membuat recent comment disqus dengan kode AMP pada blog  Non AMP

Untuk model kedua ini, sebagaimana yang pernah disampaikan oleh kang Adhy Suryadi dalam blognya kompiajaib.com bahwa kode amp bisa digunakan pada blog non AMP. Dengan kode tersebut tentunya akan lebih mudah dalam pembuatan recent disqus. Untuk lebih jelasnya sobat bisa mengikuti tutorialnya dibawah ini:

Pertama, seperti pada model pertama sobat harus login blogger menuju menu theme dan pilih edit HTML. Jika sudah cari kode </head> jika sudah ketema letakkan kode berikut ini tepat diatas kode </head>

<style>
/* Chatbox */
.chat-box-fixed{background:#fff;position:fixed;top:0;right:0;bottom:0;height:100%;height:100vh;width:300px;padding:0;z-index:999;-webkit-animation-name:slideInRight;animation-name:slideInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;overflow:visible}
.close-chat:active,.close-chat:focus,.open-chat:active,.open-chat:focus{outline:0}
.close-chat{position:absolute;top:0;left:-25px;width:25px;height:25px;line-height:20px;text-align:center;font-size:40px;font-weight:300;color:#fff;cursor:pointer;z-index:2}
.chat-box-fixed amp-iframe{height:100%;height:100vh;width:300px;position:absolute;top:0;left:0;bottom:0}
.lightbox-chat{background:rgba(0,0,0,.3);width:100%;height:100%;position:absolute}
@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
.open-chat{width:48px;height:48px;right:65px;top:2px;border:none;position:absolute;cursor:pointer;text-align:center;}
.open-chat svg{vertical-align:middle;cursor:pointer}
.open-chat:hover svg path{fill:#f2f2f2;transition:all .4s ease-in-out}
@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
#cookieChoiceInfo{bottom:0;top:auto}
.adsresponsive{width:100%;max-width:336px;height:280px;margin:0 auto}
</style>
<script async='async' src='https://cdn.ampproject.org/v0.js'/>
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
<script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'/>

Kedua, letakkan kode berikut tepat dibawah kode </header> sebagaimana pada model pertama

<li aria-label='Open Chat' class='open-chat' on='tap:disqus-recent.show,disqus-recent-iframe.show,recent-disqus-box' role='button' tabindex='0'><svg height='30' viewBox='0 0 24 24' width='30'><path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M9,9H19V11H9V9M9,13H17V15H9V13Z' fill='#f2f2f2'/></svg></li>

PERHATIAN: 
untuk kode <li> dan </li> bisa sobat ganti dengan <span></span> atau <div ...> dan </div> tergantung pada templatenya.

Ketiga, letakkan kode berikut ini di atas kode </body>

<amp-lightbox id='recent-disqus-box' layout='nodisplay'>
<div aria-label='Close Chat Box' class='lightbox-chat' on='tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-box.close' role='button' tabindex='0'>
<div class='chat-box-fixed' hidden='' id='disqus-recent'>
<div aria-label='Close Chat Box' class='close-chat' on='tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-box.close' role='button' tabindex='0'>&amp;times;</div>
<amp-iframe frameborder='0' height='300' hidden='' id='disqus-recent-iframe' layout='responsive' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/KompiAjaib/kompi-html/master/amprecentcomments.html?shortname=https-al-islamk-blogspot-com&amp;fontBodyColor=555555&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=2B0C93&amp;linkHoverColor=333333' width='600'>
<amp-img height='100vh' layout='fixed-height' noloading='' placeholder='' src='https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png' width='auto'>
    </amp-img>
  </amp-iframe>
  </div>
  </div>
</amp-lightbox>

<amp-iframe frameborder='0' height='420' hidden='' layout='nodisplay' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://github.com/'/>

Keempat, simpan template.

Demikianlah tutorial tentang Cara Mudah Membuat Recent Disqus Simple Sederhana Pada Blog Non AMP. Semoga bermanfaat.

Jika ada kendala bisa komen dibawah ini.
PERHATIAN! File di Azid Blogger di redirect kurang lebih 5-7 kali oleh karena itu sobat harap bersabar untuk mendapatkan filenya.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar