إنضم لنا

Cara membuat komentar disqus buka tutup terbaru valid AMP





Saya ingin selalu mencoba memberikan yang terbaik buat kalian cyeeehehehe bahasanya sudah kaya orang pacaran, ajah
Saya akan membahas sesuai judul sajah, Yaitu


Cara membuat komentar disqus buka tutup terbaru valid AMP
Kenapa terbaru kan sudah banyak yang search di google?, iyah banyak bajibun malah tapi saya ingin memberikan yang berbeda juga menghindari kesamaan judul

Ok biar kalian tidak penasaran kalian liat demonya di bawah

Ini adalah demo terbaru cara membuat komentar buka tutup




# Ini otomatis terbuka saat browser di refres





#Ini otomatis tertutup saat browser di refres

Kira kira seperti itu lah demonya sangat sederhana, harap di maklumi yah om #saya lagi belajar, Dan ini sudah saya tes untuk memastikan agar valid untuk amp dan Alhamdulilah tidak terdapat peringatan maka saya akan coba search di sini siapa tau temen temen, ingin mencobanya Kalian bisa ikuti caranya di bawah...

O,iya Desain di atas saya terinspirasi dari tampilan yang ada di android hehe


Langsung saja mari kita mulai, Yang pertama kalian harus posisi login di akun blogger kalian dan kalin masuk di mode Edit HTML Kemudian salin css di bawah dan tempelkan di bawah code <style amp-custom='amp-custom'>
/* CENGGINI SARANG */
.cs-webcensar {
  color:red;
  font-family:FontAwesome;
  padding: 0px 0px 0px 0px;
  margin: 10px auto;
  list-style: none outside;
}
/////////////////////////////////
//  HARGAI PEMBUAT             //
//  Jika Ingin mengopas harap  //
//  Izin pasti Kami mengizinkan//
/////////////////////////////////
.cs-webcensar > * + * { border-top: 1px solid white; }

.cs-webcensar-item-hd {
  display:block; margin:10px 0px; border:1px solid #ddd; border-radius:2px 2px 2px 2px; -moz-border-radius:10px;
  display: block;
  background:#222;
  padding: 0px 0px 2px 1px;
  position: relative;
  line-height:30px;
  cursor: pointer;
  font-size: 10px; /* ukuran hurup pada header*/
  font-weight: bold;
  color: #0673e0;
  top:-30px;
}
/* Di bagian ini kalian bisa mengatur ukuran hurup pada mode off */
.cs-webcensar-item-hd::before{
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  background: transparent;
  font-size:10px;
  vertical-alight:middle;
  content:"\f0e6"" ""OFF";
  margin:3px;
  color:red;
  font-family:FontAwesome;
}
/* END */

/* Di bagian ini kalian bisa mengatur ukuran hurup pada mode on */
.cs-webcensar-item-input:checked ~ .cs-webcensar-item-hd::before{
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 10px;
  vertical-alight:middle;
  content:"\f0e6"" ""ON";
  margin:3px;
  color:#0dc410;
  font-family:FontAwesome;
}
/* END */

/* Di bagian ini Kalian bisa mengatur kecepatan dan mengurangi mode buka */
.cs-webcensar-item-input:checked ~ .cs-webcensar-item-bd {
  max-height: 100%;
  padding-top: 10px;
  margin-bottom: 10px;
  -webkit-transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
  transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
}

.cs-webcensar-item-input:checked ~ .cs-webcensar-item-hd > .cs-webcensar-item-hd-cta {
  right:6px;
  top:4px;
  color:#0dc410;
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}

.cs-webcensar-item-hd-cta {
  display: block;
  color:#ddd;
  position: absolute;
  top: calc(51% - 13px );
  /* Di bagian ini kalian bisa mengatur posisi icon dan menmbah/ mengurangi ukuran icon*/
  right: 5px;
  pointer-events: none;
  -webkit-transition: -webkit-transform .53s ease;
  transition: transform .0000s ease;
  -webkit-transform: rotate( -180deg);
  -ms-transform: rotate (-180deg);
  transform: rotate(-180deg);
  text-align: center;
  font-size: 25px;
  line-height: 1;
}
/* END */

.cs-webcensar-item-bd {
  max-height: 0;
  background:#fff;
  padding:-5px;
  box-shadow:0px 2px 0px 1px  #ddd;
  margin:-43px 1px 0px 1px;
  border-radius:0px 0px 5px 5px;
  margin-bottom: 0px;
  overflow: hidden;
  -webkit-transition: max-height .15s ease-out, margin-bottom .13s ease-out, padding .3s ease-out;
  transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
}

.cs-webcensar-item-input {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1;
  overflow: open;
  position: absolute;
  left: -9999px;
}
/* CENGGINI SARANG END */

Selanjutnya kalian cari code seperti ini
<b:includable id='comments' var='post'>
Dan tempelkan HTML ini di bawahnya
<br/>
<ul class='cs-webcensar css-Oi'><li class='cs-webcensar-item'>
<input checked class='cs-webcensar-item-input' id='item5' name='cs-webcensar' type='checkbox'/>
  <label class='cs-webcensar-item-hd' for='item5'>KOMENTAR <span class='cs-webcensar-item-hd-cta'><i class='fa fa-toggle-on'></i>
    </span></label>
<div class='cs-webcensar-item-bd'>
<br/>
  <amp-iframe expr:src='&quot;https://cdn.rawgit.com/cenggini/webcensar-com/master/disqus.comments.html?shortname=webcensar-com&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=e8554e&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;url=&quot; + data:blog.url + &quot;&amp;homepageurl=&quot; + data:blog.homepageUrl + &quot;&amp;canonicalhomepageurl=&quot; + data:blog.canonicalHomepageUrl' frameborder='0' height='333' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='556'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'/>
</amp-iframe>
</div>
</li>
</ul>

PENTING!:
Kalian ganti webcensar-com Dengan Shortname kalian, Kemudian hapus checked jika kalian ingin komentar disqus otomatis tertutup saat browser di refres

Atau kalian biarkan saja jika kalian ingin komentar disqus otomatis terbuka saat browser di refres seperti yang ada pada demo

Dan jika kalian pasang kemudian terdapat kesalahan kalian tinggal pindah kan sajah </div> di bawah </ul>

Tutorial di atas sudah saya coba di 3 template yang berbeda dan tidak ada masalah, Tetapi perlu kalian ketahui setiap template berbeda dari segi position , maka jika di rasa masih kurang pas pada template kalian , kalian tinggal sesuaikan sajah, margin dan padding,

Itu sajah yang dapat saya search semoga membantu
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail