Fonte desta pesquisa:
blog.foitestado

Barra de rolagem no post e lateral

do blogger

..."o css e onde coloca o código para scroll (barra de rolagem) no BlogSpot."

..."não se usar mais frames em html?
... "claro que existem outros problemas que levaram ao desuso deles, mas a barra de rolagem é uma delas."

Barra de rolagem em um post
..."colocar apenas em um ou dois posts, basta na hora de postar colocar uma div em seu post, ou seja, na parte editar Html da postagem, antes de começar a escrever coloca isso
<DIV style="height:600px; overflow:auto;">
e onde termina o pedaço que você quer com barra de rolagem, ou lá no final de seu texto coloca esse </DIV>
Nesse caso acima o comentário e outros elementos como o título ficam fora do "quadro"

...

"Entenda as tags:"

height:800px; altura de 800 pixeis,

...a numeração pode ser alterada, de acordo como você queira...

overflow:auto; barra de rolagem, aparece quando o texto é maior que a altura.

Problema: se houver overflow:hidden; esse deve ser removido para que o outro funcione.

Nas postagens do blogspot e título

Agora para tornar padrão as postagens com scroll, será preciso mexer no Css do html, o título fica junto com o post(dentro da caixa), porém os comentários possivelmente ficam de fora.

Adicionar o código no blogger:

Clique em ~~Layout~~ Design

Na aba/guia Editar Html

Procure e clique em Baixar modelo completo e salve em seu computador, por segurança.

no Html procure esse código:

.post{

E, após ele adicione:

height:800px; overflow:auto;

Se antes do próximo sinal de fecha chaves } houver overflow:hidden; esse deve ser removido.

Resultado deve ficar parecido com isso:

.post {height:400px; overflow:auto;
text-align: left;
}

Perceba que você vai adicionar um pedaço de código que da o efeito, e ele provavelmente pode não ser exatamente igual esse acima.

Todas as postagens

usando

a mesma barra de rolagem

Essa alteração coloca junto todas as postagens e tudo que tiver nessa área dos posts, usando o mesmo quadro, isso na pagina inicial do Blogspot, ou seja, se tiver 4 posts, os 4 vão ficar no mesmo quadro com mesma barra de rolagem.
Se você escolheu o a alteração acima não faça essa.
Colocar o código no blogger.com

Clique em ~~Layout~~Design

Na aba/guia Editar Html

Procure e clique em Baixar modelo completo e salve em seu computador, por segurança.

no Html procure esse código:
#main{
E, após ele, adicione:
height:900px; overflow:auto;
Se antes do próximo sinal de fecha chaves } houver overflow:hidden; esse deve ser removido.

Resultado pode ficar parecido com isso:
#main {height:400px; overflow:auto;
width: 470px;
color: $textColor;
font: $textFont;
background: $postbgColor;
border: 1px solid;
}

"Perceba que você vai adicionar um pedaço de código que da o efeito, e ele provavelmente pode não ser exatamente igual esse acima."

Barra de rolagem na lateral do blogger

Sabendo que o código que da o efeito de barra de rolagem é esse e que esse código pode impedir esse efeito você pode colocar uma Scroll na lateral , ela se chama sidebar.

Acesse e faça logon no blogger:

Clique em ~~Layout~~ Design

Na aba/guia Editar Html

Procure e clique em Baixar modelo completo e salve em seu computador, por segurança.

no Html procure esse código:
.sidebar{
E, após ele, de a seguinte proriedade a ele:
height:900px; overflow:auto;
Se antes do próximo sinal de fecha chaves } houver overflow:hidden; esse deve ser removido.
Resultado pode ficar parecido com isso:
.sidebar {height:400px; overflow:auto;
text-align: left;
line-height: 1.4em;
font: $sidebarTextFont;
}

Fonte desta pesquisa:
blog.foitestado

_________________________________

... Também confira + em:

mundoblogger.
colocar-barra-de-rolagem-no-blog

Colocar Barra de Rolagem no blog

Barra de Rolagem em determinado widget da Sidebar:

Digamos que em sua sidebar você tem um gadget de Videos, e exatamente nesta única coluna que você quer inserir uma barra de rolagem, para fazer rolar o contéudo.
Vá em design >> Editar HTML >> Expandir modelos de widgets e procure pelo código referente a este widget que você tem instalado na sidebar.

Que deve ser assim:


<b:section class='sidebar' id='sidebar-bottom' preferred='yes'>
<b:widget id='VideoBar1' locked='false' title='Barra de vídeo' type='VideoBar'>

"Note que no início do código tem

widget id=’VideoBar1′

é para esta ‘id’ que você deverá criar os estilos no código CSS."

..." procure pela tag:"

]]></b:skin>

e cole ANTES dela
o código a seguir:


#VideoBar1 .widget-content{height: 160px;overflow: auto;}

Salve as modificações!

height: 160px; é a altura total que terá o gadget.

O comando overflow: auto;
faz como que a barra de rolagem apareça automaticamente, apenas se altura do gadget ultrapassar os 160px.

Deste modo somente o conteúdo do widget ‘Video’ terá uma barra de rolagem, deixando o título fixo, assim como está aqui neste blog de teste.
Utilize o mesmo procedimento para cada widget que você queira fazer rolar o conteúdo atráves de uma barra de rolagem, alterando apenas o nome da ‘id’ de cada widget, não esqueça!
Altere o valor de height se preferir.

Barra de Rolagem na área do post:

Vá em design >>
Editar HTML >>
Expandir modelos de widgets e
procure por: .post-body

E acrescente as linhas:


height: 400px;
overflow: auto;

Devendo ficar mais ou menos assim:


.post-body {
 margin:0 0 .75em;
 line-height:1.6em;
height: 400px;
overflow: auto;
}

"Edite o valor de height
para a altura
que você desejar."
"Salve!"

"Atenção: Este tutorial aplica-se aos antigos modelos de layout (Templates minima). A eficácia da dica aqui apresentada não foi testada nos novos Designer de Modelo."

About flo

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.