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
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
Selanjutnya kalian cari code seperti ini
<b:includable id='comments' var='post'>
Dan tempelkan HTML ini di bawahnya
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
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
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='"https://cdn.rawgit.com/cenggini/webcensar-com/master/disqus.comments.html?shortname=webcensar-com&fontBodyFamily=sans-serif&fontLinkColor=e8554e&canonicalurl=" + data:blog.canonicalUrl + "&url=" + data:blog.url + "&homepageurl=" + data:blog.homepageUrl + "&canonicalhomepageurl=" + 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
