Hướng dẩn tạo Button lên, xuống, vào giữa trang blog

Giới thiệu: Để tiện cho việc người khác lướt blog (web) của mình, các bạn có thể tạo các nút nhảy lên đầu trang, nhảy xuống cuối trang, hoặc nhảy vào giữa trang. 

Demo: Xem góc phải bên dưới blog này

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

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>

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

/* Button lên, xuống, vào giữa trang blog (1)*/
#top-buttom_image {
   position:fixed;
  _position:absolute;

/*Vị trí đặt button*/
   bottom:5px;
   right:5px;

clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

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

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

<!-- Button lên, xuống, vào giữa trang blog (2) -->
<script type='text/javascript'>
var maxWidth = (document.body.clientWidth);
var maxHeight = (document.body.clientHeight);
</script>

<div id='top-buttom_image'>
<a href=' javascript:top.window.scrollTo(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='2' src='LINK_HÌNH'/></a><br/>

<a href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào giữa trang'><img alt='Vào giữa trang' border='2' src='LINK_HÌNH'/></a><br/>

<a href='javascript:window.scrollTo(0,999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='LINK_HÌNH'/></a>
</div>

Thay LINK_HÌNH thành link ảnh button của bạn.


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


Một số mẫu button

          

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

Read More

Không cho quét khối và copy văn bản

Giới thiệu: Nếu bạn không muốn mọi người tùy tiện copy bài trên blog của bạn khi chưa được sự đồng ý của bạn, thì đoạn code sau sẽ giúp bạn vô hiệu hóa sự quét khối trên blog để ngăn việc copy các bài viết. 

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

Demo: các bạn thử copy trang này đi :)) http://kenhdaihoc.com/forum/showthread.php?t=16
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:

<!-- Không cho quét khối và copy văn bản -->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

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


Mở rộng thủ thuật

1. Chỉ cấm sao chép ở trang bài viết

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

2. Chỉ cấm sao chép ở trang chủ

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

3. Chỉ cấm sao chép ở trang chủ, trang nhãn

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

4. Chỉ cấm sao chép trang lưu trữ

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

5. Chỉ cấm sao chép ở trang tĩnh

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

6. Chỉ cấm sao chép ở 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 sao chép ở trang ...
!= // Cấm sao chép hết ở các trang, trừ trang ...

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

Read More

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)

Nguồn: http://kenhdaihoc.com/forum/showthread.php?t=2070

Read More

Nguồn: Sưu tầm 



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. 

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="KHÔNG ĐƯỢC 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)
Xem thâm tại đây: 

Read More

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)

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

Read More

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

Nguồn: Sưu tầm 



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)

Read More

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 

Read More

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

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+0, 2n+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+0, 4n+1, 4n+2, 4n+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: 

Read More