Menu đẹp cho Blogger (Kiểu 3 - CSS Ribbon Menu)

Giới thiệu

Menu luôn là một vấn đề quan trọng với bất kì một Website nào. Điều đó luôn thôi thúc tôi kiếm tìm những menu tiện dụng hơn, nhưng vẫn đảm bảo sự giản đơn và không khó khi sử dụng.

Xem DEMO 

Bạn có thể làm Menu theo các bước sau:

Thêm CSS

Vào phần Layout -> Tìm thẻ ]]></b:skin> và thay thế nó bằng đoạn Code dưới đây rồi Lưu lại.

.ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border:1.5em solid #fff; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; } .ribbon a:link, .ribbon a:visited { color:#000; text-decoration:none; float:left; height:3.5em; overflow:hidden; } .ribbon span { background:#fff; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span { background:#FFD204; margin-top:0; } .ribbon span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .ribbon span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } ]]></b:skin>

Thêm Widget/HTML

Vào phần tử trang -> Thêm Tiện ích/HTML -> Copy và Paste đoạn code sau vào phần nội dung rồi Lưu lại.

<div class='ribbon'> <a href='#'><span>Menu 1</span></a> <a href='#'><span>Menu 2</span></a> <a href='#'><span>Menu 3</span></a> <a href='#'><span>Menu 4</span></a></div>

Lưu ý:

1. Ở phần CSS, bạn có thể tuỳ chỉnh lại màu sắc, độ cao, rộng và nền của tiện ích.
2. Phần HTML, bạn có thể thêm bớt 1 hay nhiều hơn các menu tuỳ thích bằng cách thêm các thẻ có cấu trúc code như các menu 1, 2, 3, 4. Dấu "#" bạn thay bằng Link dẫn đến Tên Menu bạn muốn hiển thị.

Nguồn CSS Ribbon Menu