24 dezembro 2013

Tendência - óculos redondos


      Os óculos redondos estão super em alta, ainda mais agora que o verão começou. Eles tem uma pegada anos 70. Tem de várias cores e tamanhos. Mas cuidado na hora de usar se você tiver rosto redondo.


      As gêmeas Mary-Kate e Ashley Olsen usam e abusam dos óculos redondos.


      Lady Gaga aposta nesse tipo de óculos também.



      Mas pensa que só as mulheres usam? Não, pelo contrário. Os homens também ficam muito bem com óculos redondos. John Lennon usava e Ozzy Osbourne também usa o tempo todo.


      Aposte nesses óculos você também.


      Beijinhos ;*

21 dezembro 2013

Como colocar um gadget do instagram no blog



      O instagram é uma rede social que eu adoro, e é ótimo para quem tem um blog. Nesse post vou mostrar como colocar um gadget do insta no seu blog. É muito fácil.

      A primeira coisa a se fazer é acessar o site SnapWiget, depois é só clicar em "Get Your Free Widget".


   
      Agora preencha os campos como na imagem:


      Se você quer que apareçam apenas algumas fotos específicas é só usar uma Hashtag, e colocar essa Hashtag no campo abaixo do seu instagram.
      Após fazer todas as alterações clique em "Preview" para ver como ficou. Por último clique em "Get Widget" e copie o código.
      Acesse sua conta do blogger, clique em "Layout" e depois "Adicionar um gadget".
      Escolha o gadget "HTML/JavaScrip", cole o código e salve.
      Coloque onde achar que fica melhor. Salve as organizações e pronto.

     Este é o gadget aqui do blog:



      Fácil não é? Espero que este tutorial tenha sido útil!
      Sigam-me os bons!(rsrsrs) Instagram: @schaferbeatriz e Fanpage: Bia Blythe

Beijinhos ;*


20 dezembro 2013

Cases para smartphones



      Como não amar cases, não né? Hoje, as famosas capinhas para celulares deixaram de ser apenas uma proteção para seus aparelhos, virou um acessório. Nunca se comprou tantas capinhas como nos últimos dois anos, por isso a variedade é cada dia maior, principalmente para iphone.
      Existem capinhas para todos os gostos. Muitas pessoas até colecionam. Que tal comprar algumas capinhas novas para o seu Smartphone? Confira algumas capinhas super fofas:


Gostou das capinhas? Mostre as suas.
Beijinhos. ;*

14 dezembro 2013

Tutorial - Nivo Slider


      Hoje eu trouxe um tutorial muito bom. Vocês podem encontrar esse tutorial também no site Cherry Bomb. Infelizmente este site não funciona já faz tempo.

      O nivo slider é ótimo, pois você pode deixá-lo do tamanho que quiser, e ele possui 15 efeitos de transição. O tutorial não é difícil, mas é sempre bom prestar bastante atenção. Os slides do seu blog ficarão parecidos com os slide aqui do meu blog.

      Vá até "Editar HTML" e procure por "</head>", abaixo disso, cole este código:
-------------------------------------------------------------------------------------------------------------------------------
<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("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/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 parte em verde e negrito, são as parte que você pode alterar para que o slide fique como você deseja. No fim deste post vou deixar umas imagens para quem quiser colocar as "bolinhas" e as setas no slide.

      Agora, para que os slides aparecem vá em "Layout" e "Adicionar um Gadget" "HTML/JavaScrip" e cole:

-------------------------------------------------------------------------------------------------------------------------------

<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>

-------------------------------------------------------------------------------------------------------------------------------

      Coloque as imagens e os links dos post relacionados com as imagens. Coloque também as legendas se desejar.


Setas:

Bolinhas:


      Vocês também podem criar suas próprias setas ou bolinhas no photoshop, é bem fácil.

      Esse foi o tutorial de hoje. Deixem seu comentários e dúvidas aqui. Fiquem atentos aos próximos tutoriais. Sigam ao blog e curtam a fanpage.




Beijinhos ;*

10 dezembro 2013

Tutorial - Ícones de redes sociais na sidebar


      Os ícones de redes sociais em um blog é essencial, pois os seguidores do blog começarão a seguir também suas redes sociais. É uma ótima divulgação, além de deixar o blog bonito e mais organizado.
      Para colocar os ícones na sidebar é muito simples e fácil.

      Vá até a opção "Layout" e vamos adicionar um gadget "HTML/JavaScript". Até aí tudo bem?
      No conteúdo iremos colocar o seguinte código:

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

      Agora é só fazer as alterações. Caso queira colocar outras redes sociais é só repetir o código de acordo com o número de redes sociais que você deseja. Três redes sociais, por exemplo:

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

      Caso queira centralizar os ícones basta colar <center> antes de todo o código e </center> no final. Depois é só salvar tudo. Fica mais ou menos assim:



      Não é fácil? Vocês podem encontrar os ícones no google ou podem fazer seus próprios ícones. Eu fiz alguns que vocês podem usar. Aproveitem, é grátis! =P






      Espero que tenham gostado desse tutorial. É super simples, porém útil.
      Curtam a FanPage do blog para continuar acompanhando aos tutoriais e novidades.

Beijinhos ;*

08 dezembro 2013

Tutorial - Como fazer um layout básico


      Olá, meu povo. Tudo bem? Comigo está tudo ótimo, pois estou de bom humor. Meu bom humor hoje é tanto, que vim até aqui para ensinar-los à fazer um layout básico. Mas com básico, quero dizer BEM BÁSICO MESMO, pra quem quer começar do zero. Mas calma minha gente, porque eu vou postar ainda vários outros tutoriais para que vocês continuem dando uma carinha mais autêntica para ao blog de vocês.

      A primeira coisa que vamos fazer é escolher o modelo para começar o nosso layout, clicando em "Modelo" e em seguida em "Personalizar".
      Depois, escolheremos o modelo Travel(viagem). E usaremos o 2º da esquerda para a direita.


   
      Clique em "Avançado" e procure "Plano de fundo da postagem" e escolha qualquer cor, apenas para ajudar a visualizar melhor o que estamos fazendo.


      Agora é só clicar em "Aplicar".
      Clique agora em "Editar HTML" (Fica ao lado de "Personalizar"). Para tirar as bordinhas de papel do template utilize "Ctrl + F", na barrinha que aparecer cole isso: .content-outer .content-cap-top { e depois aperte enter.
      Achou o código? Ótimo! Agora apague apenas o que está destacado em rosa na imagem à seguir. Prestem atenção aos "ponto e vírgula" para não apagar nada que não deva ser apagado.



      
      Visualize, seu blog estará mais ou menos assim:


      A próxima parte é opcional. Para tirar o espaço entre a área da postagem e a barra lateral. Utilizando novamente o comando "Ctrl + F" e cole isso: .main-inner .column-right-inner {
      Apagaremos novamente APENAS o que está destacado em rosa.



      Visualize. Se estiver tudo O.K salve as alterações.

      Agora vamos até "Layout" e clique em "Editar" no cabeçalho.


      Faça o upload de uma imagem para ficar no topo do seu blog. Marque a opção "Em vez de título e descrição". Depois que a imagem carregar é só salvar.

      Agora vamos à outra parte que é opcional. Nós vamos diminuir/tirar o espaço entre a imagem do topo e a área da postagem.
      Volte para "Modelo", "Editar HTML", "Crtl + F" e cole isso: /* Tabs
      Embaixo veremos isso:

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

      Apague a linha destacada em rosa. "Crtl + F" e cole: .main-inner {
      Achou? Ótimo! Agora cole embaixo dele este código: margin-top: -20px;
      Agora, tudo o que você precisa fazer é alterar o número "20" por um número menor, é ir diminuindo e visualizando até ficar do seu gosto(ou até chegar à 0 rsrsrs). Caso você queira aumentar o espaço é só retirar o sinal negativo que antecede o número 20.

      Agora, salve e pronto. Mude para o fundo que quiser, as cores, as letras e tudo mais. Esse foi o layout BÁSICO. O meu ficou assim:



      Espero que tenham gostado, logo logo vou postar vários outros 'tutus' para vocês. Como por slide, paginação numerada e etc. Deixem seus comentários e dúvidas, e os tutoriais que gostariam de ver.

Beijinhos ;*