Tạo icon chạy xuống cuối trang, lên đầu trang

Để 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>

<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 bạn thành công! 
(Hãy để lại comment dưới đây nếu bạn gặp vấn đề khi thực hiện và đó cũng là cách ủng hộ tôi)

Sưu tầm

Đặt code trong khung vào bài viết của blogspot/blogger

Theo yêu cầu của anh Thắng, tôi viết hướng dẫn này chia sẻ một trong những cách đơn giản nhưng không kém chuyên nghiệp để đặt code nằm trên khung trong bài đăng của Blogger. Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.

CSS điều khiển thuộc tính khung hiện code:

Để hiển thị code bạn cần đặt chúng giữa hai thẻ mở <pre> và đóng </pre>trong bài viết của mình. Muốn đẹp hơn bạn có thể thêm khung bằng cách sử dụng các thuộc tính về màu chữ, màu nền, font chữ, đường viền, kích thước rộng và cao, thanh trượt, cách viền ... bằng cách thêm code CSS vào thẻ mở, ví dụ: <pre style="color: #333333; background: #999999; width: 100%; height: 50px; overflow: auto; padding: 10px;">.

Một cách chuyên nghiệp hơn chúng ta sẽ tạo ra một class mới và đặt chúng vào CSS của template (đặt vào bất kỳ vị trí nào giữa hai thẻ <b:skin><![CDATA[/* và ]]></b:skin> ). Việc làm này sẽ giúp bạn sử dụng khung hiển thị code thống nhất ở tất cả các bài viết có dùng khung và dễ chỉnh sửa thuộc tính khi muốn thay đổi. Ví dụ ở đây tôi tạo ra lớp pre-formatting có CSS như sau:

.pre-formatting{
  color: #333333;
  background: #999999;
  border: 2px solid #999999;
  overflow: auto;
  font-family: "Tahoma", Tahoma;
  padding: 10px;
}

Đương nhiên trong template nên bạn có thể sử dụng các biến lấy giá trị cho từng thuộc tính đã được định nghĩa trước đó. Ví dụ:

.pre-formatting{
  color: $textcolor;
  background: $bgcolor;
  border: 2px solid $bordercolor;
  overflow: auto;
  font: $headerfont;
  padding: 10px;
}

Cách sử dụng:


Để code xuất hiện mang thuộc tính của CSS đã lưu trước đó chúng ta sẽ sử dụng chế độ HTML để soạn bài và đặt code như sau:

<pre style="height: 100px;" class="pre-formatting">Code</pre>

Câu hỏi đặt ra ở đây là chúng ta đã dùng class pre-formatting, vậy tại sao phải thêm CSS điều khiển height (chiều cao của khung), có dư thừa chăng? Câu trả lời phụ thuộc vào đoạn code mà bạn dùng. Nếu đoạn code đó ngắn bạn chọn giá trị chiều cao khung nhỏ và ngược lại, không nhất thiết phải thêm vào CSS của template vì chúng ta không biết trước đoạn code mỗi lần dùng. Không dư thừa chút nào!


Cũng xin lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML Tai day (ví dụ: <thành &lt; và > thành &gt;) trước khi đặt giữa hai thẻ trên. Và mách nhỏ hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) |Formatting (Đang định dạng) để không cần phải gõ mỗi lần dùng.


CẬP NHẬT:


Tôi vừa biết thêm một cách chuyên nghiệp hơn và đơn giản hơn vì không phải ước lượng height cho đoạn code bạn dùng. 


Bạn cũng thêm một đoạn CSS điều khiển hiển thị code như trên nhưng để chúng đi kèm thẻ pre hoặc code:

pre, code{
  color: $textcolor;
  background: $bgcolor;
  border: 2px solid $bordercolor;
  overflow: auto;
  font: $headerfont;
  padding: 10px;
}

Khi sử dụng trong post chúng ta sẽ đặt code theo một trong hai cách:

<pre>
... code ...
</pre>

Hoặc:

<code>
... code ...
</code>

Với cách này người ta có thể dùng hình ảnh đánh số thứ tự làm nền để đoạn code hiển thị trông đẹp hơn. Bạn có thể chép đoạn code sau mà tôi đang dùng cho template của mình.

pre, code {
  display:block;
  font: 1em 'Courier New', Fixed, monospace;
  font-size : 100%;
  color: #666666;
  background : #fff url(http://img178.imageshack.us/img178/1307/prepb3.jpg) no-repeat left top;
  overflow : auto;
  text-align:left;
  border : 1px solid #99cc66; 
  padding : 0px 20px 0 30px;
  margin:1em 0 1em 0;
  line-height:17px;
}

Quốc Vịnh (theo: thuthuatblog)

Code Converter

Công cụ này nhằm chuyển đổi một số ký tự đặc biệt (như <, >, ", ...) sang các dạng mã HTML tương ứng để "paste" vào bài viết trong blog mà không gặp lỗi. Đây chỉ là 1 ứng dụng đơn giản được viết bằng Javascript, nhưng khá hữu ích.


Dán mã code của bạn ở đây ...
Convert < to &lt;
Convert > to &gt;
Convert & to &amp;
Convert " to &quot;
Convert ' to &#039;

Kết quả của bạn có được ở đây. Chỉ cần nhấp chuột để chọn và sao chép!

<pre>Dán Kết quả ở trên thay cho dòng này sau đó sao chép toàn bộ mã trong khung để sử dụng</pre>

Quốc Vịnh

Perfect Icon 2.10 - Phần mềm tạo icon từ hỉnh ảnh

Perfect Icon là một công cụ hữu dụng, đơn giản và đáng tin cậy để tạo ra những icon từ hình ảnh và photo. Hỗ trợ những dịnh dạng ảnh : bmp, jpeg, tiff, gif, wmf … Phần mềm cho thể tạo hiệu ứng trong suốt không hoàn toàn cho những icon của Windows XP.
Tải về tại đây
Những hiệu ứng và phong cách khác nhau sẽ cho phép tạo ra những loại ảnh đặc biệt. Bao gồm những hiệu ứng như xoay chiều ảnh (rotation) , lật / úp ảnh (flipping), tạo nét mờ (opacity) , chỉnh màu sắc tương phản (hue/saturation) , đổ bóng (shadow) … Những style sẽ giúp cho bạn tạo ra frame ảnh và những icon sắc nét.

PerfectIcon là một công cụ tối ưu để bạn tự tay chỉnh sửa icon cho desktop của mình, trong menu của Windows Start, cho những folder và file. Sử dụng PerfectIcon bạn có thể dễ dàng thay thế những icon sẵn có trong windows bằng những icon do chính bạn lựa chọn và tự tay hiệu chỉnh vô vàn những đặc tính của desktop. Bạn đã quá chán nản với việc nhìn thấy những desktop xưa rích và giống y đúc như hàng ngàn những desktop khác trên thế giới ?

Aha – phần mềm PerfectIcon cung cấp cho bạn những cách giải quyết đơn giản và nhẹ nhàng cho vấn đề trên. Sử dụng công cụ nhỏ gọn này bạn hoàn toàn có thể thay thế những icon chuẩn của windows bằng icon mà mình yêu thích và tự tay điều chỉnh lại desktop. Bạn có thể thay đổi cả những icon cứng đầu sẵn có của Windows.

Bạn có thể thay đổi icon của folder và file. Đơn giản với giao diện trông bắt mắt sẽ làm cho bạn dễ dàng và thoải mái hơn khi thực hiện những công đoạn trên. PerfectIcon – Công cụ tạo icon cực nhanh

Với PerfectIcon bạn có thể:
- Tạo ra những icon đầy phong cách cho hệ thống windows bao gồm cả windows XP
- Chỉnh sửa những hiệu ứng và style khác nhau cho icon
- Tạo hiệu ứng trong suốt không hoàn toàn với bóng đổ cho icon của windows XP
- Tạo icon từ những file ảnh như BMP, JPEG, TIFF, GIF, PNG …
- Tạo icon từ hình chụp nền
- Thay đồi icon của folder
- Thay đổi icon của các dạng file
- Tùy biến những icon chuẩn của windows
- Sửa chữa kho lưu trữ icon của windowsphần mềm tạo icon từ hỉnh ảnh.