Saltar para: Posts [1], Pesquisa [2]

Fazer um Blog

Seja bem vindo . Aqui você encontrará um pouquinho de tudo para "SITES" e "BLOGS".

Fazer um Blog

Seja bem vindo . Aqui você encontrará um pouquinho de tudo para "SITES" e "BLOGS".

Icone Imprimir esta pagina

Possibilidade de imprimir sua página já num clique. Pode ficar no topo das postagens e segue o mesmo padrão para inserir no código do PDF.

 

É um código bem simples:

<a href="javascript:window.print()"><img src="URL da IMAGEM"/></a>
Substitua o que está marcado de vermelho pelo endereço da imagem que quer
 que seja mostrada como ícone da opção “Imprimir”.

 

Para este ícone ser automaticamente inserido em todas as postagens, vá
 em “Layout” e “Editar HTML”, marque “Expandir modelos de widgets” e
 procure pela linha do cíodigo:

<div class='post-header-line-1'/>


 

 

E cole o código do ícone de imprimir abaixo dela.

 

Lembre-se: antes de fazer qualquer modificação em seu código, 
faça um Backup para poder restaurar as modificações ao original.


 

Mensagem Alerta Pop-up

Algumas vezes entramos em sites q exibem mensagens nas caixas padrões com um botão do tipo “Ok” e outro “Cancelar”. Pode ser só um aviso comum ou questionando se queremos continuar naquela ação. Eu não vejo muita utilidade nisso para blogs comuns, mas pode ser interessante em alguns casos específicos como sites de downloads ou de conteúdo restrito ou mesmo para dar algum aviso temporário aos seus visitantes sobre mudanças ou eventos por vir.

 

A vantagem disso é que evita usar janelas pop-up convencionais que irritam os visitantes e muitas vezes são bloqueadas pelo navegador e acaba que o usuário não lê o aviso que vc quer dar.

Encontrei alguns códigos que podem funcionar bem em seu blog, caso queira colocar essas janelas de avisos ou comunicados. Elas podem abrir de muitos modos e serem de vários tipos. Vou mostrar aqui alguns casos. Já aviso que esta será uma postagem um pouco grande e mais complexa que o comum, pois essa é uma ferramenta mais complicada de ser usada e requer muitos cuidados.

 

Vele lembrar sempre: quando quiser modificar algo no código HTML do seu blog, mesmo que seja algo simples, faça backup.

 

Para o aviso aparecer ao entrar na página:

1. Entre em “Layout” e vá em “Editar HTML”. Lá encontre a linha “<body>” no seu código.

2. Abaixo dela coloque o seguinte código com as devidas modificações:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='subscribe'>

<SCRIPT language="JavaScript" type="text/javascript">alert("texto da mensagem")</SCRIPT>

</div>
</b:if>

3. Salve o modelo e teste.

Este alerta só aparecerá na primeira página do seu blog exibindo o texto que vc definir com um botão de “OK” que fechará o alerta.

 

Para o aviso aparecer ao sair da página:

1. Entre em “Layout” e vá em “Editar HTML”. Lá encontre a linha “<body>” no seu código.

2. Substitua esse código, com as devidas modificações, por:

<body onunload="alert('texto da mensagem');">

3. Salvar e testar o resultado.

É exatamente como o exemplo acima, mas só abre quando a pessoa sair de sua página.

 

Mensagem de Alerta com Confirmação:

Este é o caso de a pessoa poder rejeitar ou aceitar algo proposto, do tipo se deseja continuar naquela ação ou retornar para outra página. Contém um botão de “OK”  e outro de “Cancelar”.

1. Entre em “Layout” e vá em “Editar HTML”. Lá encontre a linha “<body>” no seu código.

2. Abaixo dela coloque o seguinte código com as devidas modificações:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='subscribe'>

<script language="javascript">
function confirmation() {
var answer = confirm("Mensagem de aviso")
if (answer){
alert("Aviso de confirmação da ação")
}
else{
window.close()
}
}

confirmation()
</script>

</div>
</b:if>

3. Salve e faça o teste.

 

Antes de tornar definitiva as mensagens, faça vários teste e veja como ficará o resultado final. Não use mais do que uma mensagem de alerta em seu site e só por um período determinado. As pessoas não gostam de sites ou blogs pouco objetivos e que atrapalham sua navegação ou demoram para encontrar o que precisam. Pior ainda se for pra ficar dizendo o que devem ou não fazer.

Menu Caixa de Opções

Falta de espaço no blog pode não ser desorganização, mas excesso de conteúdo mal distribuído. Muitas vezes queremos oferecer conteúdo para os visitantes e não sabemos como ordenar as opções. Outras vezes nos prendemos apenas aos Marcadores ou ao menu de arquivos, clássicos e padrões do Blogger. Descobri uma maneira de criar um menu mais simples e objetivo e que não ocupará espaço algum em seu blog.

 

