Thứ Hai

MENU TRƯỢT ĐỘC ĐÁO CHO BLOG


Scriptaculous can be used to create application offset slide độc đào cho thanh menu.Hôm nay xin limit thiệu how execute menu type of the author slide Andrew Sellick .
slidesidebar
Scriptaculous is a library JavaScript be build on Prototype JavaScript Framework, cung offset level the application and dynamic quan directly to the section user interface via Document Object Model (DOM).
This post has control chut Editor double against the origin of the author.


Click to Xem Demo .
How to create as execute menu Vay cho blogger as your after:
1. Đăng nhập Blogger account
The first is your login to Blogger>>  Control Panel  (Bảng điều khiển)>>  Thiết kế (Design)>> Edit HTML (Chỉnh sửa HTL)
2. Insert to tag CSS Blog
Find (Ctrl-F) and replace Đoàn code <con /> with segment code after:
<script type='text/javascript' src="http://www.google.com/jsapi"> </ script> 
<script> 
google.load ("nguyên mẫu", "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'> 
# Thanh menu một {cương: không} 
# Thanh menu là: hoạt động {phác thảo: none} 
# Thanh menu {text-align: left} 
# Thanh menu h2 {color: # FFF; font-size: 110%; font-family: arial; margin: 10px; font-weight: in đậm quan trọng} 
# Thanh menu h2 span {font-size: 125%; font-trọng lượng: bình thường quan trọng!} 
# Thanh menu ul {margin: 0; padding: 0} 
# Thanh menu li {margin: 0 10px 3px; padding: 2px; danh sách các loại phong cách: không; hiển thị: block; background-color: # DA1074; width: 147px; color: # FFF} 
# Thanh menu li một {width: 100%} 
# Thanh menu li a: link, # menubar li a: visited {color: # FFF; font-family: Verdana; font-size: 100%; text-decoration: none; hiển thị: block; margin: 0; padding: 0; chiều rộng: 100%} 
# Thanh menu li a: hover {color: # FFF; text-decoration: none; background-color: # 000} 
# Thanh menu {vị trí: cố định; chiều rộng: auto; chiều cao: auto; top: 170px; quyền:-5px; background-image: url (http://galeon.com/vku/menuside/images/background.gif); nền -vị trí: trên trái; background-repeat: repeat-y} 
# MenuBarTab {float: left; height: 137px; chiều rộng: 28px} 
# MenuBarTab img {biên giới: 0 rắn # FFF} 
# MenuBarContents {float: left; tràn: quan trọng ẩn; width: 175px; chiều cao: 170px} 
# MenuBarContentsInner {width: 200px} 
</ Style>
</ Head>
You can adjust option ý property CSS as width ý option and màu sắc.
3. Settings and insert structure HTML to Blog
You settings data structure and HTML to set the body trang web (set between 2 tag <body> and </ body>)
Simple to find you please (Ctrl-F) segment code </ body> and insert code segment below to Phia previous </ body> 
<div id="menuBar"> 
href="#" <img 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> thanh </ span> </ h2> 
<ul> 
<li> <a href = 'http://vnblognet.com/ Tiêu đề '=' Trang chủ '> Trang chủ </ a> </ li> 
<li> <a href = 'vnblognet.com http:// / feeds / bài viết / default 'title =' Suscribe Post Feed ">RSS </ a> </ li> 
<li> <a href = ' http://vnblognet.com/feeds/comments/default 'title =' Bình luận Suscribe Feed '> Bình luận RSS </ a> </ li> 
<li> <a href = 'http://vnblognet.com/p/contact.html "title =" Liên hệ "> Liên hệ </ a> </ li> 
</ Ul> 
</ Div> 
</ Div> 
</ Div>
Trong Step this you to change the name of the menu and match link structure in as HTML code on.
Chúc of you failed!

Không có nhận xét nào:

Đăng nhận xét

 

Blogger news

Blogroll

About