thangcanh: 2010

Thursday, December 30, 2010

Những phần mềm miễn phí không thể bỏ qua

Dưới đây là những phần mềm miễn phí tốt nhất với các chức năng mạnh mẽ không thua kém gì phần mềm thương mại.

CCEnhancer

CCEnhancer là một công cụ để tìm kiếm và loại bỏ các tập tin "rác" trên đĩa cứng được nâng cấp từCCleaner. CCleaner Enhancer (nay CCEnhancer) bổ sung thêm 270 ứng dụng.

Paint.NET

Chỉnh sửa ảnh kỹ thuật số hoặc làm việc với các loại tập tin ảnh không có nghĩa là làm việc với một gói phần mềm chỉnh sửa lớn, phức tạp và tốn kém như Photoshop. Paint.NET có một giao diện đẹp mắt và gọn gàng. Đây được xem là phần mềm biên tập hình ảnh mạnh mẽ và hoàn toàn miễn phí”.

VLC Media Player

VLC Media Player hỗ trợ các nền tảng truyền thông đa phương tiện phổ biến hiện nay lẫn các nội dung đa phương tiện trực tuyến trên nền web, vì vậy bạn có thể sử dụng VLC media Player để nghe trực tiếp nội dung streaming.

Google Chrome 8

* Xem thêm: Trình duyệt Chrome "lên hạng" vèo vèo

Phiên bản trình duyệt web Google Chrome 8 được tích hợp nhiều tính năng mới như xem nội dung tập tin PDF, hỗ trợ Chrome Web Apps. Đặc biệt hơn, phiên bản này có tốc độ tải nhanh gấp 2-3 lần so với phiên bản trước nhằm thu hẹp khoảng cách thị phần với Microsoft Internet Explorer 9.

CCleaner

Công cụ này sẽ xoá những thông tin không mong muốn, các file, lịch sử duyệt web, các file log lớn và thậm chí cả các thiết lập lại phần mềm. Nó cũng bao gồm một trình dọn dẹp Registry, tối ưu hóa tìm kiếm và gỡ bỏ các mục, sắp xếp cơ sở dữ liệu.

CCleaner không dừng lại ở đó, phần mềm bao gồm một số công cụ bảo mật để xóa sạch các dữ liệu một cách chắc chắn để đảm bảo chúng cũng như các thông tin được loại bỏ hoàn toàn khỏi máy.

CDBurnerXP

* Xem thêm: Ghi đĩa gọn nhẹ miễn phí

CDBurnerXP 4.3.8 là công cụ ghi đĩa miễn phí cho phép bạn tạo ra các đĩa để lưu trữ dữ liệu, đặc biệt là khả năng hỗ trợ định dạng đĩa Blu-ray. Ngoài ra, bạn cũng có thể sử dụng phần mềm để tạo ra đĩa khởi động, hỗ trợ định dạng chuẩn file ISO cũng như tạo ra các định dạng đĩa CD Audio để thưởng thức những bản nhạc với chất lượng tuyệt hảo.

Office 2010 Trial Extender 1.0.0.3

Office 2010 Trial Extender 1.0.0.3 là một sự bổ sung tuyệt vời cho ứng dụng Microsoft Office 2010 để bạn có thể tăng thời gian sử dụng thử ứng dụng MS Office 2010 lên đến 180 ngày, vượt qua con số 30 ngày theo mặc định.

Ứng dụng rất dễ sử dụng, chỉ cần nhấp vào nút Rearm trên giao diện phần mềm là bạn có thể reset quá trình sử dụng lên thêm 30 ngày ngày nữa, thực hiện tối đa là 5 lần nên bạn có thể sử dụng MS Office 2010 miễn phí đến 180 ngày (thêm 30 ngày mặc định).

Lưu ý: Phương pháp Rearm là một phương pháp hoàn toàn hợp pháp do chính Microsoft đưa vào trong bộ ứng dụng Office 2010 và Windows 7, do đó bạn không cần phải lo lắng đến chính sách bản quyền.

Hotspot Shield

* Xem thêm: Các công cụ miễn phí cho mạng Wi-Fi

Hotspot Shield được sử dụng để bảo vệ kết nối Internet có dây và không dây, được thiết kế để bạn có thể kết nối an toàn, bảo mật cho các thông tin truy cập Internet ở bất cứ nơi nào, không lo đến những rủi ro khi truy cập Internet.

AVG Anti-Virus Free Edition 2011

