MMO - kiếm tiền online và thủ thuật máy tính


Cộng đồng vui bựa status Tham gia đê

Tạo nút back to top lên đầu trang với css và jquery

14:43 |

Back to top - điểm nhấn để website của bạn trở nên chuyên nghiệp hơn.


Tạo nút back to top lên đầu trang với css và jquery
Tạo nút back to top lên đầu trang với css và jquery

Back to top là một "nút" chức năng trên trình duyệt giúp khách truy cập có thể trở về phần đầu trang một cách nhanh chóng. Xét về giao diện, Back to top sẽ được phân thành 2 loại :
- Không có hiệu ứng : ấn vào cái là tót lên đầu trang luôn. Rất nhanh nhưng không chuyên nghiệp.
- Có hiệu ứng : thanh cuộn trượt theo chiều dưới lên. Trông okie hơn nhiều ⇒ đây cũng sẽ là nội dung mà mình chia sẻ hôm nay.



Code tạo nút back to top


Với đoạn code dưới đây, bạn có thể tạo nút back to top cho wordpress, blogspot (blogger) hay bất cứ nền tảng ngôn ngữ nào khác sử dụng để lập trình web.
- Code gồm 3 phần : HTML, CSS và javascript / jquery.
- Copy - paste vào trong cặp thẻ <body></body> nhé.

Mã HTML


<div class='lentop'>
<div>
<img src='https://1.bp.blogspot.com/-k6sikOdzFXQ/VwqCKDosmEI/AAAAAAAAKxE/nLxLhkTIO6o3iE5ZWmtxo2bf4QHdzPQNQ/s1600/top.png'/>
</div>
</div>

Mã CSS


.lentop {display:none; bottom: 40%; right: 10px; cursor: pointer;  position: fixed; z-index: 1000;}
.lentop div {background:crimson; border:2px solid #fff; border-radius:45px; padding:11px 12.5px; box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.3)}
.lentop img {width:16px; height:16px;}

Mã javascript / jquery


- 100 : khoảng cách tính từ đầu trang web xuống tới khi xuất hiện nút Back to Top, đợn vị pixel.

<script src="http://code.jquery.com/jquery-latest.js"></script>
$(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 100) $(".lentop").fadeIn();
else $(".lentop").fadeOut();
});
$(".lentop").click(function () {
$("body,html").animate({scrollTop: 0}, "slow");
});
});



Từ khóa tìm kiếm :

  • tạo nút back to top cho wordpress
  • tạo nút back to top với jquery
  • back to top html
  • trở về đầu trang html
  • tạo nút lên đầu trang với css và jquery
  • tạo nút lên đầu trang cho blogspot
  • nút quay về đầu trang html

Tạo nút "Assistive Touch" cho website

20:02 |

Lấy ý tưởng từ tính năng Assistive Touch trên iPhone, mình sẽ tạo ra 1 "nút menu" chứa các chức năng cần thiết để tăng độ tương tác của khách truy cập trên website.


Tạo nút "AssistiveTouch" cho website
Tạo nút "AssistiveTouch" cho website

Tùy vào mục đích tương tác mà quản trị viên sẽ đưa ra các chức năng phù hợp. Với 123itvn.com tại thời điểm này, mình chỉ đang sử dụng 3 chức năng sau.
- Back to top.
- Tìm kiếm nhanh ⇒ tăng view.
- Liên hệ với fanpage facebook ⇒ tăng like.



Ở bài viết này, mình chỉ chia sẻ đoạn code để tạo được nút "Assistive Touch". Còn đi sâu hơn vào phần thiết kế chức năng, cái này xin nhường lại cho anh em thỏa sức sáng tạo :))
Code sẽ bao gồm 3 phần HTML, CSS và Javascript (Jquery) - phiên bản 1.0 (10/01/2018).

Bước 1 : Tìm đến trước thẻ đóng </body>
Bước 2 : Copy - paste đoạn mã sau vào. Lưu lại.

Mã HTML


<div class='touch'>
<div class='menu-chinh'>
<img height='25px' width='25px' src='https://4.bp.blogspot.com/-BYUF7UMKLHY/WlWUudG4hsI/AAAAAAAANv4/zbyqGpPizqsi8yS6NuAgMwjpqunUunF1wCLcBGAs/s1600/ghim-giay-512-512.png' />
</div>
<div class='menu-1'>
<img height='16px' width='16px' src='https://1.bp.blogspot.com/-k6sikOdzFXQ/VwqCKDosmEI/AAAAAAAAKxE/nLxLhkTIO6o3iE5ZWmtxo2bf4QHdzPQNQ/s1600/top.png' />
</div>
<div class='menu-2'>
<img height='20px' width='20px' src='https://1.bp.blogspot.com/-3dlIirg_lPw/WlWMsI-zhpI/AAAAAAAANuk/6FbCxrWtzq0T2NqC9Mg-qx-svJ9scnc5ACLcBGAs/s1600/tim-kiem-trang-512-512.png' />
</div>
<div class='menu-3'>
<img width='25px' height='26px' src='https://1.bp.blogspot.com/-E9_cEAdmlrM/WlWJl5UNdNI/AAAAAAAANuY/q1N4zwDkgWU3pU2pbv3KYkMEipFYYzibwCLcBGAs/s1600/fb-mess-trang.png' />
</div>
</div>

Mã CSS 


