Tạo nút điều hướng để nâng cao blog của bạn

 (Bài này được lấy từ một trang website nước ngoài)

Nhiều blog và các trang web tính năng "chuyển hướng nút"
liên kết giống như một trình đơn ở đầu trang hoặc dưới tiêu đề. Điều này có thể được thực sự hữu ích cho độc giả để điều hướng đến các khu vực quan tâm trong blog của bạn, chẳng hạn như trang chủ, về trang web và các liên kết liên lạc.
Trong hướng dẫn này, tôi sẽ giải thích một phương pháp rất đơn giản nhưng hiệu quả của việc tạo ra một "nút điều hướng" cho blog của riêng bạn, mà bạn có thể sử dụng để thêm liên kết dễ dàng truy cập vào các trang web bài viết của bạn.

Dưới đây là một ví dụ về các nút bạn có thể tạo ra bằng cách sử dụng hướng dẫn này (mặc dù các liên kết trong các nút này tất cả các điểm trở lại trang này!):
Trang chủ Giới thiệu Liên hệ
Để tạo ra những nút cho blog của bạn, chúng tôi không cần phải sử dụng bất kỳ hình ảnh bên ngoài! Với một chút phong cách CSS, bạn có thể dễ dàng tạo ra các nút điều hướng, thay đổi màu sắc khi dao động chuột lên chúng, làm cho nó dễ dàng hơn để thấy rằng đây là những thực sự liên kết có thể click. Điều này phong cách của nút là hữu ích cho khách truy cập của bạn và mời họ xem các trang quan trọng là bạn liên kết để sử dụng những liên kết này.
Có hai bước chính để tạo ra những nút cho blog của bạn:

1. Thêm một số mã kiểu dáng để tạo ra các mẫu blog của bạn
2. Tạo một widget HTML / Javascript mới, và tạo ra các liên kết của bạn

Bạn có thể sử dụng những liên kết này bất cứ nơi nào trong blog của bạn mà bạn có thể đặt một HTML / Javascript widget, chẳng hạn như sidebar của bạn, phần tiêu đề, hoặc ở trên bài viết blog của bạn.
Dưới đây là các bước cụ thể:

Thêm một số mã phần phong cách của mẫu blog của bạn

"Phong cách" của "bố trí" blog được chứa giữa các <b:skin> và </ b: skin> trong template của bạn . Cách đơn giản nhất để thêm mã kiểu dáng thêm là nơi này ngay sau khi đóng </ b: skin> tag (phím CTRL + F để dễ dàng tìm thấy điều này trong mẫu của bạn).
Mã phong cách được sử dụng cho các nút tính năng trên là như sau:

a.navigation {
: # 000000;
: # ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
cửa chiều rộng: 0;
văn bản chuyển đổi: chữ hoa;
text-decoration: none;
font-trọng lượng: in đậm;
}
a.navigation: hover {
5d5d54
text-decoration: none;
}

Nếu bạn sao chép và dán mã này ngay trước khi đóng </ b: skin> tag trong mẫu blog của bạn, bạn sẽ dễ dàng có thể tạo ra các nút điều hướng của bạn. Nếu bạn thích, bạn có thể thay đổi màu sắc của các hình nền (đánh dấu màu đỏ) để màu sắc phù hợp với blog của bạn. Bạn có thể dễ dàng tìm thấy các giá trị hex cho màu sắc mà bạn cần bằng cách sử dụng các tính màu trong phần công cụ của trang web này.
Bạn sẽ nhận thấy rằng có hai báo cáo trong phong cách này: đầu tiên xác định những gì các nút sẽ giống như khi chúng xuất hiện trong blog của bạn, trong khi (hover) tuyên bố thứ hai định nghĩa màu nền của các nút khi bạn đặt con trỏ lên nút ("mouseover" có hiệu lực).

Tạo các liên kết của bạn trong một widget HTML / Javascript

Một khi bạn đã thêm mã này phong cách cho mẫu của bạn, bạn nên lưu mẫu của bạn và đi đến phần bố cục của blog của bạn (Template> Layout). Ở đây bạn nên tạo một widget HTML / Javascript mới, nơi bạn muốn nút xuất hiện.
Trong tiện ích này mới, bạn nên thêm các liên kết của bạn theo định dạng sau:

<a class="navigation" href="http://your-link-url.blogspot.com"> liên kết của bạn </ a>
<a class="navigation" href="http://your-link-url.blogspot.com"> liên kết thứ hai </ a>
<a class="navigation" href="http://your-link-url.blogspot.com"> của bạn liên kết thứ ba </ a>

Hãy chắc chắn để thay thế "http://your-link-url.blogspot.com" với địa chỉ URL của trang bài viết (hoặc liên kết) bạn sẽ giống như các nút liên kết đến, và thay thế các văn bản liên kết (ví dụ như: Liên kết của bạn) với văn bản mà bạn muốn hiển thị.
Một khi bạn đã tạo ra các liên kết của bạn (bạn có thể thêm ít hoặc nhiều như bạn muốn), tiết kiệm HTML / Javascript widget, và hãy xem hiệu ứng này trong blog của bạn.

Làm thế nào điều này

Mã phong cách chúng tôi thêm vào các mẫu tạo ra các quy tắc phong cách cho "liên kết anchor" được cho các lớp học của "chuyển hướng" . Chúng ta có thể sử dụng các "lớp học" khác nhau để tạo ra các hiệu ứng khác nhau cho các yếu tố xuất hiện trong bố trí blog của bạn, lớp chúng tôi cung cấp cho các liên kết điều hướng này không ảnh hưởng đến các liên kết khác trong mẫu của bạn, chỉ có những lớp "chuyển hướng".
Với một vài tinh chỉnh, bạn có thể thay đổi phong cách của những nút này để pha trộn với sự xuất hiện tổng thể của mẫu blog của bạn, và tạo ra các nút hấp dẫn có thể click vào các trang web quan trọng của bạn mà khách truy cập của bạn sẽ yêu thích.

THỦ THUẬT 03:55