Menu Deslizante + Ask.fm no Blogger

Menu Deslizante

Vá em Designer  Editar HTML  Expandir Modelo de Widgets  Ctrl + F (Procure por:)

<head>
Logo abaixo esta tag, cole este código:
<!--- MENU DESLIZANTE -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/ghoye6x/xBmloszst/colpaso.js' type='text/javascript'>
</script>
<script type='text/javascript'>
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('lion', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
 //$: Access to jQuery
 //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
 //state: "block" or "none", depending on state
}
animatedcollapse.init()
</script> 


Salve e feche! Agora vá em Layout  Adicionar Gadgets  HTML/Javascript  Cole:

<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 1</a> |
<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> |
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center>
<div id="rabbit" style="display:none">
Conteúdo do menu deslizante 1
</div>
<div id="dog" style="display:none">
Conteúdo do menu deslizante 2
</div>
<div id="cat" style="display:none">
Conteúdo do menu deslizante 3
</div>
 Observação:
 Onde está em negrito em negrito você deverá substituir pelo título que você quer que apareça em cada área , por exemplo, o título do meu para aparecer é "Link-me, Afiliados, Participo".. ai é só substituir.. já onde está sublinhado você coloca o conteúdo em que você quer que ao clicar naquela certa área apareça abaixo. Caso você queira acrescentar ou tirar mais menus basta você colocar mais desses códigos:
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 4</a></center>
<div id="cat" style="display:none">
Conteúdo do menu deslizante 4</div>

Ask.fm no Blogger

Primeiramente você deverá entrar no ask.fm, faça o login e tudo mais, e entre em "Configurações", que está lá em cima do lado da opção "Sair", quando clicado nas configurações, você deverá ir em "Widget".



Agora em que você clicou, irá aparecer algumas opções, de "Tamanho: 120x275, 180x275, 400x275", e Cor (Fundo, Texto). Para você mudar a cor, basta você clicar no centro da cor que já está, ao normal todos já estão em Preto e Branco, você poderá mudar isso é claro, clicando em cima, aparecerá uma caixinha ai você escolhe a cor, caso não ache basta você pegar o código em HTML dela e colocar na opção "#       " que tem lá, ao lado do "V". Quando estiver tudo pronto na cor, basta clicar no "V".
Para você poder pegar o código em HTML da caixinha Ask.fm, basta você pegar logo abaixo das opções de cores, na qual tem "Código", o código ficará parecido com esse:
<iframe src="http://ask.fm/widget/a9aec93d42d2046c9432e6c47a20727249eb3cc0?stylesheet=small&fgcolor=%23000000&bgcolor=%23EFEFEF&lang=21" frameborder="0" scrolling="no" width="120" height="275" style="border:none;"></iframe>
 Onde está em negrito você poderá modificar, modificando ele irá mudar á Largura e a Altura da caixa. Para você colocá-lo no Blogger, basta ir em Layout  Adicionar Gadgets  HTML/Javascript  Cole o código que você pegou. É muito simples, eu disse, eu enrolei para explicar para não deixar nenhuma dúvida.

:: Créditos: eJhonas.com

Nenhum comentário:

Postar um comentário

Deixe seu comentário