.touch {width:135px; height:135px; position:fixed; bottom:50px; right:10px;}
.touch div {width:min-content; border:2px solid #fff; border-radius:45px; box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.3); position: absolute; cursor: pointer; z-index: 1000;}
.menu-chinh { background:crimson;  padding:8px 8px 5px;   left:90px; top:90px; }
.menu-1 {display:none; background:#06ace6; padding:10.5px 12.5px; left:90px; top:0px;}
.menu-2 {display:none; background:#525457; padding:10px 10.5px 7px; left:35px; top:35px;}
.menu-3 {display:none; background:darkorchid; padding: 7.5px 8px 3.5px; left:0px; top:90px;}

Mã javascript / jquery


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
 $(".menu-chinh").click(function() {
 //Khi click vào Assistive touch, nếu các menu con đang ẩn thì hiện lên
 if($(".menu-1").css('display')=='none') $(".menu-1,.menu-2,.menu-3").show(200,'swing');
 // đang hiện thì ẩn đi
 else $(".menu-1,.menu-2,.menu-3").fadeOut('fast');
 });
 //click vào 1 trong các menu con thì tất cả cùng ẩn đi
 // thiết kế chức năng do quản trị viên code, có thể tham khảo trên 123itvn.com
  $(".menu-1,.menu-2,.menu-3").click(function() {
 $(".menu-1,.menu-2,.menu-3").fadeOut('fast');
 });
 // code cho nút lên đầu trang - backtotop
$(".menu-1").click(function () {
$("body,html").animate({scrollTop: 0}, "slow");
});
</script>

Lời kết


Trong thời gian tới, mình sẽ cập nhật thêm các phiên bản mới với code tối ưu hơn, chức năng tương tác tốt hơn, hi vọng chúng sẽ có ích cho website của anh em, nhớ đón đọc nhé.


Từ khóa tìm kiếm :

  • tạo nút chức năng nhanh cho website
  • menu nhanh trên website
  • tạo nút assistive touch cho website
  • menu truy xuất nhanh website

Tạo ảnh gif bằng giphy online

13:01 |

Với giphy, bạn hoàn toàn có thể tạo và quản lý kho ảnh gif của mình một cách cực kỳ hiệu quả.


Tạo ảnh gif bằng giphy online
Tạo ảnh gif bằng giphy online

Trong những công cụ để tạo / làm ảnh gif online hiện nay thì giphy là 1 website để lại cho mình khá nhiều ấn tượng. Ở khía cạnh nào đó, chúng ta có thể coi nó như mạng xã hội dành cho ảnh động vậy. Kho ảnh gif trên giphy vô cùng lớn và không ngừng tăng lên nhờ sự đóng góp tích cực từ phía người dùng.

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




Trên menu, nhấn vào ô Log in. Bạn có thể đăng ký giphy bằng 2 cách :
- Sử dụng tài khoản facebook (nhanh nhất).
- Đăng ký bằng gmail.
Tùy anh em lựa chọn, việc đăng ký diễn ra khá nhanh và đơn giản.

Tạo ảnh gif bằng giphy online
Đăng ký tài khoản giphy

Sau khi đăng ký thành công, mỗi người dùng sẽ nhận được 1 đường link (ví dụ). Đây là nơi để bạn vừa quản lý vừa chia sẻ kho ảnh động của mình cho người khác.

Tạo ảnh gif bằng giphy


Trên menu, chọn Create.
Giao diện GIF MAKER xuất hiện. Tại đây, hệ thống sẽ đưa ra nhiều cách khác nhau để người dùng có thể lựa chọn và tạo nên 1 tấm ảnh gif nhanh chóng.

Tạo ảnh gif bằng giphy online
Cách cách để tạo ảnh gif tại giphy

Tạo ảnh gif từ nhiều hình ảnh khác nhau (slideshow)


Bước 1
- Click ô Choose Photo Or Gif và chọn các hình ảnh bạn muốn đưa vào trong ảnh gif.
- Thiết lập thông số
Image Duration : thời gian xuất hiện dành cho mỗi tấm ảnh (áp dụng như nhau), tính bằng giây (s). Bạn có thể chỉnh thông số này ở mục Seconds.
⇒ Nếu tổng thời gian xuất hiện lớn hơn 15s, hệ thống sẽ đưa ra cảnh báo được mình khoanh trắng như hình dưới. Bạn buộc lòng phải xóa đi vài tấm ảnh hoặc chỉnh thời gian ít hơn thì mới có thể tiếp tục thao tác.
Nhấn Continue to Decorate để chuyển sang bước tiếp theo.

Tạo ảnh gif bằng giphy online
Thiết lập thông số cho ảnh gif (slideshow)

Bước 2 : Chỉnh sửa ảnh gif
Bạn có thể chèn tiêu đề (Caption), Sticker, chỉnh sửa màu sắc (Filters - giống instagram) hoặc thêm hình vẽ (Draw) vào ảnh gif, tha hồ mà sáng cmn tạo =)) Tuy nhiên, không nên lạm dụng hiệu ứng quá nhiều bởi dung lượng ảnh sẽ tăng thêm đáng kể đấy.
Ổn rồi thì nhấn Continue to Upload.

Tạo ảnh gif bằng giphy online
Thêm hiệu ứng cho ảnh gif

Bước 3 : Bổ sung thông tin cho ảnh gif

Việc này không cần thiết cho lắm, anh em có thể bỏ qua nếu muốn.
- Source URL : đường link file ảnh gốc - thứ mà bạn tham khảo để tạo nên tấm ảnh gif này.
- Add tags : dùng tag (thẻ) để phân loại nội dung kiểu chó mèo, cây cối, ... các các thứ.
- Public : ON (công khai) hoặc OFF (chỉ có bạn mới xem được).

Cuối cùng là up ảnh lên Giphy. Đợi hệ thống xử lý một chút, sau khi việc tạo ảnh gif hoàn tất, bạn có thể tải ảnh về hoặc chia sẻ link cho người khác nhé.

Tạo ảnh gif bằng giphy online
Upload to GIPHY

Tạo ảnh gif từ video


Bước 1 : Thiết lập đầu vào
- Cách 1 : Click Choose Video để chọn video từ chính thiết bị của bạn (máy tính, điện thoại ...).
- Cách 2 : Copy link video từ Youtube, Vimeo hoặc của chính Giphy và paste vào khung URL.

Bước 2 : Cắt video
- Start time : thời gian ảnh gif bắt đầu xuất hiện (A).
- Duration : thời gian ảnh gif chạy đến khi kết thúc (B).

Nếu coi độ dài của clip là C thì lúc nào A + B =< C. Cụ thể hơn trong hình : A = 2, B = 5 còn C của mình thì = 7.

Tạo ảnh gif bằng giphy online
Cắt video (ảnh gif) trên giphy

Đến đoạn này thì thao tác lại giống hệt bước 2 + bước 3 của cách trên rồi, mình sẽ để đây và không nói gì nữa nữa :)) Mời anh em xem qua bản demo mà ad đã dày công chế tạo, chúc cả nhà 1 ngày cuối tuần vui vẻ. 👿




