Học Trực Tuyến

Dec 8, 2011

Chèn ảnh luôn hiện ở phía trước mặt Blog - Thích hợp cho quảng cáo

Giới thiệu: Khi thực hiện điều này các hình ảnh được chèn sẽ luôn luôn xuất hiện ở phía trước mặt của blog của bạn, hình ảnh sẽ luôn luôn xuất hiện ngay cả khi người xem di chuyển chuột (lên, xuống) trong blog của bạ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 dòng ]]></b:skin>

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

/*Chèn hình cố định (1)*/
#top_image {
position:fixed;
_position:absolute;

bottom:5px; /*Vị trí hình trên blog*/
left:5px;     /*Vị trí hình trên blog*/ 

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

left:5px; Nếu bạn muốn hiện bên phải thì thay bằng: right:5px;

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

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

<!--Chèn hình cố định (2) -->
<div id='top_image'>
<img src= "http://kenhdaihoc.com/forum/images/ads1.gif"/>
</div>

http://kenhdaihoc.com/forum/images/ads1.gif - Thay bằng link ảnh của bạn

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

Nguồn:

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

6:19 PM Thủ thuật Blog No comments

Giới thiệu: Thủ thuật chèn hình ảnh (icon) vào trước tiêu đề bài viết theo nhãn. Ví dụ như nhãn thể thao thì hình trái banh, nhãn hỏi đáp thì hình dấu hỏi, nhãn đọc truyện thì hình quyển sách,… Tùy theo bạn xếp hình gì cho nhãn thôi.

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 ]]></b:skin>

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

/* Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng (1)*/
.post-icon img {
float:left;
margin-right:8px;
}

Bước 2: Tiếp tục tìm đến đoạn code có dạng sau:

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

Bước 3: Trong khối code đó tìm dòng <h3 class='post-title entry-title'>

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

<!-- Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng (2)-->
<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == "Tên_Label_1"'>
<img src='LINK_HÌNH'/>
</b:if>

<b:if cond='data:label.name == "Tên_Label_2"'>
<img src='LINK_HÌNH'/>
</b:if>
...
<b:if cond='data:label.name == "Tên_Label_N"'>
<img src='LINK_HÌNH'/>
</b:if>

</b:loop>
</b:if>
</div>

LINK_HÌNH // Link hình của nhãn.
Tên_Label // Tên nhãn của bạn muốn chèn hình.

Bước 4: Save template. (Lưu mẫu)
Xem thêm tại đây: http://kenhdaihoc.com/forum/showthread.php?t=2076

Nguồn: sưu tầm

Điều chỉnh bề rộng khung comment, thu hẹp khoảng cách dưới khung

5:23 PM Thủ thuật Blog No comments

Nguồn: Sưu tầm

Giới thiệu: Trong Blogger, những khung comment mặc định thường nhỏ hơn nhiều so với chiều rộng của bài đăng. Khi thiết kế blog, bạn muốn khung comment to hơn cho phù hợp và làm đẹp cho blog của mình, thì thủ thuật đơn giản sau sẽ giúp bạ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. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Cách 1: Tìm đến đoạn code có dạng sau:

<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>

height='275' // Khoảng cách từ comment xuống đích trang blog.
width='100%' // Độ rộng khung comment. Có thể thay 100% thành số nhỏ hơn: 70%, 86%,… Hay cụ thể hơn là 600px, 500px,… tùy theo bố cục template của blog bạn.

Save template. (Lưu mẫu)

Cách 2: Tìm dòng ]]></ b: skin>

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

.comment-form{
min-width: 100% !important; /*Mở rộng tối đa khung comment*/
}

Save template. (Lưu mẫu)

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

5:01 PM Thủ thuật Blog No comments

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

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

3:00 PM Thủ thuật Blog No comments

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)

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

9:31 AM Thủ thuật Blog No comments

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

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

9:09 AM Thủ thuật Blog No comments

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

Học Trực Tuyến

Dec 8, 2011

Chèn ảnh luôn hiện ở phía trước mặt Blog - Thích hợp cho quảng cáo

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

Điều chỉnh bề rộng khung comment, thu hẹp khoảng cách dưới khung

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

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

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

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

Blog Archive

Blogger news

Blogroll

About

Dec 8, 2011

Social Profiles

Blog Archive

Blogger news

Blogroll

About