Cập nhật ngày 20/06/2009

[FD's BlOg] - Để 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. Bài viết này mình sẽ hướng dẫn các bạn thực hiển nó.

Để cho sinh động, ta nên tạo nút bằng hình ảnh.
Đầu tiên bạn phải có 3 tấm hình (nhỏ thôi, tầm 30x30 px), dùng để tạo 3 button : lên, xuống, và giữa.

Các bước thực hiện: (ở đây mình giới thiệu cho blogspot)
1. Đăng nhập vào blog
2. Vào chỉnh sửa Code HTML
3. Chèn đọan code CSS bên dưới vào trước đọan code ]]></b:skin>

#top-buttom_image {
position:fixed;
_position:absolute;
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);
}

- bottom:5px; , right:5px; : 2 đoạn code này để xác định vị trí hiển thị của các button trên màn hình.
4. Chèn đọan code sau vào trước thẻ đóng </body>

<div id='top-buttom_image'>
<a href='javascript:scroll(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='2' src='{Link ảnh}'/></a><br/>
<a href='javascript:scroll(0,9999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='{link ảnh}'/></a>
</div>

- Thay code {Link ảnh} thành địa chỉ URL của ảnh mà bạn muốn hiển thị.

Chú ý: trong lệnh javascript:scroll(0,9999999) số 9999999 đặt càng lớn càn tốt, nếu đặt nhỏ quá, đối với những trang dài, nó sẽ không nhảy đến cuối trang được.

Update (20/06/2009) - button nhảy vào giữa trang

- Ngoài việc cập nhật button nhảy vào giữa trang, mình còn giới thiệu cho các bạn 1 phương thức khác giúp nhảy xuống trang 1 cách chính xác hơn.
- Các bước thực hiện hoàn toàn tương tự như trên, chỉ thay đổi code ở bước 4 thành đoạn code bên dưới:

<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 ảnh1}'/></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 ảnh2}'/></a><br/>

<a href='javascript:window.scrollTo(maxWidth,maxHeight)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='{link ảnh3}'/></a>
</div>

Chúc các bạn thành công.

Read more…

Theo yêu cầu của bạn Trai Miền Tây (www.traimientay.com)

[FD's BlOg] - Biểu tưởng chỉnh sửa nhanh cho widget là một tiện ích mà blogger cung cấp, giúp cho chúng ta có thể chỉnh sửa widget trực tiếp trên blog mà không phải vào bố cục để chỉnh sửa, biểu tượng này chỉ hiển thị với admin của blog. Và bài viết này mình sẽ hướng dẫn các bạn ẩn nó đi.

Hình của icon chỉnh sửa nhanh

Và đây là kết quả sau khi ẩn nó đi.

Việc xóa biểu tưởng chỉnh sửa nhanh thực ra rất đơn giản, nếu bạn muốn xóa biểu tượng chỉnh sửa nhanh nào cho widget thì bạn chỉ việc tìm đến code của widget đó và xóa dòng code <b:include name="quickedit"> là xong.

Ví dụ như mình có đoạn code bên dưới, và hãy xóa đoạn có đánh dấu highlight:

<b:widget id='HTML4' locked='false' title='FEEDJIT Live Page Popularity' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

- Tuy nhiên cách trên không phải thực hiển được hoàn toàn cho các widget, có một số widget mà blogger cung cấp không cho phép ta xóa dòng code này đi, nếu bạn xóa nó thì nó sẽ vẫn hiển thị lại. Ví dụ widget phổ biến nhất là widget "Người theo dõi blog" .
- Để khắc phục điều này, ta sẽ dùng một cách khác, đó là sử dụng lệnh display trong CSS. Khi thực hiện cách này thì tất cả các widget đều được làm ẩn biểu tưởng chỉnh sửa nhanh widget.

- Các bạn thực hiện các bước đơn giản sau:

+ vào bố cục
+ vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng mẫu tiện ích)
+ chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

.quickedit{
display:none;
}

+ Save template. Như thế là đã hoàn thành, bạn hãy thử xem.

Chúc các bạn thành công.

Read more…