Từ khóa tìm kiếm :

  • tạo ảnh gif nhanh chóng bằng giphy
  • giphy upload
  • làm ảnh gif online
  • tạo ảnh gif từ video
  • cách tạo ảnh gif bằng giphy.com
  • huong dan tao anh gif tren giphy

Tạo subdomain cho tên miền đăng ký trên namecheap

16:22 |

Với subdomain, website không những chuyên nghiệp hơn mà bạn cũng tiết kiệm được một khoản chi phí khi mua tên miền ở namecheap.com


Tạo subdomain cho tên miền đăng ký trên namecheap
Tạo subdomain cho tên miền đăng ký trên namecheap


Subdomain - tên miền phụ, tên miền con ...


Hiện nay, việc sử dụng subdomain đã trở nên phổ biến và bất cứ quản trị viên nào cũng có thể tự tạo cho mình những subdomain phù hợp với nội dung website. Với hầu hết các nhà cung cấp dịch vụ tên miền, việc tạo subdomain là hoàn toàn miễn phí, mình chọn namecheap, của anh em thì sao ?

Ví dụ
Website dân trí : http://dantri.com.vn/
Chuyên mục du lịch : http://dulich.dantri.com.vn/


Cách tạo subdomain trên namecheap.com


- Đăng nhập thành công vào hệ thống namecheap.
- Tại menu trái, chọn Domain List (danh sách các tên miền).
- Nhấp vào nút Manage ở tên miền cần tạo subdomain.

Tạo subdomain cho tên miền đăng ký trên namecheap
Danh sách tên miền trên namecheap

Chọn tiếp tab Advanced DNS.

Tạo subdomain cho tên miền đăng ký trên namecheap
Tab Advanced DNS

Anh em chú ý mục Host Records nhé, đây là công cụ tuyệt vời để chuyển hướng webiste của bạn tới những địa chỉ mong muốn. Để thêm mới 1 bản ghi, chọn Add new record.

Tạo subdomain cho tên miền đăng ký trên namecheap
Chọn Add new record để thêm mới 1 dòng

Mỗi bản ghi sẽ có 4 thuộc tính, trong đó :
- Type : xác định thể loại (quan trọng nhất).
- Host - Value : 2 thuộc tính này thay đổi tùy thuộc vào giá trị của Type.
- TTL (Time To Live) : thời gian để hệ thống cập nhật cấu hình mới cho tên miền, tính bằng phút. Mặc định để 30 phút đi, cái này không cần quan tâm lắm.

Tạo subdomain cho tên miền đăng ký trên namecheap
4 thuộc tính (thông số) của mỗi dòng DNS

Okie, giờ là lúc đi vào nội dung chính của bài viết. Mình sẽ đưa ra các mục đích khi tạo subdomain, các thuộc tính của bản ghi và hướng dẫn cụ thể. Thời gian để thay đổi có hiệu lực với hệ thống là trong vòng 60 phút, anh em bình tĩnh :))

1. Tạo subdomain để trỏ tới 1 địa chỉ IP


Khi truy cập subdomain kiểu này, hệ thống sẽ chuyển hướng bạn tới IP của 1 website nào đó được thiết lập sẵn trong phần DNS.


TypeHostValue
(IP Address)
Cấu hìnhA Recordtest1125.212.247.216
Kết quả test1.vuistt.com ⇒ 125.212.247.216 (tinhte.vn)

2. Tạo subdomain để chuyển hướng tới URL


Tương tự như trên, nhưng thay vì sử dụng địa chi IP thì quản trị viên đặt luôn URL đích khi chuyển hướng.


TypeHostValue
(Destination URL)
Cấu hìnhURL Redirect Recordtest2http://www.123itvn.com/
Kết quảtest2.vuistt.com ⇒ http://www.123itvn.com/

3. Tạo subdomain để trỏ tới tên của 1 máy chủ


Subdomain loại này nhìn qua thì có vẻ phức tạp. Dù bạn sử dụng host free của Google hay host mất phí của 1 nhà cung cấp nào đó thì chỉ cần nắm rõ các thông số host là việc cấu hình DNS đơn giản hơn rất nhiều rồi. Nếu có dịp, mình sẽ phân tích sâu hơn về đoạn này còn bây giờ, mời anh em xem qua bài viết tạo và trỏ subdomain cho blogspot để có cái nhìn tổng quan hơn nhé.


TypeHostValue
(Target)
Cấu hìnhCNAME Recordncpwww.ghs.google.com
CNAME Recordd6j45....gv-69.dv.googlehosted.com
Kết quảCấu hình thành công subdomain http://ncp.123itvn.com/


