cara memodifikasi komentar median-ui menjadi pop up layar penuh

cara memodifikasi komentar median-ui menjadi buka tutup model pop up layar penuh mirip blog jago desain.

Hallo semua pada kesempatan kali ini saya akan membagikan cara memodifikasi komentar median-ui menjadi pop up layar penuh untuk demonya kalian bisa lihat pada blog ini.

kode ini saya dapatkan dari inspeksi elemen blog jago desain dengan beberapa modifikasi kecil agar cocok pada template yang saya gunakan saat ini yaitu median-ui v.1.4

sebelum artikel ini di buat saya juga pernah mencoba menerapkan di template lain namun harus banyak merombak kode yang sudah ada, dari pada nanti tutorialnya membingungkan jadi saya buatkan khusus pengguna template median-ui saja karena kerangka template median-ui masi sama dengan blog jago desain tentu akan lebih mudah tanpa harus banyak merombak

pada tutorial ini saya akan membagikannya menjadi dua bagian untuk menyesuaikan template kalian, pertama untuk yang menggunakan header sticky dan kedua yang menggunakan navigasi mobile.

sebelum memulai pastikan menggunakan template versi terbaru V.1.4 , karena setiap ada update saya perhatikan CLASS dan ID selalu di ubah, kecuali kalian paham mengenai CLASS dan ID.

dan jangan lupa untuk meng'backup template kalian agar terjadi kesalahan bisa kembali ke semula

Untuk Yang Menggunakan Header Sticky

silakan masuk ke blogger pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>


