Assalamu’alaikum..
Pada
blog yang menyediakan tutorial, pastinya gambar akan sangat membantu memahami
seorang reader ketika sedang mengikuti tutorial yang diberikan oleh admin blog.
Tidak akan menarik ketika blog yang menyediakan tutorial hanya tulisan saja,
tidak ada gambarnya.
Ketika
admin blog 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 tutorial yang sudah admin blog berikan. Lalu bagaimana reader blog
tersebut bertanya problem yang terjadi saat mengikuti tutorialnya ?
Apakah
melalui Contact yang tersedia, menghubungi admin melalui email, atau bertanya
langsung di kotak komentar ?
Untuk
memudahkan para reader bertanya dan memberikan screenshoot problem yang
terjadi, alangkah mudahnya ketika admin blog 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 :
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]||c}k=[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[
$('#comments p, #comments dd').each(function() {
$('b[rel^="h"]',
this).nextAll().filter('br').remove();
$('i[rel="pre"]',
this).replaceWith(function() {
return
$('<pre></pre>').append($(this).contents());
});
$('i[rel="image"]',
this).replaceWith(function() {
return $('<img
/>').attr('src', $(this).text());
});
// Menyisipkan tag `<h3>`
$('b[rel="h3"]',
this).replaceWith(function() {
return
$('<h3></h3>').append($(this).contents());
});
$('b[rel="quote"]',
this).replaceWith(function() {
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: 100%!important;
height: 400px;
}
@media screen and
(max-width:960px) {
.comment_body iframe {
max-height: 90%
}
}
@media screen and
(max-width:768px) {
.comment_body iframe {
max-height: 75%
}
}
@media screen and
(max-width:600px) {
.comment_body iframe {
max-height: 60%
}
}
@media screen and
(max-width:480px) {
.comment_body iframe {
height: auto!important;
max-height: auto!important
}
}
</style>
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..
