trik ini berguna untuk sebuah blog yang terutama menyajikan info tutorial sehingga ketika pengunjung ingin menyanyakan topik tertentu dengan menyertakan cuplikan kode, sedangkan untuk gambar dan video di pergunakan untuk kebutuhan tertentu sperti memberi sc dan lainnya, untuk video tergantung kebutuhan saja. jadi langsung saja mari kita mulai.
pertama silahkan pahami terlebih dahulu kode javascript berikut ini, lalu letakkan di atas tag penutup body yaitu </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='db-comt-image' src='$1' alt='loading...' \/>");
b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='db-comt-image' src='$1' alt='loading...' \/>");
b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='db-com-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='db-com-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='db-com-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='db-com-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') {
db-comt-post = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>"); /* untuk mengeksekusi baris tag kode */
db-comt-post = db-comt-post.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>"); /* untuk mengeksekusi baris kode pada tag pre */
db-comt-post = db-comt-post.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>"); /* untuk mengeksekusi baris kode catatan */
db-comt-post = db-comt-post.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");
b.item(i).innerHTML = db-comt-post;
}
}
}
//]]>
</script>
cara penerapan pada komentar biasanya dalam kode konversi telah di sertakan ketika kita mengkonversi kode, jika ingin melakukan secara manual gunakan kode di bawah ini saat berkomentar:
Menulis Tag <code>
<i rel="code">
Tulis kode di sini</i>
, atau [code]
Tulis di sini[/code]
Menulis Tag <pre>
<i rel="pre">
Tulis kode di sini</i>
, atau [pre]
Tulis kode 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">
URL gambar di sini</i>
, atau [img]
URL gambar di sini[/img]
Menambahkan Video Youtube
<i rel="youtube">
URL Video Youtube di sini</i>
, atau [youtube]
URL Video Youtube di sini[/youtube]
jangan lupa tambahkan css berikut ini di template sobat untuk mengatur tampilan dari semua kode di atas
#comment-holder .db-com-youtube {
display:block;
border:none !important;
background-color:#333;
width:450px;
height:240px;
margin:0 auto 30px;
}
#comment-holder .db-comt-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 untuk melihat gambar!";
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 untuk melihat video!";
}
jadi jangan lupa juga untuk menyimpan perubahan, untuk melihat hasilnya cek deh dengan memasukkan kode di komentar sesuai cara diatas...
semoga berguna dan bermanfaat.
13 komentar
Sebelum ganti template saya juga menggunakan script di atas tapi sudah terhapus dan lupa untuk dibackup, sekarang diposting disini jadi kebetulan sekali akan dipakai lagi di blog saya.
BalasHapusIzin simpan scriptnya gan... terima kasih sudah berbagi...!
Silahkan gan, semoga sukses :)
HapusCoba tes kode pre
BalasHapus#comment-holder .db-com-youtube {
display:block;
border:none !important;
background-color:#333;
width:450px;
height:240px;
margin:0 auto 30px;
}
test berhasil :-bd
Hapusteeessss
BalasHapus#comment-holder .db-com-youtube {
BalasHapusdisplay:block;
border:none !important;
background-color:#333;
width:450px;
height:240px;
margin:0 auto 30px;
}
...CATATAN ANDA...
BalasHapusjika disini berhasil tp sy praktekkan dikomentar blog tmn,gk bisa ya?
BalasHapusalamat blognya pa biar sya liat...
HapusKomentar ini telah dihapus oleh pengarang.
BalasHapus...KODE ANDA DI SINI...
BalasHapusUntuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...
BalasHapusUntuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...
BalasHapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>