Từ khóa tìm kiếm :

  • hướng dẫn trỏ domain namecheap về hosting
  • tạo subdomain cho tên miền trên namecheap
  • create subdomain on namecheap.com
  • cấu hình subdomain cho tên miền đăng ký ở namecheap

Tạo và trỏ subdomain cho blogspot

15:54 |

Chỉ với vài thao tác đơn giản, subdomain sẽ khiến trang blogspot của bạn đơn giản và chuyên nghiệp hơn nhiều.


Tạo và trỏ subdomain cho blogspot
Tạo và trỏ subdomain cho blogspot

Mục tiêu đề ra


- Tên miền chính (domain) : www.123itvn.com, đã được đăng ký tại namecheap.
- Tạo thêm tên miền phụ (subdomain) : ncp.123itvn.com từ URL ban đầu : ncp1207.blogspot.com.
Cả 2 website trên đều được xây dựng từ blogspot (blogger) và chúng là độc lập.

Tạo và trỏ subdomain cho blogspot
Sơ đồ cho anh em xem :))

Bước 1 : Tạo subdomain cho blogspot


- Đăng nhập blogger. Bên menu trái, chọn Cài đặtCơ bản.
- Nhấp vào "Thiết lập URL của bên thứ 3 cho blog của bạn".

Tạo và trỏ subdomain cho blogspot
Bắt đầu thiết lập subdomain cho blogspot

- Nhập URL của subdomain, nhớ là không click vào ô chuyển hướng bên dưới nhé. Sau đó Lưu lại.

Tạo và trỏ subdomain cho blogspot
Nhập URL của subdomain

- Lúc này địa chỉ blog sẽ được hiển thị như hình dưới. Nhấn Chỉnh sửa rồi tắt đi khoảng 2 đến 3 lần để blogger xuất hiện bảng thông số chi tiết.

Tạo và trỏ subdomain cho blogspot
Địa chỉ blogspot và subdomain

Lưu ý 2 dòng khoanh đỏ, vì chúng sẽ được sử dụng ở bước 2.

Tạo và trỏ subdomain cho blogspot
Bảng thông số chi tiết để cấu hình DNS trên namecheap


Bước 2 : Trỏ subdomain về host của blogspot tại namecheap.com


Thực ra việc trỏ subdomain hoặc gán tên miền riêng đăng ký ở namecheap cho blogspot cũng chính là 1, khác nhau duy nhất có lẽ là các URL.

gioitreonline69.blogspot.com ⇒ www.123itvn.com
ncp1207.blogspot.com ⇒ ncp.123itvn.com

Thao tác


- Đăng nhập namecheap.com, vào phần quản lý tên miền Domain list (bên menu trái).
- Chọn tiếp tab Advanced DNSAdd new record để tạo 1 dòng cấu hình DNS mới.
- Điền thông số của 2 dòng lần lượt như hình dưới, cuối cùng Save lại.
- Đợi khoảng 30' để namecheap cập nhật cấu hình mới và bạn có thể truy cập subdomain.
Chi tiết hơn, mời anh em xem qua bài viết tạo subdomain cho tên miền trên namecheap.com.

Tạo và trỏ subdomain cho blogspot
Thông số các dòng DNS



Một số lưu ý


Subdomain của mình có URL : ncp.123itvn.com, tuy nhiên khi thêm www vào trước thì không được. Để khắc phục điều này, quay trở lại namecheap ...


Từ khóa tìm kiếm :

  • tạo và trỏ subdomain cho blogspot
  • trỏ subdomain về host blogspot
  • hướng dẫn tạo dubdomain cho blogspot
  • cách trỏ subdomain namecheaep về blogspot

Sao lưu - phục hồi bookmark trên trình duyệt Cốc Cốc, Chrome và Firefox

20:37 |

Với nhiều người, bookmark (thanh dấu trang) đã trở thành một phần quan trọng của trình duyệt. Bạn sẽ làm gì khi bookmark bỗng dưng bị lỗi trong khi không thể nhớ hết được tất cả những website yêu thích ?


Sao lưu - phục hồi bookmark trên trình duyệt
Sao lưu - phục hồi bookmark trên trình duyệt

Lợi ích khi sao lưu bookmark


- Dễ dàng khôi phục khi cần thiết, cái này thì chuẩn cơm mẹ nấu không cần bàn cãi.
- Bạn có thể mang bookmark của mình tới bất cứ nơi đâu, bất cứ máy tính nào, miễn là cùng trình duyệt. Cách này khá hay và đang được mình áp dụng cho cả máy tính ở nhà - cơ quan.

Tất cả các trình duyệt, mình đều để ngôn ngữ là tiếng Việt. Nếu của bạn là tiếng Anh hoặc khác, tự mò nhé vì các bước như nhau thôi :))

Tải về phiên bản trình duyệt mới nhất




Sao lưu và phục hồi bookmark trên trình duyệt Cốc Cốc


Bước 1 : Click vào logo Cốc Cốc ⇒ Dấu trang ⇒ Trình quản lý dấu trang.

Sao lưu - phục hồi bookmark trên trình duyệt
Sao lưu - phục hồi bookmark trên trình duyệt Cốc Cốc

Bước 2

- Để sao lưu, chọn Xuất dấu trang sang tệp HTML rồi Save lại. Okie, giờ thì bạn đã có thể mang tệp tin html này sang bất kỳ máy tính nào nhé.
- Để khôi phục, chọn Xuất dấu trang từ tệp HTML, sau đó chọn file html có sẵn là xong.

Sao lưu - phục hồi bookmark trên trình duyệt
Sao lưu - khôi phục bookmark Cốc Cốc

