Cảm nhận tư duy và tổng hợp kiến thức

Hiển thị các bài đăng có nhãn Menu. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Menu. Hiển thị tất cả bài đăng

Thứ Tư, 10 tháng 1, 2018

Menu Navigation neo đầu trang Web khi cuộn màn hình

Mẫu Menu Navigation có hình dáng như thế nầy:
Việc trước tiên, bạn hãy truy cập vào Blogger Dashboard bên trong tài khoản Google.
Mở phần Template ở mục  Chủ đề, chọn Tab Edit Html (Chỉnh sửa Html).
Trình tự dùng tổ hợp phím  Ctrl + F để tìm kiếm các thẻ màu xanh mình nêu bên dưới, để chép Code dán vào như hướng dẫn.
- Đặt trong thẻ đóng </header> đoạn trong khung Source Code sau:
<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='#'>Chapter 1</a>
<ul class='sub-menu'>
<li itemprop='name'><a href='#' itemprop='url'>Part 1</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 2</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 3</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 4</a></li>
</ul>
</li>
<li itemprop='name'><a href='#' itemprop='url'>Chapter 2</a>
</li>
<li><a href='#'>Chapter 3</a>
<ul class='sub-menu'>
<li itemprop='name'><a href='#' itemprop='url'>Part 1</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 2</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Part 3</a></li>
</ul>
</li>
<li itemprop='name'><a href='#' itemprop='url'>Chapter 4</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Chapter 5</a></li>
</ul>
</div>
</nav>
<div class='clear'/>
<!-- secondary navigation menu end -->
- Đặt trong thẻ </b:skin> đoạn trong khung Source Code sau:
/*----navi-----*/
#nav {
font: normal bold 12px Arial, sans-serif;
text-transform: uppercase;
height: 59px;
line-height: 50px;
padding: 0 28px;
background: #F4F4F4;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
#main-nav {
margin: 0 auto;
width: 100%;
height: 60px;
background:#000;
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:#fff;}
#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);
}
/* Page Navigation */
.pagenavi {
clear:both;margin:-5px 0 10px;margin-top:10px;padding:15px;text-align:left;font-size:13px;
}
.pagenavi span,.pagenavi a {
padding: 9px 15px;
display: inline-block;
background-color: #fff;
color: #333;
margin-left: 4px;
border: 1px solid #ddd;
margin-right: 4px;
transition: all .2s ease;}
.pagenav .pages {background-color:#f9f9f9;color:#999;transition:all .2s linear;}
.pagenavi a:hover {background-color:#20C1DD;color:#fff;}
.pagenavi .current { background-color: #20C1DD;
color: #fff;
border: 1px solid #20C1DD;}
.pagenavi .pages {
display:none;
}
- Đặt trên thẻ </head>  đoạn Code sau:
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
slideshow: true,
directionNav:true,
slideshowSpeed: 5000,controlNav: true,
smoothHeight: true,
slideDirection: 'horizontal'
});
jQuery('.slides').addClass('loaded');
});
var aboveHeight = $('#leader-wrapper').outerHeight();
$(window).scroll(function(){
if ($(window).scrollTop() > 200){
$('#main-nav').addClass('fixed-nav').css('top','0').next()
.css('padding-top','0px');
} else {
$('#main-nav').removeClass('fixed-nav').next()
.css('padding-top','0');
}
});
});
//]]>
</script>
Kết quả bạn sẽ có bản demo giống như template như sau:
DEMO
http://khanhnguyen02.blogspot.com/
Source code nầy mình sưu tập được từ một Free template. Các bạn có thể dùng thử và tùy biến nhé. Chúc các bạn thành công với những gì mà mình chia sẽ.

Người viết: Nguyễn Đạt Khánh.

Bạn có thể xem thêm các chủ đề:
  • Làm thế nào đăng ký tài khoản Google?
  • Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
  • vị trí của Javascript và Jquery

Share:

Thứ Hai, 28 tháng 8, 2017

Menu Navigation xổ xuống màu sắc trang nhã cho các Blogger

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 == &quot;&quot;) {this.value = &quot;Search for games, music, movies...&quot;;}' onfocus='if (this.value == &quot;Search for games, music, movies...&quot;) {this.value = &quot;&quot;;}' 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



Share:

Thứ Sáu, 11 tháng 8, 2017

Thiết kế menu Navigation 2 (Drop Down menu) cho Blog/ Web


