Tin mới đăng:

Tạo thanh menu ngang với hiệu ứng bắt mắt bằng CSS3 cho Blogspot

Bài viết hôm nay mình chia sẻ cùng các bạn một menu với hiệu ứng cũng khá đẹp mắt dành cho blogspot, đặc biệt menu này chỉ dùng CSS3 và HTMl đơn giản nên không làm ảnh hưởng đến tốc độ của blog bạn nhiều. Với menu này bạn có thể tự mình phối màu lại để có 1 menu ưng ý cho blog của mình và cách thực hiện cũng đơn giản bạn theo dõi các bước bên dưới.
Hình ảnh minh họa
»Bắt đầu thủ thuật:
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.ribbon span{font-weight:bold;background:#A81B6A;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; -moz-transition:background-color 0.2s,margin-top 0.2s; -ms-transition:background-color 0.2s,margin-top 0.2s; -o-transition:background-color 0.2s,margin-top 0.2s; transition:background-color 0.2s,margin-top 0.2s}
.ribbon a:hover span{background:#FFD204;color:#000;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}
.ribbon a:link,.ribbon a:visited{color:#fff;text-decoration:none;float:left;height:3.5em;overflow:hidden}
.ribbon:after,.ribbon:before{margin-top:0.5em;content:"";float:left;border:1.5em solid #A81B6A}
.ribbon:after{border-right-color:transparent}
.ribbon:before{border-left-color:transparent}
5. Save template lại và trở về bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<a href='#'><span>Trang chủ</span></a>
<a href='#'><span>Tên menu 1</span></a>
<a href='#'><span>Tên menu 2</span></a>
<a href='#'><span>Tên menu 3</span></a>
<a href='#'><span>Tên menu 4</span></a>
<a href='#'><span>Tên menu 5</span></a>
<a href='#'><span>Tên menu 6</span></a>
Bạn thay đổi Tên menu lại thành tên thư mục bạn muốn cho lên thanh menu này (màu xanh lá) và thay dấu # thành link dẫn tương ứng với từng tên menu bạn đặt.
7. Cuối cùng Save tiện ích lại
Chúc bạn thành công!

Tham khảo bloggertrix.com
Tạo thanh menu ngang với hiệu ứng bắt mắt bằng CSS3 cho Blogspot Tạo thanh menu ngang với hiệu ứng bắt mắt bằng CSS3 cho Blogspot
9/10 356 bình chọn

Chia sẻ:

Xin chào! Mình là Bùi Xuân Doanh. Mình muốn được chia sẻ cùng các bạn những gì mình biết.

Theo dõi tôi trên Facebook Or Youtube


Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Quản trị

    Admin Bùi Xuân Doanh

    Click để Chat với Admin! Click để Chat với Admin!

    Email: buixuandoanh@gmail.com

    Hotline: 0983.379.818

Tư vấn Kỹ thuật