Sao lưu và phục hồi bookmark trên trình duyệt Google Chrome


Mọi thao tác tiến hành tương tự như như trên Cốc Cốc.
Khác biệt duy nhất : mục tùy chỉnh của Cốc Cốc nằm bên tay trái còn Chrome thì tay phải.

Sao lưu - phục hồi bookmark trên trình duyệt
Sao lưu - phục hồi bookmark trên trình duyệt Google Chrome

Sao lưu và phục hồi bookmark trên trình duyệt Firefox


- Nhấn tổ hợp phím Ctrl + Shift + B để mở thư viện bookmark.
- Bên menu trái, chọn Toàn bộ các Trang đánh dấu ⇒ tiếp đến click vào Nhập và Sao lưu.
Về cơ bản thì việc sao lưu hay khôi phục bookmark trên firefox cũng không khác lắm so với 2 trình duyệt trên, định dạng file sao sưu sẽ là JSON thay vì HTML.
Mấy lựa chọn bên dưới (nhập trang đánh dấu, xuất trang đánh dấu, nhập dữ liệu từ trình duyệt khác) mình đã test thử nhưng chưa hài lòng lắm. Dùng 2 tính năng sao lưu - khôi phục cơ bản là được rồi :)

Sao lưu - phục hồi bookmark trên trình duyệt
Sao lưu - phục hồi bookmark trên trình duyệt Firefox


Từ khóa tìm kiếm :

  • cách lưu bookmark cốc cốc 
  • bookmark chrome lưu ở đâu
  • phục hồi bookmark chrome
  • sao lưu bookmark firefox
  • khôi phục bookmark trên cốc cốc

Thanh dấu trang và cách sử dụng bookmark trên trình duyệt

23:09 |

Dấu trang hay thanh dấu trang (bookmark) là một công cụ có sẵn trên nhiều trình duyệt giúp bạn có thể lưu và truy cập những website yêu thích một cách nhanh chóng.


Thanh dấu trang và cách sử dụng bookmark trên trình duyệt
Thanh dấu trang và cách sử dụng bookmark trên trình duyệt

Hiển thị thanh dấu trang


Với trình duyệt Google Chrome, Cốc Cốc : tại menu cài đặt, Chọn Dấu trang ⇒ Hiển thị thanh dấu trang.

Thanh dấu trang và cách sử dụng bookmark trên trình duyệt
Hiển thị bookmark trên trình duyệt Cốc Cốc

Với trình duyệt Firefox : trên thanh công cụ, chọn View ⇒ Toolbars ⇒ Bookmarks Toolbar.

Thanh dấu trang và cách sử dụng bookmark trên trình duyệt
Hiển thị bookmark trên trình duyệt Firefox

Với trình duyệt Microsoft Edge
- Trên menu, chọn Hub / Settings.

Thanh dấu trang và cách sử dụng bookmark trên trình duyệt
Hiển thị bookmark trên trình duyệt Microsoft Edge

- Kích hoạt tính năng Favorites bar.

Thanh dấu trang và cách sử dụng bookmark trên trình duyệt
Hiển thị bookmark trên trình duyệt Microsoft Edge

Lưu ý : Nếu muốn ẩn thanh dấu trang, hãy bỏ dấu tích hoặc làm ngược lại nhé.

Đánh dấu trang (lưu trang) trên trình duyệt


Nếu bạn để ý thì mỗi trình duyệt đều có 1 icon sao 5 cánh ở ô nhập URL. Đó chính là "công cụ" để đánh dấu 1 website vào thanh dấu trang. Click vào icon đó và làm theo hướng dẫn là okie. Đơn giản đúng không ? :D

Ngoài ra, bạn cũng có thể tạo thư mục và gom các website cùng chủ đề vào đó để dễ quản lý. Hầu hết các trình duyệt hiện này đều hỗ trợ thao tác đơn giản này.

Thanh dấu trang và cách sử dụng bookmark trên trình duyệt
Cách đánh dấu trang trên trình duyệt

Để truy cập website, bạn chỉ việc click vào từng mục nhỏ được hiển thị sẵn trên thanh dấu trang.

Thanh dấu trang và cách sử dụng bookmark trên trình duyệt
Thanh dấu trang mà mình sử dụng trên Cốc Cốc


Từ khóa tìm kiếm :

  • dấu trang google chrome
  • thanh dấu trang trên cốc cốc
  • cách lưu địa chỉ trang web trên google chrome
  • cách lưu trang web trên thanh công cụ
  • thanh dấu trang trên firefox
  • sử dụng thanh dấu trang trên web

Gia hạn tên miền trên namecheap.com

14:50 |

Hướng dẫn cách gia hạn thành công tên miền tại namecheap.com


Gia hạn tên miền trên namecheap.com
Gia hạn tên miền trên namecheap.com

Gia hạn tên miền trên namecheap.com


Bước 1
- Đăng nhập vào namecheap. Danh sách tên miền, hosting do bạn sở hữu sẽ được hiển thị ở ngay tab Dashboard.
- Nhấn Manage để gia hạn cho tên miền mà bạn muốn (trong trường hợp tên miền sắp hến hạn, nút Manage sẽ đổi tên thành Renew).

Gia hạn tên miền trên namecheap.com
Lựa chọn tên miền để gia hạn

Bước 2 : Để tiến hành gia hạn cho tên miền, chọn tiếp nút Add years (hoặc Renew). Bạn sẽ được hệ thống chuyển tới trang mua hàng trên namecheap.

Gia hạn tên miền trên namecheap.com
Thêm chú thích