AVG Anti-Virus Free Edition 2011 là phiên bản mới nhất của phần mềm bảo mật miễn phí được phát triển bởi AVG. Phần mềm trang bị một động cơ phát hiện virus mạnh mẽ, có khả năng theo dõi các nội dung email đến và đi, phát hiện các tập tin mà bạn đã truy cập, phát hiện và ngăn chặn các mối đe dọa trước khi chúng có thể gây ra bất kỳ các thiệt hại đến máy tính của bạn.

Phần mềm có tốc độ quét nhanh chóng, nhận diện tốt và xứng đáng là một phần mềm miễn phí xuất sắc xuất hiện trong năm 2010 này.

Quốc Vịnh (Theo PCAdvisor)

Sunday, November 21, 2010

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

Thursday, November 18, 2010

Đặ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 < và > thành >) 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)

Friday, November 5, 2010

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.

Convert < to <
Convert > to >
Convert & to &
Convert " to "
Convert ' to '

Quốc Vịnh

Monday, November 1, 2010

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.

Saturday, October 23, 2010

EasyCapture: Phần mềm chụp ảnh màn hình tiện lợi, miễn phí

Tải về

Bạn sẽ không phải sử dụng nút Print Screen trên bàn phím và dán vào các phần mềm chỉnh sửa ảnh từ đơn giản như MSPaint hay ACD FotoCanvas cho đến phức tạp như Adobe Photoshop nữa khi bạn đã có một phần mềm nhỏ gọn chuyên dụng cho công việc đó.

EasyCapture cho phép bạn chụp ảnh màn hình theo nhiều cách tiện dụng khác nhau về kích cỡ cũng như định dạng. Những tính năng đồ họa khác được cung cấp trong phần mềm để bạn thực hiện được những nhiệm vụ đơn giản hay gặp như điều chỉnh ảnh sáng và độ tương phản, chuyển sang dạng ảnh đen trắng, thêm text và đồ họa đơn giản vào hình ảnh chụp như đường kẻ, mũi tên, hình tròn chứa chữ bên trong thường dùng chức năng mô tả minh họa. Những dạng file ảnh bạn có thể lưu bao gồm: .bmp, .gif, .jpeg, .pcx, .png, và .tiff .

Những tính năng chính của EasyCapture:

1. Bắt hình:

Bạn có thể bắt hình theo nhiều dạng và kích thước khác nhau bằng cách lựa chọn khu vực hình ảnh bạn lựa chọn theo dạng hình chữ nhật cố định, cửa sổ windows đang được kích hoạt, toàn màn hình hiện tại, cửa sổ màn hình cuốn

2. Chỉnh sửa và thêm hiệu ứng cho hình chụp

- Điều chỉnh kích cỡ và màu sắc: Nếu màu sắc hoặc kích cỡ của hình chụp chưa được như ý, bạn có thể điều chỉnh dễ dàng bằng các công cụ như: crop (cắt hình), resize (điều chỉnh lại kích cỡ), brightness (thay đổi độ sáng tối), contrast (thay đổi độ tương phản), color level (thay đổi độ đậm nhạt màu sắc), color tone (thay đổi tông màu).

- Thêm các hiệu ứng chuyên nghiệp vào hình chụp: EasyCapture cho phép bạn thêm vào các hiệu ứng như: Flip, Invert, Hue/Saturation và các hiệu ứng xử lý hình ảnh như: blur, emboss, oil paint, halftone, Mosaic và 3D grid.

3. Thêm một số đối tượng vào hình chụp

Bạn có thể thêm chú thích dạng text, đánh dấu bản quyền lên hình chụp. Ngoài ra phần mềm EasyCapture còn hỗ trợ thêm vào một số đối tượng hình họa đơn giản như: đường kẻ, hình chữ nhật, elip, mũi tên, tô màu chữ trên hình ảnh chup được.

4. Dễ dàng xuất ra các định dạng ảnh khác nhau

EasyCapture hỗ trợ người dùng lưu hình ảnh ra clipboard cũng các định dạng file phong phú khác như: .bmp, .gif, .jpeg, .pcx, .png, và .tiff.

QuocVinh (Theo: internet)

Thursday, October 14, 2010

Tạo email dạng @tenmien.co.cc

