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
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
- Silahkan login ke akun blogger menggunakan akun google anda
- Selanjutnya pergi ke menu tema atau theme dalam bahasa inggris nya
- Kemudian silahkan kamu mencari kode seperti di bawah ini
- Jika sudah ketemu kodenya silahkan, hapus dan ubah kodenya seperti kode berikut ini
- Langkah selanjutnya silahkan salin dan tempelkan kode javascript di bawah ini tepat di atas kode </body>
<!--[ Comment message ]-->
<b:if cond='data:this.messages.blogComment != ""'>
<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
<!--[ 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("rahBinfo").style.display = "none";cdClear();' type='button'>
<span aria-hidden='true'>
×
</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
<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
