Tạo nét riêng khi trình bày code CSS, Javascript và HTML

(Huynh Nhat Ha's Blog) -- Nếu blogspot của bạn giới thiệu về thủ thuật blog hay thiết kế web thì sẽ thường xuyên trình bày code trong bài viết.. Những code có cường độ trình bày nhiều nhất là CSS, Javascript và HTML. Tạo nét riêng khi trình bày những code này là một cách tạo sự khác biệt cho blog của bạn.

Bài viết này giới thiệu kiểu trình bày code trong bài viết Blogger với nét riêng biệt cho từng code CSS, Javascript và HTML.

Bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

pre {padding-top:20px;}
pre code {
overflow:auto;
background: transparent url(http://img560.imageshack.us/img560/9986/fondocoments2.png) repeat;
border: 1px solid rgb(204, 204, 204);
color:#7f7f7f;
font-size:12px;
display:block;
max-height:350px; min-height:45px;width:580px;
padding:5px; white-space:pre; 
text-align:left;}
code:hover {background-color:#ffffff;}
pre.css {background:#FFFFFF url(http://img59.imageshack.us/img59/7421/cssya.png) no-repeat scroll left top;}
pre.js {background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MLORD0qv8x8t9pCfOxaVPgsF2BMb0xeJsVFvifZif0D5Ps2Yw6yT5z8AJAMnLS_2WqYLAEVOJYaOs1t9vh3OsDSX-DzeYhgdAKQoj58N_-uWDyirea84NNrAVV6LX2kQt1BFwx9oXAoS/s1600/js.png) no-repeat scroll left top;}
pre.html {background:#FFFFFF url(http://img189.imageshack.us/img189/667/htmlh.png) no-repeat scroll left top;}

Chú ý trong đoạn code trên, max-height gán chiều cao tối đa cho khung trình bày code, nếu vượt qua mức này thì sẽ tự động hiển thị thanh cuộn scrollbar. Bạn có thể thay đổi chiều rộng khung ở dòng width:580px. 

Lưu Template.

Bước 2. Mỗi khi viết bài, ở chế độ Edit HTML, khi bạn muốn trình bày code thì định dạng cấu trúc HTML như sau:

<pre class="css"><code>
… Đặt code CSS tại đây …
</code></pre>

<pre class="js"><code>
… Đặt code Javascript đã được mã hóa tại đây …
</code></pre>

<pre class="html"><code>
… Đặt code HTML đã được mã hóa tại đây …

Chống copy văn bản bằng cách vô hiệu hóa right click

(Huynh Nhat Ha's Blog) -- Việc chống copy nội dung web bằng việc vô hiệu hóa thao tác kích chuột phải là một điều cần thiết đối với một số trường hợp riêng biệt. Thủ thuật này được thực hiện khá dễ dàng khi thiết kế website. Đối với webblog trên nền Blogger, thao tác này cũng có thể thực hiện được bằng cách sử dụng ngôn ngữ Javascript. Trong một lần tham khảo tại trang web www.dynamicdrive.com, tôi đã bắt gặp một đoạn code được khuyến nghị sử dụng khi thiết kế website, trong khi áp dụng cho Blogger thì kết quả cũng rất tốt, nên chia sẻ cũng các bạn.

Chỉ cần dán toàn bộ đoạn code dưới đây vào một widget dạng HTML/JavaScript bất kỳ cho Template của bạn là có thể thành công, lưu ý nên đặt widget ở trên Header hoặc Footer để dễ quản lý.

<script language="JavaScript">
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Sorry. You do not have permission to right click on this page!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layersdocument.getElementById&&!document.all){
if (e.which==2e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

Bạn có thể thay đổi câu thông báo màu đỏ trong đoạn code trên theo ý mình.