JavaScript Side Bar đơn trượt đẹp cho blog

Đăng bởi Admin | 5/10/13 | 0 nhận xét

Bạn vẫn thường thấy các side bar trượt 2 bên các blog khác. Bạn có bao giờ nghĩ mình có thể tự tạo được chúng trong chốc lát. Bài viết sau sẽ giúp bạn làm được điều đó một cách nhanh chóng.

Bây giờ chúng ta hãy bắt đầu thêm nó ... 
Bước 1. Đăng nhập vào Blogger Account.Go của bạn vào Blogger Dashboard.Click của bạn trên diện tab từ cửa sổ bên trái và bấm vào Add một liên kết tiện ích.

Bước 2. Sau khi nhấp chuột vào một liên kết Thêm tiện ích Một hộp pop-up sẽ mở ra bây giờ 
với nhiều danh sách tiện ích, chọn HTML / JavaScript từ các tùy chọn tiện ích bằng cách nhấn vào dấu cộng màu xanh cho tiện ích.

Bước 3. Chọn "HTML / Javascript" và thêm một trong những mã dưới đây. 
Bước 4. Click vào On Lưu 'JavaScript' Bạn đang thực hiện. ....

<script src="http://dl.dropboxusercontent.com/s/dxv8pj5mvc74vyw/prototype.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/wvyae56sr0hic2n/effects.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/8t6uvuz6r1xzpnz/side-bar.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0zNnyp0BNWK4jH7_vMiKMCqE5rZenmYghE03J10uR1YNWVg9CLKvbJ4c5QJa1AbinlcDlu1ps03s3kbjptRJi-0gKscByt7kDXjOK_Ig31U_R6yDPhu9NeASnHBvVh5rZthyphenhyphen4lbSL3Flq/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXYTiyIc_eGghDBPtfaZiY_xuSAEzVH_MZpVWH96rOd44f4UNkcxhYKLes36GCe7S3sCrguxZpdh1bSnPXuUlL6ZYxh3umT2EQMyrNbIXqN3PInOIYwuKPBlbasOpJJG5jsLaW7Ou02EV-/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>

Và bây giờ click Save

Lưu ý: 
- Trong đoạn code: <li><a href="#">Link One</a></li>:  "#" link liên kết ; Link One: tên của liên kết.
Tiện ích trên đã có 4 liên kết, bạn có thể kết nối lên đến 10 theo mẫu đoạn code : <li><a href="#">Link One</a></li>...
- Bạn có thể thay màu sắc của thanh Side Bar bằng màu sắc khác theo ý. Tham khảo bảng mã màu ở đây.

                                                          Nguồn tham khảo: 24work.blogspot.com