.Blog .has-comment{position:fixed;bottom:0;left:0;right:0;margin:0;padding:40px 0;width:100%;height:100%;background-color:#fefefe;z-index:55;-webkit-transition:all .2s ease;transition:all .2s ease;overflow-y:auto;opacity:0;visibility:hidden}
.commentBallon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;position:fixed;right:20px;bottom:20px;z-index:56;border-radius:50%;background-color:$(link.colors);-webkit-transition:all .3s ease-out;transition:all .3s ease-out}
.Blog .commentBallon svg{fill:#fefefe}
.Blog .commentBallon svg.line{fill:none;stroke:#fefefe}
.Blog .commentBallon .svg-2{display:none;width:20px;height:20px}
.Blog .comment-show:checked ~ .has-comment{opacity:1;visibility:visible}
.Blog .comment-show:checked ~ .commentBallon{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.Blog .comment-show:checked ~ .commentBallon .svg-1{display:none}
.Blog .comment-show:checked ~ .commentBallon .svg-2{display:block}
.Blog .commentSection{width:100%;max-width:820px;padding:0 20px;margin-left:auto;margin-right:auto}
.dark-mode .comments, .dark-mode .has-comment{background-color:#000}

lanjut cari kode di bawah ini, hapus bagian yang saya tandai dan ganti dengan kode setelahnya.


<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'/>
</div>
</b:if>

<!-- hapus kode di atas ganti dengan kode di bawah ini -->

<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'/>
</div>
</b:if></div>
</section>
<label class='commentBallon' for='forshow-comment'>
<svg class='svg-1' viewBox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'/><rect height='2' width='2' x='19' y='9'/><rect height='2' width='2' x='14' y='9'/><rect height='2' width='2' x='24' y='9'/><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'/></svg>
<svg class='line svg-2' viewBox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg></label>

dan lanjut cari kode seperti di bawah ini, hapus bagian yang saya tandai dan ganti dengan kode setelahnya.


<section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<b:class cond='data:post.numberOfComments &gt; 0' name='has-comment'/>
<b:tag class='comment-all hidden' id='forall-comment' name='input' type='checkbox'/>

<!-- hapus kode di atas ganti dengan kode di bawah ini -->

<section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<b:class cond='data:post.numberOfComments' name='has-comment'/>
<div class='commentSection'>
<b:tag class='comment-all hidden' id='forall-comment' name='input' type='checkbox'/>

terakhir kalian harus menyembunyikan back to top nya agar tidak ketindih, kalian bisa menggunakan  untuk menyembunyikannya, lihat cara penerapannya di bawah ini.


<!--<li class='top-link'>
<div onclick='window.scrollTo({top: 0});'>
<svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21.2498 12C21.2498 6.892 17.1088 2.75 11.9998 2.75C6.89176 2.75 2.74976 6.892 2.74976 12C2.74976 17.108 6.89176 21.25 11.9998 21.25C17.1088 21.25 21.2498 17.108 21.2498 12Z'/><path class='svg-c' d='M15.4709 13.4423L11.9999 9.95629L8.52895 13.4423'/></svg>
</div>
</li>-->

sampai di sini sudah selesai silakan klik simpan dan lihat hasilnya, buat yang menggunakan nav mobile bisa gunakan kode di bawah ini.

Untuk Yang Menggunakan Navigasi Mobile

silakan masuk ke blogger pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>


.Blog .has-comment{position:fixed;bottom:0;left:0;right:0;margin:0;padding:40px 0;width:100%;height:100%;background-color:#fefefe;z-index:55;-webkit-transition:all .2s ease;transition:all .2s ease;overflow-y:auto;opacity:0;visibility:hidden}
.commentBallon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;position:fixed;right:20px;bottom:20px;z-index:56;border-radius:50%;background-color:$(link.colors);-webkit-transition:all .3s ease-out;transition:all .3s ease-out}
.Blog .commentBallon svg{fill:#fefefe}
.Blog .commentBallon svg.line{fill:none;stroke:#fefefe}
.Blog .commentBallon .svg-2{display:none;width:20px;height:20px}
.Blog .comment-show:checked ~ .has-comment{opacity:1;visibility:visible}
.Blog .comment-show:checked ~ .commentBallon{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.Blog .comment-show:checked ~ .commentBallon .svg-1{display:none}
.Blog .comment-show:checked ~ .commentBallon .svg-2{display:block}
.Blog .commentSection{width:100%;max-width:820px;padding:0 20px;margin-left:auto;margin-right:auto}
.dark-mode .comments, .dark-mode .has-comment{background-color:#000}
@media screen and (max-width:640px){
.commentBallon{margin:10px 0 0 0;-webkit-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0}
.commentBallon{position:fixed;top:0;right:0;width:600px;max-width:100%;margin-top:-10px;z-index:99999}
.commentBallon p{font-family:$(body.font);font-size:14px;margin-top:10px;color:#fff;font-weight:700;margin-top:22px}}

lanjut cari kode di bawah ini, hapus bagian yang saya tandai dan ganti dengan kode setelahnya.


<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'/>
</div>
</b:if>

<!-- hapus kode di atas ganti dengan kode di bawah ini -->

<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'/>
</div>
</b:if></div>
</section>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<label class='commentBallon' for='forshow-comment'>
<svg class='svg-1' viewBox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'/><rect height='2' width='2' x='19' y='9'/><rect height='2' width='2' x='14' y='9'/><rect height='2' width='2' x='24' y='9'/><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'/></svg>
<svg class='line svg-2' viewBox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg></label></b:if>

dan lanjut cari kode seperti di bawah ini, hapus bagian yang saya tandai dan ganti dengan kode setelahnya.


<section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<b:class cond='data:post.numberOfComments &gt; 0' name='has-comment'/>
<b:tag class='comment-all hidden' id='forall-comment' name='input' type='checkbox'/>

<!-- hapus kode di atas ganti dengan kode di bawah ini -->

<section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<b:class cond='data:post.numberOfComments' name='has-comment'/>
<div class='commentSection'>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<label class='commentBallon' for='forshow-comment'><p>TUTUP KOMENTAR</p></label></b:if>
<b:tag class='comment-all hidden' id='forall-comment' name='input' type='checkbox'/>

lanjut untuk mengubah tombol darkmode pada navigasi mobile menjadi tombol buka komentar, cari kode seperti di bawah ini, hapus bagian yang saya tandai dan ganti dengan kode setelahnya. kalian juga boleh tidak menarapkan cara ini karena tombol buka komentar bawaan yang berada di bawah postingan masi tetap berfungsi, kalau saya pribadi memilih untuk mengantinya menjadi tombol buka komentar karena tombol dark mode masi ada 1 lagi yang di atas header.


<!-- Dark mode icon -->
<li class='dark-link'>
 <div class='link' onclick='darkMode()'>
 <!-- Link Icon -->
 <svg class='line svg-1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'/></g></svg>
<svg class='svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><circle class='line' cx='12' cy='12' r='6'/><circle class='cls-3' cx='12' cy='3' r='1'/><circle class='cls-3' cx='12' cy='21' r='1'/><circle class='cls-3' cx='21' cy='12' r='1'/><circle class='cls-3' cx='3' cy='12' r='1'/><circle class='cls-3' cx='5.5' cy='5.5' r='1'/><circle class='cls-3' cx='18.5' cy='18.5' r='1'/><circle class='cls-3' cx='18.5' cy='5.5' r='1'/><circle class='cls-3' cx='5.5' cy='18.5' r='1'/></g></svg>
</div>
</li>

<!-- hapus kode di atas ganti dengan kode di bawah ini -->

<!-- Dark mode icon -->
<b:if cond='!data:view.isPost'>
<li class='dark-link'>
<div class='link' onclick='darkMode()'>
<!-- Link Icon -->
<svg class='line svg-1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'/></g></svg>
<svg class='svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><circle class='line' cx='12' cy='12' r='6'/><circle class='cls-3' cx='12' cy='3' r='1'/><circle class='cls-3' cx='12' cy='21' r='1'/><circle class='cls-3' cx='21' cy='12' r='1'/><circle class='cls-3' cx='3' cy='12' r='1'/><circle class='cls-3' cx='5.5' cy='5.5' r='1'/><circle class='cls-3' cx='18.5' cy='18.5' r='1'/><circle class='cls-3' cx='18.5' cy='5.5' r='1'/><circle class='cls-3' cx='5.5' cy='18.5' r='1'/></g></svg>
</div>
</li></b:if>
<b:if cond='data:view.isPost'>
<li>
<input class='comment-show hidden' id='forshow-comment' type='checkbox'/>
<label class='show-comments' for='forshow-comment'>
<!-- Link Icon -->
<svg class='svg-1' viewBox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'/><rect height='2' width='2' x='19' y='9'/><rect height='2' width='2' x='14' y='9'/><rect height='2' width='2' x='24' y='9'/><path class='svg-c' d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'/></svg>
</label>
</li></b:if>

pada kode di atas saya menggunakan tag conditional agar tampilannya tetap rapih, jadi icon buka komentar hanya muncul pada halaman postingan saja, ketika di halaman hompage dan stastis icon darkmode akan kembali muncul.

terakhir kalian harus menyembunyikan back to top pada tampilan desktop dan tetap tampil pada tampilan di mobile dengan menggunakan tag conditional <b:if cond='data:blog.isMobileRequest == "true"'>, lihat cara penerapannya di bawah ini.


<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<li class='top-link'>
<div onclick='window.scrollTo({top: 0});'>
<svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21.2498 12C21.2498 6.892 17.1088 2.75 11.9998 2.75C6.89176 2.75 2.74976 6.892 2.74976 12C2.74976 17.108 6.89176 21.25 11.9998 21.25C17.1088 21.25 21.2498 17.108 21.2498 12Z'/><path class='svg-c' d='M15.4709 13.4423L11.9999 9.95629L8.52895 13.4423'/></svg>
</div>
</li>
</b:if>

sampai di sini sudah selesai silakan klik simpan dan lihat hasilnya, ok sekian cara memodifikasi komentar median-ui menjadi pop up layar penuh semoga bermanfaat. dan jika ingin mendukung blog ini agar kami terus bersemangat cukup share salah satu artikel kami ke sosial media milikmu.

Source code:
www.jagodesain.com

Baca juga :

59 komentar

Tutor's 19 Februari, 2021 15:01 19 Februari, 2021 15:01

kalau comment disqus gimana ?
1. wendy 19 Februari, 2021 17:09 19 Februari, 2021 17:09
  
  Hanya untuk komentar blogger , karena saya tidak menggunakan disqus
2. Tutor's 20 Februari, 2021 01:16 20 Februari, 2021 01:16
  
  eh udah bisa lho saya coba cek tutorialike.com
3. wendy 20 Februari, 2021 07:10 20 Februari, 2021 07:10
  
  Mantap mas, cuma saya lihat tidak langsung kebuka komentarnya ada tombol bawaannya lagi yg harus di klik
4. Tutor's 20 Februari, 2021 10:31 20 Februari, 2021 10:31
  
  tadi udah coba bisa full cuma saja comment di mode dekstop malah gak muncul, kalau kasih perintah forshow-comment lagi nanti malah duplicate element
Tutor's 20 Februari, 2021 10:32 20 Februari, 2021 10:32

btw makasih tutorialnya
1. wendy 20 Februari, 2021 12:58 20 Februari, 2021 12:58
  
  sama sama mas
@Darma 04 Maret, 2021 16:45 04 Maret, 2021 16:45

Mas kalo komentar seperti sekarang scriptnya sama?
1. wendy 04 Maret, 2021 16:50 04 Maret, 2021 16:50
  
  yang pertama mas untuk yang menggunakan header sticky,
2. @Darma 04 Maret, 2021 19:03 04 Maret, 2021 19:03
  
  Ini bisa di gunakan di template lain atau cuma di median UI saja mas?
3. wendy 11 Maret, 2021 12:02 11 Maret, 2021 12:02
  
  Padahal sudah tertulis loh
PayuBaco 26 Maret, 2021 11:43 26 Maret, 2021 11:43

Wah terima kasih banyak tutorial bang sangat membantu , oh ya bang ini otomatis hilang ya tombol show hide komentar di bawah postingan? Kalo masih mau dimunculkan gimana caranya bang.
1. wendy 26 Maret, 2021 13:25 26 Maret, 2021 13:25
  
  Tombol buka komentar yang bawaan tidak saya hilangkan mas di tutorial, hanya di blog saya aja di hilangkan dengan kasi class hiden
2. PayuBaco 26 Maret, 2021 14:04 26 Maret, 2021 14:04
  
  bang barusan sudah saya coba tapi kenapa error ya bang?
3. PayuBaco 26 Maret, 2021 14:10 26 Maret, 2021 14:10
  
  muncul tulisan gini bang
  org.xml.sax.SAXParseException; lineNumber: 2324; columnNumber: 27; The element type "b:includable" must be terminated by the matching end-tag "".
4. wendy 26 Maret, 2021 15:11 26 Maret, 2021 15:11
  
  tarapkan semua kode yang ada di tutorial baru save, itu pesan peringatannya tidak ada tag penutup
PayuBaco
Komentar ini telah dihapus oleh PayuBaco selaku penulis
1. wendy 26 Maret, 2021 16:15 26 Maret, 2021 16:15
  
  mohon maaf mas komentarnya saya hapus, karena menyisipkan kode tidak menggunakan syantax, jadi ada beberapa tampilan yang rusak
2. PayuBaco 26 Maret, 2021 16:29 26 Maret, 2021 16:29
  
  Siap mas terima kasih sebelumnya.
3. wendy 27 Maret, 2021 07:04 27 Maret, 2021 07:04
  
  Sama2 ya mas
Mujib Maulana 11 April, 2021 13:35 11 April, 2021 13:35

next, tolong buatin fitur komentar kyk punya masnya dong heheh
1. PayuBaco 11 April, 2021 16:53 11 April, 2021 16:53
  
  2
2. wendy 11 April, 2021 17:53 11 April, 2021 17:53
  
  Script yang saya pakai sama aja dengan yang di tutorial ini. Hanya bedah lebar dan efek aja
3. PayuBaco 11 April, 2021 17:57 11 April, 2021 17:57
  
  Maksud nya kayak yang ada pilihan pesan komentar atau media + nya bang hehe.
4. wendy 11 April, 2021 21:40 11 April, 2021 21:40
  
  Oh itu, besok / lusa saya buatkan jika tidak ada kesibukan
5. PayuBaco 11 April, 2021 22:41 11 April, 2021 22:41
  
  Siap bang terima kasih.
6. Mujib Maulana 12 April, 2021 00:28 12 April, 2021 00:28
  
  @suprianto SA wkwk sepemikiran yak :v
  
  @mas wendy makasih mas sebelumnya
7. wendy 12 April, 2021 06:57 12 April, 2021 06:57
  
  Sama2 ya. Bisa subcribe dulu biar dapat notif jika sudah saya upload
Mujib Maulana 12 April, 2021 02:28 12 April, 2021 02:28

mas saya nyoba pake template Median UI V1.3, malah ngebug mas wkwk
kyk gambar ini
https://cdn.statically.io/img/1.bp.blogspot.com/-Brf14VlYfqA/YHNNV8r7cgI/AAAAAAAAAHM/a2YsCbV90n8LSnIOWybplW3forieenfcQCLcBGAsYHQ/s320/Screenshot_2021-04-12-02-24-59-822_com.android.chrome.png
ada solusi kah?
1. wendy 12 April, 2021 06:59 12 April, 2021 06:59
  
  Setahu saya v 1.3 blm ada script untuk upload gambar, hanya tag pre saja
2. Mujib Maulana 12 April, 2021 11:32 12 April, 2021 11:32
  
  itu gambar author mas, kyk komentar yang ini, jadi gambarnya malah ngebug
3. wendy 12 April, 2021 12:08 12 April, 2021 12:08
  
  Setiap versi memiliki class dan id yang berbeda mas untuk template median-ui, dan di tutorial ini saya buat untuk versi 1.4, jadi harus bisa sesuaikan kodenya tidak bisa di copas mentah2 aja jika pakai versi yang berbeda
Mujib Maulana 12 April, 2021 16:56 12 April, 2021 16:56

sekarang malah kyk gini mas https://cdn.ststically.io/img/1.bp.blogspot.com/-QpWgjttCaJ4/YHQYeXJ6tFI/AAAAAAAAAHY/HCi7AX7aRiAYqsTnM7O6TKWfbTy44VsbgCLcBGAsYHQ/s1600/Untitled.png wkwk
Mujib Maulana 12 April, 2021 16:57 12 April, 2021 16:57

https://cdn.statically.io/img/1.bp.blogspot.com/-QpWgjttCaJ4/YHQYeXJ6tFI/AAAAAAAAAHY/HCi7AX7aRiAYqsTnM7O6TKWfbTy44VsbgCLcBGAsYHQ/s1600/Untitled.png
1. wendy 14 April, 2021 07:25 14 April, 2021 07:25
  
  Ya mas v.1.3 pasti berbeda, atur aja posisinya seperti top nya
Mujib Maulana 12 April, 2021 16:58 12 April, 2021 16:58

jadi komentarnya kepotong, link https://www.techdroid.eu.org/2021/04/test-postingan-5.html
Martdova.com 24 April, 2021 21:45 24 April, 2021 21:45

cara menghilangkan ini gmna ya, mas?
https://prnt.sc/11z95dc
1. wendy 25 April, 2021 10:18 25 April, 2021 10:18
  
  agar gambarnya terbaca, gunakan fromat gambar dengan benar .jpg .png dan gunakan tools media yang sudah ada pada fitur komentar ini
2. wendy 25 April, 2021 10:21 25 April, 2021 10:21
  
  untuk menyembunyikan tombol buka komentar bawaan cari kode ini
  <label class='show-comments button outline' for='forshow-comment'>
  ganti dengan kode di bawah ini
  <label class='show-comments hidden' for='forshow-comment'>
3. Martdova.com 25 April, 2021 16:01 25 April, 2021 16:01
  
  sudah jadi mas. Kalo ngatur di tampilan desktop biar ga full (biar kaya blog ini) ngedit dibagian mana ya?
Agus 25 April, 2021 06:29 25 April, 2021 06:29

Mantap mas. cuma di fletro, sticky chat nya nutupin sticky table of contentnya fletro. tapi gak papa, masih bisa diatur di css. 😁
1. wendy 25 April, 2021 09:22 25 April, 2021 09:22
  
  Iya mas, karena tutorial ini di buat khusus pengguna template median ui, jd utk template lain bisa di sesuaikan aja.
  
  Utk fletro v.6 nya sudah ada fitur komentar seperti ini juga
Martdova.com 26 April, 2021 19:17 26 April, 2021 19:17

Cara ngatur komentar di tampilan desktop biar ga full (biar kaya blog ini) ngedit dibagian mana ya?
1. wendy 27 April, 2021 12:33 27 April, 2021 12:33
  
  tambahkan css ini
  @media screen and (min-width:800px){.Blog .has-comment{left:52%;width:50%;overflow:auto}}
2. Martdova.com 27 April, 2021 22:08 27 April, 2021 22:08
  
  makasih mas..
Martdova.com 03 Mei, 2021 20:26 03 Mei, 2021 20:26

Untuk menambahkan animasi saat di klik tombol komentarnya gmna ya? spt yang dipake blog ini
1. wendy 04 Mei, 2021 07:15 04 Mei, 2021 07:15
  
  Tambahkan nama animasi ini di .has-comment
  animation:show_wendy 0.8s ease forwards
  css animasi keyframsnya
  @keyframes show_wendy{0%{transform:translateX(100%)}40%{transform:translateX(-10%)}80%{transform:translateX(0%)}100%{opacity:1;pointer-events:auto;transform:translateX(-10px)}}
YUQEN 01 Januari, 2022 01:21 01 Januari, 2022 01:21

Untuk median ui 1.5 dong min🙏
1. wendy 01 Januari, 2022 07:07 01 Januari, 2022 07:07
  
  1.5 kan model komentar sudah pop up mas
Trial MembƎr 16 Januari, 2022 04:36 16 Januari, 2022 04:36

Ente pke theme apa kang?
1. wendy 16 Januari, 2022 06:54 16 Januari, 2022 06:54
  
  median ui v1.6 mas
Gamer-Giri 17 Januari, 2022 15:24 17 Januari, 2022 15:24

On my blog i am using median ui v1.6 my blog comment page dont show how much time ago someone commented it only shows a second ago..
I am not using your this scripts of comments..
1. wendy 17 Januari, 2022 15:35 17 Januari, 2022 15:35
  
  setting like this
  https://blogger.googleusercontent.com/img/a/AVvXsEimPefIVlezT0KHLAxa1CkyswNP3EPbeObo7a-9Yo2uVqcDmf4sW4MoFSlgU22vPIgq5zfbYxz2z_qJ53wDoQHnm4pfLErmjaGkCsejNBq9tgosz7uMl9E-YL5QY38xhnTiBRl0xZY-K7QyGaM2jNdmvaLRoHDcDzBFuH7wZVyLSP9svQAGM0S1x4gQaQ
Trial MembƎr 17 Januari, 2022 18:34 17 Januari, 2022 18:34

Kang wendi bkin juga donk tutor buat fletro theme. Saya awam agak kesusahan edit2nya,
1. wendy 18 Januari, 2022 07:01 18 Januari, 2022 07:01
  
  saya tidak pakai template fletro soalnya, tapi kalau mau ikuti tutor median ui sama aja kok paling bedah2 dikit aja, karna kerangka template sama
APT Pte. Ltd. 12 Maret, 2022 17:10 12 Maret, 2022 17:10

Tutor untuk median ui 1.6
1. wendy 12 Maret, 2022 17:23 12 Maret, 2022 17:23
  
  v.1.6 dan 1.5 kan emang uda pop up gini mas, makanya artikel tidak di update
EXTHEMES DEV 07 Desember, 2022 07:43 07 Desember, 2022 07:43

bang wendy, kalo ganti icon svg disamping logo header gmana bang, kasih tutor lah bng wendy

Wendy Code

cara memodifikasi komentar median-ui menjadi pop up layar penuh

Untuk Yang Menggunakan Header Sticky

Untuk Yang Menggunakan Navigasi Mobile

formulir order menuju whatsapp di blogger

membuat safelink di blog utama dengan random post + generator

membuat fitur login username + password di blogger

cara mengatasi jingling auto visitor di blog

widget bookmark blogger