Nếu bạn không đủ tiền để mua 1 tên miền xịn như .com,.net mà vẫn muốn tự tay mình lập 1 hòm thư mang tên miền riêng hay bạn thử vọc thử Google Apps như thế nào thì trong bài viết này Hùng sẽ hướng dẫn bạn cách tạo 1 hòm thư với tên miền riêng ( nhưng không mất tiền mua ). Hiện trên mạng có rất nhiều nhà cung cấp tên miền miễn phí như để tìm được nhà cung cấp miễn phí vừa hỗ trợ DNS đầy đủ thì chắc chỉ có dịch vụ CO.CC là đáp ứng nổi.

Để bắt đầu sử dụng bạn truy cập vào www.co.cc đăng ký cho mình 1 tên miền miễn phí có dạng tenmien.co.cc, có lẽ việc đăng ký quá dễ nên mình không hướng dẫn, chỉ lưu ý là khi đăng ký xong bạn phải vào cài đặt cho tên miền đó luôn nếu không sẽ bị nhà cung cấp vô hiệu hóa nó nếu không cài đặt trong vòng 24 giờ.
Khi đăng ký xong tên miền ( ở đây mình đã đăng ký tên miền http://toiyeugoogol.co.cc, các tên miền khác sẽ làm tương tự ).
Lưu ý: Google Apps sẽ không chấp nhận tên miền của bạn có chứa từ "google" nên bạn phải lưu ý khi đăng ký tên miền này.
Bước 2: Đăng ký dịch vụ Google Apps: Bạn truy cập vào www.google.com/a, bấm vào See details and sign up, trang mới hiện ra bạn lại bấm vào Compare to Standard Edition, tiếp tục bấm Get Started ở phần Standard Edition. Nếu bạn không muốn mất thời gian thì có thể truy cập trực tiếp vào www.google.com/a/cpanel/domain/new.
Tại đây ta chọn Administrator: I own or control this domain và gõ tên miền của mình vào ô Enter your domain name.

Bấm Get Stated để bắt đầu.
Bước 3: Khai báo các thông tin về cá nhân và tên miền. Bắt buộc phải điền thông tin ở ô có dấu sao đỏ.
Number of users: Số lượng tài khoản email muốn sử dụng tên miền này ( tôi chọn 2000 ), bạn có thể xin thêm nếu muốn, tiếp tục hoàn thiện các mục khác như: Firt Name, Last Name, Email address, Phone, Country/Region ( Vietnam ), Job title, và bắt buộc phải chọn I understand that if I cannot alter DNS records for my domain, I may impact my organization's ability to use Google Apps.
Còn các thông tin về tổ chức bạn có thể bỏ qua. Tiếp tục bấm Continue.
Bước 4: Tạo tài khoản.

Chọn tên đăng nhập tài khoản quản trị ( ở đây mình chọn admin ), gõ mật khẩu ( ít nhất phải có 6 ký tự ), bấm chọn 2 ô phía dưới ở các mục như Would you like to receive tips, news of new features, and other relevant information? và Can we ask you for feedback in the future?.. Kéo xuống phía cuối trang đọc kỹ các điều khoản và điều kiện sử dụng dịch vụ rồi bấm I accept. Continue with set up >>.
Lúc này Google sẽ đưa ta về trang quản lý Google Apps Dashboad

Tiếp tục bấm vào liên kết Verify domain ownership để khai báo cho Google biết ta là người chủ của tên miền đó.

Trang mới hiện ra ta chọn Change your CNAME record trong menu xổ xuống ở mục Verify your domain ownership, ngay lập tức Google Apps sẽ cung cấp cho chúng ta các thông số và hướng dẫn cách cài đặt, nhưng ta chỉ quan tâm đến mục số 2, copy đoạn mã in đậm đó

Quay trở lại trang cài đặt cho tên miền, bạn chọn mục thứ 3: URL Forwarding, chọn ô Google Apps Email Setup rồi dán đoạn mã mà Google Apps cung cấp ở bước trước vào ô CNAME record (received from Google)

Ta tiếp tục hoàn thiện các mục ở phía trên:
- Redirect To(URL): Địa chỉ trang web, blog mà bạn muốn chỏ đến.
- Page Title: Tên trang web, blog.
- Frame: Chọn 1 trong 2 tùy sở thích của bạn.
Cuối cùng bấm Set up để hoàn tất việc khai báo.
Bước 5: Kết thúc.
Bạn quay lại trang xác định chủ sở hữu tên miền ( ở bước 4 ) bấm Verify.

Công việc còn lại của chúng ta là đợi cho Google Apps hoàn tất công việc còn lại ( trong vòng 48 giờ ).

Lưu ý:
- Để vào trang quản lý dịch vụ bạn phải vào theo đường dẫn https://www.google.com/a/cpanel/tenmiencuaban ( cụ thể tôi dùng https://www.google.com/a/cpanel/toiyeugoogol.co.cc )
- Địa chỉ cho các thành viên đăng nhập vào hòm thư: http://mail.google.com/a/tenmiencuaban ( tôi dùng http://mail.google.com/a/toiyeugoogol.co.cc )

Nếu bạn khó hiểu thì có thể làm theo hình trên bài viết hoặc xin hãy phản hồi lại ngay dưới bài viết này. Demo: http://mail.vinh.co.cc
Chúc bạn thành công!

Theo :toiyeugoogle

Wednesday, October 6, 2010

Hiển thị thời gian tải trang cho blogspot

Hôm nay, tuananhg sẽ hướng dẫn các bạn tạo một widget đơn giản hiển thị thời gian tải trang web của bạn.
-Bước 1: Đăng nhập vào blogger –>Thiết kế–>Chỉnh sửa HTML ( đánh dấu check vào Mở rộng Mẫu Tiện ích ), sau đó tìm kiếm ( Ctrl + F ) với <head>. Copy đoạn code bên dưới và paste vào phía dưới thẻ <head>

<!--Star Page load timer -->
<script type='text/javascript'>
var d = new Date();
var starttime = d.getTime();
</script>
<!-- End Page load timer -->

-Bước 2: Tìm đến thẻ </body> và copy đ0ạn code bên dưới vào trước thẻ </body>

<!-- START page load timer  -->
<script type='text/javascript'>
var d2 = new Date();
var endtime = d2.getTime();
var totaltime = (endtime - starttime)/1000;
var result = Math.round(totaltime*100)/100;
document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in: &quot;+ result +&quot; seconds&quot;;
</script>
<!-- END page load timer -->

Vậy là đã gần xong, click vào Lưu Mẫu

Bậy giờ các bạn vào Phần tử trang –>Thêm tiện tích loại HTML/JavaScript và copy code bên dưới vào.

<p id="loadtime">mothuthuat.com</p>

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

Nguồn: mothuthuat.com

Monday, October 4, 2010

Tạo menu cho blogger-Tạo menu giống trang theothao.zing.vn

Có 1 bạn đã yêu cầu thủ thuật này từ lâu, đến nỗi mình quên mất cái
comment yêu cầu nằm ở đâu và tất nhiên là cả tên bạn ấy nữa. Hồi trước
mình cũng thấy bên vnblognet.com dùng cái menu này, nhưng chỉ có menu
chính, không có menu phụ. Hôm nay mình sẽ giới thiệu đầy đủ về menu này.
Tất nhiên là mình có điều chỉnh 1 chút so với bên thethao.zing.vn, ví
dụ như hộp tìm kiếm chẳng hạn.
Hình ảnh minh họa :

menu Zthethao - mothuthuat.com

Xem DEMO : menu Zthethao
* Sau đây là code của thủ thuật :

1. Vào bố cục

2. Vào phần tử trang

3. Tạo 1 widget HTML/javascript và dán code bên dưới vào:

<style type="text/css">
.hide {display:none;}
#kmenu
{
    font-size:12px;
    height: 80px;
    background: url(http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/menu-bg.gif) repeat-x;
}
#kmenu .kmenu-r
{
    height: 80px;
    background: url(http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/menu-right-bg.gif) no-repeat top right;
}
#kmenu .kmenu-l
{
    height: 80px;
    background: url(http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/menu-left-bg.gif) no-repeat top left;
}
#kmenu .homepage
{
    padding: 20px 0px 0px 8px;
    width: 78px;
    float: left;
}
#kmenu .homepage a
{
    font-weight: bold;text-decoration: none;
}
#kmenu .homepage a:hover
{
    color: #f68121;
    text-decoration: none;
}
#kmenu .mnav
{
    width: 800px;
    float: left;
    padding: 17px 0 0 20px;
}
#kmenu .mnav ul.zlstmnav
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative;
    height: 28px;
}
#kmenu .mnav .zlstmnav li
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    float: left;
}
#kmenu .mnav .zlstmnav li a
{
    float: left;
    display: block;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 0 0 0 0px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
}
#kmenu .mnav .zlstmnav li a span
{
    float: left;
    display: block;
    padding: 0 0px 0 20px;
}
#kmenu .mnav .zlstmnav li a:hover, #kmenu .mnav .zlstmnav li.selected a
{
    margin-top: 1px;
    height: 26px;
    line-height: 26px;
    background: #2e2e2e url(http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/nav-left-bg.gif) no-repeat top left;
}
#kmenu .mnav .zlstmnav li.first a:hover
{
    background: #2e2e2e url(http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/nav-left-home.gif) no-repeat top left;
}
#kmenu .mnav .zlstmnav li a:hover span, #kmenu .mnav .zlstmnav li.selected a span
{
    background: url(http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/nav-right-bg.gif) no-repeat top right;
    padding: 0 23px 0 23px;
}
#kmenu .submenu
{
    padding-left: 15px;
 padding-top: 3px;
}
#kmenu .submenu li
{
    float: left;list-style: none;
}
#kmenu .submenu li a
{
    color: #fff;
    display: block;
    padding-right: 15px;
    text-decoration:none;
}
#kmenu .submenu li a:hover
{
              color: #f68121;
 background:url(http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/icon-li.png) no-repeat left;
 padding-left:14px;
}
#sub_FormSearch {float:right;}

