Trang thực hành ứng dụng:
Để hiểu thêm nhiều về cách thiết kế Web trên nền tảng Blogger, bạn có thể vào tham khảo bài:
- Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
- Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot
Nếu như các bạn đã biết rồi, có thể vào thẳng vấn đề trong Blogger với các bước như sau:
- Layout: Phải có sẳn Widget Label, nếu không có phải chịu khó chọn Add Widget (thêm tiện ích), và chọn tên Widget Label để thêm vào.
- Template: Bạn vào Edit Html(Chỉnh sữa mẫu). Nhấn Ctrl+F tìm thẻ: </header> và chép dán Source dưới đây phía dưới trên nó: (Tùy kiểu mà bạn muốn)
Nếu Đặt dưới thẻ </header>: Menu sẽ xuất hiện dưới Banner.
Nếu đặt dưới thẻ <
Body>: Menu sẽ xuất hiện trên đầu cùng trang Web.
Nếu đặt trên thẻ
</body> đóng như vầy: Nó sẽ xuất hiện phía dưới cùng trang Web.
Bạn cũng có thể dùng
Widget Html để đặt nó vào nơi như ý trên
Layout thử xem nhé.
<nav class='pi-navigation' id='main-nav'>
<div class='main-menu'>
<ul class='menu' id='menu-main' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
<li itemprop='name'><a class='active' expr:href='data:blog.homepageUrl' itemprop='url'>Home</a></li>
<li><a href='#'>Business</a>
<ul class='sub-menu'>
<li itemprop='name'><a href='#' itemprop='url'>Featured Image</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Slider</a></li>
<li itemprop='name'><a href='#' itemprop='url'>SoundCloud</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Video</a></li>
</ul>
</li>
<li itemprop='name'><a href='#' itemprop='url'>Fashion</a>
</li>
<li><a href='#'>Sports</a>
<ul class='sub-menu'>
<li itemprop='name'><a href='#' itemprop='url'>Full Width</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Right Sidebar</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Left SIdebar</a></li>
</ul>
</li>
<li itemprop='name'><a href='#' itemprop='url'>Games</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Technology</a></li>
<li itemprop='name'><a href='http://bit.ly/2ijV1ge' itemprop='url'>Contact Us</a></li>
</ul>
<div id='searchformfix'>
<form action='/search' id='searchform'>
<input name='q' onblur='if (this.value == "") {this.value = "Search for games, music, movies...";}' onfocus='if (this.value == "Search for games, music, movies...") {this.value = "";}' type='text' value='Search for games, music, movies...'/>
<input type='submit' value=''><i class='fa fa-search'/></input>
</form>
</div>
</div>
</nav>
<div class='clear'/>
Đặt trên thẻ đóng </b:skin>:
.main-menu {
width: 1160px;
margin: 0 auto;
}
#main-nav {
margin: 0 auto;
width: 100%;
height: 60px;
background: #fff; border-top: 1px solid #e8e8e8; border-bottom: 2px solid #5aa628;
}
#main-nav .menu-alert{
float:left;
padding:18px 0 0 10px ;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#main-nav ul li {
text-transform: uppercase;
font-family: 'Droid Sans', sans-serif;
font-size:16px;
position: relative;
display: inline-block;
float: left;
height:60px;
}
#main-nav ul li:last-child a{border-right:0 none;}
#main-nav ul li a {
display: inline-block;
height: 60px;
line-height: 60px;
padding: 0 16px;
text-decoration: none;
color: #b6b5b5;
font-family: Oswald,sans-serif;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
font-weight: 400;
line-height: 60px;
margin: 0;
padding: 0 .9em;
}
#main-nav ul li a.active {
color:#000;
}
#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{
display: none;
padding: 0;
position: absolute;
top: 60px;
width: 180px;
z-index: 99999;
float: left;
background: #2c2c2c;
}
#main-nav ul ul li, #main-nav ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border: 0 none;
font-size: 15px;
height: auto;
margin: 0;
}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{
border: 0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-right: 0 !important;
z-index: 99999;
color: #fff !important;
}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { color:#000;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {background: #20C1DD !important; padding-left:15px !important;padding-right:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-left:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
text-shadow:0 1px 1px #b43300;
color:#FFF;
height:50px;
line-height:50px;
border-left:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#main-menu-mob,#top-menu-mob{
background: #222;
width: 710px;
padding: 5px;
border: 1px solid #000;
color:#DDD;
height: 27px;
margin:13px 0 0 10px;
}
#top-menu-mob{
width: 350px;
margin:2px 0 0 0;
}
#main-nav.fixed-nav{
position:fixed;
top:0;
left:0;
width:100% !important;
z-index:999;
opacity:0.9;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}}
Mời các bạn thử qua công việc Hướng dẫn thiết kế Template Blogger nếu chưa biết, để làm cho bằng được một Web site ưng ý. Đây là một công việc kỹ thuật giúp các bạn có thể tự tin để tạo dựng cho mình một Web/Blog vào đời.
Chúc các bạn thành công.
Người viết: Nguyễn Đạt Khánh
Đến đây, chỉ cần nhấn chọn vào Ok 
