Comentários Personalizados

Faça um backup completo do seu blog, antes de implantar qualquer código.

Hoje, trago para vocês um modelo de personalização da área dos comentários. Usaremos um único código. O resultado é maravilhoso.Vem comigo!

Começaremos com aquele passinho básico que, quem me acompanha já sabe do que se trata: Acessar Modelo - Editar HTML da um CTRL F e pesquisar por:

]]></b:skin>

Acima dele, Acesse o botão indicado, copie e cole o código, acima dele. Você poderá substituir a cor #D4346E, por uma de sua preferência. Aconselho mexer somente nesta parte. Feito isso, visualize, e estando tudo certo, salve.


CÓD.COMENTÁRIOS

MOD.COMENTÁRIO

Atenção: vi muita gente assinando como dono deste código, na dúvida deixo sem crédito. Fiz algumas alterações, mas entendo que isto não me dá o direito de autoria. Se o dono de fato, se sentir lesado, por favor, entre em contato,

Sorteio de Capas e Widgets Personalizados

CAPAS PERSONALIZADAS PARA BLOG E FAN PAGE, + 3 WIDGETS

Regulamento:

Curtir a fanpage:Fan Page
Seguir blog: BlØg d4 K@ss!nha GØme$
Comentar em algum post sobre tutorial do blog: http://blogdakassinhagomes.blogspot.com.br/search/label/Tutoriais

Quanto mais comentários, mais chances de ganhar. O sorteio será gerado pelo Radom.org. Boa sorte à todos. 

Resultado: 21/07/2016. A publicação e o print do sorteio, estará no Blog e na Fanpage do Blog.

Observação: Será verificado se o ganhador seguiu as regras, se não seguiu, outro ganhador será sorteado. O ganhador terá 72 horas para se manisfestar.


Escolha os widgets clicando no botão: TEMPLATE

Posts Relacionados: "veja também"

Antes de qualquer ação, faça um backup do seu blog

O tutorial de hoje é sobre posts relacionados, o famoso "veja também". Na maioria dos blogs, ele é implantado usando um determinado programa, eu mesma já o usei, mas nem sempre ele funciona, ao menos, foi o que aconteceu em meus blogs. Liberte-se deste problema, aprendendo agora, uma forma prática, e com grandes opções de personalizações. Vem comigo!

Começamos com aquele passinho básico que, quem me acompanha já sabe do que se trata: Acessar Modelo - Editar HTML da um CTRL F e pesquisar por:

</head>

Ao encontrá-lo, copie e cole abaixo de </head> o sequinte, script.

<script type='text/javascript'> $(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});}); </script> <script src='http://static.tumblr.com/r0zjsuz/LGRnkytsj/post-relacionado-blogger.js' type='text/javascript'/>

Agora iremos procurar por:  'post-footer-line post-footer-line-1'. Lembrando que normalmente, existem duas linhas iguais em seu template, o código será implantado no segundo.
'post-footer-line post-footer-line-1'

CÓDIGO 01



Para finalizar, procure por:

]]></b:skin>

Acima dele, cole o Código 02. Nele, você fará as mudanças necessárias, a exemplo das cores dos textos, de acordo com sua preferência. Visualize, e estando tudo certo, salve.

CÓDIGO 02

Mudando a cor do texto selecionado

Fica bem interessante! Diferencia o que você quer, dos demais textos da postagem. 

Simples e rápido. Clique em DEMONSTRAÇÃO, selecione o texto e veja o resultado. Vem comigo!

DEMONSTRAÇÃO

Seguindos passos básicos: Layout-Editar HTML-CTRL F e procure por:

]]></b:skin>

Assim que encontrar, cole este código acima. Salve e pronto!

::-moz-selection {
background: #f7b7c8; 
color: #ec5b81; 
}
::selection {
background: #f7b7c8;
color: #ec5b81;

Veja este e outros tutoriais AQUI. Quer algum tuto, em especial? Peça-Já!

Personalizar Links de Navegação

Personalizando os links de navegação. Quais são eles:Postagens mais antigas, Postagens mais recentes e Início. Vamos personalizá-los. Vem comigo!

POSTAGENS MAIS ANTIGAS

Vá em Layout-Modelo-Editar HTML: Ctrl F e procure por:

<data:olderPageTitle/>

Ao encontrá-lo, substitua o texto, por outro da sua preferência.

POSTAGENS MAIS RECENTES

Novamente: Ctrl F e procure por:

<data:newerPageTitle/>

Ao encontrá-lo, substitua o texto, por outro da sua preferência.

INÍCIO

Mais uma vez: Ctrl F e procure por:

<data:homeMsg/>

Ao encontrá-lo, substitua o texto, por outro da sua preferência.

AGORA VAMOS A PERSONALIZAÇÃO:

Continuando em HTML: procure por:

#blog-pager {

Selecione de { (que a abertura) até }(o fechamento) e substitua pelo código abaixo:

CÓDIGO


Veja este e outros tutoriais AQUI. Quer algum tuto, em especial? Peça-Já!

Adicionando caixinha Link-Me

Vejam como é fácil, muito simples mesmo colocar uma caixinha do Link-Me. Vem comigo! Acesse Layout - Adicionar um Gadget - HTML/JavaScript Copie e cole o código abaixo, dentro dele e salve.

<div align="center">
<img src="URL DA IMAGEM" />
<br /><textarea onfocus="this.select()" onmouseover="this.focus()" rows="3"
cols="15" name="textarea">&lt;a href=&quot;URL DA IMAGEM&quot; target=&quot;_blank&quot;&gt;
&lt;img src=&quot;URL DA IMAGEM&quot; border=&quot;0&quot;&gt;&lt;/a&gt;
</textarea>
</div>

Centralizar o título das postagens

Hoje, vamos aprender a centralizar os títulos das postagens. Que por sinal, fica muito lindo!

Com um único passo, você terá sempre os títulos das suas postagens centralizadas. É muito fácil. Vem comigo!

Vamos em Design-Editar HTML-Ctrl + F, procure por:

h3.post-title {

e logo abaixo, cole:

text-align: center;

Visualize, e salve! Fácil e rápido, não é mesmo. Bjinxus axokolatadus e até o próximo tuto.

Botão Voltar ao Topo Flutuante

O botão subir ao topo, ou voltar, como queira, é de grande utilidade, fato! Existem duas maneiras de adicioná-lo ao blog. Uma delas é inserindo um link da biblioteca do JQuery dentro do seu blog e mais alguns outros, códigos. Pensei ensinar das duas formas, mas resolvi simplificar e deixar apenas a forma mais prática e rápida. Vem comigo!

Acesse Layout - Adicionar um Gadget - HTML/JavaScript Copie e cole o código abaixo, dentro dele e salve.

CÓDIGO

URL´S IMAGENS

De brinde, deixo algumas imagens e suas respectivas URL´s. Façam bom uso. Lembrando que, se desejarem usar suas próprias imagens, é só substituir a URL existente, tendo o cuidado de não apagar as aspas ("...").

Botão curti Facebook

Entre em seu blog: Modelo - Editar HTML, dê um CTRL F e procure por:

<div class='post-footer-line post-footer-line-3'>

Ao encontrá-lo, cole acima dele o código, a seguir:

CÓDIGO