Code thanh menu cuoi trang co bieu tuong icon hay hinh anhkieu 2

Code thanh menu cuối trang có biểu tượng icon hay hình ảnh kiểu 2 Ở kiểu 2 này, sự xuất hiện trang liên kết có khác so với kiểu 1 , tương tự như kiểu 1, thầy cô thay đổi kích cở độ rông,[r]

Trang 1

Code thanh menu cuối trang có biểu tượng icon hay hình ảnh (kiểu 2)

Ở kiểu 2 này, sự xuất hiện trang liên kết có khác so với kiểu 1 , tương tự như kiểu 1, thầy cô thay đổi kích cở (độ rông, cao), số lượng icon hiển thị, khoảng cách,

di chuyên các icon hay hinh ảnh trên thanh menu … sao cho phù hợp.

Ngoài ra, có thể thay đổi độ cao, thấp của thanh menu Khi cho con trỏ chuột vào biểu tượng icon hay hình ảnh thì nó sẽ phóng to (tùy chỉnh).

*Mô tả: Thầy cô có thể thay đổi thông số đã được chú thích.

Trang 2

list-style-type:none;

margin:0;

padding:0;

}

.bubblewrap li{

display:inline;

width: 17px; /* Số lượng icon hiển thị.*/

height:17px; /* Số lượng icon hiển thị.*/

}

.bubblewrap li img{

width: 18px; /* Kích cở icon hiển thị.*/

height: 18px; /* Kích cở icon hiển thị.*/

border:0;

margin-right: 5px; /*Khoảng cách giữa 2 icon, ảnh*/

-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */

}

.bubblewrap li img:hover{

Trang 3

-moz-transform:scale(2.5); /*Kích cở hiển thị khi cho trỏ chuột vào icon*/

-webkit-transform:scale(2.5);

-o-transform:scale(2.5);

}

</style>

<div style=

"position: fixed; width: 100%; height: 15px;/*chiều cao, thấp của thanh menu chứa biểu tượng*/ z-index: 0; left: 0pt; bottom: 0pt; border-top: 1px solid rgb(192, 192, 192); ; padding: 2px 20px;/*Dịch chuyển biểu tượng trong thanh menu sang trái, phải*/

background-color: rgb(243, 243, 243); font-family: tahoma; font-size: 10pt; font-weight:

normal;"

id="itlagi-Toolbar">

</script>

<li><a href="http://www.google.com.vn/webhp?hl=vi/" rel="follow"rel="nofollow" target="_blank"><img src="http://d4.violet.vn/uploads/blogs/754645/google-chrome-icon.png"

title="Tìm kiếm trên Google"></a></li>

Trang 4

<li><a href="https://accounts.google.com/servicelogin?

service=blogger&passive=1209600&continue=http://www.blogger.com/home&followup

=http://www.blogger.com/home&ltmpl=start#s01" rel="follow"rel="nofollow"

target="_blank">

<img src=

"http://d4.violet.vn/uploads/blogs/754645/blogger-icon.png" title=

"Đăng nhập Blogspot"></a></li>

<li><a href=

"https://accounts.google.com/servicelogin?

service=mail&passive=true&rm=false&continue=http://mail.google.com/mail/&scc=1&l tmpl=default&ltmplcache=2"rel="follow"rel="nofollow" target="_blank">

<img src="http://d4.violet.vn/uploads/blogs/754645/gmail-icon.png"

title="Đăng nhập Gmail"></a></li>

<li><a href="http://twitter.com/#!/sessions/new" rel="follow"rel="nofollow"

target="_blank"><img src=

"http://d4.violet.vn/uploads/blogs/754645/twitter-icon.png" title=

Trang 5

"Đăng nhập Twitter"></a></li>

<img src=

"http://d4.violet.vn/uploads/blogs/754645/facebook-icon.png" title=

"Đăng nhập Facebook"></a></li>

<li><a href="https://login.yahoo.com/config/login?.src=fpctx&.intl=vn&.pd=c

%3d6t7evjap2e6cwwsb86qvdqk-&.done=http%3a%2f%2fvn.yahoo.com%2f"

rel="follow"rel="nofollow" target="_blank">

<img src="http://d4.violet.vn/uploads/blogs/754645/yahoo-icon.png"

title="Đăng nhập Yahoo"></a></li>

<li><a href="https://accounts.google.com/ServiceLogin?

service=writely&passive=1209600&continue=https://docs.google.com/?tab%3Dwo

%23&followup=https://docs.google.com/?tab%3Dwo&ltmpl=homepage/"

Trang 6

<img src=

"http://d4.violet.vn/uploads/blogs/754645/document-icon.png" title=

"Đăng nhập Docs"></a></li>

<img src=

"http://d4.violet.vn/uploads/blogs/754645/you-tube-icon.png" title=

"Đăng nhập Youtube"></a></li>

<li><a href=" http://www.tivi24h.com/" rel="follow"rel="nofollow"

target="_blank"><img src=

"http://d4.violet.vn/uploads/blogs/754645/tv-set-retro-icon.png"

title="Truyền hình Online"></a></li>

<img src=

Trang 7

"http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/64/Actions-games-config-theme-icon.png"

title="Game 24h"></a></li>

<img src=

"http://d4.violet.vn/uploads/blogs/754645/music-icon.png" title=

"Nhạc Zing"></a></li>

<li><a href="'http://mr.tnd.vn/photoshop-online/" rel="follow"rel="nofollow"

target="_blank">

<img src=

"http://d4.violet.vn/uploads/blogs/754645/photoshop-cs2-tuti-icon.png"

title="Photoshop online"></a></li>

Trang 8

<img src="http://d4.violet.vn/uploads/blogs/754645/color-ms-word-icon.png"

title="Xử lí văn bản tiếng Việt"></a></li>

<li><a href="http://translate.google.com.vn/?hl=vi&tab=wT#vi/en/x%E1%BB%AD

%20l%C3%AD%20v%C4%83n%20b%E1%BA%A3n " rel="follow"rel="nofollow" target="_blank">

<img src=

"http://d4.violet.vn/uploads/blogs/754645/language-skills-icon.png"

title="Google dịch"></a></li>

<img src=

"http://icons.iconarchive.com/icons/wilnichols/alumin-folders/64/iOS-Icons-Folder-icon.png"

Trang 9

title="Tạo icon"></a></li>

<li><a href="http://ngainguyen.110mb.com/thumavanngai.html"

<img src=

"http://d4.violet.vn/uploads/blogs/754645/axialis-icon-workshop-icon.png"

title="Bảng thử mã code"></a></li>

</ul>

</center>

</div>

* Mở rộng: Nếu muốn thêm 1 hay nhiều icon thì thầy cô copy đoạn code sau, rồi dán trên dòng </ul>, sau đó thay đổi thông số về số lượng icon hiển thị ở trên.

<li><a href="Địa chỉ liên kết" rel="follow"rel="nofollow" target="_blank">

<img src="Link ảnh" title="Thông tin cần hiển thị"></a></li>

Chúc thầy cô và các bạn thành công!

Định dạng
Số trang	9
Dung lượng	93,45 KB