Chúng ta sẽ bắt đầu ngay cho nóng. Và tất nhiên Demo là blog Yolks.
1.Thêm css:
Thêm đoạn css sau đây trước ]]></b:skin> :
#nav{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpkKR5NOrmPapHopWRrx-1uwtdtW1PasCiQ7vyvTqafXthmDZb-1d-IoB6YdO21A19mMl0uyKT5fr6JuJALOQOwuQNUd0XioEqObSS-OL1G-xjX2s6UZk54Bt3rMiFpRbBf2RdzUqsqI/s1600/nav.png) repeat-x center left;
z-index:999999;
}
#nav ul{
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:600px;
}
#nav ul li{
display:inline;
float:left;
margin:0px 2px;
}
#nav a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI_KtM2rDVikIflqQllYZ5nYwLzhsAicH4uvq-nY25E8CgSL4JHpC-hO4W5ADINidwE8Z0EWfxuJnUcrYb2pA9JfiMQDIqxF1xu2vpWNlxYMrEQ1W3bFC9A2WkjxaCF7N-5s1xOk3VosY/s1600/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#nav a:hover{
background:#D9D9DA none;
color: #fff;
}
#nav a.top span, #nav a.bottom span{
float:left;
width:16px;
height:16px;
}
#nav a.top span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1-8bxqu_jUy6Ug6g0YykXnrUFdaQvACXgF9oJi4_2Sc1AzqTVepEl6962ZUxo3zpM6-5XhLyyT1PuHY3irhmVvi4aaoLDfIEAUn1j7UZF5vni1f-iBgQIVLdQXIsQAIQSgNnkV3bmYeQ/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9C_0KagCK4LeJz4DFcONJV5eDd1_he555GzKyuUyaExcBVyr5phlj-gvsbXVZtAwACID4EglCdsW-3PwKO_gJR2oMF6vRHbUqkxx0IQ5FY9czeZkvrmqFTtzwt0yNcP6Y-Up6UVaCDk/s1600/bottom.png) no-repeat center center;
}
#nav ul li.search{
float:right;
}
#nav input[type="text"]{
float:left;
border:1px solid #ccc;
margin:0px 1px 0px 50px;
padding:2px 2px 2px 2px;
}
input.searchbutton{
border:1px solid #ccc;
padding:1px;
cursor:pointer;
width:30px;
height:22px;
background:#E8E9EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfkyvxhUhIGdgnuVPxFcyvjfqn8smMHX4dOxpCnTwkUpB55tjDebZE5PjosWHn-Uk41uAQi8akep9P4X639rpxMp63KGyUouhSMWCZrwLeSmBD380Sjd5pbxJGCabRB_B25ev2gtAkJgU/s1600/search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#D9D9DA;
}
2.Thêm html:
Thêm đoạn thẻ html trên đoạn sau <body> :
<div id='top'/>
<div id='nav'>
<ul>
<li><a class='top' href='#top'><span/></a></li>
<li><a class='bottom' href='#bottom'><span/></a></li>
<li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href="Link 1 ">Tên link 1</a></li>
<li><a href="Link 2 ">Tên link 2</a></li>
<li><a href="Link 3 ">Tên link 3</a></li>
<li><a href="Link 4 ">Tên link 4</a></li>
<li><a href="Link 5 ">Tên link 5</a></li>
<li><a href="Link 6 ">Tên link 6</a></li>
<li class='search'>
<form action='/search' class='left form' method='get'>
<input class='left text gray' name='q' onblur='if (this.value == "") {this.value = "Từ Khóa Tìm Kiếm";}' onfocus='if (this.value == "Từ Khóa Tìm Kiếm") {this.value ="";}' type='text' value='Từ Khóa Tìm Kiếm'/>
<input class='searchbutton' type='submit' value=''/>
</form>
</li>
</ul>
</div>
3.Thêm javascript:
Đặt đoạn code sau vào trước </body>
<script type='text/javascript'>
//<![CDATA[ $(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
//]]>
</script>
<div id='bottom'/>
Đoạn code trên để sử dụng scroll lên/xuống.Chúc các bạn thành công.
Rất hay ^^
ReplyDelete@Độc chiêu Blog Cám ơn bác hihi
ReplyDeletetrông cũng khá bắt mắt nhưng nội dung của menu thì ít người kích vào đó lắm, chỉ có mỗi khung tìm kiếm và Home page là hay dùng
ReplyDeleteCảm ơn nhé
ReplyDeleteSao Yolks thiếu cái nút Home. Khó điều hướng bà cố
ReplyDelete- Aaaaaa... gỡ cái searchbox cũ ra rồi mà vẫn không làm được, cứu mình với Yolks ơi :(
ReplyDelete~> http://www.rs-4u.co.cc/
Bạn làm thiếu css rồi
ReplyDelete@Yolks - CSS để trước ]]> nó không nhận mới đau, giờ làm được rồi mà menu nó không chịu fade đi... =="
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteNút lên #top không hoạt động hả Yolks!
ReplyDeleteUpdate lại code cho các bạn để thể hiện tốt trên mọi trình duyệt
ReplyDelete@Huỳnh Nhật Hà Đã add rồi huhuhu
ReplyDeleteLúc ở trên cùng của blog, nó che mất 1 phần của header, làm cho logo với header right bị mất 1 phần đó vợ ạ!
ReplyDeleteHì lớp 9 rùi mà còn phải mang khăn quàng đỏ hả Yolks hề hề
ReplyDelete@Linh DungKhông sao mà hihihi
ReplyDelete@Linh Dung Nhà trường bắt chứ em đây cũng ko muốn
ReplyDelete@Cu0nglsf Chắc là do trùng css đó thôi
ReplyDelete@Cu0nglsf Nếu có thì cho mình xem trước nhé
ReplyDeleteCái này hay , áp dụng liền :D
ReplyDeleteTemp này đơn giản mà đẹp quá nhỉ , phần comment-block cho cách qua bên phải 1 tí là chuẩn luôn !
@VanLinhEx Em cố tình để nó như thế cho nó như bị cắt 1 miếng chìa vô ^^ mà chắc nghe lời a
ReplyDeleteHọc sinh lớp 9! Hihihih.... nhìn cái ảnh là bít ràu! sao ko up cái nào nhìn rõ hơn một chút đi. trời
ReplyDelete@Quốc Vịnh Cho nó bí ẩn 1 chút , vậy nó có cái style riêng
ReplyDelete@Nguyễn Văn Đức Em thấy nó làm dc rồi đó , hihi
ReplyDelete:D sáng tạo vậy chú nhóc. Vote
ReplyDeleteno comment $-)
ReplyDeletecủm ơm anh.e làm dc rồi /hy
ReplyDeletemichael kors handbags clearance, nike air max, fossil uhren, pandora schmuck, coachfactory.com, ferragamo shoes, thomas sabo, ugg australia, louis vuitton outlet stores, nike air max, ray ban wayfarer, adidas superstar, ray ban sunglasses, michael kors australia, polo ralph lauren outlet online, cheap jordan, oakley sunglasses, tory burch sandals, baseball bat, ugg, moncler, cheap nfl jerseys, jordan release, vans shoes, tommy hilfiger outlet, christian louboutin shoes, pandora, toms shoes outlet, juicy couture handbags, woolrich usa, mizuno wave, www.tommyhilfiger.nl, levis outlet, coach outlet store online, new balance, oakley outlet, louis vuitton outlet, oakley sunglasses outlet, hollister.com, polo ralph lauren outlet online, kate spade handbags, tommy hilfiger, gucci handbags, prada bags, toms shoes outlet, cheap basketball shoes, louis vuitton outlet stores, wedding dress, chanel outlet,
ReplyDeleteninest123 12.15
ReplyDeleteoakley sunglasses, louboutin shoes, michael kors outlet online, prada outlet, louis vuitton outlet online, oakley sunglasses, nike free, oakley sunglasses, replica watches, burberry outlet, christian louboutin, nike air max, tiffany jewelry, tiffany jewelry, ralph lauren outlet, ray ban sunglasses, burberry factory outlet, cheap jordans, longchamp outlet, michael kors, ralph lauren polo, michael kors outlet online, replica watches, gucci handbags, michael kors outlet, ray ban sunglasses, uggs on sale, michael kors handbags, nike outlet, nike air max, uggs on sale, uggs outlet, christian louboutin, prada handbags, uggs outlet, tory burch outlet, louis vuitton outlet, louboutin uk, longchamp bags, longchamp outlet, ray ban sunglasses, cheap oakley sunglasses, louis vuitton handbags, oakley sunglasses, louis vuitton, uggs on sale, michael kors outlet online, louis vuitton outlet
louboutin pas cher, timberland pas cher, nike trainers uk, true religion jeans, nike roshe run pas cher, nike air max pas cher, nike blazer pas cher, lunette ray ban pas cher, abercrombie and fitch, lululemon outlet, michael kors outlet online, michael kors, coach outlet store online, coach purses, new balance, nike air max, hollister uk, michael kors, lunette oakley pas cher, true religion outlet, nike tn pas cher, replica handbags, nike air max uk, longchamp soldes, nike free, longchamp pas cher, north face uk, ralph lauren pas cher, michael kors uk, north face pas cher, vanessa bruno pas cher, true religion outlet, polo ralph lauren uk, nike air force, converse, vans pas cher, nike roshe uk, burberry pas cher, sac guess pas cher, true religion outlet, nike air max uk, ray ban uk, hogan sito ufficiale, jordan pas cher, hermes pas cher, mulberry uk, polo lacoste pas cher, nike free pas cher, abercrombie and fitch UK
ReplyDeletesac louis vuitton, ugg,uggs,uggs canada, supra shoes, coach outlet, canada goose outlet, doke & gabbana, hollister, montre pas cher, pandora jewelry, swarovski uk, ugg pas cher, canada goose, juicy couture outlet, links of london uk, moncler uk, moncler, louis vuitton, canada goose jackets, louis vuitton uk, thomas sabo uk, barbour, moncler, moncler jackets, lancel, canada goose outlet, ugg,ugg australia,ugg italia, barbour jackets uk, canada goose, replica watches, karen millen uk, moncler, pandora jewelry, juicy couture outlet, swarovski jewelry, canada goose jackets, toms shoes, louis vuitton, marc jacobs, pandora charms, ugg uk, canada goose uk, canada goose pas cher, moncler outlet, bottes ugg pas cher, pandora uk, wedding dresses uk, moncler, moncler pas cher, sac louis vuitton, converse shoes outlet
ReplyDeleteninest123 12.15
michael kors outlet
ReplyDeletecanada goose outlet
jordan retro
coach factory outlet
uggs clearance sale outlet
north face jacket
coach outlet
gucci shoes
air max 90
ugg outlet
toms outlet
nike huarache
ugg outlet store
the north face jackets
lebron 12
oakley sunglasses
uggs sale
hollister co
nike air max
nike running shoes
michael kors handbags
ugg clearance
coach factory outlet
uggs on sale
coach outlet
chanel handbags
gucci handbags
michael kors outlet
ugg boots
ugg australia
cheap jordans
ugg boots
ray ban sunglasses
20151215yuanyuan