Bước 3
- Promo Code (namecheap coupon) không có hiệu lực khi gia hạn tên miền trên namecheap, nhưng với các dịch vụ WhoisGuard hay Premium DNS thì lại okie. Đó là lý do vì sao nhiều bạn nhập mã giảm giá rồi nhưng không được hệ thống trừ tiền :D
- Nhấn Comfirm Order để tiến hành thanh toán.

Gia hạn tên miền trên namecheap.com
Tiến hành thanh toán khi gia hạn tên miền trên namecheap

Bước 4 : Tại trang thanh toán

Kiểm tra lại thông tin "đơn hàng" 1 lần nữa. Nếu ổn, click Check out with Paypal (mình đặt phương thức thanh toán mặc định là paypal, nếu bạn muốn sử dụng phương thức khác hãy chọn Select other payment options nhé).

Gia hạn tên miền trên namecheap.com
Tổng tiền thanh toán 

Tiếp đến, hãy làm theo 1 vài hướng dẫn nho nhỏ của hệ thống. Cuối cùng là đợi cho đến khi có thông báo giao dịch hoàn tất (gia hạn tên miền thành công). Lúc này bạn có thể truy cập trang Dashboard kiểm tra hạn mới của tên miền nhé. Good luck !

Gia hạn tên miền trên namecheap.com
Giao dịch khi thanh toán bằng paypal


Từ khóa tìm kiếm :

  • gia hạn tên miền trên namecheap
  • gia hạn domain namecheap.com
  • cách gia hạn tên miền trên namecheap.com
  • gia hạn tên miền namecheap thành công

Hướng dẫn đăng ký tài khoản trên namecheap

22:42 |

Bạn muốn mua tên miền và hosting trên namecheap.com ? Vậy thì đăng ký tài khoản là việc trước tiên sẽ cần phải làm.


Hướng dẫn đăng ký tài khoản trên namecheap
Hướng dẫn đăng ký tài khoản trên namecheap

Sơ lược về namecheap.com


Namecheap là một trong những nhà cung cấp dịch vụ tên miền (domain), hosting và SSL tốt nhất trên thế giới hiện nay. Với nhiều anh em quản trị viên thì có lẽ cái tên namecheap cũng không còn xa lạ.

123itvn.com được mình đăng ký trên namecheap tới nay cũng khá lâu rồi và hiện tại thì vẫn chưa có gì để phàn nàn cả 😎 Đều đặn hàng tháng, namecheap luôn tung ra những mã giảm giá mới (coupon code) cực kỳ hấp dẫn - tiết kiệm được một khoản kha khá đấy :D



Đăng ký tài khoản trên namecheap.com


- Truy cập trang chủ namecheap. Trên menu, chọn Sign up.
- Điền lần lượt các thông tin cho tài khoản. Nhấn Create account and Continue khi hoàn tất.

Hướng dẫn đăng ký tài khoản trên namecheap
Đăng ký tài khoản trên namecheap.com

Lưu ý : giao diện phần đăng ký có thể thay đổi theo cập nhật của namecheap, anh em vẫn làm tương tự nhé.

Cài đặt thông tin thanh toán


Công việc đơn giản nhưng cần phải làm đầu tiền bởi nó sẽ giúp chúng ta tránh được khá nhiều thao tác không đang có khi đăng ký tên miền trên namecheap.

Bước 1
- Đăng nhập thành công vào namecheap.
- Trên menu phải, chọn Account / Profile để vào trang cá nhân.

Bước 2
- Thông tin thanh toán sẽ được hiển thị chi tiết ở tab Billing.
- Nhìn sang mục Payment, click vào nút Edit và bắt đầu cài đặt thông tin thanh toán.

Hướng dẫn đăng ký tài khoản trên namecheap
Cài đặt thông tin thanh toán trên namecheap.com

Bước 3 : Tại đây, namecheap sẽ đưa cho bạn 3 phương thức thanh toán
- Card Payment (mặc định) : thanh toán bằng thẻ VISA, MasterCard hay American Express. Sau khi mua hàng, tiền sẽ được trừ trực tiếp vào thẻ VISA.
- Paypal : thanh toán thông qua tài khoản paypal. Đây là phương thức mà mình hiện đang sử dụng, khá nhanh chóng :D Đăng ký paypal nếu bạn chưa có tài khoản nhé.
- Account Balance : thanh toán bằng những đơn vị tiền tệ mà namecheap chấp nhận, cái này được ít người sử dụng nhất.

Sau khi lựa chọn phương thức thanh toán, nhấn Save Changes để lưu lại.

Hướng dẫn đăng ký tài khoản trên namecheap
Lựa chọn phương thức thanh toán trên namecheap.com


Từ khóa tìm kiếm :

  • đăng ký tài khoản trên namecheap.com
  • đnăg ký tài khoản namecheap
  • cài đặt thanh toán trên namecheap
  • namecheap thanh toán bằng visa
  • namecheap thanh toán bằng paypal

Share và sử dụng code sticky sidebar cho website

21:06 |

Với mỗi website, sticky sidebar luôn là một công cụ cần thiết để quảng bá những nội dung quan trọng. Bạn chưa có code sticky sidebar ? Bài viết này sẽ giúp bạn !


Share code và sử dụng sticky sidebar cho website
Thêm chú thích

Giới thiệu về tính năng sticky sidebar


Hiện nay cùng một "đối tượng dính " nhưng có khá nhiều thuật ngữ được sử dụng để gọi tên như sticky banner, sticky widget hay sticky sidebar ... Để tránh mâu thuẫn trong quá trình thao tác, mình sẽ gọi chung tất cả là sticky sidebar anh em nhé :)

Khi bạn kéo thanh cuộn của trình duyệt lên trên hoặc xuống dưới, sticky sidebar sẽ được cố định ở bên phải/trái màn hình theo những thông số của jquery (code sticky sidebar).

