Apenas testar : Menu left

Menu left

A criação do menu não é minha, mas eu fiz os códigos então credite a mim pelos códigos okay? *-*

Então comece colocando isso no seu css:


.nav2 {background: #372d1a;display: inline-block; text-align:right; font-size:12px; color:#fff;  float: center; margin:2px; font-family:verdana; padding:4px;  width:260px;height:13px; -webkit-transition-duration: .90s;}
.nav2:hover {background:#4b412f;margin-left:-20;}

#sidemenu {width: 300px;}


-bottom:0px; font-family: verdana;height:200px; font-size: 11px;-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; }
.boxmenu {padding:5px; margin:8px;margin-bottom:15px;background:#6f9193; margi

n

Agora coloque esse código em baixo da id do content (Usada para centralizar o theme) ou caso não tiver a id do content em baixo de body:


<center>

<div id="sidemenu">

<center><a href="/" alt="" ><div class="nav2">Home</div></a><span class="nav2" onClick="changeNavigation('01')">About</span><span class="nav2" onClick="changeNavigation('02')">Tumblr</span><a href="/ask" alt="" ><div class="nav2">Ask me</div><a href="/tagged/suatag" alt="" ><div class="nav2">My posts</div></a><a href="http://um link.com" alt="" ><div class="nav2">Link</div></a><br>
</center>
<div style="position:absolute; margin-left: 10px;width:180px; top:115px; padding-top:0px; z-index:2;">
<div class="boxmenu">
<img src="http://static.tumblr.com/frmjfs3/kY1m7a01j/8548-4.png">
</div>
</div>


</center>

Mude o menu e o conteúdo da caixa de acordo com o que deseja e pronto *-*.

PS: Pegue os códigos pelo permalink caso tiver na dash/Larih

#menu #menus #larih #tutorial

Exemplo:
- Cole esse código no seu CSS, ou seja, entre <style> e</style>.

ul#menutt {


width: 160px; 
list-style:none;
font: bold 16px Arial, Verdana, Serif;
}
ul#menutt li{
position:relative;
}
ul#menutt a {
width: 160px;
display: block;
text-align:left;
padding: 5px 10px;
margin-bottom:1px;
text-decoration: none;
color: #000;
background: #1cd117;
border-left: 12px solid #05a22e;
border-right: 3px solid #05a22e;
voice-family: "\"}\"";
voice-family:inherit;
width:125px;
}
>#pagebody>ul#menutt a {
width:125px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menutt li { float: left; height: 1%; }
* html ul#menutt li a { height: 1%; }
/* End */
ul#menutt a:hover {
color: #fff;
background: #2aec09;
border-right: 3px solid #17c71c;
border-left: 12px solid #17c71c;
}
ul#menutt a span {
display: none;
}
ul#menutt a:hover span {
display: block;
position: absolute;
top:0;
left: 160px;
width: 130px;
padding: 5px;
margin-left:2px;
color: #fff;
background:#060;
font-size: 10px;
text-align:left;
border:1px solid #000;
}

- E cole esse código aonde quer que o menu apareça.
<ul id="menutt">
<li>
<a href="#">Home
<span>
Página de entrada no site CSS para Web Design
um site projetado com folhas de estilo em cascata.
</span>
</a>
</li> <li><a href="#">Tutorial CSS
<span>
Nesta seção do site você encontrará
uma série de tutoriais sobre as mais variadas
técnicas de CSS para construção de
páginas web.
</span>
</a>
</li> <li>
<a href="#">PDA 320x240
<span>
Neste link você verá como CSS pode
ser utilizada para possibilitar exibir sua página
web de maneira legível em um dispositivo PDA.
</span>
</a>
</li> <li>
<a href="#">Links
<span>
Uma coletânea de links para sites sobre CSS.
</span>
</a>
</li> <li>
<a href="#">Mapa do site
<span>
Mapa do site - Aqui você encontra uma
relação completa de todas as páginas do site.
</span>
</a>
</li> <li>
<a href="#">Contato
<span>
Entre em contato conosco!
Sugestões serão muito bem vindas.
Se você tem uma matéria sobre CSS
e quer colaborar, publicaremos.
</span>
</a>
</li>
</ul>

