Membuat Komentar Dengan Foto, Video, dan Syntax - OTODIDAK27

Membuat Komentar Dengan Foto, Video, dan Syntax

Membuat Komentar Dengan Foto Video dan Syntax
Kerangka komentar blogger yang belum sempurna sehingga penyisipan beberapa tag html dasar juga dilarang, jadi tidak ada cara lain kita perlu membuat kode pendek dan menggunakan js untuk mengonversinya menjadi tag html. Itu berarti tidak hanya foto (tag img), video (tag iframe), kode sintaks dan (tag pre) tetapi dengan tag html dasar apa pun yang dapat kita gunakan js untuk mengubah.

Pada artikel ini saya menggunakan SyntaxHighlighter 3.0.83 (tema Eclipse, 3 modul js-html-css) untuk mempercantik kode dan fancybox 3.3.5 untuk melihat gambar dalam kotak komentar dalam mode lightbox. Dan tentu saja, sangat penting bahwa Anda tidak mematikan komentar blogger di situs anda.

1. Cari kode <b:includable id='threaded_comments' var='post'>
2. kemudian tambahkan script dibawah ini.
<!-- Diperlukan Syntax Highlighter -->
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>

<!-- Khusus untuk Syntax Highlighter : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ -->
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreEclipse.min.css' rel='stylesheet' type='text/css'/>
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.min.css' rel='stylesheet' type='text/css'/>

<!-- Modul untuk Syntax Highlighter : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ -->
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js'/>

<!--Diperlukan untuk fancybox -->
<link href='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
//<![CDATA[
function smartComment() {
    a = document.getElementById("comment-holder");
    b = a.innerHTML;
    b = b.replace(/\[pre\]/gi, "<pre>");
    b = b.replace(/\[pre js\]/gi, "<pre class='brush:js'>");
    b = b.replace(/\[pre html\]/gi, "<pre class='brush:html'>");
    b = b.replace(/\[pre css\]/gi, "<pre class='brush:css'>");
    b = b.replace(/\[\/pre\]/gi, "</pre>");
    b = b.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
    b = b.replace(/\[img\]/gi, "<img data-fancybox='gallery' src='");
    b = b.replace(/\[\/img\]/gi, "'/>");
    b = b.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
    b = b.replace(/\[youtube\]https:\/\/youtu.be/gi, "<iframe width='560' height='315' src='https://www.youtube.com/embed");
    b = b.replace(/\[youtube\]https:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='560' height='315' src='https://www.youtube.com/embed/");
    b = b.replace(/&amp;feature=/gi, "?rel=0' '");
    b = b.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
    a.innerHTML = b
}
smartComment();

$("#comment-holder img").each(function() {
    $(this).attr('data-src', $(this).attr("src"));
});

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

$(window).on('load', function() {
    var t = document.createElement("script");
    t.src = "//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js";
    document.body.appendChild(t);
    $("#comment-holder img[data-fancybox]").fancybox();
});
//]]></script>

Lihat gambar dibawah.
Membuat Komentar Dengan Foto Video dan Syntax

Dengan demikian, untuk menampilkan semua kode, maka gunakan dibawah ini.
  • Masukan Foto: [img]link gambar[/img]
  • Masukan video youtube: [youtube]link video[/youtube]
  • Masukan code HTML: [pre html]kode[/pre]
  • Masukan code CSS: [pre css]kode css[/pre]
  • Masukan code JS: [pre js]kode js[/pre]
... (anda dapat menambahkan syntax modul tergantung pada tujuan penggunaan)

Demikian tutorial dari OTODIDAK27 mengenai cara membuat komentar dengan foto, video, dan syntax diblogger. Semoga bermanfaat, wassalam.

Untuk demo bisa dilihat DISINI

# blog

https://www.otodidak27.com/2019/03/membuat-komentar-dengan-foto-video-dan-syntax.html

0 Response to "Membuat Komentar Dengan Foto, Video, dan Syntax"

Emoticon
Urutan

Post a Comment

Beri apresiasi terhadap thread ini Gan!

Anda dan 0 lainnya
Suka
Jadilah yg pertama menyukai

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright Ensikology All Rights Reserved
Powered by Blogger