SocioFluid - Widget Bookmark dạng Dock cho Blog

SocioFluid

Có khá nhiều tiện ích bookmark dành cho Blog như Addthis, AddtoAny, Sharethis hay widget được tùy chỉnh ... Nếu bạn muốn có một widget Bookmark mang giao diện Dock hoàn toàn mới lạ, hãy dùng thử tiện ích của SocioFluid.

Để cài đặt tiện widget Bookmark này, bạn thực hiện các bước sau :

1. Truy cập vào SocioFluid.
2. Bạn có thể giữ nguyên widget mặc định, hoặc tùy chỉnh nó theo ý thích.
   
   Tùy chỉnh Widget
3. Nhấn Generate Widget để xem trước demo. Sau khi ưng ý, bạn chỉ việc click Add to Blogger và xác nhận việc cài đặt. Vậy là xong.
   
   Preview và Add to Blogger
   
   
   Xác nhận cài đặt

Screenshot kết quả dưới đây :

Demo

Vậy là bạn đã tạo được widget Bookmark dạng Dock cho Blog rồi đấy. Chúc vui!

Đọc thêm »

Đổi màu quét khối mặc định với CSS3

Blogger

Nếu Blog của bạn được thiết kế sử dụng một phông màu nhất định để mang phong cách riêng, vậy tại sao không thay đổi màu sắc của đoạn quét khối cho đồng bộ! Một chút ngôn ngữ CSS bên dưới đây sẽ giúp bạn đấy.

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Tìm thẻ ]]></b:skin> trong template, và thêm phía trên nó đoạn code sau :
   
   ::-webkit-selection {
       background: #FF9933;
       }
   ::-moz-selection {
       background: #FF9933;
       }
   Lưu ý : Bạn có thể dùng mã màu khác tùy vào Blog của mình.
   
3. Save lại template. Vậy là bạn đã thiết lập được hiệu ứng đổi màu quét khối.
4. Code ở bước 2 sẽ thay đổi màu của bất kì đoạn quét khối nào. Nếu chỉ muốn thay đổi 1 đoạn chỉ định, bạn hãy sử dụng mã sau :
   
   .color::-webkit-selection {
       background: #FF9933;
   }
   .color::-moz-selection {
       background: #FF9933;
   }
   kèm theo cú pháp :
   
   <div class="color">Nội dung</div>

Bạn có thể xem screenshot dưới đây để thấy kết quả :

Kết quả

Hy vọng chút thủ thuật nhỏ này sẽ khiến Blog bạn trở nên hoàn thiện hơn. Chúc vui !

Đọc thêm »

Tạo Pop-under Ads cho Blogger

Blogger

Đối với các Blogger, việc đặt các banner quảng cáo (ads) trên Blog sẽ gây phiền hà đối với người đọc. Tuy nhiên, đôi khi bạn có nhu cầu đặt ads để quảng cáo một dịch vụ nào đó, vậy hãy dùng Pop-under Ads.

Đây là một giải pháp tốt dùng để thay cho các Pop-up Ads thông thường. Không như pop-up (quảng cáo tự nhảy ra, tạo 1 cửa sổ mới), ở đây pop-under chỉ trượt kèm theo trỏ chuột, và người đọc hoàn toàn có thể tắt nó một cách dễ dàng. Nếu bạn muốn tạo Pop-under ads, hãy thực hiện các bước dưới đây.

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Tìm thẻ ]]></b:skin> trong template, và replace nó bằng đoạn code sau:
   
       #popad{
           padding:5px;
           border:1px solid #999;
           background:#eee;
           width:X px;
       }
       #popad_footage{
           width:X px;
           height:Y px;
           background:url(Link hình ads) top left no-repeat;
       }
       #popad_footage a{
           display:block;           
           width:X px;
           height:Y px;
           text-indent:-600px;
           overflow:hidden;
       }
       #popad.dynamic #popad_footage{
           width:X px;
           height:Y+Z px;
           background:url(Link hình ads có kèm nút Close) top left no-repeat;
       }
           #popad.dynamic #popad_footage a#popad_close{
           color:#ddd;
           height:Z px;
       }
       #popad.dynamic{
           position:absolute;
           top:3em;
           right:15%;       
       }
       html>body #popad.dynamic{
           position:fixed;
       }
   ]]></b:skin>
       <script src='http://boyprodx.110mb.com/BlogTools/popundermagic.js' type='text/javascript'/>
   Lưu ý : Đoạn CSS từ ]]></b:skin> trở lên trên cần phải hiệu chỉnh, mình sẽ hướng dẫn ở dưới.
   
3. Save lại template và chuyển sang tab Page Elements.
4. Tạo 1 phần tử HTML với nội dung :
   
   <div id="popad"><div id="popad_footage">
   <a href="Link liên kết"></a>
   </div></div>
5. Save lại phần tử và kiểm tra kết quả.

Hiệu chỉnh bước 2

