Nivo Slider

Olá *-*, neste tutorial vou a ensinar a colocar aquele slide que muitos blogs já usam. A explicação deste post foi baseada na explicação do blog Império do Photoshop (que já fechou).

No painel, vai a design → editar html → aperta F3 e procura pela tag:

</head>

Acima dessa tag, cola o seguinte código.

<script type="text/javascript">
        var $nv4wp = jQuery.noConflict();
        $nv4wp(window).load(function() {
            $nv4wp('#slider').nivoSlider({
                effect:'random',
                slices:15,
                boxCols: 4,
                boxRows: 2,
                animSpeed:500,
                pauseTime: 2000,
                startSlide:0,
                directionNav:true,
                directionNavHide:true,
                controlNav:true,
                controlNavThumbs:false,
                controlNavThumbsFromRel:false,
                controlNavThumbsSearch: '.jpg',
                controlNavThumbsReplace: '_thumb.jpg',
                keyboardNav:true,
                pauseOnHover:true,
                manualAdvance:false,
                captionOpacity:0.5,
                prevText: 'Prev',
                nextText: 'Next',
                beforeChange: function(){},
                afterChange: function(){},
                slideshowEnd: function(){},
                lastSlide: function(){},
                afterLoad: function(){}
            });
        });
        </script>

Agora procura pela seguinte tag:

]]></b:skin>

Acima dessa tag, cola o seguinte código.

.slider {width:100%;}
.slider img {
position: absolute;
top:0px;
left:0px;
display:none;}
.slider a {border:0;
display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a {display:block;
width: 31px;
height:34px;
background:url( URL da Seta) no-repeat;
text-indent:-9999px;
border:0;}
a.nivo-nextNav {background-position: -30px 0;
right:15px;}
a.nivo-prevNav {left: 15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1;
text-decoration:underline;}

Depois de isso feito, guarda o modelo. Agora só tens de aplicar o código abaixo, no sítio em que queres que apareça o slide.

<a href="Link para redirecionamento" target="_blank"><img src="URL da Imagem" width="Largura" height="Altura"/></a>
<a href="Link para redirecionamento" target="_blank"><img src="URL da Imagem" width="Largura" height="Altura"/></a>
<a href="Link para redirecionamento" target="_blank"><img src="URL da Imagem" width="Largura" height="Altura"/></a>
</div></div> 

Pronto, como vês é bastante fácil e útil. Se precisares de ajuda, não hesites em pedir, pois estou aqui para isso mesmo.

Aplicar Faixas na Barra Lateral

Recebi alguns pedidos por formulário de contato, para ensinar como pôr aquelas faixinhas na barra lateral (sidebar), a dizer "Afiliados, Disclaimer, Categorias, Créditos...". Então hoje vou ensinar exatamente como fazer isso. É muito fácil *-* .

Primeiro tens de fazer as tuas faixas, podes usar qualquer editor (Photoshop, PhotosSape...). Depois de as fazer, faz o upload delas na internet usando um site de upload (Tumblr, TinyPic, PhotoBucket, Blogger...). Finalmente aplica o código abaixo na miniaplicação em que queres pôr a devida faixa.

<div style="left: -25px; position: absolute;">
<img border="0" src="LINK_da_IMAGEM" /></div>

Finalmente, é só alterares o valor a negrito, pelo valor do posicionamento da tua faixa (vai experimentando e deixa ficar o que achares melhor).  E pronto *-*, como viste é super fácil e fica bem fofo.

Se tiveres alguma dúvida, não hesites em perguntar na aba "Pergunta", ou até mesmo aqui pelos comentários.

Arredondar as Bordas do Template (Modelo Viagem)

Olá *-*, neste tutorial vou ensinar, como arredondar as bordas do teu template. Este código resulta para o modelo viagem e para os demais lançados no mesmo ano (os novos modelos).

No painel, vai a design → editar html → aperta F3 e procura por:

.main-inner .column-center-outer {

Esse código é o responsável pela área de postagens do blog. Abaixo disso, cola o código seguinte:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Altera 10px pelo valor que quiseres, de acordo com o arredondamento que queres. Agora procura por:

• Barra Lateral à Direita:

 .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

• Barra Lateral à Esquerda:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Após encontrares o código referente à sidebar do teu blog, copia o código seguinte e cola abaixo do código da tua sidebar:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

E pronto *-*, como vês é muito fácil e fica muito bem.

Efeito Rotativo Nos Afiliados / Parceiros

Olá meus visitantes *-*, neste tutorial vou ensinar como colocar um efeito rotativo nas imagens dos afiliados. É bem fácil, vamos lá aprender!

No painel, vai a design → editar html → aperta F3 e procura pela tag: 

]] ></b:skin>

