Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Thêm chức năng mở cửa sổ mới và bôi đen cho code

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi TrollVL, 17/3/14.

Lượt xem: 4,926

  1. TrollVL Thành viên cấp 2

    Ở bài viết này mình sẽ hướng dẫn các bạn thêm chức năng mở cửa sổ mới và tự bôi đen cho khung code. Để thêm tiện ích này vào blog bạn hãy thực hiện theo các bước hướng dẫn đơn giản bên dưới và bạn có thể xem demo tại đây
    [​IMG]​

    1. Chèn code vào template
    Chèn đoạn code bên dưới trước thẻ đóng </body>
    Code:
    <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 - Troll VL</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;text-aign:center}textarea{display:block;width:98%;height:300px;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="copy" href="javascript:copy_code(\'code-' + i + '\');">Copy</a>';
}
} add_copy_button();
//]]>
</script>
    2. Thêm đoạn CSS bên dưới vào trước ]]></b:-skin>
    Code:
    
	
pre {position:relative}

	
pre .copy {display:block;position:absolute;top:0;right:0;padding:2px 5px;}
[code]

2.Thực hiện khi viết bài
Để thêm chức năng mở cửa sổ mới và bôi đen cho code bạn viết bài với chế độ HTML với cú pháp sau
[code]
<
	
pre><code> Nội dung đoạn code </code></pre>
    Cảm ơn bạn đã đọc bài viết, mời bạn ghé thăm blog cá nhân của mình là http://www.trollvl.com để tham khảo thêm rất nhiều thủ thuật khác

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    TrollVL, 17/3/14
    #1
    Hồng Sơn thích bài viết này
Từ khóa:

Ủng hộ diễn đàn