Tutoriais - VLG: abril 2012

domingo, 22 de abril de 2012

Colocar slide de parceiros

Hoje eu vou ensinar como colocar isso no blogger, como parceria:

vai em Design> Elementos de página> adicionar um gadget> HTML/ javascript e adicione esse código:

<marquee onmouseout="this.start();" onmouseover="this.stop();">

<a href=" Link do parceiro " target="_blank" style="text-decoration: none; color: rgb(51, 170, 255);"><img src=" Link da imagem " title= Nome do parceiro" style="border-style: none; position: relative;" border="0" /></a>

<a href="Link do parceiro" target="_blank" style="text-decoration: none; color: rgb(51, 170, 255);"><img src="Link da imagem" title="Nome do parceiro" style="border-style: none; position: relative;" border="0" /></a>
</marquee>

e se quiser adicionar mais um parceiro ou imagem rolante, coloque:

<a href=" Link do parceiro " target="_blank" style="text-decoration: none; color: rgb(51, 170, 255);"><img src=" Link da imagem " title= Nome do parceiro" style="border-style: none; position: relative;" border="0" /></a>

DICA: coloque imagens do mesmo tamanho, pois se for diferentes, eles ficam deformados

quarta-feira, 18 de abril de 2012

Colocando Favicon no blogger

Little Monster's, mais um tutorial a ativa, ensinar vocês à colocar favicon em seu fã-site, dá um tom de profissionalismo, confira:

Vá no photofiltre e crie uma imagem tamanho 320x320, depois de colocar como quiser, colocando uma imagem ou fazendo a abreviação do seu site, mude o tamanho dela para 32x32
Depois vá no Blogger> Postagem> Nova postagem e aperte em inserir imagem, assim você coloca a imagem para ser hospedada, depois pegue o link da imagem e guarde, por enquanto.
Agora vá em Design> Editar HTML> expandir modelos de Widgets e encontre a linha “<head>”

Depois de encontrar, depois da linha acrescente o código:

<link rel="shortcut icon" href="URL-DA-SUA-IMAGEM"/>

Depois, vá em

]]></b:skin>

E embaixo dela coloque o seguinte código:

<link href='URL-DA-SUA-IMAGEM' rel='icon' type='image/x-icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='shortcut icon' type='image/x-icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='icon' type='image/vnd.microsoft.icon'/>

E visualize, se aparecer a imagem, perfeito, senão, repita a operação, pois você

deve ter feito algo errado. Gostaram? é bem fácil

Colocar a data da postagem no rodapé do post

Oi Little Monster's, estamos postando mais tutoriais, confira abaixo completo e divirta-se, se tiver dúvidas, comente, se quiser algum tutorial, também comente, que iremos fazer um especialmente para vocês. Let's Go:

Vá em Design > Editar HTML > marque a caixa "Expandir modelos de widgets", e procure por este código:

<b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if>

Para não se confudir, procure apenas por "<b:if cond='data:post.dateHeader'>", pois encontra mais rápido:

Quando achar ele, abra um bloco de notas, aperte CTRL+C(no código todo), e depois cole (CTRL+V) no bloco, depois apague todinho do template , porém, não salve, pois pode acontecer algo de arrado.

Agora procure pelo:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Assim que achar ele, cole aquele código que você colou no bloco de notas EMBAIXO dele

Agora, você procura por essa linha:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

E substitua por:

<span class='date-header'><data:post.dateHeader/></span>

agora procure h2.date-header {

substitua ele por

.date-header {
color: #FFFFF /*coloque a cor de sua preferência*/
margin: #FFFFF /*defina um espaçamento se quiser*/
padding:#FFFFF /*defina um espaçamento se quiser*/
font-size: #FFFFF /*coloque o tamanho da fonte de sua preferência*/
}

Colocando suas cores de preferência.

terça-feira, 17 de abril de 2012

Pedido ao Vitrine Lady GaGa - Centralizar título da sidebar

Olá Vitrine Lady GaGa, aqui está o seu pedido, desculpe pela demora. Mas está aí:

Vá em Design > Editar HTML> Dê Crlt+F e procure o seguinte código:

]]>

