Link para seguidores

fonte e créditos deste presente post:
elescaparatederosa

Enlace a Seguidores

Hace unos días que he colocado un enlace en el footer del Escaparate desde donde, quien así lo quiera, puede hacerse seguidor del blog:

Aunque no es nada nuevo, ya que puede encontrarse como hacerlo en varios "blogs de ayuda Blogger", voy a explicarlo en esta entrada ya que varias personas me han preguntado sobre esto.
Se trata de añadir un enlace que de la posibilidad a nuestras visitas de hacerse seguidor de nuestro blog, sin necesidad de mostrar el gadget de Seguidores.
Podemos hacerlo con un simple enlace de texto, una imagen o, como en mi caso, usando ambos.

El código iría colocado en un Gadget HTML en la sidebar, footer, etc.

Con enlace de texto:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"> Seguir el Escaparate</a>

Con enlace en una imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"/></a>

Con enlace en texto e imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"/> Seguir el Escaparate</a>

Notas:
Lo que vemos resaltado en rojo, es en cada caso lo que hemos de modificar por nuestros datos.

En el caso de blogID, tenemos que colocar sustituyendo a las XXXXXXXXX, la ID de nuestro blog, es decir, el número que se muestra en la url del navegador cuando estamos dentro de nuestro panel de Blogger en la pestaña Diseño:

traduzido:

Link para defensores (Seguidores)

..."  um link no rodapé da janela de onde, quem e o que você quer, você pode se tornar um seguidor do blog:

Enquanto praticamente novo, pois ele pode ser encontrado como vários "  blogs de ajuda do Blogger, vou explicar neste post como várias pessoas têm me perguntado sobre isso.

Este é um link para adicionar a possibilidade aos nossos visitantes a se tornar um seguidor do nosso blog, sem ter de exibir o gadget Seguidores.

Podemos fazê-lo com um link de texto simples, uma imagem ou, como no meu caso, usando ambos.


O código pode ser colocado em um Gadget HTML na barra lateral, rodapé, etc

Com link de texto:

<A href = "http://www.blogger.com/follow-blog.g?blogID =XXXXXXXXXXXX"Target =" _blank "> Siga Showcase</ A>

Para criar um link para uma imagem:

<A href = "http://www.blogger.com/follow-blog.g?blogID =XXXXXXXXXXXX"Target =" _blank "><img src="AQUI A URL do IMAGEN"/></ A>

Com texto e link da imagem:

<A href = "http://www.blogger.com/follow-blog.g?blogID =XXXXXXXXXXXX"Target =" _blank "><img src="AQUI O URL da Faixa IMAGEN"/> Showcase</ A>

Notas:

O que vemos em destaque na cor vermelha, em cada caso o que temos de mudar de nossos dados.

No caso do blog, devemos colocar substituindo o XXXXXXXXX A identificação do nosso blog, ou seja, o número mostrado na url do navegador quando estamos no nosso painel de bloggers na aba Design:

Leia Mais ►

"Links sem sublinhado"

fonte e créditos:
elescaparatederosa

Links sin subrayado

Si no te gusta para nada el efecto subrayado de tus links, puedes hacer que desaparezca fácilmente.

Sitúate en tu plantilla HTML y localiza esta parte (está casi al principio antes de Header), cambias "underline" por "none" y ya tienes tus link sin subrayar.

a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------

 traduzido:

Links sem sublinhado

SEu não gosto de todos os efeitos sublinhado suas ligações, você pode fazê-lo desaparecer facilmente.

Stand no seu modelo de HTML e localize essa parte (é perto do topo antes do cabeçalho), a mudança "underline" para "nenhum" e você tem o seu link sem sublinhado.

a: hover {
color: $ titlecolor;
text-decoration: underline;
}
uma img {
border-width: 0;
}

/ * Header
-----------------------------------------------

Leia Mais ►

"Colocando imagens nos links que modificam"

fonte e créditos:
templateseacessorios

Colocando imagens nos links que modificam

"Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo."


Para colocar imagens em seus links que modificam como nesse exemplo AQUI proceda da seguinte forma.

Para colocar nos posts
Vá até o HTML do seu blog e procure pelo código:
/* Comments
----------------------------------------------- */









E acima dele cole o código abaixo fazendo as modificações necessárias como cores das letras e endEreço das imagens.

/* POSTS COM IMAGENS NO LINK-----------------------------------------------
*/
.post-body a:visited {
color: #c00000;
padding-right: 13px;
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat 100% 50%;
}
.post-body a:visited:hover {
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat 100% 50%;
padding-right: 13px;
color:#800000;
}

Para colocar imagens que mudam na widgets(colunas)
Procure pelo código:

/* Sidebar Content----------------------------------------------- */

E cole o código abaixo depois dele.

/* IMAGENS PARA OS LINKS
-------------------------- */
.LinkList a {
color:#000000;
padding-left: 16px;
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat;
}
/* LINKS QUE MODIFICAM
-------------------------- */
.LinkList a:hover {
padding-left: 16px;
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat;
color:#0066cc;
}
/* LINKS VISITADOS
-------------------------- */
.LinkList a:visited {
padding-left: 15px;
background: url(AQUI O ENDEREÇO DA IMAGEM) no-repeat;
color:#00C0C0;
}
.main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.crosscol .widget{
padding:8px;
}
.main .Blog {
border-bottom-width: 0;
}





Coloque imagens pequenas.


Imagens AQUI, ou AQUI

Leia Mais ►

"Links com movimento"

fonte e créditos deste presente post:
elescaparatederosa

Links con movimiento

Si os habéis fijado, los links del Escaparate se mueven cuando pones el cursor sobre ellos, es un efecto que podemos conseguir añadiendo tres líneas en el CSS de nuestra plantilla, en la parte que "maneja" los efectos de los links.

Buscamos esa parte, la de los links, en nuestra plantilla, suele verse más o menos así:
/* Links
----------------------------------------------- */

Dentro de esta parte buscamos a:hover {, que es la parte que le dice a nuestros links lo que han de hacer cuando se les pasa el cursor por encima.
Justo después de a:hover {,

añadimos las tres líneas de código que os decía anteriormente:

position: relative;
top: 1px;
left: 1px;

"Si cambiáis el valor numérico en top y left se apreciará más o menos el movimiento, yo en el Escaparate lo tengo como he puesto aquí, más "meneo" ya no me gusta tanto el efecto...pero para gustos..."





Traduzido:                                                                       

Links com movimento

Se vocês repararem, os links Showcase se move quando você move o mouse por cima deles, é um efeito que pode ser conseguido pela adição de três linhas no CSS do nosso pessoal, o partido a "gerenciar" o impacto das ligações.

Nós olhamos para esta parte, as relações, em nossa equipe, muitas vezes é algo parecido com isto:


/ * Links
----------------------------------------------- */

Nesta parte, procuramos a: hover {, que é a parte que fala dos nossos links que têm a ver quando passar o mouse sobre.

Logo após a: hover { , 

adicione três linhas de código 
que eu lhe disse antes:

position: relative;
top: 1px;              
left: 1px;              

Se você alterar o valor numérico 

 em cima e da esquerda será apreciado movimento mais ou menos, 

eu mostro que eu tê-lo como eu posto aqui, 

mais "mexer" e,

portanto, eu não gosto do efeito ... mas gosto ..."

...e, fiz um exemplo, com fundo na cor rosa claro,  que fica atrás da imagem:

a:hover {
position: relative;
top: 1px;            
left: 1px;
background: #ffcccc;

 ...acrescentei ao código:

background: #ffcccc;

 








 

 

Leia Mais ►

"Alterar a cor do fundo ("background") do blog ...sendo à escolha do leitor de seu blog "...?...como?

"Alterar a cor do fundo ("background") do blog

...sendo à escolha do leitor de seu blog "

 

 

    .

...a escolha também , pode dar-lhe a opção de alterar a cor de fundo para o o fundo de seu blog.

...isso faz com que   o blog mais interativo e que o leitor não só de ler o conteúdo, mas você pode brincar com o visual do blog.

A maneira de fazer isso é através de uma função JavaScript que fará um clique a cor de fundo do blog (corpo) mudanças, e funciona mesmo se você tiver uma imagem de fundo.

Você pode vê-lo trabalhando, clicando em qualquer uma das cores.
 


Para colocar esta opção em seu blog entra em design> Elementos da página> Adicionar um Gadget> HTML / Javascript e cole o seguinte:

   

<div style="text-align:center;">¿No te gusta el color de fondo?
¡Cámbialo por otro!</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPVyyK7t2tAIVI22lHLLjt7Pjags88_VYSd8qSKi9hSUmrUMJZ-S0OztPZIotgk0hvSlUhyphenhyphenf2tc88kcugn4pNXC6QcYjviv5rzRXtPYrUu0X3ep7hgRbCM7depxGuntIN2ZhVTkkFXVS_0/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuWG4s2vvXd6TtoddbxFJ9X9pXwdZV4rm7O9ZqbxJUHL4wEoF04GPS4i0EYovENkeyRo4ZEzgtXVnTEyqDiZFGgoqedMewubBfTEynX4oBLu_x9DP48771FX0QRtK56jeTJ70dZr7fTpfi/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi27jndNdF57CL05lsDyUPL7GMX4dfLFTznhd-yZOdxqEWXckh4LMaGHue4vtTyL0-HGlqArhNnckTQhdmYMpMMMPmAtuIgfiqLwKoLEPtI5x0itq1HZdpp58jKCr5G_M3pPYAhXA3AXpn3/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9AItIp38zR9REerzaFVl06d8_KZWaq5q8g7mhSncgZvUHGIP_vlFAvinH8Hawr7_hQx8AJd6bigL_IhMW6Ae20i5mSzrd061DZoE3Z42ITvxWbRwV6Rwv5nO1N805n-LQBptkwO03lg8h/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK84_MGWQsYdpRwNGj42TNGZPNHuEYFW6PsrmmemSQSiDbp4m8MdByX0OF-mz52nETUxEAGkNaRv72q-m6q1UbxhbotsDoJ3QTFhVLspq4QSGm8tg_pzjlTOT4bHh99x8P_RT6uzuxebGi/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HIsLBgXiWdWv39IMy3H1FtMp2-2xGJOlM1CkEOSmLbETRrxMnTX1uZL4qiK4r3ircPvAdvmUtszfxVjtnf8dRUJI97-EAVu30hnK-EDjGjeU18hQa1l0pnX8abcEDfoqkAD8Lh4EzuWD/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeSm9RpTs6LlRdzy9jHGDYQp381apjmrdrAC7SB40P5F0D-NpiipgWpIG46w8lgnToY66IISMg2rwWL-OY2r-Fxuqy2nrmG2NbzwGly-ZmnSIoqLqPzE1Z1wth8B7Q_8sb4YZM-y8fhzhc/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45Z5dtigbcfGeF7w3w9UH6fOre4qL1itK7__N_yd0OKFXOfIhE9bMtcuC2gWNOsDzaI-cmK7AjsVNkaZWZyc-sgQUu-Q42dO8tUkicYSeVqQv0enIaf9Ck1ddlITpfnSR44K99nZamL8N/s200/body-blanco.png" /></a>
</center>

Se você não gostar das imagens a cores também pode colocá-lo como texto simples:Vermelho | Amarelo | Verde | Azul | Roxo | Rosa | Preto | Branco


Nesse caso, o código para colar é a seguinte:

   <div style="text-align:center;">¿No te gusta el color de fondo?
¡Cámbialo por otro!</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';">Rojo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';">Amarillo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';">Verde</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';">Azul</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';">Morado</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';">Rosa</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';">Negro</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';">Blanco</a>
</center>

para cada cor que deseja adicionar:

...você pode alterar as cores de que você gosta, ou adicionar mais cores, basta adicionar outra linha como esta :

 <a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';">Color</a>

Basta alterar o que está em vermelho pelo código da cor que quiser e colocar o nome da cor onde indicado.(color)

O mesmo pode ser feito para mudar as cores do acima, basta localizar o código de cores, alterá-lo e ir embora.

fonte e créditos:
ciudadblogger

Leia Mais ►

"Modificando o aspecto dos links"

  
fonte e créditos:
templateseacessorios

"Modificando o aspecto dos links"

"Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo."




Uso em meu blog um código que modifica o aspecto dos links, assim que o mouse é colocado em cima. Então, para você que quer saber como faço isso, eis alguns exemplos abaixo.



Então, se você quer usar algum efeito em seus links, basta copiar o código abaixo e colar antes de:


]]></b:skin>

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none
}
a:hover {
margin: 5px;
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
}

Depois troque o código em verde pelo efeito que deseja no link e o código que está em vermelho é a cor da letra.

capitalize

• com este efeito, os links ficarão com a primeira letra maiúscula.

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

lowercase

• com este código, os links ficarão com todas as letras minúsculas

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

uppercase

• com este código os links ficarão com todas as letras maiúsculas

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

underline overline

• com este código os links ficarão sublinhados e,  ao colocar o mouse, ficarão sobrelinhados

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

underline

• com este código os links ficarão sublinhados

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

Para inserir códigos no código abaixo:

Para que a letra aumente de tamanho, coloque abaixo de:

a:hover {

o seguinte código:

 

font-size:130%;

Para que seu link fique com uma cor de fundo, coloque abaixo de:

a:hover{

o seguinte código:

background: #cccccc;

Para que seu link fique com uma imagem coloque abaixo de:

a:hover{

o seguinte código:

padding: 15px;

background: url(AQUI O ENDEREÇO DA IMAGEM) left no-repeat top;

Leia Mais ►

mural

 mural

Leia Mais ►

enviar mensagens

Leia Mais ►