Personalizar gadget páginas do blogger

Olá pessoas, sabe a não tão nova ferramenta de páginas do blogger? Ela é bem interessante pois permite que usuários que não conhecem muito as linguagens html e css possam criar um menu em seu site/blog. Um "probleminha" que pode incomodar muitas pessoas e fazer com que essas pessoas não utilizem tal ferramenta é a formatação que o gadget Páginas apresenta. Por isso vou ensiná-los hoje a deixar este gadget com a sua cara.

Vamos ao tutorial ( clique nas imagens para ampliar ):

P.S.: NUNCA se esqueça de fazer um backup do seu modelo antes de realizar alterações para evitar perdas totais

  1. Antes de tudo você deve criar as páginas que irão compor o seu menu. Para isso vá até postagem >>  editar páginas >> nova página, conforme figura abaixo.

  2. Você deve dar um nome a ela e publicá-la. Quando realizar esse passo irá aparecer umas opção ( veja abaixo ) orientando você a adicionar o gadget e em qual local colocar. Escolha guias do blog.

  3. Quando este gadget é adicionado ele nomeia a página principal do seu blog/site como início, você pode mudar para home ou outro nome indo em design >> elementos da página >> editar gadget páginas.

  4. Agora se você visualizar seu blog verá algo mais ou menos como a figura abaixo.

  5. É hora de personalizar! O html do seu template deve conter algo assim:

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'/>

   title='Páginas' refere-se ao nome que você deu ao gadget e id='PageList1' é o id que será usado para personalizar com CSS

  6. Calma! Só porque falei CSS não quer dizer que é um quebra-cabeças. Você deve colar o código abaixo  ANTES de ]]></b:skin>: (utilize Crtl F para encontrar)

#PageList1 ul {

	list-style: none;
	padding: 0;
	margin: 20px;
	}
	#PageList1 a { /* cor dos links da lista */
	margin: 3px 10px 3px 10px;
	font-weight: normal;
	color: #000; /* altere a cor do link aqui */
	text-decoration: none; /* tira o traço abaixo do link */
	font-family: verdana; /* fonte do link */
	font-size: 20px; /* tamanho da fonte */
	display: block; /* isso faz com que o link fique ativo na largura da lista */
	}
	#PageList1 li {
	background: #f7c7c5 url(URL DO ICONE - OPCIONAL) no-repeat left; /* altere o icone aqui */
	padding: 2px 5px 2px 5px;
	margin: 0px 5px 0px 5px;
	text-indent: 5; /* aqui afasta do link pra não ficar por cima do icone */
	}
	#PageList1 li:hover { /* estilos com o mouse sobre */
	text-decoration: none;
	background: #e965a8 url(URL DO ICONE - OPCIONAL) no-repeat left; /* altere a cor do background e o icone aqui */
	padding: 2px 5px 2px 5px;
	margin: 0px 5px 0px 5px;
	text-indent: 0; /* aqui afasta do link pra não ficar por cima do icone */
	}  7. Agora você vai adicionando os estilos que quiser.   8. Algumas idéias:          - Se você quiser deixar as bordas arredondadas basta adicionar o código abaixo depois de PageList1 li -moz-border-radius-topleft:6px; -webkit-border-top-left-radius:6px; border-top-left-radius:6px; -moz-border-radius-topright:6px; -webkit-border-top-right-radius:6px; border-top-right-radius:6px;         - Você também pode adicionar um ícone de uma uma cor para o menu estático e o mesmo ícone com outra cor quando o mouse estiver sobre Bom é isso! Espero ter ajudado. Qualquer dúvida basta deixar nos comentários. Beijinhos e até a próxima!