Se for útil de like.
Sempre credite!
---------------------------------------------

Efeitos de Wishlist #2

Bom, os códigos são todos meus, então quero os devidos créditos.
Esses são os efeitos: Preview

Wishlist 1

Coloque esses códigos no seu css, antes de </style>:

.wish { color:#fff;background: #9e8b75; display : block; padding:3px;font-size: 8pt; font-family: verdana, Lucida Sans Unicode; line-height: 13px; text-align:left;margin-bottom : 2px;padding-left : 10px; -webkit-transition-duration: .90s;  text-shadow: 0px 1px 0px #52443c;border-radius: 3px; -moz-box-shadow:inset 0px 24px 0px #766454;-webkit-box-shadow:inset 0px 24px 0px #766454;box-shadow:inset 0px 24px 0px #766454;}

.wish:hover {color:#ffffff; padding-left : 10px; -moz-box-shadow:inset 0px -24px 0px #52443c;-webkit-box-shadow:inset 0px -24px 0px #52443c;box-shadow:inset 0px -24px 0px #52443c;text-shadow: 1px 1px 0px #332a29;}

.wish a {color:#ffffff;}

Agora coloque isso onde quer que apareça:

<div class="wish">Oque quer aqui</div>

Pronto ^^

Wishlist 2

Esse é o css, antes de </style>

.wish2 {color:#fff;background: #9e8b75; display : block; padding:3px;font-size: 8pt; font-family: verdana, Lucida Sans Unicode; line-height: 13px; text-align:left;margin-bottom : 2px;padding-left : 10px; border-radius: 3px;
-webkit-transition-duration: .90s; border-left: 10px solid #332a29;  text-shadow: 1px 1px 0 #332a29;border-right: 0px solid #332a29;
-moz-box-shadow:inset 200px 0px 0px #766454;
-webkit-box-shadow:inset 200px 0px 0px #766454;
box-shadow:inset 200px 0px 0px #766454;}

.wish2:hover {color:#ffffff; padding-left : 10px;border-left: 0px solid #332a29;  border-right: 10px solid #332a29;
-moz-box-shadow:inset -200px 0px 0px #52443c;
-webkit-box-shadow:inset -200px 0px 0px #52443c;
box-shadow:inset -200px 0px 0px #52443c;}

.wish2 a {color:#ffffff;}

Agora isso onde quer que apareça:

<div class="wish2">Oque quer aqui</div>

É isso ^^

Wishlist 3

Esse é o css:

.wish3 { color:#fff;background: #766454; display : block; padding:3px;font-size: 8pt; font-family: verdana, Lucida Sans Unicode; line-height: 13px; text-align:left;margin-bottom : 2px;padding-left : 10px; border-radius: 3px;
-webkit-transition-duration: .90s; border-right: 10px solid #52443c; text-shadow: 1px 1px 0 #52443c;}

.wish3:hover {color:#ffffff; padding-left : 10px; border-right: 20px solid #332a29;text-shadow: 1px 1px 0 #332a29;
-moz-box-shadow:inset -200px 0px 0px #52443c;
-webkit-box-shadow:inset -200px 0px 0px #52443c;
box-shadow:inset -200px 0px 0px #52443c;}
.wish3 a {color:#ffffff;}

Agora isso onde quer que apareça:

<div class="wish3">Oque quer aqui</div>

Prontinho, é isso. Se usar credite.
(Source: goldhtml)

http://static.tumblr.com/p0nqcte/5Pamfm6md/wish.html

Parceiros deslizantes

Isso deu trabalho então por favor não copiem e se usarem credite, os códigos são todos meus

Preview
Então como eu disse deu trabalho pra poder posicionar tudo bonitinho, então caso queira colocar uma outra coluna, tenham cuidado na hora de mudar os valores de width, height, left etc.
Pra começar coloque isso no seu css:

#parc {left:0px;top:150px;position:fixed;z-index:10020px;}

.parcei{background:#000;padding:6px;padding-right:6px;padding-top:-300px;width:219px; height:106px;margin-left:-228px;-webkit-transition-duration: .90s;}

.parcei:hover{background:#181818;padding:6px;padding-right:7px;width:219px; height:106px;margin-left:10px;}

.borpar {margin:0px;margin-bottom:2px;}

.titl { height:auto;;width:102px;margin-top:-72px;padding:8px;background:#1A1A1A;margin-left:181px;color:#fff!important;font-family: arial;font-size:18px;font-weight:normal;text-align:center;letter-spacing: 1px;-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;}

.titl:hover{  height:auto;;width:102px;margin-top:-72px;padding:8px;background:#1A1A1A;margin-left:181px;color:#A1A1A1!important;font-family: arial;font-size:18px;font-weight:normal;text-align:center;letter-spacing: 1px;-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;}

Agora abaixo de <body> coloque isso:

<div id="parc">
<div class="parcei">

<a title="Nome" target="_blank&quot;" href="URL"><img src="http://fuckyeahanonadvice.tumblr.com/images/anonymous_avatar_96.gif" width="50" class="borpar"</a>

<a title="Nome" target="_blank&quot;" href="URL"><img src="http://fuckyeahanonadvice.tumblr.com/images/anonymous_avatar_96.gif" width="50" class="borpar"</a>

<a title="Nome" target="_blank&quot;" href="URL"><img src="http://fuckyeahanonadvice.tumblr.com/images/anonymous_avatar_96.gif" width="50"class="borpar"</a>

<a title="Nome" target="_blank&quot;" href="URL"><img src="http://fuckyeahanonadvice.tumblr.com/images/anonymous_avatar_96.gif" width="50"class="borpar"</a>

<a title="Nome" target="_blank&quot;" href="URL"><img src="http://fuckyeahanonadvice.tumblr.com/images/anonymous_avatar_96.gif" width="50"class="borpar"</a>

<a title="Nome" target="_blank&quot;" href="URL"><img src="http://fuckyeahanonadvice.tumblr.com/images/anonymous_avatar_96.gif" width="50"class="borpar"</a>

<a title="Nome" target="_blank&quot;" href="URL"><img src="http://fuckyeahanonadvice.tumblr.com/images/anonymous_avatar_96.gif" width="50"class="borpar"</a>

<a title="Nome" target="_blank&quot;" href="URL"><img src="http://fuckyeahanonadvice.tumblr.com/images/anonymous_avatar_96.gif" width="50"class="borpar"</a>

<div class="titl">Parceiros</div>
</div></div>

Edite as informações do tumblr que é parceiro e pronto
PS:Pegue os códigos no permalink

http://cssand-html.tumblr.com/post/38555775002

Descrição Hover #02

Bom, a criação não é minha, mais os códigos são meus. Então, dê os devidos créditos.
O efeito é esse Preview.
Coloque esse código no seu CSS, pra quem não sabe, antes de </style>

#photo{background:url(http://static.tumblr.com/frmjfs3/0Qkm7jcyc/shay.png);width:291;height:400px; border: solid 5px #c50f39;}
.desc{width: 281px; height: 15px; display: inline-block; background: #000; opacity: 0.6; color: #999; -webkit-transition-duration: .90s; margin-top: -0px; overflow: hidden; position: absolut;padding:5px; text-align: justify; }
.desc:hover{height: 390px; margin-top: -0px;}

Mude oque está em negrito de acordo como deseja. Agora coloque o código a seguir no lugar que deseja, a foto com a descrição:

<div id="photo">

<div class="desc"><center>{Title}</center><br><br> SUA DESCRIÇÃO OU OQUE QUER QUE APAREÇA AQUI :) SUA DESCRIÇÃO OU OQUE QUER QUE APAREÇA AQUI :) SUA DESCRIÇÃO OU OQUE QUER QUE APAREÇA AQUI :) SUA DESCRIÇÃO OU OQUE QUER QUE APAREÇA AQUI :) <br><br><br> </div></div>

Agora veja se está tudo certo e dê save.
PS:Veja os códigos pelo permalink não na dash.

http://cssand-html.tumblr.com/post/27775629239
Menu BrokenLamp:
Exemplo:

Ele fica branco se quando passa o mouse, mas se quiser trocar a cor, é só mudar no background “#menu:hover”.
- Coloque isso no seu css:
CÓDIGO
Agora é só editar e deixar como você deseja. Lembrando que tanto no “.menutf” quanto no “#menu” o background tem que estar da MESMA cor! Caso contrário o menu perde o efeito. Você pode mudar também a width,a fonte,o tamanho e sua cor.
- Colocando no menu:
Essa parte é bem simples,mas requer a atenção,pra não fazer nada errado! Ok?
- Coloque antes do código do menu:
```
<div class="menutf">
```
- E no fim:
</div>
- Pronto,agora no menu coloque isso:
```
<div id="menu"> CÓDIGO DA ABA 1 AQUI </div>

<div id="menu"> CÓDIGO DA ABA 2 AQUI </div>
```
- Olhe como o código do menu inteiro ficará:
```
<div class="menutf">
<div id="menu"> CÓDIGO DA ABA 1 AQUI </div>
<div id="menu"> CÓDIGO DA ABA 2 AQUI </div>
</div>
```
Se for útil de like e sempre credite!
http://cssand-html.tumblr.com/post/14071496515

Paginação:

Ex:

Coloque este código depois de <styler>:

/*** Paginação by madlyluv.com ***/
#paginacaoml {font-size: 10px; font-weight: bold; line-height: 21px; text-shadow: 0 1px 1px #fff;}
#paginacaoml a {background: #cor de fundo; margin: 0 1px 0 0; padding: 2px 4px; color: #cor da fonte; text-decoration: none;}
#paginacaoml a:hover {background: #cor de fundo; border: none;}
#paginacaoml span.pagina_atual {background: #cor de fundo; margin: 0 1px 0 0; padding: 2px 4px; color: #cor da fonte; text-decoration: none;}

#paginacaoml span.info {background: #cor de fundo; margin: 0 1px 0 0; padding: 2px 4px; color: #cor da fonte; text-decoration: none;}

Personalize como quiser depois coloque este código logo abaixo de {/block:Posts} de preferencia ou onde quiser que apareça:

<div id="paginacaoml"><span class="info" style="font-weight: normal;">Página <b>{CurrentPage}</b> de <b>{TotalPages}</b></span> {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}{/block:Pagination}
{block:JumpPagination length="10"}
{block:CurrentPage}<span class="pagina_atual">{PageNumber}</span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
{/block:JumpPagination}
{block:Pagination}{block:NextPage}<a href="{NextPage}">&raquo;</a>{/block:NextPage}{/block:Pagination}
</div>

A tag {block:JumpPagination length=”10”} define quantas páginas irão mostrar na paginação. Como no exemplo lá em cima, aparece 10 páginas. É só você mudar para quantas páginas quiser.

Paginação é de autoria da Ana Flávia.
Se for útil de like.
http://cssand-html.tumblr.com/post/13409825909

14/04/2014

Menu left

Menu left

Efeitos de Wishlist #2

Parceiros deslizantes

Descrição Hover #02

Menu BrokenLamp:

Paginação:

0 comentários:

Pesquisar este blog

Menu

Visite Nossos Especiais

Deixe sua Mensagem

Status do Blog

Seguidores

Ask.fm

Contact us

About

Fan Pages Parceiras

Top Parceiros

Aparatações

Equipe de Colaboradores

About

Posts

Recent Comments

Materiais

Edições

Outros

14/04/2014

Menu left

Menu left

Efeitos de Wishlist #2

Parceiros deslizantes

Descrição Hover #02

Menu BrokenLamp:

Paginação:

Related Posts:

0 comentários:

Pesquisar este blog

Menu

Visite Nossos Especiais

Deixe sua Mensagem

Status do Blog

Seguidores

Ask.fm

Contact us

About

Fan Pages Parceiras

Top Parceiros

Aparatações

Equipe de Colaboradores

About

Posts

Recent Comments

Materiais

Edições

Outros