Mô hình sticky sidebar



Sticky sidebar nên được đặt ở vị trí cuối cùng trong các cột như hình dưới thì code mới hoạt động tốt và ổn đinh.
Một sidebar có thể chứa bên trong nhiều thành phần con như quảng cáo, video, bài viết mới nhất, ... nhưng chúng ta chỉ nên sử dụng tối đa 2 thành phần là ổn, vừa mang tính thẩm mỹ vừa dễ dàng trong việc quản lý code.

Vị trí sidebar trong website

Lưu ý chung


- Cùng một đoạn code nhưng không phải cứ paste vào là chạy bởi mỗi website được xây dựng trên một nền tảng và ngôn ngữ lập trình khác nhau. Do đó, hãy đảm bảo là bạn nắm vững về code để chỉnh sửa khi cần thiết.
- Mình sẽ tổng hợp và đưa ra nhiều cách cho anh em lựa chọn, nhớ sao lưu template trước khi thao tác nhé.
- Để tất cả javascript (jquery) trên website hoạt động ổn định trên, hãy paste đoạn mã sau vào trong cặp thẻ <body></body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Cách 1 : Sử dụng code sticky sidebar - phiên bản Q2W3


Bước 1 : Truy cập trang chỉnh sửa HTML.
Bước 2 : Tìm thẻ đóng </body> và chèn vào trước đó đoạn mã sau

<script type='text/javascript'>
//<![CDATA[
function q2w3_sidebar(e){function t(){}function f(t){var n=t.offset_top-t.fixed_margin_top;var s=i-e.margin_bottom;var o;if(e.width_inherit)o="inherit";else o=t.obj.css("width");var u=false;var a=false;var f=false;jQuery(window).on("scroll."+e.sidebar,function(e){var i=jQuery(this).scrollTop();if(i+t.fixed_margin_bottom>=s){if(!a){t.obj.css("position","fixed");t.obj.css("top","");t.obj.css("width",o);if(jQuery("#"+t.clone_id).length<=0)t.obj.before(t.clone);a=true;u=false;f=false}t.obj.css("bottom",i+r+t.next_widgets_height-s)}else if(i>=n){if(!u){t.obj.css("position","fixed");t.obj.css("top",t.fixed_margin_top);t.obj.css("bottom","");t.obj.css("width",o);if(jQuery("#"+t.clone_id).length<=0)t.obj.before(t.clone);u=true;a=false;f=false}}else{if(!f){t.obj.css("position","");t.obj.css("top","");t.obj.css("width","");if(jQuery("#"+t.clone_id).length>0)jQuery("#"+t.clone_id).remove();f=true;u=false;a=false}}}).trigger("scroll."+e.sidebar);jQuery(window).on("resize",function(){if(jQuery(window).width()<=e.screen_max_width){jQuery(window).off("load scroll."+e.sidebar);t.obj.css("position","");t.obj.css("top","");t.obj.css("width","");t.obj.css("margin","");t.obj.css("padding","");if(jQuery("#"+t.clone_id).length>0)jQuery("#"+t.clone_id).remove();f=true;u=false;a=false}}).trigger("resize")}if(!e.widgets)return false;if(e.widgets.length<1)return false;if(!e.sidebar)e.sidebar="q2w3-default-sidebar";var n=new Array;var r=jQuery(window).height();var i=jQuery(document).height();var s=e.margin_top;jQuery(".q2w3-widget-clone-"+e.sidebar).remove();for(var o=0;o<e.widgets.length;o++){widget_obj=jQuery("#"+e.widgets[o]);widget_obj.css("position","");if(widget_obj.attr("id")){n[o]=new t;n[o].obj=widget_obj;n[o].clone=widget_obj.clone();n[o].clone.children().remove();n[o].clone_id=widget_obj.attr("id")+"_clone";n[o].clone.addClass("q2w3-widget-clone-"+e.sidebar);n[o].clone.attr("id",n[o].clone_id);n[o].clone.css("height",widget_obj.height());n[o].clone.css("visibility","hidden");n[o].offset_top=widget_obj.offset().top;n[o].fixed_margin_top=s;n[o].height=widget_obj.outerHeight(true);n[o].fixed_margin_bottom=s+n[o].height;s+=n[o].height}else{n[o]=false}}var u=0;var a;for(var o=n.length-1;o>=0;o--){if(n[o]){n[o].next_widgets_height=u;n[o].fixed_margin_bottom+=u;u+=n[o].height;if(!a){a=widget_obj.parent();a.css("height","");a.height(a.height())}}}jQuery(window).off("load scroll."+e.sidebar);for(var o=0;o<n.length;o++){if(n[o])f(n[o])}}
jQuery(document).ready(function(){
            var q2w3_sidebar_1_options = {
                "sidebar" : "",
                "margin_top" : 50,
                "margin_bottom" : 300,
                "screen_max_width" : 0,
                "width_inherit" : false,
                "widgets" : ['id_sidebar']
            };
            q2w3_sidebar(q2w3_sidebar_1_options);
            setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); }, 1500);
        });
//]]>
</script>

Bước 3 : Lưu template và test.

Các tham số


1. margin_top : khoảng cách từ sticky sidebar tới cạnh trên màn hình (đơn vị : pixel).
2. margin_bottom : khoảng cách từ sticky sidebar tới cạnh dưới màn hình (đơn vị : pixel). Margin_bottom thường được tính bằng chiều cao của footer cộng thêm một khoảng cố định.

- Trường hợp 1 : footer có chiều cao luôn cố định, vậy thì đơn giản rồi, bạn chỉ cần ghi một giá trị cụ thể như ở đoạn code bên trên là xong.