Đặt dưới thẻ </header>

<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://www.soratemplates.com/2016/01/mag-zilla-blogger-templates.html' itemprop='url'>Download This Template</a></li>       
</ul>
        <div id='searchformfix'>
          <form action='/search' id='searchform'>
            <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search for games, music, movies...&quot;;}' onfocus='if (this.value == &quot;Search for games, music, movies...&quot;) {this.value = &quot;&quot;;}' 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'/> 
      <!-- secondary navigation menu end -->
Đặt trong thẻ </b:skin>

/*----navi-----*/
#nav {
font: normal bold 12px Arial, sans-serif;
text-transform: uppercase;
height: 59px;
line-height: 50px;
padding: 0 28px;
background: #F4F4F4;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
#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);
}
}
Đặt trên thẻ </head>

<script type='text/javascript'>
//<![CDATA[ 
jQuery(document).ready(function($){
  $(window).load(function(){
    $('.flexslider').flexslider({
        animation: "fade",
        slideshow: true,
        directionNav:true,
        slideshowSpeed: 5000,controlNav: true,
        smoothHeight: true,
        slideDirection: 'horizontal'
        });
   jQuery('.slides').addClass('loaded');
  }); 
 var aboveHeight = $('#leader-wrapper').outerHeight();
        $(window).scroll(function(){
                if ($(window).scrollTop() > 200){
                $('#main-nav').addClass('fixed-nav').css('top','0').next()
                .css('padding-top','0px');
                } else {
                $('#main-nav').removeClass('fixed-nav').next()
                .css('padding-top','0');
                }
        });
});
//]]>
</script>
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
Đặt trên đoạn code: <b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>
 @media only screen and (max-width:1024px){
        #selectnav1 {
          background: none repeat scroll 0 0 #333;
          border: 1px solid #232323;
          color: #FFF;
          width: 418px;
          margin: 8px 0px;
          float: left;
        }
.selectnav {
          display:block;
          width:50%;
          margin:0;
          padding:7px;
        }
}
      @media only screen and (max-width:768px){
        #selectnav1 {
          background: none repeat scroll 0 0 #333;
          border: 1px solid #232323;
          color: #FFF;
          width: 410px;
          margin: 8px 0px;
          float: left;
        }
        .selectnav {
          display:block;
          width:50%;
          margin:0;
          padding:7px;
        }
      }
      /* MEDIA QUERY */
      @media only screen and (max-width:1220px){
        #outer-wrapper {
          margin:0 auto;
width: 1000px;
        }
        #post-wrapper {
          width: 670px;
          max-width: 670px;
        }
                div#mywrapper {
          float: left;
          width: 670px;
        } 
.blog_featured_post.third, .blog_featured_post.fourth {
    width: 33.9%;
    height: 163px;
}
#sidebar-wrapper { 
max-width: 259px;
} 
#main-nav {
margin: 0 auto;
width: 1000px;
}
#sidebar-narrow { 
display: none;
}

.main-menu {
width: 940px;
margin: 0 auto;
}
}
@media only screen and (max-width:1024px){
.header {
    width: 100%;
    max-width: 100%;
    text-align: center;
}
.header img {
margin: 0 auto;
max-width: 100%;       
}
.header-right {
margin: 15px 0 20px 0;
width: 100%;
max-width: 100%;        
}

#menu-main {
    display: none;
}
.main-menu {
width: 680px;
margin: 0 auto;
}
#searchform input[type=text]:hover,#searchform input[type=text]:focus {width:150px;}
#my-slider {
    margin-left: 15px;
}
div#mywrapper {
    width: 100%;
}
#post-wrapper {
    width: 100%;
    max-width: 100%;
}
#sidebar-wrapper {
width:100%;
max-width:100%;
padding-left: 0;
border-left: 0;        
}

div#main {
    width: auto;
}
.blog_featured_post.second,.blog_featured_post.first,.blog_featured_post.third,.blog_featured_post.fourth {width: 100%;height:300px;margin-bottom: 9px;}
.blog_featured_post a .blog_contents{left:15px;right:15px;bottom:10px;}
.blog_featured_post.first a .blog_contents h3,.blog_featured_post a .blog_contents h3 {font-size: 20px;}
.blog_contents span{font-size:10px;padding:3px 10px;}
.blog_contents span:before{border-width: 17px 7px 0px;}
.blog_contents span:after{border-width: 0px 7px 16px;}
.main-menu {
padding: 5px 20px;
}
#searchformfix {
margin-top: 8px;
    width: 215px;
}
#searchform input[type=&quot;text&quot;] {
          width: 144px;}
