<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.min.v1.4.1.js"></script>
<style type="text/css">
.menu{
font-family: arial;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.item{
position:relative;
background-color:#f0f0f0;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
.item2{position:relative;
background-color:#f0f0f0;
float:left;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;}
.link{
position:absolute;
width:48px;
height:48px;
left:2px;
top:2px;
}
.icon_home{
background:transparent
url(https://lh3.googleusercontent.com/-0-xRezGdhDk/Tj5h1B4UhqI/AAAAAAAAAew/2Eb5bnKu2wo/home.png)
no-repeat top left;
}
.icon_mail{
background:transparent
url(https://lh3.googleusercontent.com/-I9atwak6dys/Tj5h1dD3wzI/AAAAAAAAAew/FsY3BEwB7jA/mail.png)
no-repeat top left;
}
.icon_help{
background:transparent
url(https://lh6.googleusercontent.com/-XkkIV29Vl0E/Tj5h1PW_EaI/AAAAAAAAAew/L1dkyfYxPsA/help.png)
no-repeat top left;
}
.icon_find{
background:transparent
url(https://lh6.googleusercontent.com/-6VT_BeB1pBM/Tj5h1EmDzVI/AAAAAAAAAew/-wUcKlfqY0Q/find.png)
no-repeat top left;
}
.icon_photos{
background:transparent
url(https://lh6.googleusercontent.com/-61-sXFx6Cvs/Tj5h1nF90EI/AAAAAAAAAew/rpGO2Bgqs68/photos.png)
no-repeat top left;
}
.item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px;
padding:0px;
background:transparent;
display:none;
}
.item_content h2{
color:#333;
text-shadow: 1px 1px 1px #fff;
background-color:transparent;
font-size:16px;
margin:0px;
padding:0px;
text-transform: uppercase;
}
.item_content a{
margin-right:7px;
margin-top:0px;
color:#333;
text-shadow: 1px 1px 1px #333;
text-decoration:none;
font-size:13px;
}
.item_content a:hover{
color:#0b965b;
}
.item_content input{
border:1px solid #ccc;
padding:1px;
width:155px;
float:left;
margin-right:5px;
}
</style><script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/rockroll_menu.js"></script><div class="menu"> <div class="item2"> <a class="link icon_home"></a> <div class="item_content"> <h2>Trang chủ§</h2> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> </div> </div> <div class="item2"> <a class="link icon_mail"></a> <div class="item_content"> <h2>Liên hệ</h2> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> </div> </div> <div class="item2"> <a class="link icon_help"></a> <div class="item_content"> <h2>Hỗ trợ</h2> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> </div> </div> <div class="item2"> <a class="link icon_find"></a> <div class="item_content"> <h2>Tìm kiếm</h2> <input type="text" /> <a href="">Go</a> </div> </div> <div class="item2"> <a class="link icon_photos"></a> <div class="item_content"> <h2>Hình ảnh</h2> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> </div> </div>
<div class="menu"> <div class="item"> <a class="link icon_home"></a> <div class="item_content"> <h2>Trang chủ§</h2> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> </div> </div> <div class="item"> <a class="link icon_mail"></a> <div class="item_content"> <h2>Liên hệ</h2> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> </div> </div> <div class="item"> <a class="link icon_help"></a> <div class="item_content"> <h2>Hỗ trợ</h2> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> </div> </div> <div class="item"> <a class="link icon_find"></a> <div class="item_content"> <h2>Tìm kiếm</h2> <input type="text" /> <a href="">Go</a> </div> </div> <div class="item"> <a class="link icon_photos"></a> <div class="item_content"> <h2>Hình ảnh</h2> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> </div> </div> </div>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js"></script> <script src="http://traidatmui-tips.googlecode.com/files/flipmenu.js" type="text/javascript"> </script> <style> .flipmenu { font-family: Arial; font-size: 14px; font-weight: bold; position: relative; } .flipmenu_box { overflow: hidden; position: relative; } .flipmenu_link,.flipmenu_link_over,.flipmenu_link_active { width:300px; text-decoration: none; text-shadow:1px 1px 1px #fff; text-transform: uppercase; color: #000000; cursor: pointer; margin-top:2px; padding: 6px; position: absolute; background: #fdd78d; background: -moz-linear-gradient(top, #fbdc88 0%, #fbbf57 50%, #fac319 51%, #fb9709 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc88), color-stop(50%,#fbbf57), color-stop(51%,#fac319), color-stop(100%,#fb9709)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc88', endColorstr='#fb9709',GradientType=0 ); -webkit-border-radius: 5px; -moz-border-radius: 5px; } .flipmenu_link_over, .flipmenu_link_active { text-decoration: none; text-shadow:1px 1px 1px #eee; color: #fa0320; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); </style> <div id="flip_menu"> <a href="#">Tên menu 1</a> <a href="#">Tên menu 2</a> <a href="#">Tên menu 3</a> <a href="#">Tên menu 4</a> <a href="#">Tên menu 5</a> <a href="#">Tên menu 6</a> <a href="#">Tên menu 7</a> <a href="#">Tên menu 8</a> <a href="#">Tên menu 9</a> <a href="#">Tên menu 10</a> </div>
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script><script language='JavaScript'>
var msg="Welcome to NAMKNA.BLOGSPOT>COM";
function disableIE() {if (document.all) {alert(msg);return false;}
}
function disableNS(e) {
if (document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {alert(msg);return false;}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);document.onmousedown=disableNS;
} else {
document.onmouseup=disableNS;document.oncontextmenu=disableIE;
}
document.oncontextmenu=new Function("alert(msg);return false")
</script><b:if cond='data:blog.pageType == "item"'> code bước 3 </b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'> code bước 3 </b:if>Chúc bạn thành công!
<style type='text/css'>
.img-thumbnail{position: relative;z-index: 0;}
.img-thumbnail:hover{background-color: transparent;z-index: 50;}
.img-thumbnail span{position: absolute;background-color: #ffffff;padding: 5px;left: -1000px;border: 1px solid #000;visibility: hidden;color: black;text-decoration: none;}
.img-thumbnail span img{border-width: 0;padding: 2px;}
.img-thumbnail:hover span{visibility: visible;top: -100px;left:100px;}
</style>
<a class="img-thumbnail" href="#">
<img src="link ảnh1" border="0" height="98" width="130"/>
<span>
<img src="link ảnh1"/>
</span>
</a>
