Como Criar Imagens Para Categorias Do Blog

Oi gente tudo bem? Hoje eu vou ensinar pra vocês como criar imagens para categorias do blog, eu já ensinei como colocar categorias com imagens nesse post AQUI. Vamos ao tutorial!

1. Primeiramente eu aconselho que vocês busquem as imagens nesse site AQUI lá tem uma variedade incrível de ícones, para procurar por uma imagem específica você deve digitar a palavra em inglês no campo de pesquisa.

2. Depois de ter escolhido as suas imagens, abra o programa photoscape e abra a imagem base que eu vou deixar aqui em baixo:

Eu deixei essa imagem base transparente pra vocês para que todas as imagens das categorias fiquem do mesmo tamanho.

3. Com a imagem base aberta no photoscape clique em "Objeto"  depois clique no ícone de fotografia e depois em "Foto" Veja os exemplos abaixo:

4. Depois que você adicionar a imagem escolhida ajuste ela na imagem de base. Veja o exemplo abaixo:

5. Para inserir o título da sua categoria na imagem clique em "T" Veja os exemplos abaixo:

6. Agora ajuste o texto na imagem. Veja o exemplo abaixo:

7. Agora é só salvar a imagem, e hospedar ela na internet, existem vários sites que você pode hospedar imagens, como por exemplo o picasa, para saber como adicionar categorias com imagens no blog veja esse post AQUI

Qualquer dúvida é só comentar.

Como Colocar Categorias Com Imagens No Blog

Oi gente tudo bem? Hoje eu vou ensinar pra vocês como colocar categorias com imagens no blog, assim como está no meu, veja o exemplo abaixo:

Esse tutorial é super fácil, então vamos lá!

1. Primeiramente eu aconselho que vocês façam o download do tema de vocês, para isso vá em Tema > Fazer backup/restaurar > Fazer download do tema

2. Depois de salvar o tema, vá em Layout > Adicionar um gadget e cole o código abaixo:

<center>

<a href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM" /></a><a 

href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM" /></a><a href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM" 

/></a><a 

href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM" /></a><a 

href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM" /></a><a href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM"

 /></a><a href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM"

 /></a><a href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM" /></a><a 

href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM" /></a><a

 href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM" /></a><center>

Esse código tem 10 categorias, pra acrescentar mais é só adicionar esse código:  <a href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM" /></a> 

antes da tag <center>   que também tá marcado de rosa no código acima.

Para criar as imagens para as categorias, eu indico esse site AQUI eu peguei algumas imagens das categorias do meu blog lá, algumas já veio no layout 

Vou deixar uma base pra vocês criarem as imagens para as categorias de vocês aqui abaixo:

 

Vocês podem criar essas imagens no photoscape, pra isso vocês vão abrir no photoscape essa base transparente pra categorias que eu deixei acima, depois vão em "Objeto", depois clica no ícone de fotografia, depois clica em "foto" e abre a imagem que vocês escolheram pra categoria, depois clica em " T " e adiciona um título pra sua categoria, exemplo: "Resenhas" depois ajusta o título onde você quer na imagem e pronto! Qualquer dúvida é só comentar aqui. 

Créditos do código: Blog da Mary 

Como Colocar Nova Caixa De Curtir Do Facebook No Blogger (Sem Bugs)

Olarr galera, hoje eu trouxe um tutorial bem legal pra vocês. Até a semana passada eu tava quebrando a cabeça pra conseguir adicionar a nova caixa de curtir do facebook no blogger, e como só agora eu descobri o que estava me atrapalhando, e finalmente consegui adicionar o Page Plugin no meu blog resolvi ensinar pra vocês *-* Então vamos lá!

Em primeiro lugar certifique-se de que sua página está marcada como "página publicada" nas configurações. Mas como? Simples! acesse sua página, clique em configurações, depois em "visibilidade da página" clique em editar e marque a caixinha "página publicada" salve e blz tudo certo. Vejam o exemplo abaixo:

Passo 1

Passo 2

Se já tiver marcado como página publicada como está ai na foto, não precisa editar que já tudo ok, agora se estiver marcado como "Tirar página do ar" edite e marque "Página publicada".