#main-nav,#outer-wrapper {
width: 720px;
}
#slider {
overflow: hidden;
width: 100%;
}
#bottombar .center,#bottombar .center1,#bottombar .right, #bottombar .left{width:50%}
#related-posts a {
    width: 213px;
}
.breadcrumbs {
margin-left: 0;        
}
}
@media only screen and (max-width:767px){
#beakingnews {
width: 100%;
}      
#main-nav, #outer-wrapper {
width: 440px;
}
div#singlepage {
    width: 100%;
}
#menu-main {
    display: none;
}
.main-menu {
padding: 5px 20px;
width: 100%;
box-sizing: border-box;
}
#main-nav.fixed-nav {
position: relative;
opacity: 1;        
}
#selectnav1 { 
width: 100%;        
}
#my-slider {
margin-left: -6px;
}
div.conty {
width: 400px;
margin: 0 auto;
}
#searchformfix {
display: none;
}
.slider-navigator-outer {
display: none;
}
        #post-wrapper, #sidebar-wrapper { 
          width:100%;
          max-width:100%
        }
        .active {
          display: block;
        }
        .post-body img {
          max-width:100%;
        }
.img-thumbnail {
    margin: 0 0 15px 0;
    width: 100%;
    height: 220px;
}
.img-thumbnail img {
    width: 100%;
    height: 220px;
}
        .stylebox .widget {
          padding:0 0 10px 0;
        }
        #stylebox-1 .widget, #stylebox-3 .widget, #stylebox-5 .widget {
          padding:0 0 10px 0;
        }
        #stylebox-2 .widget, #stylebox-4 .widget, #stylebox-6 .widget ;stylebox-7 .widget{
          padding:0 0 10px 0;
        }
        .sidebar-container, .post-container {
          padding:15px 0 0px;
        }
        .widget li, .BlogArchive #ArchiveList ul.flat li {padding:0;}
ul.xpose_thumbs1 {
width: 100%;
}
.large-thumb {
width: 100%;
box-sizing: border-box;        
}
ul.xpose_thumbs22 {
width: 100%;        
}
ul.xpose_thumbs22 li, ul.xpose_thumbs2 li {
overflow: hidden;        
}
.stylebox {
width: 100%;        
}
.gallery-posts .def_wgr:first-child {
width: 100%;
margin: 0 0 20px 0;        
}
.gallery-posts .def_wgr:first-child img {
    width: 100%;
}
.gallery-posts .def_wgr {
    min-width: 76px;
    width: 76px;
    margin: 0 0 0px 0px;
}
.gallery-posts .def_wgr img {
    width: 76px;
    height: 76px;
}
#bottombar .center, #bottombar .center1, #bottombar .right, #bottombar .left {
    width: 100%;
}
#bottombar .left .widget, #bottombar .center .widget, #bottombar .center1 .widget {
    margin: 0 0 15px 0;
}
.footer-left {
    float: left;
    margin: 20px 0;
    color: #949494;
    width: 100%;
    text-align: center;
}
.footer-right {
display: none;        
}
.back-to-top {
display: none;        
}
.breadcrumbs {
display: none;        
}
.item .blog_featured_posts, .static_page .blog_featured_posts {
display: none;        
}
.item .post-container, .static_page .post-container {
padding: 0;        
}
h1.post-title a, h1.post-title {
    font-size: 24px !important;
}
#related-posts a {
    width: 183px;
}
}
      

@media only screen and (max-width:479px){
#outer-wrapper, #main-nav {
width: 300px;
}

ul.xpose_thumbs .xpose_thumb img {
    height: inherit;
        }
.top-menu {
padding: 0 10px 0 0;        
}

