Quốc Cường Blogger@quoccuongblogger 10 January

Bài 07. Các kiểu dữ liệu cơ sở

Nguồn: Khoa Nguyen

#C# #Kiểu dữ liệu #Unity #Visual Studio

[Unity] [C#] 007. Các Kiểu Dữ Liệu Cơ Sở

1

Quốc Cường Blogger@quoccuongblogger 10 January

Bài 06. Biến và Hằng

Nguồn: Khoa Nguyen

#Biến #C# #Hằng #Unity #Visual Studio

[Unity] [C#] 006. Biến và Hằng

0

Quốc Cường Blogger@quoccuongblogger 10 January

Bài 05. Hàm Main()

Nguồn: Khoa Nguyen

#C# #Main #Unity #Visual Studio

[Unity] [C#] 005. Hàm Main

0

Quốc Cường Blogger@quoccuongblogger 07 January

Bài 04. Namespace lồng nhau (Nested namespace)

Nguồn: Khoa Nguyen

#C# #Namespace #Nested Namespace #Unity #Visual Studio

[Unity] [C#] 004.Namespace Lồng Nhau (Nested Namespace)

0

Quốc Cường Blogger@quoccuongblogger 07 January

Hôm nay, mình xin giới thiệu với các bạn một thủ thuật blogspot khá hay. Thời gian này mình đang thay áo cho Blog nên cũng tìm hiểu thêm một số thủ thuật để làm đẹp cho blog. Tình cờ mình đọc được bài viết về Font Awesome icons thấy khá là có ích nên chia sẻ cùng các bạn luôn mình hy vọng sẽ có ích cho các bạn.

Font Awesome theo mình thì vô cùng thú vị và hữu ích, nó là một công cụ cần thiết cho các coder sự tiện dụng dễ dàng chỉnh sửa mà lại thay thế cho rất nhiều icon bằng hình ảnh. Bài viết này được mình chỉnh sửa và rút gọn từ nguồn chính nếu bạn muốn tìm hiểu kỹ hơn thì có thể xem thêm tại: http://fortawesome.github.io/Font-Awesome, bạn có thể xem thêm ở trang này. Bây giờ các bạn cùng mình bắt tay vào thực hiện nhé.

TRƯỚC TIÊN LÀ CÀI ĐẶT FONT CHO BLOGSPOT

Việc đầu tiên các bạn hãy đặt đoạn code sau dưới thẻ</head> :

<link rel ="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

Nếu bạn không muốn có sự cố gì hãy tải lại file css về và up lên host của chính bạn cho dễ quản lý nhé.

CÁCH SỬ DỤNG FONT AWESOME

Để sử dụng font Awesome thì việc đầu tiên là bạn phải năm đc tên icon mà mình muốn thêm vào. Để biết được điều này bạn có thể vào ĐÂY để tham khảo hoặc  tìm kiếm ngay trong bài viết này.

Muốn đặt icon ở đâu thì bạn chèn đoạn code sau ở đó. Ví dụ bạn muốn hiển thị icon "download" thì bạn sử dụng đoạn code sau 

<i class="fa fa-download"></i>

Bạn sẽ được kết như hình phía trước code

TIẾP THEO LÀ PHẦN BIẾN HÓA CỦA FONT AWESOME

1. Thay đổi kích thước icon

Ngoài ra các bạn cũng có thể tuỳ biến kích thước bằng các đặt các ký hiệu sau đằng sau tên của icon fa-lg(tăng 33% kích thước), fa-2x (tăng kích thước gấp 2 lần), fa-3x (tăng kích thước gấp 3 lần), fa-4x (tăng kích thước gấp 4 lần), hay fa-5x (tăng kích thước gấp 5 lần). Ví dụ bạn dùng đoạn code sau:

<i class="fa fa-download fa-lg"></i> fa-lg
<i class="fa fa-download fa-2x"></i> fa-2x
<i class="fa fa-download fa-3x"></i> fa-3x
<i class="fa fa-download fa-4x"></i> fa-4x
<i class="fa fa-download fa-5x"></i> fa-5x

Và kết quả chúng ta thu được:

 fa-lg  fa-2x  fa-3x  fa-4x  fa-5x

2. Trình bày dạng danh sách

Các bạn có thể trình dưới dạng danh sách bằng cách:

• List icons
• can be used
• as bullets
• in lists

Bằng mã code sau:

<ul class="fa-ul">   <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

3. Sử dụng icon động

Icon động thú vị phải không các bạn? Icon động theo mình sẽ giúp blog thêm bắt mắt hơn tạo nét riêng cho blog của bạn sử dụng làm các nút loding hay một số mũi tên v.v... nhẹ nhàng và tiện lợi không lo die link như cách sử dụng hình ảnh. Vậy thì làm thế nào để tạo icon động đây, các bạn chỉ việc thêm fa-spin sau tên icon để có icon xoay hoặc fa-pules để có icon xoay trong 8 bước. Dưới đây là một số icon xoay thông dụng:

    

Để có icon như trên ta sử dụng đoạn code sau:

<i class="fa fa-spinner fa-spin fa-3x"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
<i class="fa fa-refresh fa-spin fa-3x"></i>
<i class="fa fa-cog fa-spin fa-3x"></i>
<i class="fa fa-spinner fa-pulse fa-3x"></i>

4. Xếp chồng các icon lên nhau

Xoay đã rất thú vị rồi nhưng Font Awesome còn có thể làm các icon xếp chồng lên nhau bạn tin không? Không tin thì xem bên dưới nhé:

 fa-twitter on fa-square-o

 fa-flag on fa-circle

 fa-terminal on fa-square

 fa-ban on fa-camera

Sử dụng code:

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>fa-twitter on fa-square-o<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>fa-flag on fa-circle<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>fa-terminal on fa-square<br />

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>fa-ban on fa-camera

5. Xoay icon

Các bạn cũng có thể xoay icon cố định ở những góc độ mình thích hãy tham khảo đoạn code bên dưới nhé:

 normal

 fa-rotate-90

 fa-rotate-180

 fa-rotate-270

 fa-flip-horizontal

 icon-flip-vertical

Bạn có thể tham khảo đoạn code sau:

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

#font #Font Awesome #icon

[SHARE] Font Awesome Và Cách Sử Dụng Cho Blogspot/Blogger

0

Quốc Cường Blogger@quoccuongblogger 07 January

Bài 03. Namespace và using là gì

Nguồn: Khoa Nguyen

#C# #Namespace #Project #Unity #Using #Visual Studio

[Unity] [C#] 003.Namespace Và Using Là Gì ?

0

Quốc Cường Blogger@quoccuongblogger 06 January

Bạn làm blog? Bạn có bao giờ phải chỉnh sửa blog như thay Template, sửa bài viết hay gì gì đó không? Mỗi lần bạn làm điều đó, chắc hẳn sẽ không muốn ai nhìn thấy sự lộn xộn, mất thẩm mỹ của blog mình đúng không?
Nếu như đặt chế độ riêng tư chỉ cho tác giả xem thì người đọc sẽ hay nhầm tưởng là bạn không dùng blog đó nữa đấy. Vì vậy hôm nay mình sẽ hướng dẫn các bạn cách tạo 1 trang thông báo bảo trì website vô cùng đơn giản nhưng không kém phần chuyên nghiệp nhé.

ĐẶC ĐIỂM:

• Đẹp mắt, thân thiện.
• Bất kì ai truy cập blog bạn đều sẽ chỉ thấy được trang thông báo bảo trì này và không truy cập được trong blog.

CÁCH THỰC HIỆN:Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Dán toàn bộ đoạn code phía dưới trước thẻ </head>

<style type='text/css'>/*<![CDATA[*/html:after { content: ""; background: #fff url(https://caphesaigon.net/baotri.jpg) no-repeat; background-size: auto; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; background-position: center;}body { display:none;}@media screen and (max-width:800px) { html:after { background-size: contain; }}/*]]>*/</style>

--- Thay link ảnh https://caphesaigon.net/baotri.jpg bằng ảnh khác bạn thích. Search trên Google với từ khóa "bảo trì hệ thống", "bảo trì server"... ra rất nhiều kết quả nha.
Bước 3: Lưu template lại.
KẾT LUẬN:Như vậy mình vừa hướng dẫn xong cho các bạn cách tạo trang thông báo bảo trì đơn giản cho website/blog rồi đó. Khi nào dùng xong bạn nhớ bỏ code trên đi nhé.Chúc các bạn thành công :)  

#Bảo trì #blogspot

[BLOGSPOT] Tạo Trang Thông Báo Bảo Trì Cho Blogspot

0