Dec 8, 2011

Cấm click chuột phải trên Web, Blog




Giới thiệu: Vì một lý do nào đó mà bạn không muốn mọi người ghé thăm website hay blog của bạn sử dụng chuột phải. Thì đoạn code sau sẽ giúp bạn việc này.

Khi ta dùng chuột phải trên blog, thì lập tức một bảng thông báo sẽ xuất hiện. 

Xe thêm tại đây: http://kenhdaihoc.com/forum/showthread.php?t=2070
CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn code sau:

<!-- Cấm click chuột phải trên Web, blog -->
<script language='JavaScript'>
var msg="
Kehdaihoc.com khong cho bạn click chuột phải đâu nhé!!!";
function disableIE() {if (document.all) {alert(msg);return false;}
}
function disableNS(e) {
if (document.layers||(document.getElementById&amp;&amp;!document.all)) {
if (e.which==2||e.which==3) {alert(msg);return false;}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);document.onmousedown=disableNS;
} else {
document.onmouseup=disableNS;document.oncontextmenu=disableIE;
}
document.oncontextmenu=new Function("alert(msg);return false")
</script>

Đoạn code trên là áp dụng cho cả Blog.


Mở rộng thủ thuật

1. Chỉ cấm click chuột phải ở trang bài viết

<b:if cond='data:blog.pageType == "item"'>
Code ở bước 1
</b:if>

2. Chỉ cấm click chuột phải ở trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Code ở bước 1
</b:if>

3. Chỉ cấm click chuột phải ở trang chủ, trang nhãn

<b:if cond='data:blog.pageType == "index"'>
Code ở bước 1
</b:if>

4. Chỉ cấm click chuột phải trang lưu trữ

<b:if cond='data:blog.pageType == "archive"'>
Code ở bước 1
</b:if>

5. Chỉ cấm click chuột phải ở trang tĩnh

<b:if cond='data:blog.pageType == "static_page"'>
Code ở bước 1
</b:if>

6. Chỉ cấm click chuột phải ở một trang riêng biệt nào đó

<b:if cond='data:blog.url == "LINK_của_trang_riêng_biệt"'>
Code ở bước 1
</b:if>

7. Cấm hết, chỉ trừ trang bài viết

<b:if cond='data:blog.pageType != "item"'>
Code ở bước 1
</b:if>

Lưu ý: Nếu thay == thành != thì kết quả sẽ ngược lại.

== // Chỉ cấm click chuột phải ở trang ...
!= // Cấm click chuột phải hết ở các trang, trừ trang ...


Bước 2: Save template. (Lưu mẫu)

Sửa lỗi ảnh tràn ra ngoài khung bài viết


Giới thiệu: Đôi khi ảnh trên blog của bạn bị tràn ra cả ngoài, trông rất là xấu. Vì vậy để định ảnh không tràn ra ngoài khung bài viết ta cần quy định chiều ngang tối đa cho phép của ảnh, khi đó nếu ảnh quá to sẽ tự thu nhỏ lại theo kích thước quy định. 

Điều chỉnh kích thước MIN và MAX của ảnh hiển thị: Với hình ảnh to hơn giá trị MAX thì sẽ tự động điều chỉnh về giá trị MAX. Nếu ảnh nhỏ hơn giá trị MIN thì sẽ tự điều chỉnh về kích thước MIN. 



CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script 

Bước 1: Tìm dòng .post img { hoặc img { hoặc .data-post img { ,...

- Thêm sau nó đoạn code CSS sau:
max-width:500px; /*Chiều rộng tối đa*/
min-width:200px; /*Chiều rộng tối thiểu*/
clear: both;
}

- Nếu không có thì tìm dòng ]]></b:skin> 

- Thêm vào trước nó đoạn code CSS sau:

.post img {
max-width:500px; /*Chiều rộng tối đa*/
min-width:200px; /*Chiều rộng tối thiểu*/
clear:both;
}


Bước 2: Save template. (Lưu mẫu)

Thêm tiện ích "Recent comments" cho Blogspot

Nguồn:Suu tam



Giới thiệu: Hiện nay Blogger đã có chức năng này rồi, nhưng với code này ta sẽ chỉnh sữa được nhiều hơn cho ưng ý và phù hợp với blog. Đặc biệt là cập nhật thay đổi nhanh hơn so với tiện ích của Blogger. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script 

Bước 1: Tìm dòng ]]></b:skin>

- Chèn trên nó đoạn code CSS sau:

/*Tùy chỉnh phần tên người Recent comments */
.recommment-author {
font-size:12px;
margin-top:8px;
font-weight: bold;
}
.recommment-author a{
color:#0F0FAF;
padding-left:0px;
border-bottom:0px dashed #000;
}
.recommment-author a:hover{color:#;}

/* Tùy chỉnh phần tóm tắt nội dung Recent comments */
.re-sumpost {
font:13px Tahoma;
margin-bottom:20px;
border-left:0px solid #000;
border-bottom:1px dashed #000;
padding:2px;
color:#;
line-height: 15px;
}
.re-sumpost a{color:#3366ff;}
.re-sumpost a:hover{color:#339966;}

/* Tùy chỉnh phần ngày Recent comments */
.date-commment{
font-size:9px;
color:#339966;
padding:2px;
border-left:0px solid #000;
}

Có thể tùy chỉnh thêm các class trong đoạn code trên như đường viền, màu nền,...

Và chỉnh canh lề, màu chữ, kích cỡ, font,... cho phù hợp với blog bạn.


Bước 2: Save template. (Lưu mẫu)


Bước 3: Thêm widget

Design (Thiết kế) > Page Elements (Chỉnh sữa trang) > Add a Gadget (Thêm tiện ích) 

- Chọn thêm tiện ích HTML/Javascript và dán đoạn mã sau vào:

<!-- Thêm tiện ích "Recent comments" cho Blogspot -->
<script style="text/javascript">
function showrecentcomments(json) {
var numcomments = 5; // Số comment hiển thị trong tiện ích
var showcommentdate = true; // Không muốn hiển thị ngày comment thì thay True thành False
var showposttitle = true; // Không muốn hiển thị tiêu đề bài viết thì thay True thành False
var numchars = 100;
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('');
if (showcommentdate == true)
document.write('<div class="recommment-author"><a href="' + alturl + '">' + entry.author[0].name.$t + '</a> said...</div>');
document.write('<div class="date-commment"> On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ', ' + cdyear + ' ');
if (showposttitle == true) document.write(' on ' + posttitle);
document.write('</div>');
if (comment.length < numchars) {
document.write('<div class="re-sumpost">');
document.write(comment);
document.write('</div>');}
else
{
document.write('<div class="re-sumpost">');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '... <a href="' + alturl + '"> Đọc tiếp... </a>');
document.write('</div>');}
document.write('');
}
document.write('');
}
</script>
<script src="http://chiase-vanthuc.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>

- Thay địa chỉ http://chiase-vanthuc.blogspot.com thành địa chỉ web của bạn.


Bước 4: Save. (Lưu)
Xem thêm tại 

Tạo màu nền riêng biệt cho các comment

Untitled


Giới thiệu: Thủ thuật sẽ tạo ra các màu nền riêng xen kẽ nhau cho các comment, và sẽ lặp lại một cách tuần tự. Ví dụ như: Comment đầu tiên màu hồng, comment tiếp theo màu xanh, comment kế đến nữa lại màu hồng,… và cứ lặp tuần tự như vậy. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm thẻ <head>

- Thêm vào dưới nó đoạn code sau:
<script src='http://kenhdaihoc.com/blogger/jquery.min1.4.3.js' type='text/javascript'/>

 Bước 2: Tìm dòng ]]></b:skin>

- Thêm vào trước nó đoạn Code CSS sau:

/*Màu nền comment (1)*/
.comment-body.style1 {
background:#339966;
}
.comment-body.style2 {
background:#3366ff;
}
#339966: Mã màu xanh lá.
#3366ff: Mã màu xanh dương.

Bạn có thể đổi mã màu lại cho thích hợp với blog.


Bước 3: Tìm thẻ đóng </head>

- Thêm vào trên nó đoạn Javascript sau:

<!-- Màu nền comment (2) -->
<script type='text/javascript'>
$(document).ready(function(){
$(".comment-body:nth-child(2n+0)").addClass("style1");
$(".comment-body:nth-child(2n+1)").addClass("style2");
});
</script>

Bước 4: Save template. (Lưu mẫu)


Hướng dẫn mở rộng

Như các bạn đã thấy, ở trên là hướng dẫn cho các bạn cách hiển thị tuần tự theo 2 màu nền, giờ sẽ hướng dẫn thêm vào thành 3, 4 màu tuần tự, tùy theo ý thích của bạn.

Thay đổi code ở bước 2 và 3 như sau:

- Ở Bước 2 thay vì code CSS chỉ có 2 dòng, thì ở đây ta tùy biến thêm nhiều dòng nữa để ứng với nhiều màu cho việc hiển thị nền comment.

/*Màu nền comment (1)*/
.comment-body.style1 {
background:#3366ff;
}
.comment-body.style2 {
background:#339966;
}
.comment-body.style3 {
background:#343434;
}
.comment-body.style4 {
background:#ccc;
}

- Ở Bước 3 thay vì Code javascript chỉ có 2 dòng 2n+02n+1 // đây là code xác định các comment để hiển thị màu nền. 

- Nếu bạn muốn lặp nó với 4 màu thì ta thay số 2 thành số 4, và thêm 2 dòng nữa, ta được: 4n+04n+14n+24n+3.

<!-- Màu nền comment (2) -->
<script type='text/javascript'>
$(document).ready(function(){
$(".comment-body:nth-child(4n+0)").addClass("style1");
$(".comment-body:nth-child(4n+1)").addClass("style2");
$(".comment-body:nth-child(4n+2)").addClass("style1");
$(".comment-body:nth-child(4n+3)").addClass("style2");
});
</script>

