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>
Chữ in đậm : <b> Nội_dung_chữ_in_đậm </b>
Chữ in nghiêng : <i> Nội_dung_chữ_in_nghiêng </i>
Chèn code : <i rel='pre'> Nội_dung_code_đã_mã_hóa </i>
Chèn link liên kết : <a href = ' Link '> Tên_link </a>
Dùng link ảnh chèn trực tiếp vào comment
Don't spam link here. Pls
Mã Hóa
chèn link cho menu chính, thêm menu con thì làm sao bác? lần đầu tôi thấy menu đc thiết kế theo kiểu javascript:void(0)
Trả lờiXóaMenu được thiết kế theo kiểu simple, nếu bạn muốn thêm menu con:
Xóa_ Sử dụng mẫu menu trong bài: http://testtemplatekhoi.blogspot.com/2014/06/tao-thanh-menu-ngang-ep-cho-blogger.html. Thay đổi css và html cho phù hợp với nhu cầu sử dụng. Chỉnh sửa width, height lại cho phù hợp ý muốn của bạn
_ Còn "javascript:void(0)" : bạn có thể thay thành link bài viết của Bạn
ok, m rất kết kiểu menu ẩn hiện này, đang thử làm....thank and have fun
Trả lờiXóaBó tay, nếu lấy code của mẫu menu bạn giới thiệu thì m phải chỉnh sửa lại cho nó ẩn hiện nữa, mà về vụ này thì m ko rành....hic, bây giờ nó đang nổi cố định, muốn có nút ẩn hiện mà khó quá
Trả lờiXóaDo gần đây bận công việc nên không có bài mới, nên mình chưa thể update theo như bạn yêu cầu. Bạn có thể gửi email qua Contactmình sẽ cố gắng và gửi cho bạn trong thời gian sớm nhất.
XóaChào bạn
Bạn có thể Xem thử và Download html này có chú thích từng phần cho bạn thay đổi code theo ý muốn
Trả lờiXóaok b, tại vì m đang cần gấp để gắn vào blog này: http://aliensf.blogspot.com/
Xóaủa mà sao m gửi contact ko đc? cái nút recatpcha nó ko hiện mã capcha......
(chào b, vậy b có thể thêm cho m cái nút ẩn hiện cho mẫu menu 1 hoặc 5 trong này: http://testtemplatekhoi.blogspot.com/2014/06/tao-thanh-menu-ngang-ep-cho-blogger.html
ko câu thúc thời gian đâu, khi nào rảnh b add thêm vào đc xong rồi thi gửi qua mail cho m.....còn về size, width, height menu thì cứ để như thế, khi gắn vào blog thì m chỉnh sửa lại là đc.
Thanks)
Đã gửi email cho bạn. Good luck!
Xóa