Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar
0 views
Adding Images, Youtube Videos, Quotes and Codes to Blogger Comments - Sebetulnya tutorial ini sudah banyak yang membuatnya. Akan tetapi karena banyak pertanyaan tentang bagaimana cara memasukan gambar, video youtube, kode, catatan ke komentar Blogger, maka saya buat tutorial ini untuk memudahkan pengunjung blog ini.
Tutorial ini berkaitan dengan tutorial Cara Membuat Pesan di atas Form Komentar Blogger. Biasanya, hal ini digunakan oleh sahabat yang sering berbagi tutorial, untuk memmudahkan berbagi kode atau screenshoot.
Kode yang saya bagikan berasal dari DTE, karena ada sebagian kode yang tidak jalan, maka saya tambahkan yang lainnya. Silahkan sobat ikuti langkah mudahnya :
Simpan kode ini di atas
Kemudian, simpan kode ini di atas
Simpan Template
Menulis Tag <code>
Menulis Tag <pre>
Menulis Catatan (Blockquote)
Memasukan Gambar
Memasukan Video Youtube
Semoga bermanfaat...

Tutorial ini berkaitan dengan tutorial Cara Membuat Pesan di atas Form Komentar Blogger. Biasanya, hal ini digunakan oleh sahabat yang sering berbagi tutorial, untuk memmudahkan berbagi kode atau screenshoot.
Kode yang saya bagikan berasal dari DTE, karena ada sebagian kode yang tidak jalan, maka saya tambahkan yang lainnya. Silahkan sobat ikuti langkah mudahnya :
Simpan kode ini di atas
]]></b:skin>
#comment-holder .cm-youtube {
display:block;
border:none !important;
background-color:#333;
width:450px;
height:240px;
margin:0 auto 30px;
}
#comment-holder .cm-image {
display:block;
margin:0 auto 15px;
outline:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
padding:5px;
max-width:96%;
height:auto;
width:auto;
}
code, #comment-holder code,
#comment-holder i[rel="code"] {
font:normal 12px Monaco,"Courier New",Monospace;
color:blue;
}
pre, #comment-holder pre,
#comment-holder i[rel="pre"] {
display:block;
font:normal 12px Monaco,"Courier New",Monospace;
background-color:#333;
color:white;
padding:0.5em 1em;
word-wrap:normal;
white-space:pre;
overflow:auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
blockquote, #comment-holder blockquote,
#comment-holder b[rel="quote"] {
margin:0 2%;
background-color:#eee;
padding:1em 1.2em;
border-left:4px solid #7498AD;
display:block;
font-weight:normal;
font-style:italic;
}
#comment-holder i[rel="image"],
#comment-holder i[rel="youtube"] {
display:block;
overflow:hidden;
border:2px solid black;
position:relative;
width:170px;
height:100px;
margin:0 auto 30px;
}
#comment-holder i[rel="image"]:before,
#comment-holder i[rel="youtube"]:before {
content:"Please enable your JavaScript to see this image!";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:red;
color:white;
font-weight:bold;
text-align:center;
padding:15px 0;
}
#comment-holder i[rel="youtube"]:before {
content:"Please enable your JavaScript to watch this video!";
}
Kemudian, simpan kode ini di atas
</body>
<script type='text/javascript'>
//<![CDATA[
function repText(id) {
var a = document.getElementById(id),
b = a.innerHTML,
b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
document.getElementById(id).innerHTML = b;
b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
b = b.replace(/&feature=[0-9a-zA-Z-_]*/ig, "");
b = b.replace(/\/s(640|1600)/g, "/s400");
} repText('comment-holder');
c = document.getElementById('comment-holder');
if (c) {
b = c.getElementsByTagName("p");
for (i = 0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-content') {
ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");
ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");
ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");
b.item(i).innerHTML = ki_comm;
}
}
}
//]]>
</script>
Simpan Template
Format Penulisan
Menulis Tag <code>
<i rel="code">
Tulis kode yang sudah diparse di sini</i>
, atau[code]
Tulis kode yang sudah diparse di sini[/code]
Menulis Tag <pre>
<i rel="pre">
Tulis kode yang sudah diparse di sini</i>
, atau[pre]
Tulis kode yang sudah diparse di sini[/pre]
Menulis Catatan (Blockquote)
<b rel="quote">
Tulis catatan di sini</b>
, atau[quote]
Tulis catatan di sini[/quote]
, atau[blockquote]
Tulis catatan di sini[/blockquote]
Memasukan Gambar
<i rel="image">
Tulis URL gambar di sini</i>
, atau[img]
Tulis URL gambar di sini[/img]
Memasukan Video Youtube
<i rel="youtube">
Tulis URL Video Youtube di sini</i>
, atau[youtube]
Tulis URL Video Youtube di sini[/youtube]
Semoga bermanfaat...
147 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
[img]http://3.bp.blogspot.com/-1ss4aM-1Zxs/U-M8Z4K0OaI/AAAAAAAAA90/EH8yRJDRdU0/s1600/Blogger+Award+copy.png[/img]
[img]http://emoticoner.com/files/category_pictures/super-onion-head-emoticon.gif[/img]
[youtube]http://www.youtube.com/watch?v=ywtYLzF1BRQ[/youtube]
http://anaktimor-17.blogspot.com"
"Nice post, jangan lupa berkunjung balik By.Anaktimor17 Blog"
kok gak work ya kang,...
knpa tuh???
<div style="text-align: center;">
<a class="demo" href="#LINK DEMO" target="_blank">Demo</a>
<a class="download" href="#LINK DOWNLOAD" target="_blank">Download</a>
<div class="clear"></div>
<div style="text-align: center;">
<a class="demo" href="#LINK DEMO" target="_blank">Demo</a>
<a class="download" href="#LINK DOWNLOAD" target="_blank">Download</a>
<div class="clear"></div>
Sangat Bermanfaat Sekali....!!! :)
http://goo.gl/3tZfXY
ini Js saya..<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews').addClass('mbtloading');
var blogStats = new Firebase("https://nama blog saat mendaftar.firebaseIO.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) …
Padahal disini mah di kiri ya,,, blog ak bayuajuzt.blogspot.com
Mohon bantuannya secepatnya ya
ngecek doank
c = document.getElementById('comment_block');
http://melodicdark.blogspot.com/2013/12/cara-cepat-dapat-dollar-dari-popadsnet.html
Pencerahan dong kang :'(
gmn ya biar i rel nya kebaca?
Menulis Tag kode
Tulis kode yang sudah diparse di sini, atau
[code]Tulis kode yang sudah diparse di sini[/code]
Menulis Tag pre
Tulis kode yang sudah diparse di sini, atau
[pre]Tulis kode yang sudah diparse di sini[/pre]
Menulis Catatan (Blockquote)
Tulis catatan di sini, atau
[quote]Tulis catatan di sini[/quote], atau
[blockquote]Tulis catatan di sini[/blockquote]
Memasukan Gambar
Tulis URL gambar di sini, atau
[img]Tulis URL gambar di sini[/img]
Memasukan Video Youtube
Tulis URL Video Youtube di sini, atau
[youtube]Tulis URL Video Youtube di sini[/youtube]
kok di form komentar ga bisa kayak gitu ya
www.kevin-432.blogspot.com
mohon maaf lair dan batin yea....
smg kang Ismet sekeluarga bs dipertemukan kembali dgn Ramadhan tahun depan, aamiin.
“Ƭαqobbαlαllαhu minnαα ωα minkum
(Semogα Alloh menerimα αmαlku dαn αmαl kαliαn).”
Mohon Maaf Lahir dan Batin. :D
dan dihari yang fitri ini izinkan saya serta keluarga mengucapkan minal aidin walfaidzin
mohon maaf lahir bathin ...
#Promosi #Blog Mohon Maaf Lahir Batin! http://www.vavaheirro.com/2013/08/mohon-maaf-lahir-batin.html
maaf sebelumnya udah promosi
oh iya kang ismet mau tanya nih..,di dte kan ada tuh kode
b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
tetapi begitu saya masukkin kode itu, hasilnya malah entry komennya rusak ._.
tetapi sewaktu tidak memakai js yang itu, hasilnya malah bagus ._.
itu kenapa ya kang?
http://yoga-tc.blogspot.com/
celco-blog.blogspot.com
Prinsipnya sama kayak penggunaan emotion di kolom komentar bukan?
Javascript mereplace code emo dengan gambar,, nah, kalau yang ini,,, wah,, keren kang
Kalau gk salah tag code untuk menyisipkan kode pendek.
Contoh : </body>
tag pre untuk menyisipkan kode panjang.
Contoh :#comment-holder .cm-image {
display:block;
margin:0 auto 15px;
outline:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
padding:5px;
max-width:96%;
height:auto;
width:auto;
}
Blockquote/Catatan untuk menysipkan catatan atau apa saja, seperti blockquote di blog sobat untuk berbagi tutorial. :)
Contoh : [catatan]Mantap Artikelna :bd[/catatan]
http://yoga-tc.blogspot.com/
nanti juga saya coba pake kalo sudah ngebahas tutorial.
makasih infonya kang
Trims tutornya, kang Ismet.
Sekalian request dan nanya, cara buat tulisan Ditulis Oleh: xxx Label: xxx dibawah postingan seperti blog kang Ismet tuh gimana?
Dan apa tulisan seperti itu yang disebut dgn "byline"?
Sekalian aja, Mohon Maaf Lahir Bathin...Mav'in saya kalau ada kata2 kurang berkenan selama komentar di sini :)
Sukses selalu ya kang
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
Ditulis oleh :
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><a href='http://blog.kangismet.net'><b><data:post.author/></b></a></span>
</b:if>
</b:if>
</span>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
//<![CDATA[
$('#comment-holder p').each(function() {
// Ubah semua tag <i rel="pre"> dengan <pre>
$('i[rel="pre"]', this).replaceWith(function() {
return $('<pre></pre>').append($(this).contents());
});
});
//]]>
</script>
[img]https://lh3.googleusercontent.com/-5PN9n2ZQrP4/UXUHKes0XSI/AAAAAAAAAaw/_ZS245WhJmg/h120/niceinfo.gifi[/img]
Berikutnya
[blockquote]SEMUA TIPS YANG DIBERIKAN SANGAT BERMAMFAAT !! TERIMAKASIH PAK GURU HE...HE..[/blockquote]