pesquise aqui

Mostrando postagens com marcador blogger. Mostrar todas as postagens
Mostrando postagens com marcador blogger. Mostrar todas as postagens

Tutorial: Voltar ao topo do blog (deslize)

Tutorial: Voltar ao topo  do blog (deslize)


Para iniciar o passo -  a - passo

.Logado no painel do blogger,
...vá até o html
de seu template blogger
e,
...

Primeiro Passo:

No CSS, de seu "lay-out", template blogger, 
cole ,antes de ]]></b:skin>

o código a seguir:

#toTop {
    background: none repeat scroll 0 0 #f7f7f7;
    border: 1px solid #ccc;
    bottom: 10px;
    color: #333;
    cursor: pointer;
    display: none;
    font-family: verdana;
    font-size: 11px;
    padding: 5px;
    position: fixed;
    right: 10px;
    text-align: center;
    width: 100px;
}
...

Pronto.
Visualize
Salve!

Segundo passo:

Agora, 
você ,
cola,
antes de </head>,
o código "Java Script", a seguir:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();
    } else {
            $('#toTop').fadeOut();
    }
    });

    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });
});
</script>

...
Terceiro Passo:

Antes da tag </body>,  de seu template blogger,no html,
cole,
o código a seguir:
...
<div id="toTop" style="display: none;">^ Voltar ao topo</div>
...
Pronto
Visualize!
Salve!
...
Nota:
...

Esse terceiro passo, você pode também colar
em

"Adicionar um gadget",


 no seu  "lay-out" de seu template  blogger.




Bom, espero ter ajudado!


Veja, nesse meu blog, o exemplo, embaixo , do lado direito.



como colocar 05 (cinco) colunas no footer do blog?

fonte e créditos: 
templateseacessorios
colocando-5-colunas-no-footer-do-blog.html

"Colocando 5 colunas no footer do blog"


Se você tem tanto, mais tanto widget em seu blog que quer dar uma aliviadinha nas colunas laterais, você poderá colocar 5 colunas no footer do blog.

Para isso copie o código e cole acime de:
]]></b:skin>



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.









/* 5 colunas Footer
----------------------------------------------- */
#colunasfooter{
margin:0px auto;
width:990px;
}

.areacolfot{
background:#222;
margin:0px auto;
}

h3.colfothead{
font-family:Yanone Kaffeesatz;
height:30px;
font-size:20px;
padding-left:30px;
padding-top:10px;
color:#DF9545;
text-transform:uppercase;
letter-spacing:2px;
}

.colfot{
float:left;
width:160px;
padding-bottom:30px;
font-size:12px;
list-style:none;
margin:20px 0px 0px 15px;
color:#ddd;
}

.colfot ul {
list-style-type: none;
margin:  0px;
padding: 0px 5px 5px 5px ;
}

.colfot li{
list-style-type: none;
margin: 0 ;
padding: 0;
border-bottom:1px solid #333;
text-decoration: none;
padding: 5px 0px 5px 5px;
display:block;
}

.colfot ul ul  {
list-style-type: none;
margin: 0;
padding: 0px 0px 0px 0px;
background-repeat:no-repeat;
}

.colfot ul li {
height:100%;
line-height:18px;
clear: left;
width: 190px;
list-style-type: none;
}

.colfot ul li a:link, .colfot ul li a:visited  {
color:#777;
}

.colfot ul li a:hover{
color: #ccc;
}



*O código na cor azul acima, representa a cor de fundo dos widgets .

Agora procure pelo código

<!-- end content-wrapper -->

e depois dele cole o próximo código:




    <div class='areacolfot'>

<div id='colunasfooter'>
<ul>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='Label2' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Label3' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='Label4' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='colfot'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
<b:widget id='Label5' locked='false' title='Labels' type='Label'/>
</b:section>
</div>



<div class='colfot'>
<b:section class='lowerbar' id='lowerbar5' preferred='yes'>
<b:widget id='Label6' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

</ul>
<div class='clear'/>
</div>
</div>



Agora á até "Elementos de página, você verá as 5 colunas.
  
Arraste para baixo os widgets ou então, coloque novos.

veja +

Related Posts Plugin for WordPress, Blogger...

Postagens populares

[▼]

agregadores





 
Related Posts with Thumbnails
|Template by ebds|http://efeitomostrarocultarnahomepage.blogspot.com |