Thứ Sáu, 31 tháng 8, 2012

Tạo Sticky Tooltip sử dụng jquery (HTML5)

22:35    No comments


Trước tiên bạn chèn thư viện tooltip của jquery, trong thẻ <head>:
<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript" src="js/stickytooltip.js">
<link rel="stylesheet" type="text/css" href="css/stickytooltip.css" />

Gắn tooltip vào đối tượng:
<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">tooltip1</a></p>
<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky2">tooltip2</a></p>

Thiết lập nơi chứa nội dung cho các tooltip.
<div id="mystickytooltip" class="stickytooltip">
<div id="sticky1" class="atip" style="width:200px">tooltip1.</div>
<div id="sticky2" class="atip" style="width:200px">tooltip2.</div>
</div>

Chú ý:
  • Không sử dụng lệnh javascript để tạo nội dung cho tooltip: document.write("content");
Chỉnh sửa tham số:
Mở file stickytooltip.js bạn sẽ thấy các tham số ngay ở các dòng đầu tiên.
tooltipoffsets: [20, -30], / /Vị trí xuất hiện của tooltips so với chỏ chuột
fadeinspeed: 200, // Thời gian hiệu ứng (milliseconds)
rightclickstick: true, // Giữ tooltip không bị ẩn đi khi click phải chuột (hoặc ấn phím 's')
stickybordercolors: ["black", "darkred"], // Màu viền của tooltip theo trạng thái (giữ - không giữ)
stickynotice1: ["Press \"s\"", "or right click", "to sticky this box"],   // Tùy biến thông điệp của tooltip
stickynotice2: "Click outside this box to hide it", //Tùy biến thông điệp của tooltip

Kéo xuống dưới cùng bạn sẽ thấy:
infotooltip.init("*[data-tooltip]", "mystickytooltip");

dòng in đậm chính là id của thẻ DIV mà ta đã đề cập ở trên.
Xem chi tiết, Bạn có thể vào trang chủ Dynamic Drive Website.
tooltip1
tooltip2
tooltip1.
tooltip2.

Read More

Công thức tính oauth_signature

18:48    No comments

Công thức tính oauth_signature:
base64_encode(<METHOD><SPACE><REQUEST_URL><OAUTH_PARAMETERS>)

Ví dụ:
$signature='GET http://www.blogger.com/feeds/ oauth_consumer_key='.CLIENT_ID.'&oauth_nonce='.uniqid(rand()).'&oauth_signature_method=HMAC-SHA1&oauth_timestamp='.uniqid(rand());
echo base64_encode($signature);

Read More

Hiệu ứng phóng ảnh với cloud zoom

00:00    No comments


Ứng dụng phóng ảnh, được sử dụng trong các trang thương mại điện tử, như các mặt hàng có hình ảnh. Muốn xem chi tiết từng bộ phận. Dưới đây là 1 ví dụ điển hình:


Cloud zoom sử dụng jquery & css . Để thực hiện, bước đầu tiên các bạn chèn thư viện vào web:
<link rel="stylesheet" type="text/css" href="http://phutho.net.vn/official/cloud-zoom/cloud-zoom.css"/>
<script type="text/javascript" src="http://phutho.net.vn/official/cloud-zoom/cloud-zoom.1.0.2.min.js"></script>


Download thư viện Cloud zoom tại đây.

Để sử dụng thư viện này, bạn chỉ cần đoạn code html với thuộc tính đặc biệt, cloud zoom sẽ tự động khởi tạo ứng dụng.

Ví dụ:
Chèn đoạn mã html sau vào trong thẻ body (Chú ý: chèn thư viện jquery trước).
<a href='http://phutho.net.vn/examples/images/1.png' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img width="202" height="90" src="http://phutho.net.vn/examples/images/1.png" alt='' title="Optional title display" />
        </a>

Đặt đường dẫn hình ảnh lớn trong thuộc tính href, còn lại tạo <img là ảnh nhỏ.
Kết quả minh hoạ:



Để biết chi tiết, vui lòng truy cập Click.

Read More

Thứ Năm, 30 tháng 8, 2012

Truyền biến theo phương thức POST sử dụng jquery-ajax

06:54    No comments

Cú pháp:
$(selector).post(url,data,success(response,status,xhr),dataType);

ParameterDescription
urlRequired. Specifies the url to send the request to
dataOptional. Specifies data to send to the server along with the request
success(response,status,xhr)Optional. Specifies the function to run if the request succeeds
Additional parameters:
  • response - contains the result data from the request
  • status - contains the status of the request ("success", "notmodified", "error", "timeout", or "parsererror")
  • xhr - contains the XMLHttpRequest object
