Botão Personalizado para Seguir o Blog

Hello Staff,

Primeiramente mil desculpas por ter demorado para fazer um post, estou com muita coisa para fazer é o curso de inglês, escola, lição de casa, livros que eu estou lendo e estou querendo ler, e  estou também tentando fazer desenhos de mangá estou quase conseguindo :)  e fora os estudos e etc. Eu tento me organizar mais eu nunca consigo seguir os horários infelizmente :´( .  

Bom agora vamos para outro assunto, como vocês sabem o fofuras de garotas tem uma página do Facebook,  e agora eu também comecei a publicar algumas coisas lá, agora vocês se perguntam :

Como assim Vivian você fala que não tem tempo para o blog, mas tem tempo para sua página no Facebook? º-º  E a reposta é : a página para mim é mais fácil para mexer, eu consigo fazer publicação pelo o celular na pagina e isso ajuda muito, e outra eu to sem ideia de posts para fazer aqui no blog. Mas eu comprei um caderninho para ir anotando ideias de posts e outras coisas. Para quem tem blog ter uma agenda ou um caderninho pequeno para anotações é sempre bom! E agora eu queria fazer um pedido se vocês tem Facebook dá uma curtida lá na minha página? Ficarei muito grata.

Link : Fofuras De Garotas 

Agora chega de enrolação porque eu acho que já falei muito compensei aqui pelos outros posts que eu não falo nada e já vou direto para a postagem kkk. Este post eu vou ensinar a vocês como personalizar botão de seguidores do blog! vamos lá.

Primeiro vá em "Layout" e clique em "Adicionar um Gadget" depoia cole o código:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXX" target="_blank"><img src="LINK-DA-IMAGEM"></a>

Onde está o XXXXXXXXXX é o ID é um meio de identificação de blogs, cada blog tem um ID diferente portando para adicionar o botão precisará copiar o seu ID. Exemplo:

https://www.blogger.com/blogger.g?blogID=1143143376602478025#pageelements/src=dashboard

Este é meu ID :1143143376602478025

Pronto agora copie o ID igual e cole onde pede depois em LINK DA IMAGEM cole URL da imagem do botão. Exemplo de como ficaria o meu:

<a href="http://www.blogger.com/follow-blog.g?blogID=1143143376602478025" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9s_VQ7ot7MJNBDs6xNAIxznRoypueHJIRjO-KWIDqDJleXI6NnBpcVjdOyMOS3nHLABiTIZLbpUEe8g6ufwmS3QxLUrakB4yWl7adGz_W4uAmHk0pNaXZLpXxLnp8rwsl2_DTSXORLnA/s1600/Sem+t%C3%ADtulogS.jpg"></a>

Algumas sugestões de botões: 

Beijos espero ter ajudado. Até a próxima!!

Efeito: Just Jump

Olá pessoal,

Vamos para mais um tutorial de efeitos em fotos, bom hoje eu trouxe um efeito super fofo eu adorei e super fácil de se fazer. O efeito se chama Just Jump , se nunca viram o efeito aqui está a

Previa do Efeito Just Jump

. Como eu to sem assunto não tenho nada mais para falar, vamos ao tutorial. 

Primeiro vá em:

                                              Modelo > Editar HTML > E procure por:

                                                                      ]]></b:skin>

E cole logo acima este código :

.jump-isa:hover{-webkit-transform: translatey(-50%) rotate(-360deg) scale(1.3); border-radius: 50px;}
.jumping-isa img{width: 50px;box-shadow:0px 0px 0px #ccc;-webkit-transition-duration: .80s;}
.jumping-isa:hover img {opacity: 0.4;-webkit-transition-duration: .80s;}
.jumping-isa img:hover {opacity: 1;-webkit-transition-duration: .80s;}

Depois Salve e vá em:

Vá em Layout > Adicionar Gadgets > HTML/JavaScript > Cole:

<div class="jumping-isa">

<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>

<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>

<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>

<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>

<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>

<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>

</div>

Pronto modifique onde pede e salve. E se usar dê créditos ao Eu amo HTML e ao Fofuras De Garotas. Beijos e até a próxima. 

/

Efeito HeartBeat

Olá galerinha,

Bom hoje eu trouxe mais um efeito para fotos, é fácil também e super lindo, bom o efeito se chama  HeartBeat eu aprendi a fazer no blog Eu amo HTML, se vocês não conhecem o efeito aqui está uma: 

Previa

Vamos então ao tutorial. Primeiro vá em:

Modelo > Editar HTML > E procure por:

]]></b:skin>

