Como personalizar gadget "A blogueira" - Truques HTML

Oláá! tudo bem com vocês? espero que sim. Como foi o fim de semana de vocês? Espero que estejam bem, os pedidos podem ser feitos pela Ask ou comentários.

 Concentrando no post de hoje, que eu não entendi o pedido, mas vou tentar atender. 

Eu não entendi muito bem o que a pessoa realmente quer, mas vou ensinar alguns truques.

Então isso são coisas bem fáceis, para fazer um gadget de A blogueira/Welcome/sobre/boas vindas, você irá criar primeiro um gadget de HTML/Javascript Você pode escrever nele suas boas vindas normalmente. 

Se você quiser o texto centralizado basta por <center> antes das boas vindas que você escreveu e </center> no fim. pronto seu texto está centralizado. Se você quiser adicionar uma imagem antes do seu texto use o código abaixo 

ficando algo semelhante a isso

<center>meu texto de boas vindas, meu texto sobre mim.</center>

Protegendo seu blog contra plágios - Bloqueando CTRL U

Oláá! Tudo bem com vocês? Faz muito tempo que não trago tutoriais de HTML e personalização né? E olha que sempre rende bem, hoje trouxe um tutorial que já foi postado no blog bem no comecinho de 2013, e ainda tem muita utilidade, como bloquear o CTRL + U do seu blog, ajudando a evitar o plágio.

Como eu falei esse tutorial já foi postado a anos, mas essa semana eu lembrei dele e resolvi testar se ainda funcionava, se implicava em algo, e ainda tem muita utilidade viu! Claro que não resolve o problema com o plágio, quem quer copiar algum código ou roubar algum texto sempre dá um jeito que ninguém imagina,mas esse tutorial com certeza dificulta bastante a quem tentar fazer isso.

É um tutorial muito simples, apenas copiar e colar no lugar e na tag correta dentro do código HTML do seu layout. Mesmo sendo muito simples, antes de iniciar faça um backup do seu layout atual, aprenda aqui. Ou teste em um blog de testes primeiro, que também é uma boa para não afetar seu blog original caso ocorra algum erro.  

Como colocar botão do Pinterest funcional no blog + modelos de botões gratuitos

Olááá! tudo bem com vocês? eu espero que sim! Hoje é dia de tutorial de HTML eu amo essas postagens de personalização de blogs (quem acompanha a muito tempo sabe, compartilho essas dicas e tutoriais desde 2013) e como eu estou usando muito o pinterest para trazer trafego para o blog vou ensinar a colocar o botão de Pin It! nas imagens do seu blog.

É super simples de colocar no HTML do seu blog, e funcionada automaticamente e vou deixar alguns modelinhos de botões para vocês poderem usar já upados só copiar o link da imagem e colocar no código.

O tutorial original é do blog BloggersSentral

Antes de começar o ideal é fazer um backup do seu layout, caso algo dê errado você não perde nada. Aprenda a fazer aqui. 

Clique em Modelo no painel do blogger >> Editar HTML > clique em qualquer parte do código e tecle CTRL+F para aparecer a barrinha de pesquisa nela pesquise por </body>. Encontrou? cole o código abaixo ACIMA dessa Tag e salve. 

Freebies: 3 modelos de ícones sociais para seu blog em cores variadas + Como usa-los no blog

Oláá! tudo bem com vocês? espero que sim! hoje eu estou trazendo uma categoria que eu estava com saudades de atualizar, que é a categoria de freebies/downloads e mais uma utilidade para blogueiros. São Ícones sociais para você colocar na sua sidebar com o link das suas redes para assim os leitores te encontrarem.

Eu fiz 3 modelos de ícones com 5 cores cada!  e no final ensino você a usar no blog, é um código muito simples de HTML. Eu iria fazer um pack com todos os modelos, mas achei que seria um pouco demais, então vou deixar as imagens aqui mesmo e já upadas e vocês podem somente copiar a url para usar no código.

5 cores que eu mais vejo nos layouts e mais neutras foram as escolhidas: Preto,Cinza,Rosa,Azul e textura de glitter dourado.

Veja também: Capas editáveis para sua fã page

Tutorial: 5 Modelos de Postagens Populares Personalizadas (Mais Lidos)

Update feito em 23/02/2019