div#singlepage {
    width: 100%;
}
div.conty {
width: 254px;
margin: 0 auto;
}
#header-wrapper {
min-height: auto;        
}
.header {
margin: 0;        
}
.main-menu {
    padding: 5px 10px;
}
#searchformfix, .header-right {
display: none;
}
#content-wrapper {
padding: 0px 10px 0;        
}
        ul.xpose_thumbs1,ul.xpose_thumbs22{width:100%}
        #menu-main {
          display: none;
        }
        #sidebar-narrow{display:none}
        .header, .header-right, .stylebox,.stylebox1  {
    
          width:100%;
          max-width:100%
        }
        .header img {
          margin: 20px auto 0;
        }
        .largebanner .widget, #bottombar {
          padding:8px;
        }
        .stylebox .widget-content,.stylebox1  .widget-content {
          padding:0px;
        }
        h2.post-title, h1.post-title {
          font-size:16px;
        }
        #stylebox-1 .widget, #stylebox-3 .widget, #stylebox-2 .widget, #stylebox-4 .widget, #stylebox-5 .widget, #stylebox-6 .widget ,#stylebox-7 .widget{
          padding:0 0 8px 0;
        }
        .comments .comment-block, .comments .comments-content .inline-thread {
          padding:10px !important;
        }
        .comment .comment-thread.inline-thread .comment {
          margin: 0 0 0 0 !important;
        }
        .footer-left, .footer-right {
          text-align:center;
        }
.blog_featured_post.second, .blog_featured_post.first, .blog_featured_post.third, .blog_featured_post.fourth {height: 200px;}
ul.xpose_thumbs1 .xpose_thumb img {
    height: 200px;
}
ul.xpose_thumbs1 .xpose_thumb {
line-height: 1.5;        
}
h1.post-title a, h1.post-title {
    font-size: 20px !important;
}  
.item .post-container, .static_page .post-container {
    padding: 10px 0 0;
} 
div#author-box, .comment-info {
display: none;        
}
#related-posts a {
    width: 100%;
    margin-right: 0;
} 
#sidebar .widget-content {
overflow: hidden;    
}
h2.post-title {
clear: both;
}
.img-thumbnail, .img-thumbnail img {
height: 180px;        
} 
.index .post {
padding: 0 0 15px;        
}
}
      
@media screen and (max-width:319px){
#outer-wrapper, #main-nav {
width:220px;
}
#menu-main {
display: none;
}
.blog_featured_post.second, .blog_featured_post.first, .blog_featured_post.third, .blog_featured_post.fourth {
    height: 160px;
}
.blog_featured_post.first a .blog_contents h3, .blog_featured_post a .blog_contents h3 {
    font-size: 17px;
}
.blog_featured_post.first a .blog_contents h3 {
    font-size: 17px !important;
}
.blog_featured_posts {
margin-bottom: 5px        
}
.post-container {
    padding: 0;
}
div#mywrapper {
width: 100%;        
}
.img-thumbnail, .img-thumbnail img {
    height: 130px;
}
#sidebar-narrow, #sidebar-wrapper, .xpose_meta_comment, .more_meta{display:none !important}   
ul.xpose_thumbs22 .xpose_thumb2, ul.xpose_thumbs2 .xpose_thumb2 {display: none;}
ul.xpose_thumbs22 li, ul.xpose_thumbs2 li {min-height: auto;}
.gallery-posts .def_wgr:first-child {
min-width: 100%;        
height: 180px;
}
.gallery-posts .def_wgr {
    min-width: 50%;
    width: 50%;
}
.gallery-posts .def_wgr img {
    width: 100%;
    height: 90px;
}
.gallery-posts .def_wgr a.first_A {
    height: 90px;
}
h1.post-title a, h1.post-title {
    font-size: 19px !important;
}
}   
</style>
Nếu bạn muốn cho menu Navi đặt lên trên Banner, và thu gọn title trên Banner về bên trái, bạn đặt Code dưới đây phía trên mã code vừa đặt vào thẻ </b:skin>