#sub_FormSearch {
 padding:0 0px 3px 20px;
 background:url(http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/search-bg.png) no-repeat top left;
 height:24px;
}
#sub_FormSearch .search {

 width: 200px;
 height: 25px;
        margin:0;
        padding:0;

 }
#sub_FormSearch input {

 width: 180px;
 height: 18px;
 margin: 1px 0 0 0;

 font: normal normal normal 11px/15px Verdana, Geneva, Tahoma, sans-serif;
 color: #fff;
        border:none;
 background-color: transparent;
 }
#sub_FormSearch .search-submit, #sub_FormSearch .button {
 display: none;
 }

</style>
<script src="http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/kMenu.js" type="text/javascript"></script>
<div id="kmenu">
    <div class="kmenu-r">
        <div class="kmenu-l">
            <div class="kmenu-c">
                <div class="homepage"><a href="http://fandung.com">fandung</a></div>

  <div id="mn1" class="mnav">
                    <ul class="zlstmnav">
                        <li class="selected"><a id="mn_home" href=""></a></li>
                        <li class=""><a id="mn_1" href="#"><span>Menu 1</span></a></li>
                        <li class=""><a id="mn_2" href="#"><span>Menu 2</span></a></li>
                        <li class=""><a id="mn_3" href="#"><span>Menu 3</span></a></li>
                        <li class=""><a id="mn_4" href="#"><span>Menu 4</span></a></li>
                        <li class=""><a id="mn_5" href="#"><span>Menu 5</span></a></li>
                        <li class=""><a id="mn_6" href="#"><span>Menu 6</span></a></li>
       </ul>

                    <div class="submenu">
          <div id="main"></div>
                        <div id="sub_FormSearch" class="">
  <div class="search" id="search-">
                              <form action='/search/' class='search-form' id='search-form-' method='get'>
       <input class="search-text" id="search-text-" name="q" onBlur="if (this.value == &quot;&quot;) {this.value = &quot;Search on this site...&quot;;}" onFocus="if (this.value == &quot;Search on this site...&quot;) {this.value = &quot;&quot;}" tabindex="7" type="text" value="Search on this site..." />
       <input class="search-submit button" id="search-submit-" name="submit" tabindex="8" type="submit" value="Search" />
     </form>
                        </div></div>

  <div id="sub_home" class="hide" title="0">
                               <ul>
         <li><a href="#">Blogger</a> </li>
         <li><a href="#">Wordpress</a> </li>
         <li><a href="#">Joomla</a> </li>
     </ul>
                            </div>

                        <div id="sub_1" class="hide" title="0">
                            <ul style="padding-left: 0px;">
                                <li><a href="#">Sub Menu 1.1</a></li>
                                <li><a href="#">Sub Menu 1.2</a></li>
                                <li><a href="#">Sub Menu 1.3</a></li>
                            </ul>
                        </div>

                        <div id="sub_2" class="hide" title="0">
                            <ul style="padding-left: 0px;">
                                <li><a href="#">Sub Menu 2.1</a></li>
                                <li><a href="#">Sub Menu 2.2</a></li>
                                <li><a href="#">Sub Menu 2.3</a></li>
                            </ul>
                        </div>

                        <div id="sub_3" class="hide" title="10">
                            <ul style="padding-left: 10px;">
                                <li><a href="#">Sub Menu 3.1</a></li>
                                <li><a href="#">Sub Menu 3.2</a></li>
                                <li><a href="#">Sub Menu 3.3</a></li>
                            </ul>
                        </div>

                        <div id="sub_4" class="hide" title="190">
       <ul style="padding-left: 190px;">
                                <li><a href="#">Sub Menu 4.1</a></li>
                                <li><a href="#">Sub Menu 4.2</a></li>
                                <li><a href="#">Sub Menu 4.3</a></li>
                            </ul>
                        </div>

                        <div id="sub_5" class="hide" title="260">
      <ul style="padding-left: 260px;">
                                <li><a href="#">Sub Menu 5.1</a></li>
                                <li><a href="#">Sub Menu 5.2</a></li>
                                <li><a href="#">Sub Menu 5.3</a></li>
                            </ul>
                        </div>

                        <div id="sub_6" class="hide" title="320">
                            <ul style="padding-left: 320px;">
                                <li><a href="#">Sub Menu 6.1</a></li>
                                <li><a href="#">Sub Menu 6.2</a></li>
                                <li><a href="#">Sub Menu 6.3</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    kMenu.Init('kmenu',o_ChannelRoot);
