ALTERAR IMAGENS DA BARRA DE MINIAPLICAÇÕES FLIPCARD VISUALIZAÇÕES DINÂMICAS DO BLOGGER

Alterar as imagens da barra de miniaplicações na visualizações dinâmicas do blogger.

1º PASSO:

Obter as URL das imagens a colocar; Possibilidades:

1. Utilizar imagens ou icons já presentes no computador ou ir buscar à net; (Guardar como...) MELHOR OPÇÃO
2. Escolher imagens directamente da Internet e Copiar URL da imagem ; (obter assim o URL tem o problema de não permitir o passo 2, passando logo para o 3)

2º PASSO


Depois de ter as imagens pretendidas, é necessário preparar as imagens ou icons para ter as melhores medidas (50x50px), utilizar o Microsoft Office Picture manager.


3º PASSO

Arranjar as URL:

1. Criar uma nova mensagem no blog (não é necessário publicar a mensagem, basta gravar)
2. Inserir as imagens criadas (50x50 pixels);
3. Passar a mensagem para HTML - canto superior esquerdo
4. Retirar o URL do HTML;

EXEMPLO: 

Após colocar a imagem na mensagem e clicar no botão HTML surge as seguintes linhas:

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWn6EKqQ1iowuZQTzTIbGObZvHol012mQgeqr9mHnoWU64kmpUK8hxN3ZabyNqqGv6mg4zxY-8rrB3zIcnSRZbJZF2NmWw8btX25n8U9wUDf1LB-iAA6IdAcG5imxxpa8dTcKDB_ASFVE/s1600/soccer-shoe-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWn6EKqQ1iowuZQTzTIbGObZvHol012mQgeqr9mHnoWU64kmpUK8hxN3ZabyNqqGv6mg4zxY-8rrB3zIcnSRZbJZF2NmWw8btX25n8U9wUDf1LB-iAA6IdAcG5imxxpa8dTcKDB_ASFVE/s1600/soccer-shoe-icon.png" /></a></div>

<br />

COPIAR O(s) URL(s) QUE ESTÁ COLOCADO NA POSIÇÃO IGUAL AO ASSINALADO A AZUL 

Copiar tantos url quantas imagens (50x50) colocou na mensagem por forma a utilizar nas miniaplicações.


4º PASSO

Ir ao Blogger Visualizações dinâmicas:

1. Blogger > Escolher Blog > Modelo > Personalizar > Avançadas > Adicionar CSS > Adicionar Código em baixo.

_________________________________________________________________________________

.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img, 

.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img, 

.ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img, 

.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img,

.ss, #gadget-dock>div:nth-of-type(5) .gadget-icons img,

.ss, #gadget-dock>div:nth-of-type(6) .gadget-icons img,

.ss, #gadget-dock>div:nth-of-type(7) .gadget-icons img,

.ss, #gadget-dock>div:nth-of-type(8) .gadget-icons img,

.ss, #gadget-dock>div:nth-of-type(9) .gadget-icons img{

display: none !important;

}

#gadget-dock>div:nth-of-type(1) .gadget-icons{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdXkn2uLUv2BM_GQPvvK-amWpLKyOBx1W-bE6BuGJ_geqE5dtm34OwrNJYoGNSeAE9xFETL1yzM0cm0wNGoowu9rl9N2fcg4x5jNyG7xlruumyfgZR-CW0iIlcftBhlbcA70k3VBi4uGo/s1600/trophy.png) no-repeat center !important;

}

#gadget-dock>div:nth-of-type(2) .gadget-icons{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXgptRGE2gGoQPpm-6Gq1bXSmzhdNQ6HuUyr9LMoCttVXZgH6jnWW_cBv2ArngpKlKs5xs_mfMR99pf_FRG8xDfnqJl53rmRu7G8cAYMKBXPnSeipn3b3MpDv_2tTfeUTBRz_gxNmqieA/s1600/trophy-icon.png) no-repeat center !important;

}

#gadget-dock>div:nth-of-type(3) .gadget-icons{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHCphUvAcNwD-dMuqsU0_53dsD8Qad7e1rrwvpA7DhTJAeBjLDyh4OBlIg6Bb6lvlNzeNkt9MRBxTQEsozy2yMC4QadsnKUVzfcAFbDUCLYw0RpTmwTQGtHQu5AVKAIXN3Pea06DcSqg/s1600/World.png) no-repeat center !important;

}