"margin_bottom" : 300.

- Trường hợp 2 : footer có chiều cao thay đổi - thường là với giao diện responsive, lúc này chúng ta phải sử dụng biến cho margin-bottom

"margin_bottom" : $('.lớp_của_footer').height() + khoảng cách,
ví dụ : margin_bottom" : $('.footer').height() + 50,
Để lấy được lớp (class) của footer, bạn phải nắm được HTML hoặc nhấn F12 để xem mã nguồn nhé.

- sidebarwidgets : id của sticky sidebar.
Để an toàn, các bạn nên đặt sticky sidebar vào trong cặp thẻ <div></div> và thêm id cho cặp thẻ đó.

Ví dụ
<div id="stickya">
Code ...
</div>
Code tương ứng
"sidebar" : "stickya","widgets" : ['stickya']

Lưu ý


 Một đoạn code chỉ áp dung duy nhất cho một sidebar, nếu bạn muốn sử dụng nhiều hơn, hãy copy - paste và thay đổi các tham số cần thiết.

jQuery(document).ready(function(){
            var q2w3_sidebar_1_options = {
                "sidebar" : "stickya",
                "margin_top" : 5,
                "margin_bottom" : 300,
                "screen_max_width" : 0,
                "width_inherit" : false,
              "widgets" : ['stickya']
            };
            q2w3_sidebar(q2w3_sidebar_1_options);
            setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); }, 1500);
        });

Tham khảo : freetuts.net, Q2W3 WordPress Plugin 

Cách 2 : Sử dụng code sticky sidebar - phiên bản 123itvn


Đánh giá sơ lược
- Đoạn code này do chính team 123itvn thực hiện và đã đưa vào sử dụng. Nếu code không hoạt động, xin vui lòng sử dụng cách khác.
- Code chỉ hiệu quả cho website sử dụng 1 hoặc 2 sticky sidebar.
- Nếu có thể, bên mình sẽ tiếp tục cập nhật để code hoạt động tốt hơn trên nhiều thiết bị với nhiều kích cỡ màn hình khác nhau. Cám ơn đã ghé thăm :)

Bước 1 : Truy cập trang chỉnh sửa HTML.
Bước 2 : Tìm thẻ đóng </body> và chèn vào trước đó đoạn mã sau

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
console.log( "document ready!" );
//KHAI BÁO BIẾN
  var $stickyb = $('.stickyb');
  var $f = $('.footer');
  var b1 = $stickyb.offset().top;
  var kc = 5;
//KHI SCROLL
$(function(){
  $(window).scroll(function(){
var thanhcuon = $(window).scrollTop();
var mq = window.matchMedia("screen and (min-width: 768px)")
if (mq.matches)
    {
  // TH1 : khi thanh cuộn chưa đi qua vị trí top thằng B
  if (thanhcuon < b1 - kc )
{ $stickyb.css({ position: 'absolute', top:$stickyb.offset().top}); }      
// TH2 : khi đã đi qua thì cho dính luôn
else
{
$stickyb.css({ position: 'fixed', top:kc});
//Gặp footer, lúc này bỏ dính
  var h = $f.offset().top;
  if (thanhcuon > h - $stickyb.height() - kc)
{ $stickyb.css({ position: 'absolute', top: h - $stickyb.height() - kc - 7 }); }
}
    }
});
});
//KHI RESIZE CỬA SỔ TRÌNH DUYỆT
$(function(){
$(window).resize(function() {
var mq1 = window.matchMedia("screen and (min-width: 768px)")
// Nếu kích cỡ màn hình > 768px thì thiết lập vị trí đối tượng về trạng thái sticky
if (mq1.matches)
{$('.stickyb').css({ position: 'absolute', top:$('.stickyb').offset().top});}
// Nếu kích cỡ màn hình < 768px thì thiết lập vị trí đối tượng về mặc định
else {$('.stickyb').css({ position: 'inherit',top:''});}
});
});
});
//]]>
</script>

Bước 3 :  Lưu template và test.

Các tham số


- $stickyb, $f : lần lượt là tên lớp của 2 đối tượng sticky sidebar và footer.
- kc : khoảng cách từ đối tượng sticky sidebar tới cạnh trên màn hình (đơn vị : pixel).
- min-width: 768px : kích cỡ màn hình không muốn áp dụng sticky sidebar (với giao diện responsive). Ở đây, mình chỉ áp dụng sticky cho màn hình có bề ngang tối thiểu là 768px, còn từ 768 trở xuống thì tính năng sticky sẽ không còn hoạt động.

Lời kết


Nhìn chung, code sticky sidebar hoạt động tương đối ổn định ở điều kiện thường. Tuy nhiên, khi có sự điều chỉnh về kích cỡ trình duyệt (từ to sang bé, từ bé sang to) thì vị trí của sticky sidebar bắt đầu hơi "lệch lạc". Có nhiều nguyên nhân để dẫn tới điều này nhưng cơ bản nhất vẫn là do nền tảng và cách mà coder lập trình cho website. Nếu bạn không nắm vững về code, việc sử dụng sticky sidebar cũng không đơn giản đâu nhé.

Trong thời gian tới, mình sẽ tiếp tục tổng hợp và chia sẻ thêm các đoạn code sticky sidebar để anh em có nhiều lựa chọn hơn khi khai thác.


Từ khóa tìm kiếm :

  • xin code sticky sidebar jquery
  • tạo sticky sidebar trượt dọc website
  • share code floating sidebar
  • tạo đối tượng dính sticky trong wensite
  • tạo sticky sidebar với jquery
  • sử dụng code sticky sidebar như nào