dataTypeOptional. Specifies the data type expected of the server response.
By default jQuery performs an automatic guess.
Possible types:
  • "xml" - An XML document
  • "html" - HTML as plain text
  • "text" - A plain text string
  • "script" - Runs the response as JavaScript, and returns it as plain text
  • "json" - Runs the response as JSON, and returns a JavaScript object
  • "jsonp" - Loads in a JSON block using JSONP. Will add an "?callback=?" to the URL to specify the callback


Example:
$.post('1.php',{bien1:"value1"},function(result){
     $('#container').html(result);
});

Read More

jquery selector

06:54    No comments

Lựa chọn thẻ có thuộc tính ID duy nhất:
<div id='t1'>
$('#t1');

Lựa chọn nhiều thẻ có thuộc tính class:
<div class='class1'></div>
$('.class1');

Lựa chọn nhiều đối tượng có cùng tên thẻ:
//lựa chọn các thẻ div
$('div');

Read More

Sử dụng ajax jquery

05:06    No comments

Nạp nội dung của trang vào thẻ html.
$(object).load(URL);


Read More

Tạo tabs sử dụng jquery

03:07    No comments


Chèn thư viện jquery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'></script>

 <script src='http://code.jquery.com/ui/1.8.23/jquery-ui.min.js'></script>

 <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" />

Cấu trúc dữ liệu cho tabs bằng html:
<div id="tabs">

   <ul>

    <li><a href="#tabs-1">Công dụng</a></li>

    <li><a href="#tabs-2">Chi tiết</a></li>

    <li><a href="#tabs-3">Video</a></li>

   </ul>

   <div id="tabs-1">

    A

   </div>

   <div id="tabs-2">

    B

   </div>

   <div id="tabs-3">

    C

   </div>

  </div>

Cuối cùng khởi tạo tabs, sử dụng jquery:
<script>

 $(function() {

  $( "#tabs" ).tabs();

 });

</script>
Giờ hãy xem kết quả nhé.

Read More

Thứ Hai, 27 tháng 8, 2012

Tạo nhóm (group) trong facebook

20:16    No comments

Đăng nhập tài khoản facebook của bạn.
Chọn create group ở phần tab group như hình dưới:

Hình 1

Điền thông tin cho nhóm: tên nhóm, thành viên ban đầu của nhóm & cuối cùng lựa chọn sử dụng nhóm cho mọi người (tất cả mọi ng sử dụng nhóm hay đóng cửa nhóm hay chỉ thành viên mới có quyền tham gia).

Hình 2

Sau khi điền đầy đủ thông tin nhấn nút create.
Nếu bạn muốn giới thiệu người khác tham gia vào nhóm của mình, thì chọn vào add tương ứng với các thành viên như hình 1: (3)

Rời khỏi nhóm:
Đưa chuột vào nhóm muốn rời khỏi, nhấn vào biểu tượng bút-> danh sách hiện ra, chọn leave group. Xem hình dưới:

Chọn tiếp nút leave group.

Ok. Nhóm của bạn hay nhóm bạn tham gia không xuất hiện trên facebook của bạn nữa.

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

Read More

Thiết lập profile cho tài khoản facebook của bạn

19:57    No comments

sđfgdfg

Read More

Quay video màn hình cực đỉnh với BB FlashBack pro3

19:46    No comments

Các bạn tải BBFlashBack pro3 tại đây.

Read More

Chức năng Fan Page của google+

19:41    No comments

Google đã ra chức năng fan page cho người dùng của mạng xã hội google+. Từ 10/12/2011, google đã chính thức mở tính năng này giống như facebook fan page. Việc tạo Fan page khá đơn giản, chỉ mất không quá 5 phút.

Ok, chúng ta hãy bắt đầu tạo 1 fan page.

Đầu tiên các bạn truy cập vào: https://plus.google.com/pages/create

Chọn danh mục, nếu bạn kinh doanh or bán sản phẩm thì chọn vào Sản phẩm hoặc nhãn hiệu. Điền thông tin của bạn và nhấn Tạo/create (nhớ tick vào hộp chọn tôi đồng ý).
Điền một vài thông tin khác, sau đó nhấn tiếp tục, cứ vậy cho đến nút hoàn tất.
Đây là kết quả bạn nhận được.


Google chỉ cho phép người dùng thiết lập trang fan page và không cho phép tùy biến (customize) giống như facebook. Cũng như không cho phép tùy biến địa chỉ URL...

Quản lý trang.
Trở lại trang chủ google+, chọn Trang/pages ở tab bên trái. Chú ý: nếu không nhìn thấy, trỏ vào tab thêm ở phía dưới cuối, bạn sẽ nhìn thấy biểu tượng kèm dòng chữ Trang --> chọn vào đó.


