PREyang sudah banyak dipasang oleh blogger Indonesia :D Sobat-sobat pernah melihat dong tampilan script/coded di area postingan, lalu untuk mengambil coded/script tersebut ada tulisan
Kode CSS tagging PRE
pre {
display: block;
font-size: 14px;
font-family: Monaco,'Courier New',Courier,Monospace;
background-color: #f9f9f9;
color: #060606;
width: auto;
padding: 0.7em 1em;
line-height: 1.5em;
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;
position: relative
}
pre:before {
content: "Klik untuk menyeleksi!";
position: absolute;
top: 5px;
right: 5px;
padding: 5px;
color: #f9f9f9;
background-color: #060606;
visibility: hidden;
}
pre:hover:before {visibility:visible}
Itu gue bikin, silahkan tambah-tambahin oleh kalian biar lebih full stylish. Setelah buat area pre giliran memasukan script buat menyeleksi teks. Script ada 2 jalan, yaitu mau memakai JavaScript ataupun jQuery.<script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("click", function () {
var seleksi = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
seleksi.removeAllRanges();
seleksi.addRange(range);
}, false);
}
</script>
Plugin jQuery<script type='text/javascript'>
function autoSelect(elem) {
var selection, range;
if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(elem);
selection.removeAllRanges();
selection.addRange(range);
} else if (document.selection) { // IE
selection = document.selection.createRange().text;
range = document.body.createTextRange();
range.moveToElementText(elem);
range.select();
}
}
$('pre').on("click", function() {
autoSelect(this);
});
</script>
Pilih salah satu jangan dimasukin dua²nya :P Masalah penempatan script coba terlebih dahulu diatas tag </body> kalau tidak jalan baru deh coba taruh scriptnya diatas tag </head> Ketika mosting markup HTML yg dipakai seperti berikut
<pre>
-------- CODED/SCRIPT AFTER PHRASE --------
</pre>
DEMOSemoga bermanfaat :)
Happy coding \m/