Cara Mudah Menambahkan Gambar, Video, Kode Pada Komentar Blog
 |
| Menambahkan Gambar Pada Komentar Blog |
Belajar Komputer - Sebenarnya
postingan kali ini berawal dari pengalaman pribadi yang penulis alami,
pada update sebelumnya penulis pernah membahas tentang Cara Mempercepat Koneksi Modem Smartfren dan
beberapa hari setelah postingan ini dipublish, ada pengunjung blog yang
menanyakan Bagaimana Cara Menghubungkan Modem dengan Antenanya, sempat
bingung bagaimana cara menjelaskannya kalau menggunakan kata-kata,
akhirnya terbersit dalam benak saya untuk menjelaskan dengan kombinasi
kata-kata disertai gambar, nah sekarang yang jadi kendala adalah Bagaimana Menambahkan Gambar Pada Komentar Blog Saya.
Setelah itu
saya memutuskan untuk mencari Tutorial tentang Bagaimana Cara
Menambahkan Gambar Pada Komentar Blog, akhirnya setelah beberapa saat
browsing ketemulah dengan blog Kang Ismet yang secara rinci
pertanyaan yang ada di benak saya, pada tutorial yang saya temukan,
tidak hanya membahas tentang Bagaimana Cara Menambahkan Gambar Pada
Komentar Blog, tetapi juga dibahas Bagaimana Menambahkan Video, Kode dan Blockquote Pada Komentar Blog.
Sekarang apa yang saya sudah dapatkan dari Blog Kang Ismet
sudah saya aplikasikan pada blog kesayangan saya ini, dan pada
postingan kali ini saya juga akan membagikannya kepada teman-teman semua
yang ingin mempercantik blognya dengan Menambahkan Gambar, Video, Kode
dan Blockquote Pada Komentar Blog. Silahkan simak langkah-langkahnya
berikut ini:
Langkah 1 - Simpan kode berikut diatas ]]></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:"Silahkan enable JavaScript Anda untuk melihat gambar ini!";
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:"Silahkan enable JavaScript Anda untuk melihat video ini!";
}Langkah 2 - Simpan kode berikut diatas </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> Langkah 3 - Cara Penulisan (Mengaplikasikan)
Berikut adalah cara Menuliskannya / format penulisan pada komentar blog Anda.
Menulis Tag <code>
Menulis Tag <pre>
Menulis Catatan (Blockquote)
Memasukan/Menambahkan Gambar
Memasukan/Menambahkan Video Youtube
<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/Menambahkan Gambar
<i rel="image">Tulis URL gambar di sini</i>, atau[img]Tulis URL gambar di sini[/img]Memasukan/Menambahkan Video Youtube
<i rel="youtube">Tulis URL Video Youtube di sini</i>, atau[youtube]Tulis URL Video Youtube di sini[/youtube]Sekian dulu postingan kali ini semoga bisa bermanfaat untuk semuanya, jangan lupa untuk membaca update sebelumnya mengenai Bagaimana Cara Membuat Pesan Diatas Kotak Komentar.
Inspirasi Blog :
http://blog.kangismet.net/2013/08/memasukan-gambar-youtube-kode-pada-komentar-blogger.html