Agora certifique-se de que no seu navegador não tenha nenhuma extensão para bloquear anúncios, se por acaso tiver (no meu caso tem) desative a extensão tanto no site do facebook, quanto no seu blog se não, não vai dar certo OK? no meu caso a extensão que estava me atrapalhando era essa  aqui >> 

Depois de desativar a extensão, tá tudo certo você vai ver exatamente como a caixa vai ficar no blog, e também poderá visualizar no seu blog :)

Agora sim vamos começar!

Primeiramente clique aqui > Page Plugin , irá abrir a página abaixo:

Onde tá escrito "Facebook Page Url" você vai apagar o link e colar o link da sua página, Depois disso vai ficar assim:

Agora você irá marcar as opções que você quer que apareça no box e desmarcar as que não quiser. Recomendo marcar a opção "Adapt to plugin container width" pois o box já vai ajustar a largura e altura com o seu blog :) Depois de personalizar o seu box clique em Get Code e irá aparecer os seguintes códigos:

Não feche a janela.

Copie o primeiro código abra este site: Blogcrowds e na caixa em branco que tem no site cole o código copiado e clique em PARSE, agora copie o código transformado. Depois disso vá em Blogger > Design > Modelo > Editar html e dê Ctrl f quando a caixinha de pesquisa abrir procure por <body>  se não encontrar procure por </body (eu não encontrei digitando <body> mas quando digitei </body deu certo!) embaixo da tag <body> ou </body cole o código transformado salve e OK :)

Agora vá em Blogger > Layout > Adicionar um Gadget e adicione um gadget HTML/JavaScript Depois volte para a janela do facebook onde está o segundo código copie e cole no gadget HTML/JavaScript salve e pronto! a caixa de curtir já aparecerá no seu blog.

Então é isso galera, beijos e até a próxima :*

Como Colocar Grey Effect No Blog

Oi gente tudo bem? hoje eu trouxe um tuto muito facil e maravilhoso :') como colocar aquele efeito pra foto que a foto fica preto e branco quando passamos o mouse em cima dela, coloquei no blog hoje mesmo e já vou passando pra vocês, let's go!

Seguinte: primeiro vá em Design > Modelo > Editar HTML 

Depois aperte Ctrl + F e na caixinha que abrir procure por:  ]]></b:skin> 

Agora cole este código img{-webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear}

img:hover{-webkit-filter: grayscale(100%);z-index: -99px;} em cima de ]]></b:skin>

salve e visualize o blog e pronto! gostaram? se tiverem dúvidas comentem. Então é isso gente não falei que era água? rs, Beijos e até o próximo post.

Tutorial Como Colocar Ícones De Redes Sociais No Blog.

Oi gente, tudo bem? demorou mas saiu esse post kk, que eu tava querendo fazer a muito tempo, hj vou ensinar pra vocês como colocar ícones de redes socias no blog... como eu fiz no meu, veja o exemplo abaixo:

então vamos ao tuto *-*

Vá no painel do blog, depois em Layout e adicione um novo gadget HTML/JavaScript

E lá cole o código abaixo:

<a href="URL DA REDE SOCIAL"><img src="URL DA IMAGEM DO ÍCONE" /></a>

Substitua "URL DA REDE SOCIAL" por o link da rede social que você deseja, e "URL DO ÍCONE" pelo link do ícone da rede social e pronto.

Obs: Se você quer adicionar mas de uma rede social no seu blog, é só copiar o código outras vezes e fazer as mesmas alterações de link de acordo com a rede social que você desejar! Fácil né? vou deixar os ícones que eu to usando no meu blog se for usar por favor comente essa postagem avisando :3

Lembrando que pra usar esses ícones ae você vai ter que hospedar eles em algum site, para pode copiar os URL'S

Então é isso galera, beijos e até a próxima

Como Colocar Slide No Blog

 

Oi gente :3 vocês viram que eu coloquei o slide no meu blog? *-* Então hoje eu vou ensinar pra vocês como colocar esse slide no blog... vamos ao tutorial

- Primeiro vá em modelo > Editar HTML e pesquise por  </head> (aperte Ctrl + F)

- Feito isso cole o seguinte código abaixo de </head>

 <style type="text/css">

