Nguyễn Khắc Huy: 12/08/11

Thursday, December 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: http://kenhdaihoc.com/forum/showthread.php?t=2077

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 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: http://kenhdaihoc.com/forum/showthread.php?t=2077

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 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 ảnh luôn hiện ở phía trước mặt Blog - Thích hợp cho quảng cáo

/*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

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

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

/* 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

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)

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

Nguồn: Sưu tầm

<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

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

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

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

/* 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