728x90 AdSpace

Pagseguro

  • Novidades

    domingo, 5 de outubro de 2014

    BANNER ROTATIVO NO CABEÇALHO DO BLOG

    Olá Amigos...

    Uma das formas de deixar seu blog com uma aparência mais profissional é personalizar seu Layout do blog.

    banner rotativo para blog
    Neste Tutorial ensinarei como apresentar várias imagens no cabeçalho do seu blog, sempre que houver um carregamento de página as imagens se alterarão, exibindo uma imagem diferente.

    banner-rotativo-no-cabeçalho-do-blog1 - Criar as imagens que utilizará no seu cabeçalho, as imagens pode ter o tamanho que você desejar, mas se quiseres uma imagem do tamanho de seu Cabeçalho, você precisa saber o seu tamanho, para isso vá em:

    * Modelo 

    * Editar HTML 

    * Use Ctrl + F, para procurar por:

    #header-wrapper{

    Após encontrar header-wrapper que corresponde a toda a área do seu blog, procure por width: o número que o acompanha corresponde a largura do seu cabeçalho em pixel. Agora você já sabe a largura do seu Cabeçalho - Head, podes começar a criar suas imagens.

    veja nosso tutorial COMO CRIAR UM BANNER PARA ONLINE ele irá lhe ajudar a criar suas imagens.

    2 - Você precisa hospedar suas imagens, para isso usamos o ImageShack .

    3 - Confira no painel do blog se seu template há a possibilidade de adicionar um gadget, através de um Elemento de Página.

    Não havendo essa possibilidade, você terá que fazer algumas modificações nos códigos que definem o cabeçalho, vá em:

    * Modelo

    * Editar HTML

    * Use Ctrl + F, para procurar por:

    <div class='region-inner header-inner'> ou <div id='header-wrapper'>  ou <div id='header-wrapper'> ou ainda pelo código na caixa abaixo.


    id='header' maxwidgets='1' showaddelement='no'>
       <b:widget id='Header1' locked='true' title='TÍTULO DO BLOG (Cabeçalho)' type='Header'

    Onde está escrito TRUE troque por FALSE.

    Onde está maxwidgets=’1′ , troque por maxwidgets=’5′;

    Onde está showaddelement=’no’ , troque por showaddelement=’yes’

    Salve as alterações e vá em Layout verá que abaixo do cabeçalho surgiu um campo para Adicionar um Gadget, lá você irá colocar o código a exibir Imagens Rotativas no Cabeçalho. Adicione um Gadget tipo HTML/JavaScript e cole o Código da caixa abaixo:

     
    <script language="JavaScript">
    var quotes=new Array()
    
    quotes[0]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-1"/></a>'
    
    quotes[1]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-2"/></a>'
    
    quotes[2]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-3"/></a>'
    
    var whichquote=Math.floor(Math.random()*(quotes.length))
    
    document.write(quotes[whichquote])
    
    </script>
     

    Substitua onde diz:

    ENDEREÇO DO SEU BLOG, pelo endereço do seu blog ou a postagem relacionada a imagem.
    NOME DO BLOG, pelo nome do seu blog ou nome da postagem relacionada a imagem
    ENDEREÇO DA IMAGEM, pela URL de sua imagem hospedada.

    O código que disponibilizado acima está configurado para 3 imagens diferentes, se você quiser incluir mais imagens copie o código abaixo e coloque antes dê:

    var whichquote=math.floor(math.random()*(quotes.length))

    quotes[***]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM"/></a>'
    

    Troque onde está [***] pelo número correspondente a imagem, deve seguir uma sequência, se a última imagem for [2], a próxima deverá ser [3] e assim consecutivamente.

    Agora sempre que seu que alguém carregar uma página em seu blog, uma mensagem diferente aparecerá em seu cabeçalho.

    • Comentarios Blog
    • Comentarios Facebook

    1 comentários:

    Item Reviewed: BANNER ROTATIVO NO CABEÇALHO DO BLOG Rating: 5 Reviewed By: Testando Blog
    Scroll to Top