</script>

4. Save widget

- 1 vài lưu ý :

* Code CSS :

#kmenu .mnav
{
    width: 800px;
    float: left;
    padding: 17px 0 0 20px;
}

- 800px là độ rộng của vùng hiển thị sub menu, kể cả
vùng hiển thị form search. Nếu độ rộng này lớn hơn độ rộng của vùng
hiển thị của cả menu (hoặc độ rộng của blog) thì sẽ gặp 1 lỗi như bên
dưới :
menu Zthethao 2 - mothuthuat.com

-thay đổi giá trị 800px lại cho thích hợp

* Căn lề trái cho submenu:

- nếu không căn lề trái (padding:left) thì các submenu đều nằm hết ở
phía bên trái. Việc căn lền trái nhằm giúp cho submenu hiển thị ngay
dưới menu chính. Ví dụ ta xem đọan code của submenu6

<div id="sub_6" class="hide" title="320">
                            <ul style="padding-left: 320px;">
                                <li><a href="#">Sub Menu 6.1</a></li>
                                <li><a href="#">Sub Menu 6.2</a></li>
                                <li><a href="#">Sub Menu 6.3</a></li>
                            </ul>
                        </div>

- ta thấy giá trị padding-left ở đây là 320px, thoạt nhìn vô ta sẽ chỉnh ngay đọan code ở trong thẻ ul, nhưng thực chất file js lấy giá trị title=”320″
ở thẻ div để canh lề cho submenu. Vì thế các bạn muốn căn lề cho các
sub thì thay đổi giá trị title. Còn giá trị ở thẻ ul chỉ nhằm giúp ta dễ
hiểu hơn mà thôi.
Hình ảnh minh họa :

