Como colocar um menu 'cabeçalio' parecido com o do youtube no blogger

sábado, 19 de julho de 20140 comentários

Procure a tag ]]></b:skin> e acima dela cole o código abaixo:

/******* HEADER ********/

#header {
height:54px;
border-bottom:1px solid #f3f3f3;
margin:0;
padding:0;
}

/******* LOGO ********/

.logo {
width:136px;
float:left;
margin:0;
}

.logo h1, .logo h1 a {
color:#ff3333;
font-size:32px;
margin:7px 0 0 0;
padding:0;
text-decoration:none;
}

/******* SEARCH ********/

.searchpart {
float:left;
width:522px;
margin:11px 0 0 0;
overflow:hidden;
height:38px;
}

.search {
width:372px;
height:29px;
margin:0;
float:left;
}

.main_search{
height:30px;
margin:6px 0 0 2px;
padding:0;
}

.searchform_top{
padding:0px 0px 0 0;
float:left;
}

.searchform_top_text{
width:290px;
height:23px;
border:1px solid #666666;
font-size:13px;
float:left;
margin:0 0 0 0;
padding:0;
color:#000;
}

.searchform_top_text:hover{
border:1px solid #bbdafd;
}

.gosearch{
float:left;
}

/******* SEARCH MENU ********/

.searchmenu {
float:right;
width:150px;
margin:10px 0 0 0;
}

.searchmenu ul {
margin:0;
padding:0;
}

.searchmenu ul li {
margin:0;
padding:2px 8px 2px 10px;
list-style:none;
display:inline;
border-left:1px solid #cccccc;
}

.searchmenu ul li a{
font-size:13px;
}

/******* TOP RIGHT MENU ********/

.topright {
margin:21px 0 0 0;
padding:0;
width:200px;
float:right;
text-align:right;
}

.topright ul {
margin:0;
padding:0;
}

.topright ul li {
margin:0;
padding:2px 8px 2px 11px;
list-style:none;
display:inline;
}

.topright ul li.signin {
margin:0;
padding:2px 0px 2px 10px;
list-style:none;
display:inline;
border-left:1px solid #cccccc;
}

.topright ul li a {
font-size:13px;
}

Agora procure por <header> e acima dela cole o código abaixo:

<div id='header'>
<div class='logo'>
<a expr:href='data:blog.homepageUrl'><img src='http://i46.tinypic.com/wbxrgp.jpg'/></a>
          </div>

<div class='searchpart'>

<div class='search'>
<div class='main_search'>
<form action='/search' class='searchform_top' method='get'>
<div>
<input class='searchform_top_text' id='s' name='q' onclick='this.value=&apos;&apos;;' type='text' value=''/>
<input class='gosearch' onmousedown='this.src=&apos;&apos;' onmouseout='this.src=&apos;&apos;' onmouseover='this.src=&apos;&apos;' src='' style='margin-top:-3px;margin-left:0px;outline: none;' type='image'/>
</div>
</form>

</div> </div>
<div class='searchmenu'>
<ul>
<li><a href=''>Edit</a></li>
<li><a href=''>Edit</a></li>
</ul>
</div>

</div>

<div class='topright'>
<ul>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts</a></li>
<li class='signin'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments</a></li>
</ul>
</div>

</div>
<div class='clear'/>
Compartilhe :

Postar um comentário

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Ajudinha Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger