Thứ Năm, 9 tháng 10, 2014


Menu là một phần không thể thiếu đối với blogspot, nhưng nhiều khi trang blog quá dài, mà bạn cuộn trang xuống thì menu lại trôi mất cho nên nay Hồng Designer hướng dẫn các bạn tạo menu cố định ghim trên đầu trang cho blogspot.
Menu ghim cố định cho blogspot

Để làm được như vậy các bạn làm theo bước sau 

1. Đăng nhập vào blog:

- Chèn đoạn code trong khung dưới đây vào trước thẻ ]]></b:skin>
/* HONGDESIGNR MENU */#hongdesigner_menu{background-color:#3173f1;height:34px;width:100%;min-width:960px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-top:0 solid #9932CC;height:34px;width:100%;min-width:960;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:2px solid #9932cc;} #hongdesigner_menu ul{list-style:none;margin:auto;width:960px} #hongdesigner_menu ul li{float:left;} #hongdesigner_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:12px;font-family:Arial;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;} #hongdesigner_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:yellow;}
Sau đó Lưu Template lại và tiền hành bước 2

2. Vào "Bố cục".

- Bấm tiếp "Thêm tiện ích" thêm một phần tử "HTML/JavaScript" vào nơi nào bất kỳ bạn muốn đặt menu, và thêm đoạn code sau.
<div id='hongdesigner_menu'> <ul> <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='http://3.bp.blogspot.com/-iAjXv5CCLpc/UqgT0W2zp4I/AAAAAAAAADc/OwaeWnjuIOA/s1600/home_icon.gif' style='padding:0px;'/></a></li> <li><a href='LINK'>Tên menu 1</a></li> <li><a href='LINK'>Tên menu 2</a></li> <li><a href='LINK'>Tên menu 3</a></li> <li><a href='LINK'>Tên menu 4</a></li> <li><a href='LINK'>Tên menu 5</a></li> <li><a href='LINK'>Tên menu 6</a></li> <li><a href='LINK'>Tên menu 7</a></li> <li><a href='LINK'>Tên menu 8</a></li> </ul>
</div>
Nếu bạn là người rành về code html thì các bạn có thể thêm luôn code ở bước 2 vào template của mình trong thẻ <body></body>

Chúc các bạn có 1 menu tuyệt đẹp .

0 nhận xét:

Đăng nhận xét