Փնտրադաշտով մենյու բլոգգերի համար

Այսօր կխոսենք ևս մեկ հետաքրքիր մենյուի մասին, փնտրադաշտով մենյուի մասին: Եթե հետաքրքրեց կատարեք հետևյալ գործողությունները:

ՓՈՐՁՆԱԿԱՆ ՏԱՐԲԵՐԱԿ

Փնտրում ենք այս կոդը՝ ]]></b:skin>

գտնելուց հետո նրանից առաջ ավելացնում ենք ներքև կոդը՝

#MenuBar{background:#333;display:block;font:18px;font-weight:400;height:32px;border-bottom:1px solid #ccc;min-width:960px;padding:5px 0}
#Menu a{color:#fff;display:block;font-weight:400;padding:5px 10px}
#Menu a:hover{background:#f4f4f4;color:#333;display:block;text-decoration:none}
#Menu ul{height:30px;list-style:none;margin:0;padding:0}
#Menu li{height:30px;float:left;margin:0;padding:0}
#MSA{width:960px;margin:0 auto;}
#MSD{width:960px;}
#Menu{height:30px;width:700px;float:left;}
#SearchBox {height:35px;float:right;width:220px;}
#SearchBox input[type="text"]{background-color:#2A2A2A;border:1px solid #484848;border-radius:5px;color:#7E7E7E;height:25px;outline:0;position:relative;-webkit-appearance:none;padding:3px 0 3px 8px}
#SearchBox input[type="submit"]{background-color:#248334;border-radius:5px;color:#fff;height:28px;width:35px;border:1px solid #7a7a7a;background-image:url(http://lh4.googleusercontent.com/--9RbYGLhmI8/UAp2hm47JEI/AAAAAAAAAxI/t_neer3k3IM/s36/Subscribe.png);padding:3px}


Հետո ավելացնում ենք HTML/JavaScript ներքևի կոդը և վերջ: Արդեն կարող եք փոփոխել մենյուի անվանումները:

<!--MenuBar Starts-->
<div id='MenuBar'>
<div id='MSA'>
<div id='MSD'>
<div id='Menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' rel='author'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>Write For Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='http://www.bloggertrix.com/'>Add This</a></li>
</ul>
</div>
<div id='SearchBox'>
<form action='/search' method='get'>
<input name='q' onblur='if (this.value == "") {this.value = "Search Here...";}' onfocus='if (this.value == "Search Here...") {this.value = "";}' type='text' value='Search Here...'/>
<input type='submit' value='Go'/>
</form>
</div>
</div>
</div>
</div>
<!--MenuBar Ends--

Related Posts
Previous
« Prev Post