- Mở rộng ra, bạn có thể thêm các thuộc tính khác vào các class (ở bước 2), để tạo nên sự khác biệt rõ ràng, như : màu chữ, font chữ, đường viền, căn lề,…

Save template. (Lưu mẫu)

Xem thêm tại đây: 

Loại bỏ Read more ở trang tĩnh (static page)


Nguồn: Sưu tầm

Giới thiệu: Đối với Blogger thì thủ thuật tóm tắt bài viết tự động với nút Read More và ảnh đại diện là một phần quan trọng tạo nên diện mạo đẹp cho Blog của bạn. 

Tuy nhiên kể từ khi Blogger phát hành đặc tính tạo trang tĩnh: New Post (Bài đăng mới) > Edit Page (Chỉnh sữa trang) > New Page (Tạo trang mới) 

Thì thủ thuật Read More gặp vấn đề đối với các trang tĩnh. Thông thường các trang tĩnh dùng để tạo các trang About, Contact,… Khi bạn mở trang tĩnh thì nó hiển thị Read More, khi click chuột vào liên kết Read More vẫn không hiển thị toàn bộ nội dung bài viết. Để giải quyết vấn đề này thì cần phải loại bỏ chức năng Read More có ảnh đại diện ra khỏi các trang tĩnh. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script 

Bước 1: Tìm đoạn code có dạng sau:

<div class='post-body'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>
Đọc tiếp...

"<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Không phải template nào cũng có đoạn code như trên, chỉ tìm tương tự thôi. Chủ yếu là có 3 dòng tô đỏ.


Bước 2: Tìm trong khối code đó dòng <div class='post-body'>

- Thêm vào sau nó đoạn code:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

- Nếu không tìm thấy, thì tìm dòng: 

<b:if cond='data:blog.pageType != &quot;item&quot;'>


- Và thêm vào trước nó đoạn code trên.


Bước 3: Tìm dòng <div style='clear: both;'/>

- Thêm trước nó thẻ đóng </b:if>

- Nếu không thấy dòng này thì tìm dòng:

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>


- Và thêm vào trước (hay sau nó cũng được) thẻ đóng </b:if>


Bước 4: Save template. (Lưu mẫu)

Xem thêm tại  http://kenhdaihoc.com/forum/showthread.php?t=2066

Chỉ cho phép hiển thị tiêu đề bài viết ở trang Archive (Lưu trữ) và Label (Nhãn)

Nguồn: Sưu tầm


Giới thiệu: Thông thường khi bạn truy cập vào các label (nhãn) hay các mục lưu trữ của blog (archive) thì các bài viết sẽ hiển thị đầy đủ, tiêu đề lẫn nội dung, nếu vì một lý do nào đó, các bài viết quá nặng, nó sẽ làm chậm tốc độ load của các trang Label và Archive này. Vì thế một giải pháp làm tăng tốc độ load đó chính là chỉ cho phép các bài viết hiển thị tiêu đề. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script 

Bước 1: Tìm dòng code <b:include data='post' name='post'/>

- Thay thế nó bằng đoạn code sau:

<!-- Chỉ cho phép hiển thị tiêu đề bài viết ở trang Archive (Lưu trữ) và Label (Nhãn) -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

!= data:blog.url': Không áp dụng thủ thuật này trên trang chủ.
!= "item"': Không áp dụng thủ thuật này trong trang bài viết.


Bước 2: Save template. (Lưu mẫu)


Xem thêm tại đây: http://kenhdaihoc.com/forum/showthread.php?t=2065

Bỏ đường viền ảnh khi chèn hình vào blog



Nguồn: Sưu tầm 



Giới thiệu: Nếu bạn đăng hình lên blog và thấy có đường viền bao quanh ảnh. Điều này khiến bạn không hài lòng, nhất là với những ảnh trong suốt, xuất hiện đường viền thật không đẹp tí nào, và lúc này bạn muốn bỏ nó đi. Thủ thuật đơn giản sau sẽ giúp bạn loại bỏ đường viền đáng ghét ấy. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script 

Bước 1: Tìm dòng .post img {

- Đoạn code có dạng như sau:

.post img {
max-width: 480px;
min-width: 10px;
clear: both;
padding: 0px;
border:1px solid #343434; /*Viền ảnh*/
}

- Cũng có template code có dạng khác, nếu không tìm thấy thì:

- Tìm dòng img {

- Đoạn code có dạng như sau:

img {
border:0px;
padding:0px;
max-width: 570px; /*not working in IE6*/
min-width: 1px;
border:1px solid #343434; /*Viền ảnh*/
}

border: Là code tạo viền bao quanh ảnh. Bỏ nguyên dòng border đi thì không còn viền ảnh nữa.


Bước 2: Save template. (Lưu mẫu)