| 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/AVvXsEhztZE0yP-9km5sLb4gD85y7fYG7yFgWXicNXsSdvQk9DR0AJXm5WWddXc_tj5Ahcw7_d4Y0Mf7HDosJkCpMFSmwyDlVOrwCyrY8oZdcYarxImR6NvX6L8wH_SraLeVf_juMusbEgzvB04/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/AVvXsEjh2mcKS7pxCRmR_vIeRcClV7SBSbCioRBWuFPTJlxi84InL4LYcvipTmQ8A9FEiDIrxHU3w5pQfEgcUN2EDQ3L1rPIszUmD82LMROUskkdrQM2vGNvewf3NzXlVHwI0MIIiRYatCM6zxg/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/AVvXsEi9qJjqp5HglGqZeWqbynUy4yXzefTlRc5AHRvjOImBQSozeE716MtfcSy5DAgnok8_n0mrxf2iTbDFaZxUQgdLBPWpVcFr9PNPwRbw0kJWGxfleBcOfICj5EEJ5MfU4QxLEG3_-_XMys4/s1600/top.png) no-repeat center center;
}
#nav a.bottom span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWJRO76by4wBkrQzgeK9ZMRYdktAhQTiAAwgMk9U5dXW11W3tRqzldrChOODzFHrFJdQBGoS4zPbGnyeL-ygASQ1Cb9Oaj0GcIpSovIDa2UjmQWEyl9gzisWFGsprmDsc9-k6UmtpIkM8/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/AVvXsEiW4xRBvG7j4ckut6wj7u4pLV1Enn9aEqcQQnzTSgOXsVK1rskvNNz-z6VAHJKGGRy9dnRjFOiwaxpSJLTxlRT8XDYqbLMWdXTqAuozbd5Rd-iX1Hpg1k43A-rQQRDcmzHCDWLGfUs7R6Y/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/>