Olááá! tudo bem com vocês? espero que sim! hoje eu trouxe mais um tutorial super útil para o blog de vocês, que também é muito pedido pelos clientes no portfólio. São posts populares personalizados e automáticos. No total são cinco modelos todos em CSS prontinho para uso, somente com três passos de HTML você já instala o seu! Vem conferir.

Em Tema >> Editar HTML >> Clique dentro da caixa de códigos e tecle Ctrl+f quando aparecer a barrinha pesquise por </body>  e ACIMA dele cole o código abaixo. Não precisa editar nada. 

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/><script type='text/javascript'>//<![CDATA[$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});//]]></script>

2. Pesquise por <head> e ACIMA dessa tag cole o código abaixo. 

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Salve.

3. Escolhendo seu modelo de posts populares, o código do seu modelo favorito e cole ACIMA de </head>

 Modelo 01 

Tutorial: 10 Modelos de blockquote (citação) para o seu blog

Oláá! tudo bem com vocês? espero que sim! hoje eu trago um tutorial de HTML bem simples para a personalização de blogs. São os Blockquotes (citações) para blogger. Aqui no blog já tem post antigo com alguns modelos, mas hoje resolvi trazer mais. Todos são  em CSS.

Como usar o blockquote no blogger, depois de digitar a parte do seu post que você quer destacar, no próprio painel de postagem, você seleciona  onde você quer que fique com o blockquote e clica no botão com as duas aspas. Como no print abaixo.

Como todos os códigos são de CSS, para aplica-los é só ir em Tema>> Editar HTML e em seguida clicar em alguma parte do código e digitar CTRL+F na caixinha de pesquisa você cola esse trecho ]]></b:skin>  e acima dele cola qualquer um dos códigos dos modelos abaixo.

 Modelos 

Créditos: Chá com os Anjos

blockquote {
border: 3px solid #fafcfd;
background-color: #fbf0ff;
padding: 10px;
font-size: 11px;
color: #a48ead;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 0 0 12px #f6dad8, 0 0 5px #d976a3;
}

Créditos: Adolescente Nerd

.post blockquote {
border-radius: 3px;
color: #ffffff;
text-shadow: 1px 1px 0 #B4B2D0;
margin-left: -0px; margin-right: -0px;
padding: 5px;
background: #d3d4df;
-webkit-transition-duration: 1s;
-moz-box-shadow: inset 0 0 0 0px #bbbacd;
-webkit-box-shadow: inset 0 0 0 0px #bbbacd;
box-shadow: inset 0 0 0 0px #bbbacd;
-webkit-transition-duration: 1s;
}
.post blockquote:hover {
background: #bbbacd;
-moz-box-shadow: inset 0 0 0 50px #bbbacd;
-webkit-box-shadow: inset 0 0 0 50px #bbbacd;
box-shadow: inset 0 0 0 50px #bbbacd;
text-shadow: 1px 1px 0 #A8A6D1;
}

Créditos: Bunny Crazy

 blockquote {
background-color: #666;
color:#fff;
padding: 15px;
margin: 1em 40px;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
}

Créditos: 4 Teen 

.post blockquote {
padding: 10px 10px;
background:#ededed;
boder-top: 3px solid #a19e9e; /*------------Cor da barra de baixo------*/
border-radius:2px; /*-------------Arredondamento do gadget--------*/
border-bottom: 1px solid #a19e9e;
border-top: 1px solid #a19e9e;
border-right: 7px solid #f556a3;
border-left: 7px solid #f556a3;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-border-radius: 30px 10px / 10px 30px;
border-radius: 30px 10px / 10px 30px;
}
.post blockquote:hover {
border-left: 7px solid #f99eca;
border-right: 7px solid #f99eca;
border-top: 1px solid #a19e9e;
border-bottom: 1px solid #a19e9e;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-border-radius: 10px 30px / 30px 10px;
border-radius: 10px 30px / 30px 10px;
}

blockquote {
border-right: 7px solid #f99db3;
border-left: 7px solid #f99db3;
background-color: #f5f2f3;
padding: 10px;
font-size: 11px;
color: #777777;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;
}
blockquote:hover {
border-right: 11px solid #be55fb;
border-left: 11px solid #be55fb;
background-color: #f5f2f3;
padding: 10px;
font-size: 11px;
color: #777777;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
-webkit-transition-duration: .50s;
}

blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/}
 blockquote: hover {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 15px;
}

Créditos: Just Like That 