Cola acima dessa tag o código abaixo.

/*Efeito Rotativo*/
#efeito {
border-radius: 5px;
-webkit-transition-duration: 1.00s;
}
#efeito:hover {
-webkit-transform: rotate(360deg);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1sease;
}

Finalmente usa o seguinte código para "meteres" a imagem a rodar quando passas o rato por cima dela.

<a href="LINK DO AFILIADO" target="_blank"><img border="0" src="LINK DA IMAGEM" id="efeito" /> 

E pronto *-*, já está! Como viste é bem fácil e fica bem engraçado. Por favor, peço a todos que seguiam o blog, que voltem a seguir, pois todos os seguidores foram apagados com a mudança de blog. Obrigado.

4 Fontes Para Download

Olá visitantes fofos *-*, hoje trago-vos aqui quatro fontes simples que eu gostei muito, para download *-*. Espero que gostem. Para fazeres download clica no link por baixo de cada imagem.

http://www.dafont.com/never-say-never.font

http://www.dafont.com/the-wizard.font

http://www.dafont.com/danube.font

http://www.dafont.com/peach-sundress.font

Códigos Básicos de Html e Css

Neste post, vais poder ver um pequeno "tutorial", de códigos básicos de HTML e CSS.

Como Fazer um Template - Parte 4

Esta é a última parte do big tutorial "Como Fazer um Template", espero que tenham gostado de todo o tutorial e que o aproveitem. Se tiverem dúvidas, não hesitem em pergunta na aba "Pergunta".

Como Fazer um Template - Parte 3

Olá novamente *-*, nesta parte vamos aprender duas coisas: personalização do título dos posts e personalização do título dos gadgets (da barra lateral).

Como Fazer um Template - Parte 2

Olá ^-^, nesta parte do Big Tutorial, vou ensinar a juntar a barra lateral com a área das postagens e a alterar-lhe a cor, a alterar-lhe o tipo e letra, a alterar o tipo de letra do blog e a alterar a cor do rodapé.

Como Fazer um Template - Parte 1

Olá *-*, aqui está a primeira parte, do "big tutorial" de Como Fazer Um Template.

Novo Design + Informações

Olá, visitantes fofos *-*, como podem ver, mudei o design do blog. Desta vez, para um design, um pouco fora do normal. Acho que ficou muito fofinho e organizado; a cores também são claras e lindas.

Quero também dizer-vos que este design, foi inspirado no design atual do blog Camila's Designs (todas as explicações neste post).

Eu tive de mudar de blog, para ativar os comentários, então todos os que seguiam o blog, já não estão seguindo mais, porque este está noutro. Peço-vos que sigam novamente, usando o link "Segue o Blog", que se encontra na barra lateral, ou então clicando aqui.

Como já disse acima, a patir de agora os comentários estão ativados, espero que me respeitem a mim, e a todos os visitantes. Os comentários, são moderados.

Brevemente, postarei novamente o Big Tutorial, de 4 partes, de "Como Fazer um Template". 

Retirar "Attribution" do Blog

Neste tutorial vou ensinar a tirar aqueles créditos do blog: "Tecnologia do Blogger.", é muito fácil. É só seguires o seguinte tutorial.

 No painel, vai a design → editar html → aperta F3 e procura pela tag "attribution".

Depois de encontrares a tag acima, basta eliminar o seguinte excerto de código completo:

      <!-- outside of the include in order to lock Attribution widget -->

      <b:section class='foot' id='footer-3' showaddelement='no'>

      <b:widget id='Attribution1' locked='true' title='' type='Attribution'>

      </b:section>

Agora basta guardares o modelo. E pronto, como viste é super fácil, se tiveres alguma dúvida pergunta aqui.

Criar um Menu

Olá visitantes *-*, a pedido de um visitante do blog, hoje vou ensinar a criar um menu desde o início. Não é difícil, apenas precisas de ter um pouco de atenção e criatividade.

Primeiro, vai a design → editar html → aperta F3 e procura pela tag: ]] ></b:skin>. Depois de a encontrares, cola ANTES dela o seguinte código.