Read More

Thứ Bảy, 25 tháng 8, 2012

Chuyển hướng địa chỉ blog ra địa chỉ website khác

09:24    No comments

Bạn có thể chuyển hướng (redirect) từ địa chỉ blog của bạn sang 1 địa chỉ khác.
Để làm điều này, đăng nhập vào blogger.com --> chọn thẻ setting -> basic rồi nhấn vào mục + Add a custom domain.


Tiếp tục chọn: Switch to advanced settings

Nhập địa chỉ muốn chuyển đến  (redirect) & nhấn save.

Ok, bạn đã hoàn thành. Giờ truy cập vào: http://xomtrotructuyen.blogspot.com/
Bạn sẽ được thông báo, có muốn chuyển hướng đến địa chỉ http://www.hocquavidu.co.cc, nếu chọn có sẽ duyệt trang http://www.hocquavidu.co.cc

Kết quả thiết lập:
Để xoá thiết lập chuyển hướng của blog, nhấn nút X  ở trên hình.



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

Read More

Đăng ký tên miền miễn phí co.cc rút gọn cho web.blog của bạn

09:07    No comments

Tên miền co.cc là 1 trong những tên miền không những miễn phí mà tốt nhất hiện nay. Phục vụ cho việc rút gọn địa chỉ blog/website của bạn.
Các bạn thử dùng thử xem sao.

Bài viết này mình sẽ hướng dẫn các bạn cách tạo 1 tên miền co.cc & trỏ vào blog.
Ok, trước tiên cần chuyển sang chế độ tiếng việt, nếu bạn nào ko dành về anh ngữ.

Nhấn vào tạo 1 tài khoản ngay bây giờ, như hình trên. Tiếp đó nhập thông tin của bạn rồi nhấn continue.

Tiếp tục nhập lại mật khẩu & xác minh, nếu được yêu cầu.

Bạn sẽ được chuyển sang trang chọn tên miền với phần mở rộng .co.cc
Nhập tên miền mà bạn muốn thiết lập, chú ý nhấn nút kiểm tra tính sẵn sàng để xem tên miền bạn nhập đã tồn tại chưa.

Nếu thành công, tức chưa có ai đăng ký, bạn nhận được thông báo:
Nhấn tiếp tục đăng ký.
Ok, cơ bản đã xong. Giờ bạn được chuyển sang trang đăng nhập. Nhập email & mật khẩu vừa đăng ký để đăng nhập.

Bước tiếp theo, cài đặt domain. Lưu ý: nếu bạn không cài đặt domain trong vòng 48h, thì domain này sẽ tự động bị xoá. Sau khi đăng ký bạn phải sử dụng trong vòng 2 ngày, làm điều này để chắc chắn bạn đăng ký là phải dùng cho nhà cung cấp co.cc biết.

Nhấn vào cài đặt, tiếp tục nhấn cài đặt.

Có 3 lựa chọn được đưa ra.
Nếu dùng để forward vào địa chỉ website/blog của bạn, thì nhấn vào lựa chọn 3 (URL Forwarding)
Điền thông tin, địa chỉ web bạn muốn forward đến.

Tiếp tục nhấn cài đặt.
Nhấn tiếp Ok.

Ok, bạn đã hoàn thành. Giờ vào trình duyệt gõ: hocquavidu.co.cc để xem kết quả.

Để quản trị hoặc tạo thêm tên miền truy cập vào https://www.co.cc/log_in_out/login.php

Chúc bạn tạo cho mình 1 tên miền ưng ý !

Read More

Hướng dẫn rip theme blogger (bài1)

07:51    5 comments

Để rip được themes blogger, bạn cần có kiến thức về các thành phần của 1 trang web. Một trang web, bạn cần nắm được cấu trúc của nó, gồm những phần nào.
Ví dụ: 1 trang đầy đủ gồm có: phần header, body, content, sidebar, footer...

Đó là những thành phần cơ bản, hầu hết các trang web đều có.

 Hiểu vê template?
Template là 1 mẫu chung được thiết kế cho tất cả các trang, như duyệt các bài viết cung như xem chi tiết nội dung 1 bài viết.
Blogger có định nghĩa các section & widget, bạn cần đặt nó vào template HTML & CSS, sao cho hợp lý.

Trên internet cung cấp khá nhiều trang cho download miễn phí template, bạn không cần phải trả phí.
Danh sách các trang cung cấp miễn phí web template:


Read More

Tổng hợp các trang cho download template miễn phí

07:49    No comments

Read More

Học nhanh cách sử dụng facebook

07:08    No comments