menu Zthethao 3 - mothuthuat.com

- nếu submenu ở menu chính cuối cùng nằm gần phía bên phải quá sẽ đụng phải form search, và form search sẽ bị trồi xuống dưới như hình bên dưới :
Hình ảnh minh họa :

menu Zthethao 3 - mothuthuat.com

- nếu mắc lỗi này các bạn chỉ việc giảm giá trị padding-left đi là ok.
Chúc các bạn thành công.

Nguồn: mothuthuat

Monday, September 20, 2010

Hướng Dẫn Đăng Ký Tên Miền Miễn Phí Co.Cc

1. Hướng dẫn cài đặt tên miền Co.Cc cho Blogspot

2. Hướng Dẫn Cài Đặt tên Miền Co.Cc Cho Blog 360plus

Nếu như các bạn đã từng lang thang trên mạng để tìm các tên miền miễn phí (free domain) thì chắc hẳn các bạn đã biết đến những cái tên rất lâu đời như: .tk, .uni.cc, .co.nr, v.v.. Nhưng, những tên miền miễn phí này thường có chung nhược điểm là: Không có DNS hoặc có nhưng rất hạn chế (chủ yếu chỉ để forward tới một tên miền khác) và không được quản lý các

zone record.

Nhưng gần đây, đã xuất hiện một tên miền miễn phí cho phép bạn làm tất cả điều này, đó chính là Co.cc.

Theo đánh giá của FreeVNN, Co.cc không những ngắn gọn, dễ nhớ mà nó còn có hệ thống quản lý DNS và các Zone Record tốt nhất hiện nay. Co.cc không chỉ là một tên miền miễn phí, nó còn là một tên miền đích thực và chuyên nghiệp nhất trong số những tên miền miến phí mà chẳng phải mất một xu nào cả, bạn có thể sử dụng tên miền này để trỏ tới nhiều host web và blog khác nhau, làm cho địa chỉ của bạn trở nên thật đơn