/* <![CDATA[ */
#w2bSlideContainer           {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
#w2bNivoSlider              { position:relative;
width:640px  !important; /*largura do slide*/height:300px  !important; /*Altura do slide*/
background:  #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pAdtWewn2jLlZrrp3pIPMzM2psMAZh0YDzIlxCmMuF8SpDbRM8d096v5PMYvcCAccZYZ7HPSh4WBBGTs6Fswn6bCx2ls-PE7A13SgOPnx7WGEmz5nCTh3EUE-ONKMEJjmKdIMMEBtogr/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #000;/*Coloque borda se quiser*/ }
#w2bNivoSlider img           {position:absolute; top:0; left:0;  display:none}
.nivoSlider                  {position:relative;width:100%;height:auto;}
.nivoSlider img              {position:absolute;top:0;left:0}
.nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice                  {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img                {display:block}
.nivo-caption                {padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 630px;/*Largura da legenda*/ z-index:8;}
.nivo-caption p              {padding:2px;margin:0}
.nivo-caption a              {display:inline!important}
.nivo-html-caption           {display:none}
.nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("URL_IMG_SETA") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav                {left:10px}
.nivo-nextNav                {background-position:-30px 0!important;right:10px}
.nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("URL_IMG_BULLETS") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect           : 'random',
slices           : 10,
boxCols          : 8,
boxRows          : 4,
animSpeed        : 500,
pauseTime        : 4000,
startSlide       : 0,
directionNav     : true,
directionNavHide : true,
controlNav       : true,
keyboardNav      : false,
pauseOnHover     : true,
captionOpacity   : 0.8
});
});
/* ]]> */
</script>

As partes onde está em negrito são as que você vai ter que editar de acordo com o seu blog ou como você quiser que fique o slide, depois clique em salvar modelo.

- Agora vá em Layout > Adicionar gadget > adicione o gadget HTML/Javascript e dentro dele cole o seguinte código:

<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div>

Onde está escrito Link do slide, você vai colocar o link de uma postagem por exemplo, Url da imagem, você vai colar o endereço da imagem que você quer que apareça no slide, Legenda da imagem, a legenda que você quer que fique e pronto! ta feito o seu slide :3

Então é isso galera bjs.

Como personalizar o menu do blog

 

Oi gente tudo bom? trouxe um tutorial divino pra vocês :3 que como personalizar o menu do blog, mas o que é menu do blog? e onde tem as paginas (inicio, contato, por exemplo) vejam o exemplo abaixo: 

Depois de personalizado o menu vai ficar mais ou menos igual o meu... então vamos ao tutorial!

Primeiro vá em modelo> editar HTML > Aperte ctrl+f e procure por  /* Tabs

você vai encontrar o seguinte código abaixo:

 /* Tabs
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}

.tabs-inner .section {
margin: 0;
}

.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}

.tabs-inner .widget li {
border: none;
}

.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: $(tabs.text.color);
font: $(tabs.font);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color);
}

Apague todo o código acima e substitua por este:


* Menu do blogger personalizado by Go Imagine modificado por Bloguinho Cute
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: 0px; /*para subir ou descer o menu troque o número*/
margin-left: 0px; /*para afastar o menu para esquerda ou direita troque o número*/
}

.tabs-inner .section {
margin: 0;
}

.tabs-inner .widget ul {
padding: 0;
}

.tabs-inner .widget li {
border: none;
}

/*Estado normal do menu*/
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: #fff; /*cor da fonte*/
font: $(tabs.font); /*fonte*/
border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px;
background: #BFCED5; /*cor do fundo normal*/
margin-left: 8px; /*espaço entre os botões*/
}

/*Estado hover e selecionado*/
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: #8BC2C9; /*cor do fundo hover/selecionado*/
color: #fff; /*cor da fonte*/
border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px; /*espaçamento interno*/
}

 Lembrando que no margin-top números positivos descem e negativos sobem. Já no margin-left números negativos vão para a esquerda e positivos para a direita.

Viu como é  facíl gente? *-*  Então é isso galera beijos! ;D

 Créditos á Goimagine e Bloguinho Cute

Como fazer cabeçalho ocupar toda a largura do blog!

Oi gente, hoje vou ensinar pra vocês como fazer o cabeçalho ocupar toda a largura do blog, não vou dizer que é simples, mas também não é tão dificil... bem, existem duas maneiras de ajustar o cabeçalho com todo o blog, sem um plano de fundo e com um plano de fundo eu usei a primeira porque não tive muita paciência, e ainda sim o meu cabeçalho não ficou beem do jeito que eu queria mas deu pro gasto rs, vamos lá...