#gadget-dock>div:nth-of-type(4) .gadget-icons{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoo49CmcUNG2iUplIpKGHMbciYA3UzXJeG8REqI5mpOhciADBTX0SBf_uTsSEf85agr8PSCgw8fxpBwIsl90-Jx0Tyg3tJ9925C6JtUc59JIbpuD7ZmFhy7VCIxbFsUZM5vGO9cxjfyo/s1600/united_states_of_america_usa.png) no-repeat center !important;

}

#gadget-dock>div:nth-of-type(5) .gadget-icons{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPAiz_KGa9gSjpH76j2Bm5tjO-GE9duVf4-pdFnqRvAEnQmewme3Vn049g7UN7xbVIFpj14ZR8xz_ofqnGgWS9mkYSh_tnTGE1XiUjDSVNz6PW9wjEbJ9OMwj8Ma_SKTzORN-ChkeErXI/s1600/iffhs.png) no-repeat center !important;

}

#gadget-dock>div:nth-of-type(6) .gadget-icons{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWCpY9C48l8410gHZZ5SE1iQZEdCgqTewwDciZvByGKwP_l13I4_M75BgsaKSQ0b5D01WXDB_LuqfMBCNIu-7P2sfwOU0FHhavn8KJkzY6LUZWApx-BqkV8NmehCyoCxyceMB9yMMzQ1U/s1600/soccer-shoe-icon.png) no-repeat center !important;

}

#gadget-dock>div:nth-of-type(7) .gadget-icons{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhwAj16fIefhsHJw7aGPd2RqIb6cOcTLt8_cyk4klGqT0htft2A9wcbPkKte9LuIGjszuQsqiEXvgeuam_xjkUJY4voDoX2iHZPtRHtb6GIcv1bhwjdREleTI1p-3opjWL8dWUtskl8n0/s1600/User.png) no-repeat center !important;

}

#gadget-dock>div:nth-of-type(8) .gadget-icons{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitnMgxsPPWvfozQihveQNle8q8AiJvedJljXaFWeZ4jMcrrjjlVcejhmpczHYXA-Tc1kTGSgwUm1PooVwELjK9Y9vWU0prcMzBZRMPhszfFFYKInyfjFRDFzMU43BNmqljglD7NskHtN8/s1600/ColumnChart.png) no-repeat center !important;

}

#gadget-dock>div:nth-of-type(9) .gadget-icons{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypcav0u5Gcd1dpFyIGt0GB9qK994JntIYUapyULH1hNKaQm87fhFQfUahxATxu6jlAgAwBh21luxdxJMuZaeDJN93xkbdtjCpTbDB8CVgivMisA5MMNdPYKbcbSF-dNYYKORsWAZwin8/s1600/Compass.png) no-repeat center !important;

}

_________________________________________________________________________________
5º PASSO

Por o número de miniaplicações a personalizar.

.ss, #gadget-dock>div:nth-of-type(6) .gadget-icons img,

.ss, #gadget-dock>div:nth-of-type(7) .gadget-icons img,

.ss, #gadget-dock>div:nth-of-type(8) .gadget-icons img,

.ss, #gadget-dock>div:nth-of-type(9) .gadget-icons img{  - Copiar esta linha e colar em baixo, permite alterar o número de etiquetas a personalizar:
Exemplo:

.ss, #gadget-dock>div:nth-of-type(10) .gadget-icons img

Para retirar miniaplicações a personalizar fazer o processo contrário.

6º PASSO

Colocar os url das imagens / icons criados por vós.

#gadget-dock>div:nth-of-type(1) .gadget-icons{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdXkn2uLUv2BM_GQPvvK-amWpLKyOBx1W-bE6BuGJ_geqE5dtm34OwrNJYoGNSeAE9xFETL1yzM0cm0wNGoowu9rl9N2fcg4x5jNyG7xlruumyfgZR-CW0iIlcftBhlbcA70k3VBi4uGo/s1600/trophy.png) no-repeat center !important; - Em cada linha substituir o que está a AZUL pelo URL da vossa imagem ou icon.

Fácil...