Seja bem vindo . Aqui você encontrará um pouquinho de tudo para "SITES" e "BLOGS".
Quarta-feira, 19 de Agosto de 2009

Diversas formas para adicionar Scroll em qualquer parte da nossa página. image002 Vejamos os principais:

1 - * Scrollbars em todos widgets do blog *


 

No seu template - Editar HTML


 

Insira o código abaixo logo após: /* Sidebar Content */.


 

.sidebar .widget{


 

height:200px;


 

overflow:auto;


 

}


 

2 - * Scrollbars nos widgets em uma só sidebar *


 

Da mesma forma acima, Basta localizar o nome da barra lateral: (newsidebar, sidebarleft, sidebarrigth)


 

#sidebar .widget{


 

height:200px;


 

overflow:auto;


 

}


 

Caso tenha uma nova sidebar, use o código abaixo:


 

#newsidebar .widget{


 

height:200px;


 

overflow:auto;


 

}


 

3 - * Scrollbar em um unico widget*


 

Anter da colocação do código temos que localizar no layout o "id" Esta “id” é a identificação do elemento que queremos adicionar o Scroll.


 

Em nosso template sem expandir os widgets veremos algo parecido com isto:


 

<div id=’sidebar-wrapper’>


 

<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>


 

<b:widget id=’LinkList1’ locked=’false’ title=’Meus amigos’ type=’LinkList’/>


 

<b:widget id=’Archivelist’ locked=’false’ title=’’ type=’ArchiveL’/>


 

<b:widget id=’Label1’ locked=’false’ title=’Label’ type=’Label’/>


 

</b:section>


 

</div>


 

Observem que as palavras em negrito referem-se a “id” de cada widget.


 

Exemplificando: Vamos colocar o scroll em nossa lista de amigos. Logo a “id” a ser procurada é: "LinkList1". Vamos agora procurar /* Sidebar Content */ referente ao Linklist e abaixo colocamos o seguinte código:


 

#LinkList1 ul{


 

height:200px;


 

overflow:auto;


 

}


 

4- * Scrollbars no corpo das entradas *


 

Localizar a seguinte linha: .post {


 

Logo abaixo coloque o seguinte:


 

height:200px;


 

overflow:auto;


 

}


 

5- * Scrollbars para uma parte da postagem *


 

Inserir este pequeno código no CSS do template.


 

.scrollbox {


 

height:100px;


 

width:300px;


 

overflow:auto;


 

}


 

No editor das postagens escreva seu artigo normalmente e na parte que vai aparecer como scroll coloque o seguinte:


 

<div class="scrollbox">TEXTO DENTRO DA SCROLL</div>


 

¡¡¡Nota!!!


 

Em alguns templates você poderá não encontrar: /* Sidebar Content */, Neste caso coloquem os códigos antes de: ]]></b:skin>.


 

image003 Fonte: Elescaparate image004


 

http://elescaparatederosa.blogspot.com/2007/10/scrollbars-en-cualquier-parte-del-blog.html

 

 

 

 

Scroll em elementos de página

 

Economize espaço em seu layout adicionando função Scroll em elementos de página. É uma simples solução. Ideal para marcadores com grande quantidade de itens ou aquela lista enorme com Links recomendados ou de parceria. gelakguling

Para inserir: Vá em adicionar um gadgets: (HTML/JavaScript AdicionarAdicionar funcionalidade de terceiros ou outro código a seu blog.)
 

babaiColoque as linhas em azul e insira os links e titulos no meio. (Em vermelho)

O tamanho pode ser alterado, modificando os valores que estão em verde.:-D

 

<ul>

<div style="overflow:auto;width:200 px;height:100 px;padding:8 px;border:1px solid #eee">

<li><a href= " url completa " target="_blank"> título </a> </li>

</ul>

</div>


Exemplo:

<div style="overflow:auto;width:200px;height:100px;padding:8px;border:1px solid #eee">

<ul>

<li><a href= " url completa " target="_blank"> título aqui </a> </li>

</ul>

</div>

FONTE: Blogspottutorial babai

 

 



mais sobre mim
pesquisar
 
Últ. comentários
west jorge baby com foi capaz
Mais de 1700 modelos e 40 marcas de relógios femin...
O site do Book Modelos é direcionado a todas mulhe...
A Fotografia sensual e edição de um Book Sensual, ...
Cuidados com o Relógios..Nossos relógios são a pro...
conheça meu site de relógios replicas italianas pa...
parabens gostei desse sistema de blog e pretendo m...
legal vou montar um blog de replicas de relogios f...
Para os apaixonados e colecionadores de relógios a...
Muito legal gostei mesmo...parabens!!
arquivos
Awareness Ribbons Customized - ImageChef.com