janeiro 2014 ~ HQMDesign

segunda-feira, 27 de janeiro de 2014

Vamo aprende hoje como colocar um menu com submenu Bem estiloso

-1)Vá Layout E Crie Um Novo Gadgets
O Novo gadgets séra <HTML È JAVASCRIPT>

Depois Disso Cole Esse Código no gadgets que você Criou

#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
color: #FFF; /*--edite cor do link hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #9F0;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform:capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px
solid #FFF;
border-right: 1px solid #FFF;
background-color: #555;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
background-color: #FC6;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin:
0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover
ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
</style>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='endereço do blog'>Home</a></li>
<li>
<a href='url da pagina'>LINK</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK2</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK3</a>
<ul>
<li><a href='url da pagina'>Nome do Link </a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>

-Modificando O Código CSS

-Alterando os links
:
<li><a href='#'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>

Quando você Encontra esse código Você Altere Seguindo as cores
Aonde Esta Laranja E O Lin da pagina ¬¬
E Aonde Esta Rosa E Nome que vai aparecer No menu ¬¬

ok flw valeu

3-Maneiras de nós ajudar

-1)Vendo o post original
DPB

2-)Comentando Ou Entrando no chat

-3)Curtindo nóssa Page No facebook

quinta-feira, 23 de janeiro de 2014

janeiro 23, 2014

Colocando Efeito Natalino

Unknown Leave a comment

E Ai pessoal,venho hj trazer um tutu muito legal e facil,Mas ele só serve mesmo quando chegar O natal mais vou dx ele aqui mesmo no blog para vc pegaram mais vamo lá

-1)Vá em editar html e procure por
</head>

é cole esse código acima dele

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js'/>
<script src='http://yourjavascript.com/61532113121/new-snofall.js'/>
<script>
$(document).ready( function(){
$.fn.snow({ minSize: 10, maxSize: 50, newOn: 400, flakeColor: '#ffffff' });
});
</script>

Personalizando:

minsize: 10-- Tamanho dos flocos de neve
maxsize: 50-- Tamanho maximo dos flocos
newon: 400-- Tempo entre cada floco de neve.O Quanto amumentar menos flocos vão caindo.Exemplo:

600-Caira menos flocos
200-Caira Mais Flocos

Espero que tenha entendido

A Sim O HQMDesign já tem 22000 visualização como Queremos mais visualização Deixaremos o Floco de neve Até Não chega em 30000 Quando chegar tiraremos Os Flocos De neve

3 Dicas para nós ajudar

-Entrando no site que ofereçeu o código:
www.dicasprablogs.com.br

-2)Comentando Os Tutu

-3) Curtindo nossa fá page ok flw

segunda-feira, 20 de janeiro de 2014

janeiro 20, 2014

Colocando Fáns box Do TW Para Blog

Unknown Leave a comment

E aeeee pessoal tudo bem com vocês?Bem hj vou fazer uma pequena e rapida postagem sobre Como Coloca Fán Box do Twitter,é isso mesmo.Bem não sou muito chegado ao twitter pois acho que e uma rede social que não mereçe minha atenção,mas dx de lado.O código e bastante simples e facil de se usar...Então vamos lá

Em Primeiro lugar Vá
Em layout e add um gadges vc escolhe O Html/javascript e cola esse código

<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><divid="twitterfanbox">
<script type="text/javascript">fanbox_init("@SEUTWITTER");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 290px !important; /* Largura do gadget */
height: 250px !important; /* Altura do gadget */ }
</style>

-1 Na parte que esta destacada em azul claro
Cole o Twitter

espero que tenha gostado

3 maneiras de nos ajuda

-1 visite o site do criado do código

VDPBS

-2 Comente

-3 Curta Nossa Pag No facebook

domingo, 19 de janeiro de 2014

janeiro 19, 2014

Efeitos Bordas na imagens

Unknown Leave a comment

olá pessoal sou novamente aqui trazendo mais um tuturial para seu blog ou site bastatne simples...Mas vamo ao que interresa

-1)Escolhendo o blog

em primeiro lugar entra na sua contra do google
depois de entra na sua conta escolha o blog ao que deseja coloca esse efeito

-2)
Agora procure por essa tag abaixo
:-)
]]></b:skin>

Ao encontra a tag assim rapidamente Rapido cole esse pequeno código abaixo da tag encontrada
:-)
.post-body img:hover {
border:2px solid #000;
}

Depois e so salva e visualizar.Ok

-'
Modificando o código
Caso queira muda a cor da borda mude

#000

-clique aqui para escolher uma cor
Caso não saiba a tabela de cor procure nesse site aqui
Aqui nesse site

nesse site vc encontra tuto

-Para altera o tamanho da borda edite
:2px

pelo seu tamanho

Como Ajuda Agente

-1)
Entre nesse site o criador do código
VDPBS

