Tạo nút bàn phím (Keyboard) từ CSS3 cho Blogger/blogspot

How to add stylish CSS3 Keyboard Keys Effect to Blogger/blogspot

Trong hướng dẫn này, namkna sẽ chỉ cho bạn Làm thế nào để thêm các nút trên Bàn phím bằng mã CSS cho Blogger/blogspot của bạn. CSS này không có hình ảnh nên nó không ảnh hưởng đến tốc độ blog của bạn. Bạn có thể dễ dàng thêm hiệu ứng button này trên Mỗi bài viết trong Blog. Để thêm nó bạn chỉ cần thực hiện theo các bước đơn giản dưới đây.

Demo của thủ thuật:

Ctrl+F

Ctrl+A

Ctrl+U

» Cài đặt CSS:

1- Đăng nhập vào blog

2- Chọn Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Chọn Mở rộng tiện ích mẫu ( Expand Template Widgets)
4- Tìm thẻ ]]></b:skin>:(Mẹo: Bấm Ctrl+F để tìm).
- Chọn một trong các mẫu bên dưới mà bạn thich và dán trước thẻ vừa tìm được.
¤ Style 1: Code màu đen cho Keyboard Keys

Demo:

Ctrl+F

/* Black http://namkna.blogspot.com/ */
Namkna-Black{
Border:1px solid #fff;
Font-size:1.2em;
Box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
Color:#fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
Border-radius:3px;
Margin:2px 3px;
Background:#000;
Padding:1px 5px;
}

¤ Style 2: Code màu trắng cho Keyboard Keys

Demo:

Ctrl+F

/* White http://namkna.blogspot.com/ */
Namkna-White{
Border:1px solid #999;
Background:#fff;
Font-size:1.2em;
Box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
Border-radius:3px;
Margin:2px 3px;
Padding:1px 5px;
Color:000;
}

¤ Style 3: Code màu đỏ cho Keyboard Keys

Demo:

Ctrl+F

/* Red http://namkna.blogspot.com/ */
Namkna-Red{
Border:1px solid #fff;
Font-size:1.2em;
Box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
Color:#fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
Border-radius:3px;
Margin:2px 3px;
Background:red;
Padding:1px 5px;
}

¤ Tùy chỉnh:

Bạn có thể thay đổi phần màu cam thành mã màu hoặc tên màu nền của bàn phím keyboard của bạn. ( Chọn màu sắc ở đây )

Bạn có thể thay đổi phần được đánh dấu màu xanh lá cây để thay đổi màu sắc đường viền của phím.

Và thậm chí bạn cũng có thể thay đổi cỡ chữ, đổ bóng, bo dóc dường viền, và căn lề Margin và Padding theo ý bạn..

5- Lưu mẫu lại.

- Như vậy là xong phần cài đặt.

» Sử dụng trên bài viết bất kỳ trong Blogger/blogspot

- Khi muốn sử dụng bạn bấm chuột vào phần HTML của bài viết và dụng ccode sau ứng với mỗi style bên trên:
¤ Style 1: Code màu đen cho Keyboard Keys