Code thanh menu cuối trang có biểu tượng icon hay hìnhảnhkiểu 1 Với code này, thầy cô có thể 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 hi[r]
Trang 1Code thanh menu cuối trang có biểu tượng icon hay
hìnhảnh(kiểu 1)
Với code này, thầy cô có thể 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òn có thể thay đổi độ cao, thấp của thanh menu Khi kích vào biểu
tượng icon hay hình ảnh thì nó sẽ phóng to (tùy chỉnh) và hiện lên trang liên kết mới, thầy cô chỉnh lại độ ngang, cao theo ý thích của mình.
*Mô tả: Thầy cô có thể thay đổi thông số đã được chú thích.
<style type="text/css">
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
Trang 2.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{
-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 language="JavaScript" type=
"text/javascript">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=520,heigh
t=450,left = 220,top = 180');");/*Khung ngang, cao, sang trái, trên web hiển thị*/
}
</script>
<center>
<ul class="bubblewrap">
<li><a href="javascript:popUp('http://violet.vn/main/')"><img src=
"http://d4.violet.vn/uploads/blogs/754645/dossier-violet-icon.png"
title="Thư viện Violet"></a></li>
<li><a href=
"javascript:popUp('http://www.google.com.vn/webhp?hl=vi/')"><img
src="http://d4.violet.vn/uploads/blogs/754645/google-chrome-icon.png"
Trang 3title="Tìm kiếm trên Google"></a></li>
<li><a href=
"javascript:popUp('https://accounts.google.com/servicelogin?
service=blogger&passive=1209600&continue=http://www.blogger.com/home&followup
=http://www.blogger.com/home<mpl=start#s01')">
<img src=
"http://d4.violet.vn/uploads/blogs/754645/blogger-icon.png" title=
"Đăng nhập Blogspot"></a></li>
<li><a href=
"javascript:popUp('https://accounts.google.com/servicelogin?
service=mail&passive=true&rm=false&continue=http://mail.google.com/mail/&scc=1&l tmpl=default<mplcache=2')">
<img src="http://d4.violet.vn/uploads/blogs/754645/gmail-icon.png"
title="Đăng nhập Gmail"></a></li>
<li><a href=
"javascript:popUp('http://twitter.com/#!/sessions/new')"><img src=
"http://d4.violet.vn/uploads/blogs/754645/twitter-icon.png" title=
"Đăng nhập Twitter"></a></li>
<li><a href="javascript:popUp('http://www.facebook.com')"><img src=
"http://d4.violet.vn/uploads/blogs/754645/facebook-icon.png" title=
"Đăng nhập Facebook"></a></li>
<li><a href=
"javascript:popUp('https://login.yahoo.com/config/login?.src=fpctx&.intl=vn&.pd=c
%3d6t7evjap2e6cwwsb86qvdqk-&.done=http%3a%2f%2fvn.yahoo.com%2f')">
<img src="http://d4.violet.vn/uploads/blogs/754645/yahoo-icon.png"
title="Đăng nhập Yahoo"></a></li>
<li><a href=
"javascript:popUp('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/')">
<img src=
"http://d4.violet.vn/uploads/blogs/754645/document-icon.png" title=
"Đăng nhập Docs"></a></li>
<li><a href="javascript:popUp('http://www.youtube.com/')"><img src=
"http://d4.violet.vn/uploads/blogs/754645/you-tube-icon.png" title=
"Đăng nhập Youtube"></a></li>
<li><a href="javascript:popUp('http://www.tivi24h.com/')"><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="javascript:popUp('http://game.24h.com.vn/')"><img src=
"http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/64/Actions-games-config-theme-icon.png"
title="Game 24h"></a></li>
<li><a href="javascript:popUp('http://mp3.zing.vn/')"><img src=
"http://d4.violet.vn/uploads/blogs/754645/music-icon.png" title=
"Nhạc Zing"></a></li>
Trang 4<li><a href=
"javascript:popUp('http://mr.tnd.vn/photoshop-online/')"><img src=
"http://d4.violet.vn/uploads/blogs/754645/photoshop-cs2-tuti-icon.png"
title="Photoshop online"></a></li>
<li><a href=
"javascript:popUp('http://trangnhat.net/tienich/tiengviet.htm')"><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=
"javascript:popUp('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')">
<img src=
"http://d4.violet.vn/uploads/blogs/754645/language-skills-icon.png"
title="Google dịch"></a></li>
<li><a href=
"javascript:popUp('http://icon-generator.net/')"><img src=
"http://icons.iconarchive.com/icons/wilnichols/alumin-folders/64/iOS-Icons-Folder-icon.png"
title="Tạo icon"></a></li>
<li><a href=
"javascript:popUp('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=
"javascript:popUp(' Địa chỉ liên kết')">
<img src=
" Link ảnh"
title="Thông tin cần hiển thị"></a></li>
Trang 5Chúc thầy cô và các bạn thành công!