Assalamualaikum Wr. WB Hello sobat, saya mau share Cara Menambah Gambar, Blockquote dan Kode pada Komentar, Sebetulnya di blog-blog lain sudah banyak yang menyediakan tutorial ini, akan tetapi belum menyertakannya bagaimana cara penggunaanya..
Silahkan sobat ikuti langkah mudahnya :
Simpan kode di bahawa ini tepat di atas
]]></b:skin>
(Gunakan Crtl+F untuk mempercepat pencarian)#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 di bawah ini lalu letakan tepat 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>
Kemudian Simpan Template
Format Penulisan di Komentar Blog
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]
Bigitulah Cara Menambah Gambar, Blackquote dan Kode pada Komentar Semoga bermanfaat Wassalamualaikum Wr. Wb
ijin praktek gan :D
BalasHapusIjin coba dulua ya sobat :)
BalasHapusIjin prateknya gan
BalasHapusNice tutorial gan :)
BalasHapus