Quando achar cole em cima este código:

@-webkit-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
@-moz-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
@-o-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
.efeito-heartbeat-isa {-webkit-transition: .5s; border:solid 2px #E42D8A;border-radius: 10px;box-shadow: 1px 1px #caebe6;}.efeito-heartbeat-isa:hover {-webkit-animation: efeito-heartbeat-isa .5s alternate infinite linear;border:solid 2px

#DC1B7A;} 

border: solid 2px #E42D8A; é a borda, a grossura e a cor da borda. Se não quiser apague.

border-radius: 10px; borda arredondadas

border:solid 2px #DC1B7A; é a borda, a grossura e a cor quando passa o mouse por cima. Apague se não quiser.

Depois Salve e vá em:

Vá em Layout > Adicionar Gadgets > HTML/JavaScript > Cole:

<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>

Pronto modifique onde pede e salve. E se usar dê créditos ao Eu amo HTML e ao Fofuras De Garotas. Beijos e até a próxima. 

Efeito: Agitated

Olá galerinha,

Hoje eu vou fazer 2 postagens de efeitos para fotos. A primeira muito fofo eu fique apaixonada pelo efeito, eu estava até pensando em colocar na imagem de about me. Mais chega de blá blá blá o nome do efeito é Agitated, eu aprendi a fazer com este blog aqui Chá & Cupcake, então os créditos vão para lá. Bom se vocês não conhece o efeito aqui está a:

Previa

Primeiramente vá em modelo depois editar HTML e pesquise por:

]]></b:skin>

E cole acima da tag este código:

@-webkit-keyframes gangorra {
from {-webkit-transform: rotate(10deg);}to {-webkit-transform: rotate(-10deg);} }
@-moz-keyframes gangorra {
from {-moz-transform: rotate(10deg);}to {-moz-transform: rotate(-10deg);} }
@-o-keyframes gangorra {
from {-o-transform: rotate(10deg);} to {-o-transform: rotate(-10deg);} }
.mn {
text-align: center; margin:2px; }
.mn:hover {
    -webkit-animation-name: gangorra;
    -webkit-animation-duration: .01s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
-moz-animation-name: gangorra;
    -moz-animation-duration: 0.1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
-o-animation-name: gangorra;
    -o-animation-duration: 0.1s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;}

Depois vá em Adicione um gadget HTML/JavaScript e cole:

<a href="LINK_DO_BLOG" target="_blank" title="NOME_DO_BLOG"><img class="mn" src="URL_DA_IMAGEM" /></a>

Repita quantas vezes precisar e modifique onde esta pedindo, e pronto.  Beijos e até a próxima 

Menu: Express

Olá galerinha,

Hoje eu trouxe para vocês um tutorial super legal e fácil de se fazer. Bom eu vou ensinar a vocês a fazer o menu EXPRESS, se ainda nunca ouviram falar do menu aqui está a :

Previa

Se gostou vamos ao tutorial.

Primeiro vá em modelo depois editar HTML e pesquise por:

]]></b:skin>

E cole  acima da tag este código:

@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');} .express { background-color: #CORDOFUNDO;  color: #FFFFFF;  display: block;  width: LARGURADOMENUpx;  height: 15px;  line-height: 13px; font-family: handy; font-size: 8px; text-align: center; text-decoration: none; text-transform:uppercase; margin-right: 1px; margin-bottom: 1px; padding-top: 2px; text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;text-transform: uppercase;} .express:hover {opacity: 0.5; margin-left: -30px;}

                                           Modifique as partes em negrito e salve.

Depois vá em Adicione um gadget HTML/JavaScript e cole:

<center><a href="SEULINK" class="express">NOME DO LINK</a> <a href="SEULINK" class="express">NOME DO LINK</a> <a href="SEULINK" class="express">NOME DO LINK</a> <a href="SEULINK" class="express">NOME DO LINK</a> <a href="SEULINK" class="express">NOME DO LINK</a></center>