.NOMEdoMENU {
font-family: TIPO DE LETRA;
font-size: TAMANHO DO TIPO DE LETRApx;
color: #COR DO TIPO DE LETRA;
text-transform: TRANSFORMAÇÃO DO TEXTO;
letter-spacing: ESPAÇAMENTO DAS LETRASpx;
text-align: ALINHAMENTO DO TEXTO;
font-weight: bold;
margin: ESPAÇO ENTRE OS LINKS DO MENUpx;
line-height: ALTURA DA LINHApx;
padding: ESPAÇO ENTRE O TEXTO E A MARGEMpx;
width: LARGURA DO MENUpx;
height: ALTURA DO MENUpx;
float: FLUTUAÇÃO DO MENU;
border-radius: ARREDONDAMENTO DAS BORDASpx;
}
.NOMEdoMENU:hover {
background: #COR DE FUNDO DO MENU EM HOVER;
border-radius: ARREDONDAMENTO DAS BORDAS EM HOVERpx;
}

TIPO DE LETRA (font-family)
Define o tipo de letra do menu (o mais utilizado é o Georgia).

TAMANHO DO TIPO DE LETRA (font-size)
Define o tamanho do tipo de letra do menu (os tamanhos mais utilizados são o 11px e 12px.

COR DO TIPO DE LETRA (color)
Define a cor do tipo de letra do menu (exemplo: #808080, #818181, #696969).

TRANSFORMAÇÃO DO TEXTO (text-transform)
Define se o texto fica em minúsculas (lowercase), em maiúsculas (uppercase) ou só com a primeira letra em maiúscula (capitalize).

ESPAÇAMENTO DAS LETRAS (letter-spacing)
Determina o espaço entre as letras do menu.

ALINHAMENTO DO TEXTO (text-align)
Define se o alinhamento do texto é centrado (center), alinhado à esquerda (left) ou alinhado à direita (right).

TIPO DE LETRA A NEGRITO (font-weight)
O tipo de letra do menu fica a negrito (bold).

ESPAÇO ENTRE OS LINKS DO MENU (margin)
Define a distância entre um link do menu e outro.

ALTURA DA LINHA (line-height)
Define a altura da linha.

ESPAÇO ENTRE O TEXTO E A MARGEM (padding)
Define a distância entre o tipo de letra e as margens do menu.

LARGURA DO MENU (width)
Define a largura do menu.

ALTURA DO MENU (height)
Define a altura do menu.

FLUTUAÇÃO DO MENU (float)
Define se a flutuação do menu é centrada (center), alinhada à esquerda (left) ou alinhada à direita (right).

ARREDONDAMENTO DAS BORDAS (border-radius)
Define o arredondamento das bordas do menu.

Depois de teres colocado o código antes da tag indicada, e de o teres alterado (ao teu gosto) e de acordo com a explicação dada acima, terás de passar ao seguinte passo.

Observação: No código eu apliquei todas as formatações, mas tu podes usar só as que pretendes. 

Agora vamos ter de "colocar" o menu a funcionar. Vai a design → elementos da página → adicionar um gadget → html/javascript e cola o código abaixo no novo gadget.

<div class="NOMEdoMENU"><a href="LINK">NOMEdoLINK</a></div>

Agora, na linha de código acima tens de substituir a parte NOMEdoMENU, pelo nome que deste ao teu menu, a parte LINK pelo link a que queres que o menu vá parar e a parte NOMEdoLINK, pelo nome da página ou rede social a que o link vá redirecionar.
Tens de colar o código acima de acordo com o número de links que queres que apareçam no menu.

Se tiverem dúvidas, não hesitem em enviar uma pergunta, pelo Ask.Fm do blog.

Retirar "Subscrever: Mensagens Atom"

Olá pessoal *___*, neste tutorial vou ensinar como eliminar aquele link chato “Subscrever: Mensagens Atom”. É muito fácil, basta ires ao HTML do teu blog, e procurar pela tag “]]></b:skin>”, sem as aspas, e logo a cima dela, colocar este código:

.feed-links

{display: none;

E pronto, já está, como viram é super fácil, e claro o vosso blog vai ficar muito melhor assim.

Novo Blog - Html e Css

Olá, visitantes *-*, como devem ter reparado o blog esteve fechado durante alguns dias. O blog, mudou de visual, de nome e de link. Como devem ter reparado, quem entrou no Designs, Html e Css foi redireccionado, para este novo blog, Html e Css, um blog feito para blogs.

Eu já estava farto da estrutura e da organização do outro blog, e por isso, vou começar a publicar tudo de novo. Se quiserem fazer um pedido de tutorial ou tirar uma dúvida, usem o Ask.Fm do blog.