Bài viết này có điều chỉnh đôi chút so với bản gốc của tác giả.
Click để Xem >>http://patternstrader.blogspot.com/
Cách thực hiện tạo menu như vậy cho blogger của bạn như sau:
1. Đăng nhập tài khoản Blogger
Việc đầu tiên là bạn đăng nhập vào Blogger >> Bảng điều khiển (Dashboard) >> Thiết kế (Design) >> Chỉnh sửa HTML (Edit HTL)2. Chèn thẻ CSS vào Blog
Tìm (Ctrl-F) và thay thế đoan mã </head> bằng đoạn mã sau: <script type='text/javascript' src="http://www.google.com/jsapi"></script>Bạn có thể tùy ý điều chỉnh thuộc tính CSS như độ rộng và màu sắc tùy ý.
<script>
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type="text/javascript" src="http://galeon.com/vku/menuside/side-bar.js"></script>
<style type='text/css'>
#menuBar a{outline:none}
#menuBar a:active{outline:none}
#menuBar{text-align:left}
#menuBar h2{color:#FFF;font-size:110%;font-family:arial;margin:10px;font-weight:bold !important}
#menuBar h2 span{font-size:125%;font-weight:normal !important}
#menuBar ul{margin:0;padding:0}
#menuBar li{margin:0 10px 3px;padding:2px;list-style-type:none;display:block;background-color:#DA1074;width:147px;color:#FFF}
#menuBar li a{width:100%}
#menuBar li a:link,#menuBar li a:visited{color:#FFF;font-family:verdana;font-size:100%;text-decoration:none;display:block;margin:0;padding:0;width:100%}
#menuBar li a:hover{color:#FFF;text-decoration:none;background-color:#000}
#menuBar{position:fixed;width:auto;height:auto;top:170px;right:-5px;background-image:url(http://galeon.com/vku/menuside/images/background.gif);background-position:top left;background-repeat:repeat-y}
#menuBarTab{float:left;height:137px;width:28px}
#menuBarTab img{border:0 solid #FFF}
#menuBarContents{float:left;overflow:hidden !important;width:175px;height:170px}
#menuBarContentsInner{width:200px}
</style>
</head>
3. Thiết lập và chèn cấu trúc HTML vào Blog
Bạn thiết lập dữ liệu cấu trúc HTML và đặt vào phần thân trang web (đặt giữa 2 thẻ <body> và </body>)Để đơn giản bạn hãy tìm (Ctrl-F) đoạn mã </body> và chèn đoạn code bên dưới vào phía trước </body>
<div id="menuBar">Trong bước này bạn cần thay đổi tên của các menu và liên kết tương ứng trong cấu trúc HTML như code trên.
<a href="#" id="menuBarTab"><img src="http://galeon.com/vku/menuside/images/slide-but.gif" alt="menuBar" title="menuBar" /></a>
<div id="menuBarContents" style="display:none;">
<div id="menuBarContentsInner">
<h2>Menu<span>bar</span></h2>
<ul>
<li><a href='http://gaincapital-forex-com.blogspot.com/p/huong-dan-ang-ki-tai-khoan-giao-dich.html ' title='>Hướng dẫn đăng kí tài khoản giao dịch tạI Fx.com Uk '>Hướng dẫn đăng kí tài khoản giao dịch tại Fx.com Uk</a></li>
<li><a href='http://gaincapital-forex-com.blogspot.com/p/huong-dan-nap-tien-deposit-rut-tien.html ' title=' Deposit-Withdraw '> Deposit-Withdraw</a></li>
<li><a href='http://chienluocForex.tk/' title=' Chiến lược giao dịch Vàng-Fx ( Demo )'>Chiến lược giao dịch Vàng-Fx ( Demo )</a></li>
<li><a href='http://BantinForex.tk' title=' Tin tức thị trường-Nhận định '>Tin tức thị trường-Nhận định</a></li>
</ul>
</div>
</div>
</div>
LƯU Ý: NẾU NHIỀU LINK THÌ TĂNG CHIỀU CAO TRÊN
Chúc các bạn thành công!!!
Labels:
Thủ thuật cơ bản
Previous Article
Responses
3 Respones to "Tạo Menu trượt độc đáo"
Cảm ơn bạn nhé http://tintuc-60s.blogspot.com/
20 August 2015 at 22:49
http://tienganh.tk
24 April 2016 at 21:20
Post a Comment