E logo acima dele cole o código:

.sidebar h2 {
text-align:center;
}

Pronto. Funciona perfeitamente. Obrigado por entrar no nosso tutorial, quem quiser um tutorial, é só pedir na C-box, e se quiser um template, é só pedir.

segunda-feira, 9 de abril de 2012

Pedido de Mayara Cristina

Uma Little Monster que gostou da novidade do site "Viciados em Lady GaGa", que foi ajudar os Little Monster's a fazer um fã-site bem organizado e estruturado, fez um pedido de template grátis, e iremos lhe atender em 72h até a suas escolhas de modelos forem decididos, se você quiser mandar fazer um também, estamos disposto aqui e iremos fazer qualquer coisas por vocês, click AQUI e faça já seu pedido

domingo, 8 de abril de 2012

Colocar imagem no "Leia Mais"

Oi Monster's! Hoje iremos aprender, como colocar uma imagem no 'Leia Mais', é bem fácil, porém, uma dica, não coloque imagens grandes, coloque imagens pequenas escrito "Leia Mais", "Confira completo", "Veja mais", "Confira tudo" entre outros, a imaginação é sua, vamos lá:

Vá em Design > Editar HTML> Marque expandir modelos de widgets > Aperte Ctrl+F e procure por: <data:post.jumpText/>

Você vai achar ele, e apague a linha e substitua por esse:

right - É direita

Left - Esqueda

Você pode mudar como quiser lá aonde está escrito Right, é muito fácil e bem organizado para uma site que quer ter menos peso.

Fazer uma área de "Parceiros"

Você quer aprender como fazer um "Parceiros"? É bem fácil, primeiro vá em:

Design > Adicionar um Gadget > Html javaScript

lá, você coloca o seguinte código

<a href="ENDEREÇO DO BLOG"><img src="URL DA IMAGEM" title="TITULO DO BLOG/MENSAGEM" target="blank" /></a>

Aonde tem o vermelho, coloque o endereço do fã-site que você fez parceria
Verde, coloque o URL da imagem que deseja colocar
Título do blog: Coloque o nome do fã-site que você fez parceria:

EX:

Esse era o meu antigo "Top Afiliados" do site

sábado, 7 de abril de 2012

Colocar borda em todas as imagens da postagem

Esse tutorial é bem "Gaguístico kkk" , aprenda hoje à colocar borda em todas as imagens das postagens, isso é demais, deixa o blogger mais profissional

Vamos lá gente linda, vá em Design > Editar HTML > Ctrl + F > e procure por: ]]></b:skin>
acima dele coloque isso:

.post img{
border: 3px solid #000000;
padding: 2px;}
.post a:hover img{
border: 3px solid #FFFFFF;
}

O ".post img{ " é a borda sem passar o mouse em cima e " .post a:hover img{ " é quando o mouse é passado por cima, aonde tem os códigos para cores, coloque as cores desejadas, e observe pelo amor da GaGa.

OBS: Coloque cores que combinem, pois fica feio se colocar amarelo, e quando passa o mouse fica vermelho. Combine de acordo com o seu template, se cor azul, coloque azul claro e depois escuro, aí vai ficar bem bonito.

Colocar borda em cada postagem

Oi Monster's , mais um tutorial disponível, é para colocar borda em cada postagem separadamente, fica muito bonito, eu já usei em um template do site, quer aprender? Então vamos lá, é bem curtinho:

Vá em Editar HTML > procure por > Ctrl + F > .post-body {
e logo abaixo cole border: solid 2px #000000;

E troque o código pelo seu desejado.

Colocar fundo e borda em seus comentários

Esse tutorial é bem útil, eu adoro esse tutorial, pois é lindo, confira abaixo completo:

Vá em Design > Editar HTML > Ctrl + F > e procure por > #comments {
deve aparecer assim.

#comments {
padding: 15px;

Logo a baixo coloque:

background-image: url(URL-DA-IMAGEM);
border:1px dashed #000000;
deve ficar assim:

#comments {
padding: 15px;
background-image: url(URL-DA-IMAGEM);
border:1px solid #000000;

E aonde tem escrito URL-DA-IMAGEM, use uma imagem de uma cor, ou escrito o nome "Comentários" com um efeito legal, que fica muito bonito, a borda, você pode colocar que cor quiser, se não quiser borda, é só apagar o trecho ' border:1px solid #000000; '. Tudo bem? Agora podemos atender os seus pedidos, se está procurando um tutorial e não acha, mande um comentário e atendemos o seu pedido.

Barra de rolagem nas postagens

Hey Monster's, esse tutorial é fácil, quer colocar barra de rolagem nas postagens? vá em > Design > Editar HTML > Ctrl + F >

e procure por: body { antes dessa palavra coloque isso:

#Blog1{overflow-y:auto; overflow-x: hidden; height:500px; width: 100%;margin: 0px;}

deve ficar assim:
#Blog1{overflow-y:auto; overflow-x: hidden; height:500px; width: 100%;margin: 0px;}
body {

Altere em azul a altura da barra de rolagem, você escolhe como quiser.

Colocar background no titulo da postagem e data

Oi Monster's, hoje o tutorial é bem fácil, confira abaixo completo:

Para colocar no titulo das Postagens primeiro vá em Design > Editar HTML > Ctrl + F >
e procure por /* Posts e vai aparecer assim:

/* Posts
----------------------------------------------- */

E depois disso coloque isso:
h3 {background-color: #d1e0cc ;}

deve ficar assim:

/* Posts----------------------------------------------- * /
/h3 {background-color: #d1e0cc ;}

Aonde tem o código de cor, coloque a cor desejada, uma dica? entre AQUI e entre nas cores desejadas

Para colocar fundo na data. procure por /* Headings e vai aparecer assim:

/* Headings
----------------------------------------------- */

Depois disso coloque:
h2 {background-color: #dle0cc;}

Deve ficar assim:
/* Headings
----------------------------------------------- */
h2 {background-color: #dle0cc;}

Se quiser código de cores, entre AQUI

Colocar imagem no fundo do título do sidebar

Se você quiser colocar um fundo no título da gadget, é bem fácil, sem erro, vamos começar:

Design > Editar HTML > Ctrl + F > e procure por /* Headings:

E você encontrará:

/* Headings
----------------------------------------------- */

e depois disso você encontra:

.footer-inner .widget h2,
.sidebar .widget h2 {
padding-bottom: .7em;
}

embaixo de "padding-bottom: .7em;" e antes da "}", coloque:

background-image: url(URL DA SUA IMAGEM);
background-position: center;

Deve ficar assim:

.footer-inner .widget h2,
.sidebar .widget h2 {
padding-bottom: .7em;
background-image: url(URL DA IMAGEM);
background-position: center;
}

Aonde está "AZUL", troque por sua imagem

HEY MONSTER'S

OBS: Não salve, visualize, pois você tem que testar o tamanho da imagem para caber certinho no topo, senão sairá deformado.

Se quiser colocar um fundo, invés de imagem, troque o "background-image: url(URL DA IMAGEM);"
por ' background: #000000; ' e aonde está o código de cor, coloque pela sua desejada

Retirar a navbar completamente

Você não sabe o que é "NAVBAR"? Navbar é isso:

Eu não gosto disso no "Blogger", então irei ensinar vocês a tirar isso completamente do blogger, Let's Go Monster's:

Vá no seu Template e procure por : <body

E em cima dele, coloque:


<script type='text/javascript'>
<![CDATA[  ]]>
</script>


Depois de carregar, irá aparecer uma tela para excluir o gadget e aperte "apagar" e visualize. Pronto!

Centralizar o título da postagem

Oi Monster's hoje iniciamos o site "Tutorial VLG", em que ajudaremos vocês a fazer um ótimo site, hoje eu vou mostrar como se centralizar o titulo das postagens:

Vá em modelo > editar modelo > Ctrl + F> e procure por: h3.post-title {
abaixo coloque text-align: center; devendo ficar assim;

h3.post-title {
text-align: center
}

Muitas vezes não se encontra como h3.post-title { , mas também pode se encontrar como:

- h3.post-title, h4 {

OBS: Isso é apenas para os Templates do blogger, você não irá conseguir se for templates de "Sites de Templates"