@FONT-FACE {FONT-FAMILY: "ARMA FIVE"; SRC: URL('HTTP://STATIC.TUMBLR.COM/BSALULU/QXQMMC6LM/PF_ARMA_FIVE.TTF');}
BLOCKQUOTE {
FONT-FAMILY: ARMA FIVE;
FONT-SIZE: 8PX;
PADDING: 7PX;
MARGIN-LEFT: 17PX;
MARGIN-RIGHT: 17PX;
BORDER-RADIUS: 4PX;
TEXT-ALIGN: CENTER;
BACKGROUND: #F5F5F5;
BORDER-RIGHT: 3PX SOLID #B1C7D3;
BORDER-LEFT: 3PX SOLID #B1C7D3;
BOX-SHADOW: INSET 0PX 0PX 5PX #DDD;
-WEBKIT-TRANSITION: ALL 0.50S EASE;
}
BLOCKQUOTE:HOVER {
FONT-FAMILY: ARMA FIVE;
FONT-SIZE: 8PX;
PADDING: 7PX;
MARGIN-LEFT: 17PX;
MARGIN-RIGHT: 17PX;
BORDER-RADIUS: 4PX;
TEXT-ALIGN: CENTER;
BACKGROUND: #F5F5F5;
BORDER-RIGHT: 0PX SOLID #B1C7D3;
BORDER-LEFT: 0PX SOLID #B1C7D3;
BOX-SHADOW: INSET 0PX 0PX 5PX #DDD;
-WEBKIT-TRANSITION: ALL 0.50S EASE;
}

Créditos: Paradizing

.post-body blockquote {

background-color: #fdd8d9;

border-bottom: 2px solid #faa7a8;

text-shadow: 0px 1px 0px #fbddde;

-webkit-border-radius: 20px;

-moz-border-radius: 29px;

box-shadow: inset 0 0 15px #f0b0b1, 0 0 3px #eec1c2;

color: #ee8789;

padding: 10px;

-webkit-transition-duration: .50s;

}

.post-body blockquote:hover {

background-color: #eadbd9;

border-bottom: 2px solid #bf928c;

text-shadow: 0px 1px 0px #f1c3bc;

box-shadow: inset 0 0 15px #c9b0ad, 0 0 3px #dec1be;

padding: 10px;

color: #a88a86;

-webkit-transition-duration: .50s;

}

Créditos: Sekai Bakawaii

 .post blockquote {

background:#FFD39B; /* cor de fundo */

margin:15px; /* margem entre a borda da area de postagem e a caixinha de blockquote */

padding:15px; /* margem interna */

border-top:5px solid #FF7F24; /* borda do top */

}

Créditos: Adolescente Nerd

/* Blockquote Simple: The Lovers*/

.post blockquote {

background: #f5f5f5;

border-left: 8px solid #66cdaa;

color: #000000;

font-family:century gothic;

font-size: 13px;

text-align: center;

padding: 5px;

}

Espero que tenham gostado! qual foi seu modelo favorito? até a próxima postagem 

Instagram | Fã page | Facebook Pessoal | Portfólio

Erro no código do Google Adsense - Como resolver

Oláá, tudo bem com vocês? eu espero que sim! desde a última atualização do google adsense, tem acontecido alguns problemas com a plataforma, e a principal é o código para inserção de anúncios e verificação de sites. Hoje eu vou ensinar uma forma bem simples, que qualquer pessoa pode fazer para resolver o problema, e continuar juntando sua graninha. 

Normalmente o código de verificação é pedido que você coloque-o acima de <head> no seu layout e o de anúncios entre <body> e </body> e é nessa parte onde acontece o erro. O adsense fornece o código pronto, só copiar e colar. 

Esse é o código 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<script>

  (adsbygoogle = window.adsbygoogle || []).push({

    google_ad_client: "ca-pub-NUMERODOSEUADSENSE",

    enable_page_level_ads: true

  });

</script>

E esse é o erro que o blogger reporta quando você tenta salvar o código no local indicado. 

Erro ao analisar XML, linha XXX, coluna XXX: Atributte name "async" associated whit an element type "script" must be followed by the....

o XXX representa a linha e a coluna do layout onde está apresentando o erro.

 Como resolver? 

Eu tinha um layout antigo do blog com o código antigo do adsense, que funcionava perfeitamente, então troquei o número para ver se funcionaria e sim, nisso eu descobri onde estava o erro. 

