| Lấy code |
#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/AVvXsEiq_Wm1Kr5imyoJUj_nqjFby-k0PpLaHfqZ76lOzTnUUXdxZAohiJN9-oSHbA0ci6UO9xBFChKzy3veDQeHNzJ1PkjTwIYDPlNxs6l0xn-d8myng7_LYTDK8P5KWcRyPrP7_SfVHjM82xw/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/AVvXsEhW4ikl9dKDLpHX-lpK6isN6O1NIIOpEulFjDq-mMlAr9kUf5dU-80MJZHZrH73NsX2_pdErzQW-531wc5x37xDohbR4GGLs9J1zbM8Q6do0aU5t7yO6glKGKA-lSQ1FUoXsjB8tXLgRUA/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/AVvXsEgsezl15w_CDp3JXs3vJSShj_zr7pC-02slX4i6YIdCv8GvScm1QC8OAxxN3PPuKlKqtnVT8LShmoge9qtOHz5dtUcSL46-EQUGqKAVzOVJWxClPm8zC5O_4SJoOru51Oa1pkZPM2TjkB4/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNeukVBrkMcysDlmdgqj3GjmfFuZTPjgJ_tLefaFOoQLtKXN2czVPXTIhixuEXUPs1iqT9FQ5Whoi_V4v87Hx8ismKNuJApms4XSlq_woNdhtDLlD76R-nqB-QN_ajN2AssRJdWVeMyl8/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/AVvXsEh_AFOg61VhSLoB5WM4ZD-4xXfZHmqEEeyIZ1btOzh7uEYuMjTqQKH3MdTLw-83B51oMuRPnz0xLk4Lh9yQrCwYBa958QGzW1zYyxYe07J_MHg2wEmm16yMiuZRQ5475FtsXLDnBj4xQyk/s1600/search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#D9D9DA;
}
<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>
<script type='text/javascript'>Đoạn code trên để sử dụng scroll lên/xuống.
//<![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'/>
<script src='http://dl.dropbox.com/u/39436129/jquery.js' type='text/javascript'></script>2. Thêm css vào template:
<script src='http://playground.mobily.pl/assets/demo/blocks/js/mobilyblocks.js' type='text/javascript'></script>
<script type="text/javascript">
$(function(){
$('.socials').mobilyblocks({
trigger: 'click', //Hover hoặc Click
direction: 'counter', //clockwise hoặc counter (Cùng hoặc ngược chiều kim đồng hồ
duration:500,//Thời gian hiển thị vòng tròn (Số càng nhỏ, hiển thị càng nhanh)
zIndex:50,//Giá trị z-index của thẻ li
widthMultiplier:1.15//Phạm vi của vòng tròn sau khi click
});
});
</script>
.socials {float:left;display:block;width:32px;height:32px;background:url(http://i.imgur.com/lmSYJ.png) no-repeat;cursor:pointer;position:relative;margin:14px 0 0 30px}
ul.reset,ul.reset li {display:block;list-style:none;padding:0;margin:0}
ul.reset li {position:absolute}
ul.reset li a {outline:none}
3. Thêm đoạn code vào nơi bạn muốn:<div class="socials">
<ul class="reset">
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/F8dqt.png" alt="" /></a></li>
<li><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src="http://i.imgur.com/Wy83E.png" alt="" /></a></li>
<li><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src="http://i.imgur.com/xy0Ln.png" alt="" /></a></li>
<li><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img src="http://i.imgur.com/3XABb.png" alt="" /></a></li>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/sizrF.png" alt="Facebook" /></a></li>
<li><a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'><img src="http://i.imgur.com/KFgDs.png" alt="" /></a></li>
</ul>
</div>
<div class='post-footer-line post-footer-line-1'>Or
<div class='post-footer-line post-footer-line-2'>Or
<div class='post-footer-line post-footer-line-3'>Nếu ko có các bạn cứ để dưới
<data:post.body/>
