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

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

Xem khác cùng chủ đề

10 nhận xét | Viết lời bình

5/27/2013 12:41:00 SA Trả lời

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-)

Admin
5/27/2013 01:33:00 SA Trả lời

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

7/27/2013 06:46:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
7/27/2013 06:49:00 SA Trả lời

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/>

4/30/2014 09:03:00 SA Trả lời

hay ghê thanks bạn tai opera mini cho nokia

7/16/2014 10:12:00 SA Trả lời

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 ạ ???

7/24/2015 02:09:00 SA Trả lời

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





9/24/2015 04:53:00 SA Trả lời

Bài viết chi tiết. Cảm ơn anh rất nhiều

10/13/2015 11:32:00 CH Trả lời

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ẻ

10/14/2016 08:17:00 SA Trả lời

đăng chán chế r mới bảo phải phê duyệt

du lịch

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 »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang