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]
(1)Code menu cuối trang có biểu tượng icon hay hình ảnh (kiểu 2) Ở kiểu này, xuất trang liên kết có khác so với kiểu , tương tự 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 menu … cho phù hợp Ngoài ra, có thể thay đổi độ cao, thấp menu Khi cho trỏ chuột vào biểu tượng icon hay hình ảnh thì nó phóng to (tùy chỉnh) *Mô tả: Thầy cô có thể thay đổi thông số đã chú thích <style type="text/css"> (2) bubblewrap{ 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 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{ (3) -moz-transform:scale(2.5); /*Kích cở hiển thị 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 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 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> <center> <ul class="bubblewrap"> <li><a href="http://violet.vn/main/" rel="follow"rel="nofollow" target="_blank"> <img src="http://d4.violet.vn/uploads/blogs/754645/dossier-violet-icon.png"title="Thư viện Violet"></a></li> <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-chromeicon.png" title="Tìm kiếm trên Google"></a></li> (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<mpl=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<mplcache=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= (5) "Đăng nhập Twitter"></a></li> <li><a href=" http://www.facebook.com" rel="follow"rel="nofollow" target="_blank"> <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<mpl=homepage/" rel="follow"rel="nofollow" target="_blank"> (6) <img src= "http://d4.violet.vn/uploads/blogs/754645/document-icon.png" title= "Đăng nhập Docs"></a></li> <li><a href=" http://www.youtube.com/" rel="follow"rel="nofollow" target="_blank"> <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> <li><a href=" http://game.24h.com.vn/" rel="follow"rel="nofollow" target="_blank"> <img src= (7) "http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/64/Actions-games-configtheme-icon.png" title="Game 24h"></a></li> <li><a href="http://mp3.zing.vn/" rel="follow"rel="nofollow" target="_blank"> <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> (8) <li><a href=" http://trangnhat.net/tienich/tiengviet.htm" rel="follow"rel="nofollow" target="_blank"> <img src="http://d4.violet.vn/uploads/blogs/754645/color-ms-word-icon.png" title="Xử lí vă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> <li><a href="http://icon-generator.net/" rel="follow"rel="nofollow" target="_blank"> <img src= "http://icons.iconarchive.com/icons/wilnichols/alumin-folders/64/iOS-Icons-Foldericon.png" (9) title="Tạo icon"></a></li> <li><a href="http://ngainguyen.110mb.com/thumavanngai.html" rel="follow"rel="nofollow" target="_blank"> <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 hay nhiều icon thì thầy cô copy đoạn code sau, dán trên dòng </ul>, sau đó thay đổi thông số số lượng icon hiển thị trên <li><a href="Địa 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! (10)