/* HEADER WRAPPER */
#header-wrapper {
margin:0 auto;
overflow:hidden;
padding: 0 30px;
min-height: 154px;
    max-width: 1160px;
}
.header {
float:left;
width:45.7%;
max-width:457px;
margin: 27px 0;
}
.header h1.title,.header p.title {
font:normal bold 40px Fjalla One, Arial, Helvetica, sans-serif;
margin:0 0 0 0;
text-transform:uppercase;
}
.header .description {
color:#555555;
}
.header a {
color:#333333;
}
.header a:hover {
color:#ffd966;
}
.header img {
display:block;
}
.header-right {
float: right;
padding: 0;
overflow: hidden;
margin: 32px 0px 32px 0;
width: 70%;
max-width: 728px;
max-height: 90px;
}
.header-right img {
display:block;
}
.ngay-gio{font-size:11px;font-style:italic;float:right;color:#454545;font-weight:400;margin:0;padding:0}
DEMO:
http://tinhockhanhdat9.blogspot.com/

Chúc các bạn thành công.
Người viết: Nguyễn Đạt Khánh



Share:

Thứ Năm, 10 tháng 8, 2017

Source Code thiết kế menu xổ xuống (Drop down) cho Web/Blogspot

Dưới đây là một menu Drop Down Navigation có trình đơn xổ xuống. Các bạn có thể tự thay đổi hay chế tác lại để dùng trong thiết kế Web / Blog. Vỏn vẹn chỉ có 2 thao tác đơn giản: Cho Css vào trong </b:skin> và tạo một Widget. Lưu ý: Trước khi làm, bạn luôn quan tâm Save lại Template đã làm trước đó nhé, Cần nhất là để tạo một bản template backup khi cần thiết. 
Cách làm như sau:

- Truy cập vào trang Blogger > vào mục Layout (Bố cục)


- Chọn Thêm tiện ích dưới tiện ích tiêu đề trang và chọn thêm HTML/JavaScript khi có cửa sổ tiện ích  bật ra như ảnh trên, và paste đoạn code này vào:
/*----- Drop Down Menu ----*/ #drnavbar { background: #999999; width: 820px; color: #a64d79; margin: 0px; padding: 0; position: relative; border-top:0px solid #d9ead3; height:35px; } #drnav { margin: 0; padding: 0; } #drnav ul { float: left; list-style: none; margin: 0; padding: 0; } #drnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #drnav li a, #drnav li a:link, #drnav li a:visited { color: #a64d79; display: block; font:normal 13px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #drnav li a:hover, #drnav li a:active { background: #6fa8dc; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #drnav li { float: left; padding: 0; } #drnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #drnav li ul a { width: 140px; } #drnav li ul ul { margin: -25px 0 0 161px; } #drnav li:hover ul ul, #drnav li:hover ul ul ul, #drnav li.sfhover ul ul, #drnav li.sfhover ul ul ul { left: -999em; } #drnav li:hover ul, #drnav li li:hover ul, #drnav li li li:hover ul, #drnav li.sfhover ul, #drnav li li.sfhover ul, #drnav li li li.sfhover ul { left: auto; } #drnav li:hover, #drnav li.sfhover { position: static; } #drnav li li a, #drnav li li a:link, #drnav li li a:visited { background: #ffd966; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #drnav li li a:hover, #drnavli li a:active { background: #3d85c6; color: #f4cccc; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }

- Chọn vào Design (Mẫu)> Edit HTML (Chỉnh sửa HTML)
- Dùng tổ hợp phím Ctrl+F tìm kiếm thẻ ]]></b:skin> và thêm đoạn CSS này lên trên nó:
<div id='drnavbar'> <ul id='drnav'> <li> <a href='http://tinhockhanhdat10.blogspot.com/'>Trang chủ</a> </li> <li> <a href='http://tinhockhanhdat10.blogspot.com/search/label/B%E1%BA%A7u%20r%C6%B0%E1%BB%A3u%20t%C3%BAi%20th%C6%A1'>Bầu rượu túi thơ</a> </li> <li> <a href='#'>Tin học</a> <ul> <li><a href='http://tinhockhanhdat10.blogspot.com/search/label/K%E1%BB%B9%20thu%E1%BA%ADt%20tin%20h%E1%BB%8Dc'>Kỹ thuật tin học</a></li> <li><a href='http://tinhockhanhdat10.blogspot.com/search/label/Win%2010'>Win 10</a></li> <li><a href='http://tinhockhanhdat10.blogspot.com/search/label/M%E1%BA%A1ng%20IT'>Mạng It</a></li> </ul> </li> <li> <a href='http://tinhockhanhdat10.blogspot.com/p/lien-he-voi-toi-gioi-thieu-blog-cua-toi.html'>Liên hệ</a> </li> </ul> </div>
Các đoạn CSS trên phần thêm vào trong thẻ <b:skin> bạn có thể lưu ý các thành phần cấu trúc để thay đổi giao diện. 

Cuối cùng là lưu template lại và tận hưởng thành quả.
Mời các bạn xem bản Demo nhé. Chúc các bạn thành công.

DEMO:
http://tinhockhanhdat10.blogspot.com/
Người viết: Nguyễn Đạt Khánh

Share:

Thống kê Blogspot

Bài có thể xem

 
BACK TO TOP