-2)Comente Abaixo ajuda muito

sábado, 18 de janeiro de 2014

janeiro 18, 2014

Botão Facebook e TW No topo do blog

Unknown Leave a comment

E Ai pessoal hj venho fazer mais uma postagem radical aqui pois e algo que dou muito valor,mas vamo courta essa parte chata e vamo ao que interresa certo,ok

Vcs já devem saber o procedimentos basico então vou pular isso

-1)Encontrando a Tag
-Procure por
<b:section class='header' id='header' maxwidgets='1'

Quando encontra ele vai estar mais ou menos assim:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Tecno-Criação (Cabeçalho)' type='Header'/>
</b:section>
</div>

-2)Colando o código
Agora abaixo do </div>
Você Cola todo esse código

<div style="position: absolute; top: 160px; left: 80%; margin-left: 4px;"><div style="overflow: hidden; width:100px; height: 60px;"><div style="overflow: hidden;"><a href="https://twitter.com/seu-twitter" target="_blank"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg88k2yFQEdN4kFkQecOHUGTuTmTgQMtvErRKauO7PH9ExqcRN60e5pP3fasD6xmpCdOnf96dAo2An8eiy9al0kh4P33wm_MQho555T6duen83dlIK65ukKtREC8eIOOGeORPkRsvyyJGo/s1600/twitter.png" title="twitter" /></a><a href="http://www.facebook.com/Seu-Facebook" target="_blank"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJEDMz_B_BhMeCqZLRBjK8QVoO0n_64ZrqCiPNE01_8M5StUPzpDkK3M_bbkqDnnZjkxvvZkEZbTh4CtXpDQqEYsHzGpCxUOpOuevUJTPBUcVTeFNoCGWFXlmN7C0rEBGoD8yY-zB2ng/s1600/facebook.png" title="facebook" /></a><a href="mailto:E-mail@hotmail.com" target="_blank"><img alt="email" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95IQp9bm4Opm601ZUrXRulj83gTRvUlKb8PvUGH-Yfsp9PMc92N52wQ5ZMJkhrWxjipoJfUasxjZhe4_hL4wg94NYeiwpgnD6FTMYzn0fg4uDYWRLtOH2RUCiLRMT99exE-JUaoH09cQ/s1600/email.png" title="email" /></a></div></div></div>

-3)Editando Os Códigos

Para deslocar o botão para a Esquerda, você irá diminuir o valor da seguinte parte:

left: 80%

Para deslocar o botão para a Direita você irá aumentar o seguinte valor:

left: 80%

*Para deslocar os botões para cima ou mais para baixo (sentido Vertical) altere os valores no código.
Colocar o botão mais para cima diminua o valor 160:

top: 160px

Colocar o botão mais para Baixo, aumente o valor 160:
top: 160px
observe que de acordo com o seu template você vai ajustar a localização dos botões
Altere o Código
O primeiro link que está destacado em azul você colocará o seu Twitter:
href="https://twitter.com/seu-twitter"
O segundo Link você vai colocar o endereço do seu Facebook:
href="http://www.facebook.com/Seu-Facebook"
O terceiro Link você vai colocar o endereço do seu E-mail:
href="mailto:E-mail@hotmail.com"

Pronto agora clique em Visualizar e depois salve
Se gostaram deste código comentem pessoal

Gostaram Então da uma força a nóis Da Seguinte Maneira

1)Entre No site do criador do código
--->VDPBS

-2)Comente Ajuda Muito

Obrigados a todos fuizz meeeee

sábado, 11 de janeiro de 2014

janeiro 11, 2014

Como coloca Banner de Parceria Ou Propraganda no Topo do blogger

Unknown Leave a comment

Olá queridos amigos venho aqui mostra outra grande postagem Sobre como coloca Banner no topo do blogger então vamo lá

Procure por:
]]></b:skin>
No editor de HTML

Quando encontra acima dela adicioune

Esse Código

/* -----Anuncio ----- */
#Anuncio{
width:auto;
height:auto;
z-index:1;
position: absolute;
top: 50px;
left: 450px;
}

Depois Procure por

</header>

E Cole esse código abaixo
<div id='Anuncio'>Cole o Código do Banner</div>

Antenciosamente:Klof

Obrigado ae pessoal até a proxima

HQMDesign

segunda-feira, 27 de janeiro de 2014

Colocando Um Menu Css Com submenu #2

quinta-feira, 23 de janeiro de 2014

Colocando Efeito Natalino

segunda-feira, 20 de janeiro de 2014

Colocando Fáns box Do TW Para Blog

domingo, 19 de janeiro de 2014

Efeitos Bordas na imagens

sábado, 18 de janeiro de 2014

Botão Facebook e TW No topo do blog

sábado, 11 de janeiro de 2014

Como coloca Banner de Parceria Ou Propraganda no Topo do blogger

Popular Posts

Labels