_Đây là Top Menu được đặt ở đầu blog và có nút ( Button ) Ẩn, Hiện. Các bạn có thể xem Demo
Các bạn bấm Update bên dưới để xem kết quả.
Dashboard→ Mẫu→ Chỉnh sửa Html. Sử dụng cặp phím [Control+F] để tìm các thẻ:
_Đầu tiên các bạn đặt code CSS vào trước thẻ đóng
_Copy Javascript đặt trong cặp thẻ
_Code Html đặt ngay sau thẻ
Save và trở lại trang Web xem kết quả.
Click button: xem code
Các bạn bấm Update bên dưới để xem kết quả.
| Source Code | Result |
|---|---|
|
|
Dashboard→ Mẫu→ Chỉnh sửa Html. Sử dụng cặp phím [Control+F] để tìm các thẻ:
_Đầu tiên các bạn đặt code CSS vào trước thẻ đóng
]]</b:skin>_Copy Javascript đặt trong cặp thẻ
<head>...</head>_Code Html đặt ngay sau thẻ
<body>Save và trở lại trang Web xem kết quả.
Click button: xem code
Code:<style>
.ShowHide {
background: none repeat scroll 0 0 #2e2f2e;
border-bottom: 2px solid #eee;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-left: 2px solid #eee;
border-right: 2px solid #eee;
box-shadow: 1px 2px 9px #555;
cursor: pointer;
display: block;
padding: 0 7px;
height: 25px;
position: absolute;
right: 16px;
float: right;
top: 0px;
z-index: 999;
}
#banner {
visibility: hidden;
display: none;
}
#banner {
background-color: #333;
border-bottom: 1px solid #eee;
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.3);
height: 48px;
left: 0;
display: block;
margin-bottom: 50px;
padding: 5px 15px;
position: fixed !important;
right: 0;
top: 0;
z-index: 999;
}
.nav {
margin: 1%;
}
.nav a {
margin-left: -3px;
padding: 12px 20px;
outline: none;
border: 1px solid #121212;
border-right: none;
background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.34) 100%) repeat scroll 0 0 transparent;
box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
color: #777777;
vertical-align: top;
text-decoration: none;
text-shadow: 0 -1px #0F0F0F;
font-size: 13px;
line-height: 21px;
cursor: pointer;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.nav a:hover {
color: #f6f6f6;
}
.nav a:first-child {
border-radius: 6px 0 0 6px;
}
.nav a:last-child {
border-radius: 0 6px 6px 0;
}
.nav a:active {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}
.nav a.highlight {
background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.44) 100%) repeat scroll 0 0 transparent;
color: #f6f6f6;
}
.nav a:last-child {
border-right: 1px solid #121212;
}
</style><script type="text/javascript">
var showHeader = false;
function ShowHideBanner() {
showHeader = !showHeader;
var nav = document.getElementById("banner");
if (showHeader) {
banner.style.visibility = "visible";
banner.style.display = "block";
} else {
banner.style.visibility = "hidden";
banner.style.display = "none";
}
}
</script><div id="banner">
<script src="http://use.edgefonts.net/open-sans.js"></script>
<div class="nav">
<a href="/" class="highlight">Home</a>
<a href="javascript:void(0);">About</a>
<a href="javascript:void(0);">Tool</a>
<a href="javascript:void(0);">Html Edit</a>
<a href="javascript:void(0);">Encode</a>
<a href="javascript:void(0);">Contact</a>
<a title="Tải lại trang" id="refresh_output" href="javascript:document.location.reload();">↺</a>
</div>
<div class="ShowHide" name="Hide" style="z-index:999;top:58px;height:28px" title="Hide" onclick="ShowHideBanner();">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBq1ILXHVBhuu6odErz2x6ADpI2BqulJZiKnVRgXn3I8LssKaIDuyy1I95Ql9kwcFmA1Sn4pYeSI4EfkTTqsc7oifWgDY7noVxZuzvIOQvEpDIEm_UNwFRoxlbpfnPylWglNrkiop6aSo/s1600/arrow_up.png" width="20px">
<a style="visibility:hidden;">
</a>
</div>
</div>
<div class="ShowHide" name="Show" style="position:fixed;z-index:990" title="Show Menu Bar" onclick="ShowHideBanner();">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH6YlRpyLo3La7aFq7upnHh-A27VbAw2NVmEgFcokRtiEUvciM714tm14u49TNkXpemb1pjKhGmOKOEhnOe5wCayCJ1VgLf3wEBjyOWtYyB-BNGOYrH3Jz0KGYQxK_a2eohAchQugWd-Q/s1600/down.png" width="20px">
<a style="visibility:hidden;">
</a>
</div>
