Cara Membuat Kotak Komentar dapat Menyisipkan Gambar, Catatan, Video, dan Kode dengan Mudah

Assalamu?Alaikum..

Pada weblog yang menyediakan academic, pastinya gambar akan sangat membantu memahami seorang reader ketika sedang mengikuti academic yang diberikan oleh admin weblog. Tidak akan menarik ketika weblog yang menyediakan tutorial hanya tulisan saja, tidak ada gambarnya.

Ketika admin weblog sudah memberikan gambar pada tutorial diblog-nya, apakah para reader akan bisa langsung mengerti/memahami ? Menurut saya masih akan sedikit kesulitan.

Nah saat itu mungkin saja terjadi sedikit problem meskipun para reader sudah mengikuti academic yang sudah admin blog berikan. Lalu bagaimana reader blog tersebut bertanya hassle yang terjadi saat mengikuti tutorialnya ?

Apakah melalui Contact yang tersedia, menghubungi admin melalui electronic mail, atau bertanya langsung di kotak komentar ?

Untuk memudahkan para reader bertanya dan memberikan screenshoot hassle yang terjadi, alangkah mudahnya ketika admin weblog memberikan fitur pada kotak komentar diblognya agar dapat berkomentar dengan menyisipkan gambar. Lalu bagaimana caranya ?

Oke pada pembahasan kali ini saya akan membahas Cara Membuat Kotak Komentar dapat Menyisipkan Gambar, Catatan, dan Kode dengan Mudah. Silahkan disimak yaa :

1. Silahkan LogIn ke blog sobat terlebih dahulu. Disini .

2. Setelah itu akan masuk ke Dashboard/Home blog. Silahkan klik Arah panah kebawah, pada blog yang dipilih – klik Template – Kllik “Edit HTML”, seperti gambar dibawah.

3. Letakkan script di bawah, diatas Kode </body> . Gunakan CTRL+F untuk mencari kodenya.

<script type='text/javascript'>

//<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return c;if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||ck=[function(e){return d[e]];e=function(){return'\\w+';c=1;while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])return p('$("#10 18, #10 20").17(3(){$(2).19($(2).19().32(/\\[5\\](.*?)\\[\\/5\\]/31,"<5 34=\'35\' 37=\'36\' 9=\'$1\' 30=\'0\'></5>")),$(\'5.23:22([9*="24.25/28"])\').27("9").26("39","#46 49(48.51) 52-54 50% 50%")),$("#10 18, #10 20").17(3(){$(\'13[4^="43"]\',2).45().44("55").40(),$(\'16[4="15"]\',2).7(3(){6 $("<15></15>").14($(2).8())),$(\'16[4="38"]\',2).7(3(){6 $("<53 />").42("9",$(2).41())),$(\'13[4="12"]\',2).7(3(){6 $("<12></12>").14($(2).8())),$(\'13[4="47"]\',2).7(3(){6 $("<21></21>").14($(2).8())),$(\'16[4="11"]\',2).8().29().33("<11></11>"));',10,56,'||this|function|rel|iframe|return|replaceWith|contents|src|comments|code|h3|b|append|pre|i|each|p|html|dd|blockquote|not|video|youtube|com|css|removeAttr|embed|unwrap|frameborder|gi|replace|wrap|width|420|315|height|image|background|remove|text|attr|h|filter|nextAll|900|quote|error|url||png|no|img|repeat|br'.split('|'),0,{))

//]]>

</script>

<script type='text/javascript'>

//<![CDATA[

$('#remarks p, #comments dd').Every(feature()

$('b[rel^="h"]', this).NextAll().Filter out('br').Do away with();

$('i[rel="pre"]', this).ReplaceWith(feature()

return $('<pre></pre>').append($(this).contents());

);

$('i[rel="image"]', this).ReplaceWith(feature()

return $('<img />').attr('src', $(this).text());

);

// Menyisipkan tag `<h3>`

$('b[rel="h3"]', this).ReplaceWith(characteristic()

return $('<h3></h3>').append($(this).contents());

);

$('b[rel="quote"]', this).ReplaceWith(characteristic()

return $('<blockquote></blockquote>').append($(this).contents());

);

$('i[rel="code"]', this).contents().unwrap().wrap('<code></code>');

);

//]]>

</script>

4. Klik “Save Template”. Seperti gambar dibawah.

5. Silahkan coba dengan menyisipkan kode <i rel="image">Link Gambar Anda</i> di kotak komentar – lalu klik Publish/Publikasikan, atau sobat bisa menyisipkan kode lain :

Menyisipkan kode :  <i rel="code">Kode Anda</i> atau <i rel="pre">Kode Anda</i>

Menyisipkan judul :  <b rel="h3">Judul Anda.</b>

Menyisipkan catatan :  <b rel="quote">Catatan.</b>

Membuat teks tebal :  <b>Teks Anda.</b>

Membuat huruf miring :  <i>Teks Anda</i>

Menyisipkan Video :[iframe]Masukan Url Embed Video Anda Disini[/iframe]

Sedikit tambahan untuk video tersebut Responsive.

<style type='text/css'>

/*KOMEN VIDEO*/

.Comment_body iframe

width: one hundred%!Critical;

peak: 400px;

@media display and (max-width:960px)

.Comment_body iframe

max-height: ninety%

@media display screen and (max-width:768px)

.Comment_body iframe

max-peak: seventy five%

@media screen and (max-width:600px)

.Comment_body iframe

max-peak: 60%

@media screen and (max-width:480px)

.Comment_body iframe

height: car!Critical;

max-height: car!Vital

</style>

Bingung mengambil kode HTML gambar ? klik Disini .

Hasilnya akan menjadi seperti gambar dibawah.

Mudah bukan ? silahkan sobat coba sendiri yaa.. Oke mungkin segitu saja Cara Membuat Kotak Komentar dapat Menyisipkan Gambar, Catatan, dan Kode dengan Mudah. Mohon maaf apabila ada kata yang salah dan kurang berkenan. Terima kasih.

Wassalamu?Alaikum..

Jika Menyukai Artikel di blog ini, Silahkan masukkan e-mail sobat. Akan dapat Update artikel dari blog ini, "GRATISS!!"

0 Response to "Cara Membuat Kotak Komentar dapat Menyisipkan Gambar, Catatan, Video, dan Kode dengan Mudah"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel