Tạo Slide Out Navigation cho Blogspot bằng JQuery

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#cfcfcf;;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #AFAFAF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation li a:hover{
background-color:#fff;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .home a{
background-image: url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TaaPYUHannI/AAAAAAAAANo/UjBtgeg8R0g/home.png);
}
ul#navigation .about a {
background-image: url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TaaPYXUF9TI/AAAAAAAAANg/bfYHEKhkWHM/id_card.png);
}
ul#navigation .search a {
background-image: url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TaaPZKjAk8I/AAAAAAAAAN4/VAoM_IqZFTE/search.png);
}
ul#navigation .podcasts a {
background-image: url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TaaPYbfWPLI/AAAAAAAAANw/Ag2WAN435W8/ipod.png);
}
ul#navigation .rssfeed a {
background-image: url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TaaPY2lCMCI/AAAAAAAAANs/tYD4GiXS8X4/rss.png);
}
ul#navigation .photos a {
background-image: url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TaaPYQRCwLI/AAAAAAAAANk/_mtSPUvO7U0/camera.png);
}
ul#navigation .contact a {
background-image: url(https://lh4.googleusercontent.com/_9-sNIAfGhKg/TaaPYkdzuhI/AAAAAAAAAN0/VeF8lb_A2ik/mail.png);
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<ul id="navigation">
<li class="home"><a href="URL link" title="Home">Trang chủ</a></li>
<li class="about"><a href="URL link" title="About">About Us</a></li>
<li class="search"><a href="URL link" title="Search">Tìm kiếm</a></li>
<li class="photos"><a href="URL link" title="Photos">Hình ảnh</a></li>
<li class="rssfeed"><a href="URL link" title="Rss Feed">RSS Feed</a></li>
<li class="podcasts"><a href="URL link" title="Podcasts">Podcasts</a></li>
<li class="contact"><a href="URL link" title="Contact">Liên hệ</a></li>
</ul>

» Chỉnh sửa code: bạn thay (URL link) thành các link cho các thư mục trong Navi này, tương ứng với các lớp (dòng màu tím than) ở trong code.

8. Save tiện ích lại

Chúc bạn thành công