terça-feira, 14 de agosto de 2012

Tutorial - Como colocar barra lateral

Finalmente um tutorial funcionou comigo!! Aeee \õ/
Eu vi esse no Japan's Bubble. Saa, ikusooo! \(^o^)/

Entre em modelo → editar HTML → Ctrl F e pesquise por ]]></b:skin>Antes de ]]></b:skin> cole esse código:

.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #FF3E96; background: #FFC0CB; color: #; top: 0; margin: 0; position: fixed; left: -200px; height: 100%; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; overflow: hidden; cursor: default; font-weight: normal; z-index: 12345; }

.menuam:hover { left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

.menuam a { border: none; background: #FFFAFA; color:#FF69B4; padding: 5px; display: block; width: 100%; text-transform: uppercase; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; font-size: 7pt; margin: 5px -10px; text-shadow: 0 1px 1px #; }

.menuam a:hover { background: #919191; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; padding-left: 20px; }

.menuam a:first-child { margin-top: 10px; } .menuam a:last-child { margin-bottom: 0px; }

.menuam a { padding: 4px 6px; }

*Pode mudar as cores do jeito que quiser. Se não souber os códigos é só ver nessa tabela aqui.menuam → border-right (borda).menuam → background (fundo do menu).menuam a → background (fundo das páginas).menuam a → color (cor do link).menuam a:hover → (fundo das páginas quando passa o mouse)*

Depois Ctrl F e procure por
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Quando encontrar, cole acima de <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> esse código:

<div class="menuam"><a rel="nofollow"><font style=" text-transform: none; font: italic 20px georgia;"><div align="left">Título do Blog</div></font></a><a href="/">volte ao início</a><a href="URL DA PÁGINA" onClick="changeNavigation('profile');">NOME DA PÁGINA</a><a href="URL DA PÁGINA" onClick="changeNavigation('ask');">NOME DA PÁGINA</a><a href="URL DA PÁGINA" onClick="changeNavigation('extras');">NOME DA PÁGINA</a></div>

A onde estiver "Título do Blog" coloque o nome do seu blog "Url da Página" coloque o url da página que deseja e logo a frente o nome. Se quiser adicionar mais páginas, copie <a href="URL DA PÁGINA" onClick="changeNavigation('extras');">NOME DA PÁGINA</a> e cole abaixo do mesmo código. Quando quiser apagar uma página, é só apagar o código dessa página.


~~

Pra mim deu certinho. Se pra alguém não der é só perguntar, que eu tentarei ajudar(não sou muito boa com essas coisas de html ^^").

それじゃ、おやすみなさいみんな。(^-^)v

Nenhum comentário:

Postar um comentário

Você também pode gostar de:

Related Posts Plugin for WordPress, Blogger...