Opção 1. sem o plano de fundo:

Primeiramente tem que ter o seu cabeçalho pronto e um cabeçalho transparente, sem brush, sem nada. depois vá em modelo > Layout > cabeçalho (onde tem o nome do seu blog) > editar e carregue a imagem transparente.

Depois vá em modelo > personalizar > plano de fundo > e carregue o seu cabeçalho (normal, com brush etc) Não esqueça de marcar a opção "NÃO DIVIDIR EM BLOCOS" quando a sua imagem carregar.

ATENÇÃO: seu cabeçalho não pode ter mais que 300 kb, se tiver vai aparecer uma mensagem dizendo que o arquivo é muito grande, por isso quando você estiver fazendo o seu cabeçalho preste atenção no tamanho da foto das ilustraçoes se voce for usar é claro, escolha imagens com poucos kb! e sempre redimensione o seu cabeçalho! no meu eu usei 1444 de largura! mas isso depende do seu layout, você vai ter que procurar uma largura que ajuste perfeitamente com o resto do blog, ( foi nessa parte que me faltou a paciência heuheu )

Opção 2. com um plano de fundo:

 Vá em modelo > Editar HTML clique dentro da caixa do html primeiro agora aperte Ctrl+f e vai abrir uma caixinha de pesquisa em cima, na caixinha cole o seguinte codigo >  font: $(body.font);  ou esse >  body {  

pronto depois de ter pesquisado você vai encontrar o codigo abaixo >  

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

}

Apague o codigo acima e substitua por este:

body, html {

height: 400px;

margin: 0;

padding: 0; }

body {

background: url("URL do cabeçalho") no-repeat; }

html {

background: url("URL do background") repeat; }

Onde está escrito "URL do cabeçalho" troque por a url (endereço) do seu cabeçalho, que tem que está hospedado na internet.

Onde está escrito "URL do background" troque por a url do background que você vai usar! 



                                             Então é isso galera espero que tenham gostado do tutorial, beijos :3

Tutorial: Como Fazer Dread De Lã!

     

Oii gente, sei que faz um tempão que não posto aqui, mas hoje trouxe um tutorial divino pra vocês rs. Hoje vou ensinar como fazer dread de lã :3 fiz no meu cabelo e gostei mt *-* essa é uma otima alternativa pra quem não tem coragem de fazer dreads de verdade ou não consegue como eu uhsauh. Então vamo lá:


Passo 1: Pegue uma mecha do seu cabelo e faça uma trança, ou uma trança de dois aquela que você só dá duas voltas.

Passo 2: Pegue a lã e vá enrrolando na trança até o fim dela, depois de um nózinho no final e pronto.


E é só isso, viu? simples e prático,


                                                          bjs.

Layouts Simples Para Blog! ( PARTE 2, LAYOUTS)

                                                       Layouts *-*

( veja como como colocar os layouts no seu blog, neste post ~>  http://rockersdointerior.blogspot.com.br/2012/08/layouts-simples-para-blog-parte-1.html )

Layout  menina  com estilo:

(clique na imagem para aumentá- la )

Banner para este layout:

( clique na imagem para aumentá- la )

Download do código desse layout:

http://www.4shared.com/office/5wM4SEHs/layout_menina_com_estilo.html?

Layout  marilyn monroe :

( clique na imagem para aumentá- la )

Banner para este layout :

( clique na imagem para aumentá- la )

Download do código desse layout: 

http://www.4shared.com/office/W23bbZZx/layout_marilyn_monroe.html?

Layout  menina rocker:

( clique na imagem para aumentá- la )

Banner para este layout:

 ( clique na imagem para aumentá- la )

Download do código para esse layout: 

http://www.4shared.com/office/0nmIf07O/layout_menina_rocker.html?

Então é isso gente espero que tenham gostado dos layouts, e dos tutorias *-*, qualquer dúvida pode comentar que eu respondo. Sei que os códigos estão enormes mas fazer o que né? rs o importante é servir pros blogs de vocês. E por favor gente peço que quem for usar comente avisando, e coloque os créditos please *-*  podem reblogar também se quiserem mais coloque meus devidos créditos ok? 

                            Kissu ;*