Thanh menu ngang với hiệu ứng bắt mắt bằng CSS3 cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

Traidatmui.com – 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
Thanh menu ngang với hiệu ứng bắt mắt bằng CSS3 cho Blogspot

» 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

10 nhận xét

  1. Anh ơi cho em hỏi sao tao thanh menu xong roi ma ko dang bai trong do duoc vay anh , chi cho em cach dang bai` trong may thu muc menu nha anh , tks anh 2-)

    Trả lờiXóa
    Trả lời
    1. Bạn thay dấu # thành link Nhãn của bạn. Khi đăng bài thì bạn đặt tên nhãn và phân loại bài viết theo từng chuyên mục đó và lấy link gắn vào menu. Link nhãn có dạng http://www.traidatmui.com/search/label/tên nhãn

      Xóa
  2. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  3. nhìn cũng được đây, thank bạn

    -----------------------------
    <a href="http://www.longchimvac.com/" target="_blank" title="chuyen cung cap long chim, lồng chim vác, lồng chim đẹp,long chim chao mao, long chim mi, long chim mi chien, long chim cu gay,long chim hoa mi"red="dofollow"><b>Longchimvac.com-cung cáp các loại lồng chim giá rẻ<b/></b></b></a><br/>

    Trả lờiXóa
  4. Hjx, anh viết khó hiểu quá, em thử cách của anh rồi mà chẳng được, tự nhiên ko vô phần chỉnh sửa html mà lại thêm html từ bố cục là sao, thêm vào vị trí nào ạ ???

    Trả lờiXóa
  5. Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
    Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
    Các bạn có thể truy cập link sau để xem thông tin công nghệ
    Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
    cám ơn bạn đã đọc
    đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
    xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
    xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
    xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

    giải trí thư giã relax giải trí thư giãn relax
    khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
    kho video giải trí khổng lồ video đời sống xã hội, video giải trí
    khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
    tin tức internet
    Tin tức itc , tin tức technogoy tin tức ict

    Khám phá công nghệ
    khám phá

    Thủ thuật công nghê thủ thuật công nghệ, tips





    Trả lờiXóa
  6. Bài viết chi tiết. Cảm ơn anh rất nhiều

    Trả lờiXóa
  7. Bài viết rất hay và mình đã áp dụng tại Khoan giếng Hà Nội Cảm ơn đã chia sẻ

    Trả lờiXóa
  8. đăng chán chế r mới bảo phải phê duyệt

    du lịch

    Trả lờiXóa