giản và dễ nhớ!

Đăng ký tài khoản:

1. Vào trang chủ Tại Đây , nhìn ở góc phải trên và chọn ngôn ngữ là Tiếng Việt.

2. Bạn nhìn vào giữa màn hình, tại ô trống hiện ra, bạn gõ vào tên miền yêu thích (ví dụ: freevnn-help), sau đó bấm Kiểm tra tính sẵn sàng, xem có ai đã đăng ký tên miền đó chưa:

Nếu tên miền ấy chưa có ai đăng ký, bạn sẽ được kết quả như sau:

3. Bấm vào nút Tiếp tục đăng ký, một trang mới mở ra:

Hãy bấm vào dòng Tạo một tài khoản ngay bây giờ

Ở trang khai báo thông tin này, bạn khai báo các thông tin cần thiết ở những fields có dấu check. Xem hình ví dụ:

Kéo xuống dưới, check vào ô trống "Tôi chấp thuận các Điều khoản Dịch vụ" và bấm nút "Tạo tài khoản ngay bây giờ":

Nếu những thông tin khai báo hợp lệ là bạn đã đăng ký xong và tự động login vào luôn. Trang đăng ký xong có dạng như sau:

Chú ý: sau khi tạo xong tài khoản, bạn cần tiến hành cài đặt cho tên miền trong vòng 48 giờ, nếu không tài khoản của bạn sẽ bị xóa. Nếu chưa rõ hay có thắc mắc gì thì bạn để Comments dưới đây nhé!

Chúc bạn thành công!

Theo internet

Wednesday, September 15, 2010

Tạo menu cho blogger - Tạo jQuery Drop Line Menu ngang cho Blogger

Trình
đơn menu horizontal với danh sách các biến UL trong một trình đơn thả
dòng ngang, tương ứng với mỗi một biến (menu cha) là một trình đơn phụ
xuất hiện phía dưới dạng liên kết ngang. Trình đơn menu Drop Line này sử
dụng jQuery tạo một slide làm nổi bật menu phụ khi nó di chuột lên đó.

Xem Demo
Cách thực hiện như sau:

Đăng nhập vào Blogger

Bạn đăng nhập vào Blogger: Bảng điều khiển (Dashboard) l Thiết kế (Design) l Chỉnh sửa HTML (Edit HTML)

Chèn mã CSS/ JavaScript

1. Tìm (Ctrl-F) đoạn mã: </head>
2. Thay thế </head> bằng đoạn mã dưới:

<style type='text/css'>
.droplinebar{
overflow: hidden;
}
.droplinebar ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
font: bold 13px Arial;
background: #242c54 url(http://www.dynamicdrive.com/cssexamples/bluedefault.gif) center center repeat-x; /*default background of menu bar*/
}
.droplinebar ul li{
display: inline;
}
.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}
.droplinebar ul li a:visited{
color: white;
}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(http://www.dynamicdrive.com/cssexamples/blueactive.gif) center center repeat-x;
}
/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
background: #303c76; /*sub menu background color */
visibility: hidden;
}
/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}
.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #242c54;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*********************
//* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last updated: June 27th, 09'
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            if (!this.istopheader)
                $subul.css({left:0, top:this._dimensions.h})
            var $innerheader=$curobj.children('a').eq(0)

$innerheader=($innerheader.children().eq(0).is('span'))?
$innerheader.children().eq(0) : $innerheader //if header contains inner
SPAN, use that
            $innerheader.append(
                '<img src="'+ droplinemenu.arrowimage.src
                +'" class="' + droplinemenu.arrowimage.classname
                + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
            )
            $curobj.hover(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    if ($targetul.queue().length<=1) //if 1 or less queued animations
                        if (this.istopheader)

$targetul.css({left: $mainmenu.offset().left, top:
$mainmenu.offset().top+this._dimensions.h})
                        if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
                            $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
                        $targetul.slideDown(droplinemenu.animateduration.over)
                },
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.slideUp(droplinemenu.animateduration.out)
                }
            ) //end hover
        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
    }) //end document.ready
}
}
//]]>
</script>
<script type='text/javascript'>
droplinemenu.arrowimage.src="http://lh6.ggpht.com/_wi2BBfk28Mg/TBY_tXeO3YI/AAAAAAAAEjI/yaja2ehQTuw/down.gif"
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</script>
</head>