Você tem que alterar a seguinte parte do seu código

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Altere somente onde está selecionado com vermelho por essa parte que eu selecionei em azul 

<script async = "async" src="

Sim, simples a esse ponto, trocando apenas as três primeiras palavras do seu código ele salvará normalmente no seu blog, e o anuncio ou verificação irão acontecer normalmente. 

Gostaram da dica? me diga se vocês tiverem algum outro problema 

Instagram | Fã page | Facebook Pessoal | Portfólio

Tutorial: Como colocar postagens relacionadas no blog (Leia também)

Olááá! tudo bem com vocês? espero que sim. Hoje eu trouxe mais um tutorial de HTML para ajudar o blog de vocês a ficar mais bonito e completo. São postagens relacionadas no rodapé da postagem. É um tutorial muito procurado, e também é fácil de colocar no blog, só precisa de atenção e cuidado. 

Esse modelo eu usei o código da Elaine Gaspareto como base, então consegui fazer esse modelo da imagem que você pode alterar as cores,tamanho, quantidade, vou explicar como funciona cada parte editável do código.

Resultado: 

É o modelo que usei no layout do blog Polaroids And Lipsticks

A primeira coisa que você tem que fazer é um backup do seu layout atual, caso algo dê errado você não perde seu blog. Se não souber fazer aprenda aqui. 

 Como Instalar as postagens relacionadas no blog? 

1- Vá em modelo >> editar HTML >> clique em alguma parte dentro do código >> tecle ctrl + f. Irá aparecer uma caixinha de pesquisa. Nela cole </head>, tecle enter para localizar. Localizou? ABAIXO dessa tag você coloca o seguinte código. 

<!--Postagens relacionadas-começo-->
<script src='http://static.tumblr.com/glpbb7a/odhnldmus/postagensrelacionadasparablog.js' type='text/javascript'/>
<!--Postagens relacionadas-fim-->

Salve.

2 -  Novamente na caixinha procure por ]]></b:skin> ou dependendo do seu layout </stlyle> e ACIMA dessa linha você cola o seguinte código.

#related-posts{float: left;
text-align:center;
width: 786px;
display: block;}
#related-posts a{ }
#related-posts a:hover{}
#related-posts h2{background: none;}
#related-posts .related_img {
margin: 0;
padding: 5px;
width: 170px;
height: 170px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
margin-left: 4px;
}
#related-posts h2 {
    margin: 6px 30px 10px;
    padding: 5px 25px 5px 0px;
    width: 700px;
    font: 10 12px/12px 'Karla', sans-serif; /*Fonte*\
    letter-spacing: 4px;
    color: #000; /*Cor da fonte*\
    text-align: center!important;}
#related-title {
        color: #000;
    text-align: center;
    text-transform: uppercase;
    padding: 67px 10px;
    font-size: 12px;
    width: 152px;
    height: 38px;
    position: absolute;
    font-family: 'lato', sans-serif;
    margin-left: 7px;
    background-color: #efd4d4; /*Cor do fundo quando passar o mouse*\
    margin-top: -180px;
    transition-duration: .4s;
    opacity: 0;
}
#related-title:hover {opacity: 1}
#related-posts .related_img:hover{opacity:.7;filter:alpha(opacity=30);-moz-opacity:.7;-khtml-opacity:.7
}

Salve.

3 - O terceiro código você irá colar onde quer que apareça as caixinhas. Eu uso ABAIXO de  <div class='post-footer-line post-footer-line-3'>, mas você pode testar em outras partes do código.

Também pode ser usado abaixo de  <div class='post-footer-line post-footer-line-2'> ou     <div class='post-footer'>

Teste o código abaixo, em uma dessas tags acima e veja qual fica melhor no seu layout. 

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot; LEIA TAMBÉM &quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>

Em vermelho está marcado duas vezes o número 4, que é o número de caixinhas que irá aparecer. Deixe os dois número iguais por exemplo: 3 e 3, 5 e 5 ou pode não funcionar. E também o texto LEIA TAMBÉM que você pode alterar para o que quiser. 

Salve e pronto! suas caixinhas estão instaladas. 

É só isso, é um tutorial fácil, espero que tenham gostado. Até o próximo post 

 Lembrando, eu trabalho fazendo layouts quem precisar ou quiser montar um orçamento é só entrar em contato em alguma das minhas redes sociais. 

Instagram | Fã page | Facebook Pessoal | Portfólio