Esse menu pode ser usado para qualquer coisa e qualquer tipo de links que queira. É um dica muito útil até para dispor melhor seu conteúdo e classificar as opções. Veja o exemplo abaixo de como poderia ser:

 

 

É bem simples de fazer isso. Basta copiar o código abaixo, fazendo as devidas modificações e colar onde quiser que apareça. Até mesmo no meio de artigos e postagens pode ser colocado, como fiz acima. Ou, podem conter vários na sua barra lateral (sidebar) como um elemento de página (gadget) do tipo “HTML/JavaScript”.

Como criar uma lista de Links.

 

Abra o lay-out de seu blog e clique em adicionar elementos, escolha: HTML/Java Script, copie e cole o código abaixo.
 

<div style="border: 1px solid rgb(153, 153, 153);

overflow: auto;

width: 200px;

height: 300px;

text-align: center; ">

#link1 <br />

#link2 <br />

#link3 <br />

#link...

</div>

Observações: O texto com width: 200px; and height: 300px refere-se ao tamanho, modifique para o tamanho adequado a sua sidebar.

#link1,#link2, #link3 - Substitua pelo links de seus amigos

Fonte: http://trick-blog.blogspot.com/

resumo de sua postagem

Se você deseja apresentar apenas um resumo de sua postagem com um link do tipo 'Leia Mais...' ou 'Continue Lendo..." em seu blog, siga estes passos:

Vá ao HTML do seu blog e antes da tag </head>, cole este código:
<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>


Salve o template. Depois clique em Expandir Modelo de Widget e procure este trecho:

 

<div class='post-body'>
<p><data:post.body/></p>


Substitua-o por:

 

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Leia Mais…</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>


Salve. Agora em em Configurações->Formatação-> e desça a página até ver Modelo de Postagem. Cole alí o seguinte código:

 

Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>


Salve. Toda vez que você iniciar uma postagem este código aparecerá (melhor visualizado no modo HTML da postagem) e basta que você respeite os campos correspondentes para o resumo e o restante da postagem. Se não desejar resumir um determindo post, basta apagar o código.
 

templates

Atualize seu blog gratuitamente, Clique nas imagens abaixo para conhecer as coleções. São sites selecionados para escolha dos mais belos templates e dicas.
Confira o que cada site apresenta neste desfile, Confira os looks dos templates, Acompanhe a tendências.








Templates femininos com muito bom gosto. thumbs_upOnde? Neste Link.

image001

espero ter sido útil

 

Scroll em qualquer parte da nossa página

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

 

 

Subir Pàgina

Este código é para colocar uma seta para subir a página. Ideal para quem tem postagens longas, ou muitas postagens na primeira página.

Coloque-o acima da tag: </body>

Código:

<a href=’#’ shape=’rect’>

<img alt=’Subir Página’ border=’0’ src=’ Url de sua Imagem ’ style=’position: fixed; bottom:0; left:0;’/>

</a>

Para mudar a posição da seta.

Left= Esquerda

Center: centro.

Rigth: Direita

Fonte: http://patopatan.blogspot.com/

Link-me sem copiar e colar códigos

Com este código, Blogueiros poderão colocar facilmente o link com imagem de seu Blog, sem que tenham de copiar e colar absolutamente nada. Basta que você tenha o endereço de sua imagem para inserir no código abaixo. A imagem quando clicada vai automaticamente levar a uma página do Blogger, Onde deverá ser escolhido o Blog para inserção do link. A inserção do link aparecerá em elementos de página, Arraste-o para onde quer que apareça.


 

O código é este. Não esqueça de substituir o texto em vermelho.

<center><form action="http://beta.blogger.com/add-widget" method="post">

<input value="Amigos " name="widget.title" type="hidden"/>

<textarea style="display: none;" name="widget.content">

<a href="http://NOME DO SEU BLOG.blogspot.com" target="_blank">

<img alt="NOME DO SEU BLOG " src="Endereço da sua imagem "/>

</a>

</textarea>

<input value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>

<input src="Endereço da sua imagem" type="image"/>

</form></center><hr/><br/>

Mais sobre mim

foto do autor

Subscrever por e-mail

A subscrição é anónima e gera, no máximo, um e-mail por dia.

Mais visitados

    Arquivo

    1. 2009
    2. J
    3. F
    4. M
    5. A
    6. M
    7. J
    8. J
    9. A
    10. S
    11. O
    12. N
    13. D
    Em destaque no SAPO Blogs
    pub