Đặt code sau đây bên trên thẻ </body>:
<script type="text/javascript">
//<![CDATA[
function copy_code(id) {
var ref = document.getElementById(id),
code = ref.getElementsByTagName('code')[0].innerHTML,
w_w = window.innerWidth,
w_h = window.innerHeight,
win = window.open('', '', 'left=' + ((w_w/2)-250) + ',top=' + ((w_h/2)-150) + ',width=500,height=300,scrollbars=0');
win.document.write('<!DOCTYPE html><html><head><title>Source Code</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;text-aign:center}textarea{display:block;width:98%;height:270px;padding:1px 1px;margin:0 auto;text-align:left;overflow:auto}</style></head><body><textarea>' + code.replace(/<(.*?)>/g, "") + '</textarea><scr' + 'ipt type="text/javascript">var a=document.getElementsByTagName(\'textarea\')[0];a.focus();a.select();</scr' + 'ipt></body></html>');
}
function add_copy_button() {
var pre = document.getElementsByTagName('pre');
for (var i = 0; i < pre.length; i++) {
pre[i].id = 'code-' + i;
pre[i].className += ' quick-copy';
pre[i].innerHTML += '<a class="c_b" href="javascript:copy_code(\'code-' + i + '\');">Copy</a>';
}
} add_copy_button();
//]]>
</script>
Tiếp theo đặt đoạn css sau lên trên thẻ ]]></b:skin> :
pre {position:relative}
pre .c_b {
display:block;
position:absolute;
top:0;
right:0;
padding:2px 5px;
}
Lưu lại mẫu, đặt code sau vào bài viết nơi bạn muốn hiển thi code của blog:
<pre><code> ... </code></pre>
Hãy dùng kiểu Trình bày code kiểu JavaScript Popup này để làm cho blogger của mình thêm đẹp nhé!
Chúc mừng năm mới 2015
1 Comments
bữa nay chơi thủ cmn thuật nữa à :D
Emoticon