Download Template Plus UI + mode Translate v3

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat fitur komentar custom di blogger

Info: Jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Fitur komentar

Apa itu fitur komentar custom? fitur komentar custom merupakan fitur komentar yang di buat khusus untuk menampilkan pesan komentar dengan petunjuk penggunaan komentar dan menampilkan apa saja yang bisa pengunjung blog lakukan dengan fitur komentar custom tersebut

Contoh Tampilan

Jika kamu penasaran bagaimana kah contoh tampilan dari fitur komentar di blogger, silahkan periksa menggunakan tombol di bawah ini

Periksa

Info: Bagaimana sobat dengan contoh tampilannya keren sekali yak

Cara pembuatan

Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai cara membuat fitur komentar custom di blogger, silahkan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini

1. Silahkan login ke akun blogger menggunakan akun google anda
2. Selanjutnya pergi ke menu tema atau theme dalam bahasa inggris nya
3. Kemudian silahkan kamu mencari kode seperti di bawah ini

<!--[ Comment message ]-->
<b:if cond='data:this.messages.blogComment != &quot;&quot;'>
<div class='cmMs note'>
<data:this.messages.blogComment/>
</div>
</b:if>

Info: Pada setiap struktur kode template memiliki perbedaan jika kode di atas tidak kamu temukan, sikahkan lanjut ke langkah selanjutnya

4. Jika sudah ketemu kodenya silahkan, hapus dan ubah kodenya seperti kode berikut ini

<!--[ Comment message ]-->
<div class='cmMs raHim'>
<div id='rahCmM'>
 <input checked='' class='rahCmMs1 hidden' id='offrahCmM1' name='accordion-menu' type='radio'/>
<input class='rahCmMs2 hidden' id='offrahCmM2' name='accordion-menu' type='radio'/>
 <div class='cmbutton'>
 <div class='cmbutton1'>
 <label class='cmbutton-title' for='offrahCmM1'>
 Pesan Komentar
</label>
 </div>
 <div class='cmbutton2'>
<label class='cmbutton-title' for='offrahCmM2'>
 Media +
</label>
 </div>
</div>
<div class='rahCm-mes'>
 Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan
 <b>
link aktif
 </b>
 tidak akan ditampilkan.
</div>
<div class='rahCm-des'>
 Masukkan
 <b>
<a href='https://imgbb.com/upload' rel='nofollow noopener noreffer' target='_blank' title='Upload Gambar di Sini'>
 URL Gambar
</a>
 </b>
 atau
 <b>
<a href='https://www.youtube.com/?feature=youtu.be' rel='nofollow noopener noreffer' target='_blank' title='Dapatkan URL Youtube di Sini'>
 URL Video YouTube
</a>
 </b>
 atau
 <b>
Potongan Kode
 </b>
 , atau
 <b>
Quote
 </b>
 , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.
 <div id='rahParser'>
<textarea id='rahCodes' placeholder='Masukkan kode/ url_gambar/ url_video_youtube di sini untuk diparse' spellcheck='false'/>
<div class='rahalert rahalertSuccess collapse' id='rahBinfo' role='rahalert' style='display: none;'>
 <button class='rahCloser close-copy' onclick='document.getElementById(&quot;rahBinfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'>
<span aria-hidden='true'>
 &#215;
</span>
 </button>
 <span>
Code Copied!
 </span>
</div>
<span class='rahCmBgroup'>
 <button class='rahCmBpri btn-xs' id='cvrt2' onclick='imgConvert();this.disabled = true;'>
image
 </button>
 <button class='rahCmBpri btn-xs' id='cvrt4' onclick='videoConvert();this.disabled = true;'>
video
 </button>
 <button class='rahCmBpri btn-xs' id='cvrt5' onclick='preConvert();this.disabled = true;'>
pre
 </button>
 <button class='rahCmBpri btn-xs' id='cvrt1' onclick='codeConvert();this.disabled = true;'>
code
 </button>
 <button class='rahCmBpri btn-xs' id='cvrt3' onclick='quoteConvert();this.disabled = true;'>
quote
 </button>
 <br/>
 <button class='rahCmBlink btn-xs btn-info' data-clipboard-action='copy' data-clipboard-target='#rahCodes' id='rahCmBlink' style='display: none;' type='submit'>
Salin Kode!
 </button>
 <button class='btn-danger btn-xs' onclick='cdClear();'>
Bersihkan
 </button>
</span>
<span class='checkbox'>
 <input checked='' id='opt1' type='checkbox'/>
 <input checked='' id='opt2' type='checkbox'/>
 <input checked='' id='opt3' type='checkbox'/>
 <input checked='' id='opt4' type='checkbox'/>
 <input checked='' id='opt5' type='checkbox'/>
 <br/>
 <input checked='' id='opt6' type='checkbox'/>
 <span>
image
 </span>
 <input checked='' id='opt7' type='checkbox'/>
 <span>
video
 </span>
 <input checked='' id='opt8' type='checkbox'/>
 <span>
quote
 </span>
 <input checked='' id='opt10' type='checkbox'/>
 <span>
pre
 </span>
 <input checked='' id='opt11' type='checkbox'/>
 <span>
code
 </span>
</span>
<div class='clear'>
</div>
 </div>
</div>
</div>
</div>

Info: Jika kode pada langkah no.3 tidak ketemu silahkan cari kode <iframe class='blogger-iframe-colorize blogger-comment-from-post lazy' kemudian letakkan kode HTML di atas tepat di atasnya

5. Langkah selanjutnya silahkan salin dan tempelkan kode javascript di bawah ini tepat di atas kode </body>

<script>
/*<![CDATA[*/ 
var rahimgLazy = 'lazy fullN'; /* kode class lazy gambar dan anti full gambar, jika kode class yang di gunakan template mu sama gak usah di ubah */
var rahClassYt = 'videoYt'; /* Ini adalah class kode untuk menampilkan video youtube */
/*]]>*/</script>
<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/rahcmft.js'></script><script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js"></script>

Info: Kamu bisa mengedit class kode Gambar dan video pada komentar sesuai template mu masing masing