3. Lưu lại mẫu Template

Chèn mã HTML

1. Bạn vào Thiết kế (Design) l Phần tử trang (Page Element) l Thêm tiện ích (Add widget) l HTML/Javascript
2. Và dán đoạn code dưới vào trong phần nội dung của HTML/Javascript

<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
<ul>
<li><a href="#">Activities 1</a></li>
<li><a href="#">Activities 2</a></li>
<li><a href="#">Activities 3</a>
      <ul>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      </ul>
    </li>
<li><a href="#">Activities 4</a></li>
</ul>
</li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a>
<ul>
<li><a href="#">Traveling 1</a></li>
<li><a href="#">Traveling 2</a></li>
<li><a href="#">Traveling 3</a></li>
<li><a href="#">Traveling 4</a>
      <ul>
      <li><a href="#">Africa 1</a></li>
      <li><a href="#">Africa 2</a></li>
      <li><a href="#">Africa 3</a></li>
      <li><a href="#">Africa 4</a>
          <ul>
          <li><a href="#">Kenya 1</a></li>
          <li><a href="#">Kenya 2</a></li>
          <li><a href="#">Kenya 3</a></li>
          <li><a href="#">Kenya 4</a></li>
          <li><a href="#">Kenya 5</a></li>
          </ul>
        </li>
      </ul>
    </li>
<li><a href="#">Traveling 5</a></li>
</ul>
</li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>

Bạn chỉnh sửa lại các link menu (#) và tiêu đề theo các cat (label) của blog là xong.

Theo: Chinhnd thực hiện theo: dynamicdrive.com

Seo cho blogger - Complete SEO Guide For Blogger Templates

This post will provide you complete information on search engine
optimization (SEO) for blogger templates. I have implemented this SEO
guide at one of my “dummy” blog, SeasonEpisode TV News.
Don’t forget to check it for study case. I believe that this post isn’t
the most complete SEO guide for blogger template. If you have any idea,
drop me a commend and then we can discuss it here.

Page Title

Standard page title for a single Blogger post is BLOG TITLE: POST TITLE. You can improve SEO by changing the title tags to POST TITLE | BLOG TITLE. Find this code in your XML template,

<title><data:blog.pageTitle/></title>

replace with this code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

You can also add some keywords to homepage title, for example

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | TV Episode Guide | TV Show Info</title>
</b:if>

Meta Keywords and Description

Some blogger expert have written tutorials about how to add meta
keywords and description. It is very easy, you need to add this code
after title tag above or before <b:skin><![CDATA[/*
For example,

<meta name="description" content="SeasonEpisode TV News - TV Episode Guide" />
<meta name="keywords" content="tv news, season episode, episode guide, tv listing" />

But, this code add same meta keywords & description to all
posts. It is not good because you will find a warning at Google
Webmaster Tools because duplicate meta keywords & description are
detected. So, it is better if you only add meta keywords &
description to the homepage. For example, you can add this code,

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="SeasonEpisode TV News - TV Episode Guide " />
<meta name="keywords" content="tv news, season episode, episode guide, tv listing" />
</b:if>

Heading

Heading Tag (H1, H2, H3, H4, H5) is also important for SEO. All of
Blogger widgets (gadgets) title use H2 tags. But, Minima Template use H3 tag for post title and many blogger templates use H2 tag for post title. To improve SEO, you need to use H1 tag for post title. For example, find this code,

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

This example shows that your template use H3 tag for post title (If
you don't find it, your template may use H2 tag for post title). Replace
H3 (or H2) at this code with H1, for example,

<b:if cond='data:post.title'>
<h1 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>
</h1>
</b:if>

And you need to change post title font size by adding this code before ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

For example, i use 1.5em font size. You can change it if you want.

Social Bookmarking

This year, community is the king! Adding social bookmarking links can
help you build your community and improve SEO. For example, i use
Sociable icons (I’ll write tutorial later). I have written similar
tutorial here.

Breadcrumb

You can use breadcrumb to provide “easy” navigation for your visitor. You can find the tutorial here.

Some blogger expert have written tutorials about how to add related
posts hack. All of them use JSON javascript code. Read the best related
posts hack here…

Auto-Readmore Link

Auto-Readmore link doesn’t have direct relationship with SEO. But,
you can use it to improve user interfaces for your visitors. Make your
visitors enjoy your blog, get more traffic, and SEO will follow

There are two type of ReadMore hacks. They are CSS Javascript hack based. You can find the tutorial here (CSS) and here (Javascript).