Các giá trị :
- X : Chiều rộng ads.
- Y : Chiều cao ads.
- Z : Độ dài khoảng cách từ nút Close tới ads.

Giá trị

Để biết được chính xác các giá trị này, đơn giản nhất hãy bật chế độ xem Title trong PC.

Bật chế độ xem Title

Thiết lập vị trí xuất hiện của ads trên Blog :
- #popad.dynamic{position:absolute;top:3em;right:15%;} : Ads sẽ cách phía trên 3em và bên phải 15% chiều rộng trình duyệt.

Kết quả
Xem Screenshot bên dưới hoặc Demo tại đây (View Source để hiểu thêm về đoạn code).

Kết quả

Hy vọng thủ thuật tạo Pop-Under Ads sẽ hữu ích đối với bạn. Chúc vui !

Đọc thêm »

True Transparency v1.1 - Tạo hiệu ứng trong suốt Aero cho Windows XP

True Transparency

TrueTransparency là một ứng dụng miễn phí giúp bạn tạo tính năng Aero (trong suốt) trên Windows XP. Với các giao diện đã được tùy biến sẵn, đơn giản chỉ với một nút click chuột là bạn đã có thể mang đến một hiệu ứng hoàn toàn mới cho OS của mình.

Phần mềm TrueTransparency rất nhỏ gọn, chạy trực tiếp không cần cài đặt và chiếm ít dung lượng hệ thống. Bạn có thể thiếp lập khởi động kèm Windows rất dễ dàng. Phiên bản mới nhất 1.1 đã được cập nhật một số tính năng như sau :

• Thêm hiệu ứng AeroSnap.
• Thêm hiệu ứng AeroShake.
• Icon mới bởi babasse.
• Mục 'About'.
• Ngôn ngữ mới - Magyar.
• Trình duyệt Safari và Chrome bị loại trừ trong danh sách hỗ trợ.
• Vá lỗi cửa sổ hiện đè lên taskbar và crash khi chuyển skin.

Để thiếp lập các tính năng của TrueTransparency , bạn right-click vào icon chương trình trên thanh taskbar và hiệu chỉnh theo ý mình.

Options

Phần mềm này có nhược điểm là hiển thị không tốt ngôn ngữ Tiếng Việt, nên khi truy cập các website VN, bạn sẽ thấy thanh tiêu đề trình duyệt sẽ hiện sai các kí tự. Tuy nhiên đây chỉ là 1 lỗi nhỏ nên bạn không phải quan tâm.

Result

Đọc thêm »

Tạo hiệu ứng viền và chú thích cho ảnh

Thay vì chỉ upload ảnh thông thường không hiệu ứng khi viết Blog, tại sao bạn không trang trí thêm cho chúng để tạo vẻ sinh động! Một vài dòng lệnh CSS dưới đây sẽ khiến ảnh của bạn trở nên độc đáo.

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Tìm thẻ ]]></b:skin> và dán đoạn code này ngay trên nó :
   
   .pict{
       background-color: #F9F9F9;
       border: 1px solid #CCCCCC;
       padding: 3px;
       font: 11px Arial;
       margin-left: auto;
       margin-right: auto;
       }
   .pict img{
       border: 1px solid #CCCCCC;
       vertical-align:middle;
       margin-bottom: 3px;
       }
3. Save lại template. Vậy là bạn đã thiết lập được hiệu ứng này.
4. Để sử dụng hiệu ứng viền có kèm chú thích, bạn áp dụng cú pháp sau lên link ảnh:
   
   <div class="pict" style="width:Chiều rộng ảnh gốc + 2px;"><img src="Link ảnh"/>Chú thích</div>

Để dễ hình dung hơn, mình sẽ đưa ra một cú pháp thử kèm theo demo :

<div class="pict" style="width:252px;"><img src="http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_Summer_2009.png"/><div style="text-align: center;">Blog Tin Học</div></div>

Blog Tin Học

Vậy là xong rồi đấy, rất đơn giản đúng không. Nếu bạn có thắc mắc thêm về việc tùy chỉnh, hãy comment bên dưới. Hy vọng với tí đoạn CSS này sẽ giúp bạn làm đẹp thêm cho Blog của mình. Chúc vui!

Đọc thêm »

Youtube đổi giao diện giống máy tìm kiếm video

Youtube vừa thay đổi giao diện, tuy không phải là một trang phục hoàn toàn mới, nhưng người dùng có thể nhận thấy, việc tuỳ biến cá nhân trở nên dễ dàng hơn nhiều.

Giao diện mới

Thanh điều hướng cũ được thay bằng một ô tìm kiếm. Google cũng bỏ dòng logo “Broadcast Yourself” quen thuộc. Theo nhận định của Mashable, có vẻ như dịch vụ chia sẻ video đình đám này ngày càng giống một bộ máy tìm kiếm video thực thụ.
Tuy nhiên, hiện vẫn chỉ có một số ít người dùng sử dụng Google Chrome mới có thể tiếp cận được giao diện mới.