Đường dẫn facebook của bạn.
Đường dẫn facebook có dạng:
www.facebook.com/username
username: là tên bạn thiết đặt lúc khởi tạo tài khoản.

Ví dụ: Lúc trước mình đặt tên là hoangbaby, vậy địa chỉ facebook của mình sẽ là www.facebook.com/hoangbaby

Thiết lập mặc định trang cá nhân facebook:
Bạn có thể thiết lập trang mặc định khi vào trang facebook của bạn. Nhấn vào edit page để thiết đặt trang mặc định.


Read More

Tạo ảnh cover cho timeline facebook

06:52    No comments

Ảnh cover đuợc hiển thị ở phần đầu timeline, phần góc trên bên phải ảnh profile.
Chú ý: ảnh cover giống ảnh profile nhưng đuợc phơi bầy cho tất cả mọi người (Nó đuợc chia sẻ mọi người đều xem đuợc).

Để thêm ảnh cover hiển thị trong timeline của bạn, làm các bước sau:
B1: vào trang facebook của bạn.
B2: Nhấn vào nút add a cover.

--> nhấn OK, chọn upload photo. Ảnh cover để ở kích thước 720px (chiều rộng).
Nếu bạn chưa có ý tường nào về ảnh cover, bạn tham khảo tại đây nhé, để chọn cho mình 1 ảnh phù hợp. Tuy nhiên bạn có thể tự thiết kế cho mình 1 ảnh cover ưng ý.

Kết quả đã hiện ra trước mắt bạn. :D


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

Read More

Thứ Sáu, 24 tháng 8, 2012

Verify host domain của bạn để tạo sử dụng ứng dụng của google

23:19    No comments

Truy cập vào địa chỉ: https://www.google.com/webmasters/tools/

Việc verify domain của bạn để chứng nhận domain đó là của bạn, thì mới có thể sử dụng được dịch vụ tạo ứng dụng của google.
Chằng hạn: tạo hosted app với chrome store.

Nếu bạn sử dụng host của google như blogger, thì sẽ tự động được verify.
Nếu bạn có domain riêng cần phải verify.
Trong bài viết này mình sẽ thử verify tên miền & host của summerhost.

summerhost là nhà cung cấp dịch vụ hosting miễn phí tin cậy nhất thế giới. Để sở hữu ngay 1 tài khoản hosting miễn phí, vui lòng click ở đây.

Nếu bạn chưa đăng nhập, trang web sẽ chuyển bạn đến trang đăng nhập của google, tiếp đó trả về trang quản tri trang web, xem hình dưới đây:

Hộp thoại hiện ra, yêu cầu nhập địa chỉ domain của bạn. Ở đây mình điền: http://sakurakhanh.summerhost.info  (với summerhost địa chỉ có dạng: http://username.summerhost.info)

Nhấn tiếp tục.

Có 2 cách để verify domain.
Cách 1 (được khuyến nghị): Nếu bạn có host riêng, không phải là blogger thì mình khuyến khích bạn dùng phương thức này. Để thực hiện bạn tải tệp tin mà google cung cấp (như trên hình), sau đó upload vào thư mục gốc root (với summerhost là thư mục htdocs/) của host.

Sau khi đã upload, rồi nhấn nút Xác minh. Nếu thành công bạn nhận được thông báo:

Nhấn tiếp tục.
Ok, site của bạn đã được google xác nhận.

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

Read More

Đăng ký host miễn phí với summerhost

23:02    No comments

Để đăng ký 1 hosting miễn phí với dung lượng lưu trữ 1GB (hiện tại summerhost cho phép giới hạn 1GB, sau này mình ko rõ. :( ).

Bạn truy cập vào địa chỉ http://summerhost.info/signup.php để đăng ký. Điền thông tin tài khoản và nhấn regisstry.

Một email gửi đến vào hộp thư của bạn vừa cung cấp, yêu cầu bạn kích hoạt tài khoản.

Nhấn vào link trong mail summerhost gửi cho bạn để kich hoạt tài khoản.
Một điều tuyệt vời của summerhost, bạn có thể yêu cầu summerhost tự động cài đặt 1 số mã nguồn mở vào host vừa tạo của bạn, bằng cách chọn danh sách các mã nguồn mở.

Và nhấn nút Click Me to continue.

Hoàn tất, bạn nhận được thông tin chi tiết về host: control panel, MySQL, FTP.


Summerhost sẽ gửi mail 1 lần nữa cung cấp thông tin tài khoản cho bạn để sử dụng.

Sử dụng: có thể chạy control panel trên browser với địa chỉ summerhost cung cấp hoặc sử dụng phần mềm Cute FTP 8.0 Professional, FileZila..

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

Read More
Đăng ký: Bài đăng (Atom)

 
Copyright © hoangit