Modifique a onde está pedindo e salve. Prontinho super fácil né ? Beijos e até a próxima.

Menu de status

Olá galerinha,

Bom vou ensinar a vocês como fazer um menu para status.É mega fácil de se fazer, e sem falar que o menu é super fofo. Eu vi este tutorial no blog Portal Encantado,  então os créditos são todos para ele. Vamos ao tutorial?

Preview

Primeiro procure pela tag:

]]></b:skin>

                                                              Depois acima dela cole: 

/* wishlist */ .extras { background: #F5F5F5; text-shadow: 1px 1px 0px #FFF; color: #494949; padding: 3px; margin-bottom: 3px; border-left: 4px double #36b1b9; border-radius: 0px 4px 4px 0px; -o-border-radius: 0px 4px 4px 0px; -moz-border-radius: 0px 4px 4px 0px; -webkit-border-radius: 0px 4px 4px 0px;} .extras:hover { border-left: 4px solid #36b1b9 ;} .extras:hover aviso { background: #36b1b9 ; padding: 3px; color: #FFF; text-shadow: 1px 1px 0px #d0adcd; border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;} /* wishlist */

Modifique como quiser, e clique em salvar. Feito isso vá em:

                       Layout >> Adicionar Gadget >> HTML/JavaScript >>

                                                                            E cole: 

<div class="extras"> Dona:<aviso>Vivian</aviso></div> <div class="extras"> Sigla:<aviso>FDG</aviso></div> <div class="extras"> Desde:<aviso>23 maio 2013/quinta-feira</aviso></div> <div class="extras"> Meta:<aviso>100</aviso></div>

Mude de acordo com o seu blog, e prontinho. Beijos espero que tenham gostado.

Tutorial: Data Personalizada no blog

Olá galerinha,

Hoje começa a semana de tutoriais do blog. Bom eu vou ensinar a vocês como personalizar a data do blog, eu aprendi a fazer no blog Menina Diva Da Moda. 

Ela tem umas bordinhas arrendondadas:

 e quando passa o mouse por cima ele fica sem a borda arredondada :

Você pode editar as cores do seu jeito. Vamos ao tutorial!

Primeiro pesquise por:

]]>

Depois cole este código em cima da tag que encontrou

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.main-inner h2.date-header {
font-family: silkscreen;
margin-right: -59px; /* Altere o valor até que fique do tamanho certo */
margin-top: 10px;
float: right;
font-size: 8px;
padding: 5px;
color: #fff; /* Cor da Letra */
background: #bc8fbc; /* Cor do fundo */
text-shadow:#767676 0px 1px 1px;
box-shadow: 2px 2px 3px #ccc; /* Sombra */
border-top-left-radius:0px;
border-top-right-radius:10px;
border-bottom-left-radius:0px;
border-bottom-right-radius:10px;
-webkit-transition-duration: .50s;
}
.main-inner h2.date-header:hover {
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
font-family: silkscreen;
-webkit-transition-duration: .50s;
background: #DB7093; /* Fundo hover */
}

Nas cores destacadas de verde modifique como quiser. Foi isso e espero que tenham gostado. Até a próxima. 

Tutorial: Bordas coloridas no blog

Olá galeraaa,

Hoje eu trouxe um tutorial bem legal, e fácil.Vou ensinar a vocês como colocar bordas coloridas nos gadgets, igual a do meu blog. é super fácil e rápido.

Vamos lá

Primeiro vá no painel do seu blog depois:

Modelo - Editar HTML- e procure por:

.sidebar .widget {

Depois abaixo do código cole:

  

border-top: 10px solid #d4d4d4; border-bottom: 10px solid #d4d4d4;

Clique em salvar. E confira se deu certo.

border - é o comando de borda.

bottom - deixa a borda no fim do gadget.

top - deixa a borda no começo do gadget

10px - tamanho da borda. Altere o número para aumentar ou diminuir a borda.

solid - é o tipo da borda.

#d4d4d4; - é a cor da borda.

Bom foi espero que tenham gostado. Beijos 

Efeito Borderr

Olá pessoal,

Hoje vou fazer um tutorial de um efeito super fofo,lindo e também muito fácil. O efeito pode ser usado na elite de afiliados ou em uma imagem que você queira! Bom vamos ao tutorial. 

Previa Do Efeito

Primeiramente vá no painel do seu blog depois em:

Layout >> Adicionar um Gadget >> HTML/JavaScript

E cole :

<style> .borderr{ border-radius: 10px 30px / 20px 15px; -webkit-transition-duration: .80s; } .borderr:hover{ border-radius: 5px ; opacity:0.65; -webkit-transition-duration: .80s; } </style>

Clique em salvar. E a onde você quer que apareça a imagem cole:

<a href="URL DO BLOG" title="NOME DO BLOG" target="_blank"><img src="LINK DA IMAGEM" class="borderr" /> </a>

Modifique a onde pede e é só isso clique em salvar e pronto fácil né? Beijos

Personalizar Comentários.

Oi pessoal hoje tutorial super fácil e rápido. Vamos aprender a personalizar os comentários, Bora lá.

Estilo do comentário:

Primeiro vá no painel do seu blog depois:

Editar HTML clique em F3 e procure por:

 

e logo acima cole esse código:

/**=========== AREA GERAL DOS COMMENTS ===========**/ .comments{ width: 95% !important; /* largura da caixa de postagem, se sair pra fora do post diminua*/ margin:0 auto; font-style: normal !important; font-size: 12px !important; font-family: verdana !important; background: url(http://migre.me/aC1IZ) !important; /* fundo dos comentários - se desejar coloque outro background (trocando a url) */ border-radius: 10px; /* bordas arredondadas no fundo- se não quiser apague essa linha */ box-shadow:0 0 5px #aaa; /* sombra na caixa do fundo - se não quiser apague essa linha */ } /**== HEADING DOS COMMENTS (1 comentario, 2 comentários...) ==**/ .comments h3,.comments h4{ width: 98%; padding: 7px; margin: 10px 0 !important; color: #87CEEB !important; /* cor da fonte */ text-align: center; /* alinhamento */ text-shadow:0 0 2px #ccc; /* sombra – se não quiser apague essa linha */ font-family:'Dancing Script' !important; /* fonte - se preferir troque */ font-size: 37px !important; /* tamanho do texto - se preferir troque */ } /**= BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone...) =**/ .comments .comment-block { position:static !important; /* mantém o avatar na frente do bloco - não mude */ background: #fff; /* cor do fundo da caixinha dos comentários */ margin-left: 23px; padding: 0 15px 0 23px; border-top: 15px #FF80BC solid; /* borda encima da caixinha de comentário */ border-radius: 5px; /* bordas arredondadas */ box-shadow:0 0 3px #ccc, inset 0 0 11px #eee /* sombra na caixinha – apague se não quiser */ } .comments .comments-content .comment { padding:20px 10px !important; margin-bottom:15px !important } /* estilos para o nome do autor do comentário */ .comments .comments-content .user a{ font-style:normal; border:0; color: #CD96CD !important; /* cor da fonte do nome de quem comenta */ letter-spacing: 1px; font-family:'Dancing Script'; /* fonte do nome de quem comenta */ font-size: 26px; /* tamanho da fonte */ text-shadow:1 1px #aaa; /* sombra na fonte do nome */ background: transparent; padding: 4px 36px; margin-left:-31px !important; border-bottom-right-radius:10px; margin-top:-2px } .comments .comments-content .user{ font-style:normal; border:0; color: #FF80BC !important; letter-spacing:1px; font-family:'Dancing Script'; font-size: 26px; text-shadow: 0 1px #aaa; background: transparent; padding: 4px 36px; margin-left: 11px !important; border-bottom-right-radius:10px;margin-top:-2px } /*Nome do autor do comentário hover*/ .comments .comments-content .user a:hover { text-decoration:none !important; color: #A1DBE4 !important; /* cor do nome do autor do comentário quando passa o mouse */ } /* estilo da data */ .comments .comments-content .datetime a{ background: none !important; font-family: times new roman; /* fonte - mude se desejar */ float: right; /* posicionamento */ font-size: 12px; /* tamanho da fonte da data */ color: #fff !important; /* cor da data */ border:0 !important; margin-top: -15px; /*aumente/diminua o nº para mover a data – negativo sobe e positivo desce*/ } /* estilo do avatar */ .avatar-image-container { min-width: 60px; /* determina um mínimo de largura */ min-height: 60px; /* determina um mínimo de altura */ padding:0 !important; margin-left: 30px!important; /*aumente/diminua o nº para mover o avatar p/ os lados */ margin-top: 20px !important; /*aumente/diminua o nº para mover p/ cima/baixo */ position: absolute !important; overflow: hidden !important; background: #fff; } .avatar-image-container img { border: 3px #EAEAEA solid; /* borda do avatar */ margin:0; max-height: 48px; min-height: 48px; max-width: 48px; min-width: 48px; } /**=========== TEXTO DO COMENTÁRIO ===========**/ .comments p{ font-size: 14px !important; /* tamanho da fonte do comentário */ font-family: Times new roman !important; */ fonte do comentário */ text-shadow: 0 1px #eee !important; /* sombra na fonte */ padding-left: 55px !important; padding-bottom: 20px; color: #888 !important /* cor do texto */ } /**=========== BOTAO – RESPONDER ===========**/ /* botão responder do segundo nível */ .comments .continue a { background: #87CEEB !important; /* cor do fundo */ color: #fff !important; /* cor da fonte */ float: right; /* posicionamento */ padding: 8px !important; height: 10px !important; line-height: 15px !important; margin-top: -35px !important; } /* botão responder do primeiro nível, mais estilos para o botão do segundo nível */ .comments .comment .comment-actions a,.comments .continue a { font-size: 11px !important; float: right; height: 10px !important; /* altura do botão */ color: #fff !important; /* cor da fonte */ padding: 6px; border: 0 !important; line-height: 10px; margin: 5px; margin-left: 40px; font-family: helvetica; /* fonte - mude se desejar*/ text-shadow: 0 0; border-radius: .5em; /* bordas arredondadas */ background: #CD96CD; /* cor do fundo */ font-weight: 800; box-shadow: 0 1px 2px #666 /* sombra no botão - apague a linha se não quiser */ } /* botão hover*/ .comments .comment .comment-actions a:hover { text-decoration:none !important; background: #FF80BC; /* cor do fundo do botão hover */ } /* estilos para bloco de respostas */ .comments .comment-thread.inline-thread { background-color: transparent !important; margin-top: 40px; padding: 0.5em 1em; border-radius: 5px; /* bordas arredondadas – apague a linha se não quiser */ } .comments .comments-content .comment-replies { margin-top:1em; margin-left:56px !important } .comments .continue {border-top:0 !important} .comments .thread-toggle,.icon.blog-author {display:none !important} /**======= Fim [candylland.org] [goimagines.blogspot.com] =======**/

É isso, espero que tenha gostado. Se usar não esqueça de creditar.

//

Personalizar os marcadores do blog

Olá galerinha, hoje vim fazer um tutorial que a Anna Carolina me pediu. Ela me mandou um E-mail querendo que eu ensinasse como fazer o efeito dos meus marcadores. Vamos lá!

Modelo dos marcadores:

Primeiro vá no painel do seu blog depois:

Layout >> Adicionar um Gadget >> Marcadores

você deve configurar o Gadget  de marcadores 

como o modelo abaixo:

Depois vá em:

Editar HTML  e  Procure por :

Quando encontrar cole este código:

.label-size{ margin:0; padding:0; position:relative; } .label-size a{ float:left; height:24px; line-height:24px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#FF1493; color:#FF1493; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #FF1493 transparent transparent; border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px; height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#FF1493; -moz-box-shadow:-1px -1px 2px #FFFAFA; -webkit-box-shadow:-1px -1px 2px #FFFAFA; box-shadow:-1px -1px 2px #004977; } .label-size a:hover{background:#FFFAFA;} .label-size a:hover:before{border-color:transparent #FFFAFA transparent transparent; }

Prontinho agora mude as cores se quiserem. vou deixar o link da tabela de cores HTML AQUI

Até a próxima beijos. Qualquer dúvida comente.