Giao diện cũ

Tuỳ biến trang cá nhân
Mặc dù vậy, ngoài xu hướng biến Youtube trở thành một bộ máy tìm kiếm video, lần cải tiến này cũng chứng kiến hàng loạt tiện ích mới. Một khi nâng cấp lên giao diện mới, bạn sẽ có thêm công cụ để có thể thoả sức sáng tạo khi xây dựng kênh phát video riêng bắt mắt hơn. Trang chia sẻ video cho phép bạn nâng cấp kênh riêng, thậm chí chuyển tất cả các kênh đang có sang phiên bản mới.

Thiết kế mới cho phép video hiển thị rộng hơn, cách thức tổ chức trang tốt hơn. Để có thể tối ưu khả năng hiển thị của trang, bạn hãy thực hiện một số bước sau:

Cập nhật kênh:
Việc đầu tiên bạn phải làm là cập nhật kênh. Giao diện mới thân thiện hơn. Bạn chỉ cần truy cập trang Channel Design và click vào “Upgrade my channel.”
Lưu ý là tất cả các tuỳ biến kênh trước đây sẽ mất hiệu quả. Tuy nhiên, việc này cũng không thành vấn đề nếu như bạn đang có những dự định mới cùng Youtube.
Trên giao diện mới, việc xử lý nội dung của video rất đơn giản, chỉ bằng vài cú nhấp chuột.

Tinh chỉnh kênh:

Chỉnh sửa giao diện kênh riêng

Các thông số có thể điều chỉnh như: hoạt động gần đây, cài đặt riêng tư cá nhân, hiển thị thông tin người dùng, thông tin người hâm mộ, bạn bè, các nhận xét, giao diện, module. Bạn sẽ nhận thấy mình có hàng loạt “đặc quyền” ở đây.
 
Khi chỉnh sửa giao diện, ngay cả những người dùng không thạo CSS cũng có thể dễ dàng tự thiết kế cho mình một ngôi nhà mới bắt mắt. Bạn chỉ cần chọn màu sắc, tuỳ biến giao diện, ảnh nền... Mỗi khi ưng ý, chỉ cần lưu lại và xuất bản là xong. Lưu ý là ảnh nền tối đa chỉ là 256KB.

[Nguồn : www.tuoitre.com.vn]

P/s : Dường như sau đợt thay đổi giao diện này, Google cũng bắt đầu chèn nhiều quảng cáo hơn vào video-clips trên website YouTube (lúc trước chỉ có những video xem dưới chuẩn HD mới bị). Nếu bạn không thích, hãy dùng thủ thuật Tránh quảng cáo phiền phức khi xem video trên Youtube mà mình đã giới thiệu hôm trước nhé. Thân!

Đọc thêm »

Tạo hiệu ứng bo tròn góc bằng CSS

CSS là một trong những ngôn ngữ lập trình rất được ưa chuộng vì sự đơn giản, gọn nhẹ, dễ sử dụng và tương thích với nhiều nền tảng web khác nhau. Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo hiệu ứng bo tròn góc với CSS.

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Tìm thẻ ]]></b:skin> và dán đoạn code này ngay trên nó :
   
   #round {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   width:250px;
   background:#eeeeee;
   border-color:#DEDEDE;
   }
   .round-content {
   padding: 10px;
   }
3. Save lại template. Vậy là bạn đã thiết lập được hiệu ứng này.
4. Để sử dụng hiệu ứng bo tròn, bạn dùng cú pháp sau :
   
   <div id="round" class="round-content">
   Nội dung
   </div>

Mở rộng bước 2

1/ 2 dòng code màu đỏ sẽ thiết lập mặc định bo tròn tất cả 4 góc (Xem ảnh dưới để thấy kết quả)

Nếu bạn chỉ muốn bo tròn từng góc riêng biệt, hãy thay thế nó bằng các cặp code dưới đây :

Bo tròn góc trái bên trên.

-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;

 Bo tròn góc phải bên trên.

-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;

 Bo tròn góc trái bên dưới.

-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;

Bo tròn góc phải bên dưới.

-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;

2/ Với thông số màu lục, nó sẽ thiết lập chiều rộng của khung được bo tròn. Bạn chỉ việc chỉnh lại sao cho vừa với kích thước của Blog (VD: 100px, 200px ...) hoặc để chế độ tự động canh (width:auto;).

3/ Bạn có thể tạo nhiều lần đoạn mã ở bước 2 (cần đặt thêm số thứ tự round1, round2 ... để không trùng nhau) với nội dung tùy chỉnh nếu muốn. Và khi sử dụng, hãy nhớ đổi tên id trong cú pháp nhé!

Vậy là xong rồi đấy. Hy vọng chút thủ thuật nhỏ này sẽ giúp bạn làm đẹp thêm cho Blog của mình. Thân !

Đọc thêm »