Pesquisar

Carregando...

aprenda como é feito: "Paginação Numerada para Blog"

Aqui neste espaço... 
Apenas divulgo e indico... 
Posts, notícias, dicas etc.

Com devidas fontes  e créditos deste presente postferramentasblog



..." para ajudar você a customizar seu template no Blogger, 
....agora, 
mudando os links de navegação de página 
padrões do Blogger, numerando cada página. "

"Tudo o que você puder fazer para facilitar a navegabilidade de seu blog é importante e uma dessas formas e permitir que o visitante percorra suas páginas uma por uma, passando pelo conteúdo que deseja."

..."o modelo "..."mostrar é como ilustra a imagem."



"... já mostramos outras formas de mudar o link de navegação das páginas"...

  • "Personalizar Links de Navegação do Blogger"

..." lembrar também que, antes de fazer qualquer modificação em seu blog principal, teste em um blog preparado para isso e faça um backup completo do seu blog original para não passar sustos e poder reverter as mudanças caso algo não saia como desejado."

"Inserindo paginação numerada no Blogger."

"O modelo "...
..."abaixo ...
..." no blog Blogger Widgets (em inglês). Veja o artigo original caso tenha alguma dúvida: Numbered Page Navigation For Blogger."

"Proceda da seguinte forma"

1. Abra o painel do Blogger em sua conta e clique no menu “Layout” ...

“Editar HTML”.

No código fonte de seu blog procure pela seguinte linha:

]]></b:skin>

2. Imediatamente ACIMA dela cole o seguinte código no  CSS (que determina as caracteríticas dos elementos que serão usados):


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


..." Não altere nada aí e agora procure por </body> que estará bem no final do código-fonte. Também, imediatamente ACIMA dele, cole o trecho que segue:



<!-- Inicio do codigo de navegacao -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Anterior&#39;;
var downPageWord =&#39;Próximo&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!-- Final do codigo de navegacao -->


"Repare que o número na linha marcada de vermelho determina quantos artigos serão exibidos por página, então coloque o número adequado para o padrão do seu blog (já tratamos sobre a quantidade de artigos por página aqui: Quantidade e tamanho das Postagens na primeira página).
Já o número na linha rosa é a quantidade de números que aparecerá nos links de navegação."

"Escolha a quantidade de acordo com a estética e largura da área de postagem."

"...Salve e veja o resultado em seu blog."


OBS.:

Ao invez  do  do código indicado no
          item 2 (dois) , citado acima,
se preferir, 
pode-se usar o código a seguir:

/* PageNav
--------------------------- */
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;  }

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;
text-decoration: none;
}
.:.


Share:

Aprenda a:..."Expandir imagens ao passar o mouse"

fonte e créditos:



 

 Para quem tem blog e utiliza iamagens eis um bom código para economizar espaço e organizar bem os posts.Super fácil e leve, pode ser usado direto nas páginas de postagem do blog, no
modo "  Editar HTML"




<img class="expa" src="AQUI O ENDEREÇO DA IMAGEM" />
<style>
  img.expa {
    cursor: pointer;
    max-width: 150px;
  }
  img.expa:hover {
    max-width: none;
  }
</style>


Vagabundia


 Mas se quer mais praticidade,  

vá até o HTML de seu blog e

depois de   ]]></b:skin>  
cole o código abaixo


<style>
  img.expa {
    cursor: pointer;
    max-width: 150px;
  }
  img.expa:hover {
    max-width: none;
  }
</style>








Agora vá até Configurações, agora clique em Formatação. Lá em baixo na página vc verá uma área em branco, cole o código abaixo e salve.

<img class="expa" src="AQUI O ENDEREÇO DA IMAGEM" />



"  Sempre que precisar basta colar o endereço da imagem desejada, se não, basta apagar."




Share:

O amor está no ar...



















|||

 


"Enviar a um Amigo"

///

LEITORES...SEJA +1

leitores

VÍDEOS


COMPARTILHAR:

 


Share:

"Aos amigos que sonham em ser escritor"


ASSIS...


post homenagendo tu, grande sábio!


Sou escritor espírita com vários livros lançados nacional e internacionalmente, pela Casa Editora O Clarim/SP.
Também sou diretor e produtor do programa espírita Caminhos de Luz, exibido pelos canais 17-aberto, 21-cabo e 6-net.
Lancei recetemente, com o amigo espiritual João Maria, o livro ESTRANHO SEGREDO.
Website http://caminhosdeluz.dihitt.com.br
Cidade Natal
Estado Rio Grande do Norte
País Brasil
Profissão Escritor
Orkut não
MSN não
Twitter http://twitter.com/assisazevedo

fonte:
http://www.dihitt.com.br

  "  Aos amigos que sonham em ser escritor" 

Mais sobre Pessoal



"    Pesquisei nos blogs e sites, um texto que condiz mais ou menos com a realidade, para os amigos trabalharem seus dons e vontades, com objetivo de serem mais tarde bons escritores. Postei essa informação, porque vejo tanta gente querendo ser escritor, sonhando com um livro, e como sou a favor de ajudar aqueles que querem tornar suas pretensões, vocações, em realidade nada melhor do que tentar passar algo que possa orientá-los. Encontrei esses conselhos da escritora Thalita.
Todos do dihitt sabem que sou escritor, portanto quero repassar esse texto de nossa amiga Thalita, a fim de que todos tenham mais ou menos uma idéia do que deve fazer para ser um bom escritor.

1) Nunca é tarde para correr atrás de um sonho. Zélia Gattai começou a escrever aos 63 anos, furou as orelhas aos 80 e hoje é imortal. Mas comece logo. Agora, se possível, tenha você 15 ou 80 anos. Escrever um livro leva tempo, então por que esperar mais? Cada dia de espera é um dia perdido, não volta mais. Aliás, esta dica serve para qualquer sonho que você tiver. Acredite e comece a se mexer. Ficar em casa assistindo à Sessão da Tarde não ajuda nada.
Lembrei-me agora de uma passagem do primeiro livro do Amyr Klink, Cem dias entre Céu e Mar, em que ele conta uma coisa muito bonita. Seu medo maior não era das tempestades, dos tubarões ou da solidão. Seu medo era de nunca sequer partir para tentar realizar o seu sonho de cruzar o Oceano Atlântico remando. Não tentar pode ser muito, muito mais doloroso do que fracassar. Portanto, por mais difícil que possa parecer, NÃO DESISTA!
2) Não se preocupe se os seus primeiros textos não forem um primor. É muito difícil acertar a mão logo de primeira. Continue tentando, continue insistindo. Você vai melhorar. Como dizem os ingleses, “a prática traz a perfeição”. Escreva e reescreva cada parágrafo, cada capítulo dezenas de vezes, se necessário. Eu só paro de alterar um livro quando a editora me obriga a entregar os originais para iniciar o processo de publicação.
3) Aliás… o ato de escrever se resume, basicamente, a duas etapas: a primeira consiste em despejar a história no papel. A segunda, minha preferida, em burilar esse texto “despejado”. Lembre-se de que, como disse o filósofo francês Voltaire, escrever é a arte de cortar palavras. Acredite, é um dos melhores conselhos para quem quer viver de escrever. Não tenha pena do seu texto, corte, corte mais uma vez, mais uma. Limpe as arestas, enxugue as gorduras, mesmo, sem dó nem piedade. Assim, seu texto fica mais enxuto a cada leitura, a cada tratamento e, um belo dia, ele vai estar pronto, tinindo, apenas esperando que você dê a partida e o envie para as editoras.
4) Se você é do tipo que entra em pânico diante de uma tela de Word em branco, compre um gravadorzinho. É uma excelente ferramenta de trabalho, vivo com o meu para cima e para baixo para não deixar as idéias sumirem na memória. Muita gente me diz que o difícil é começar a escrever, que dá um branco, parece que tem uma barreira etc. Com o auxílio do gravador, você simplesmente conta a história para você mesmo. Acredite, depois fica fácil passar para o papel. Você começará apenas transcrevendo suas idéias mas, aos poucos, vai tomar gosto pela escrita e pelo processo de lapidação de texto. E posso adiantar uma coisa? Prepare-se, é uma delícia.
5) Uma forma bem bacana de praticar a escrita (e também de aprender a encarar as críticas numa boa) é criar um blog. Eles proliferam na internet e vieram ao mundo para mostrar o talento de muita gente que andava escrevendo escondida por aí. Além de ser uma maneira de mostrar a sua cara (e seu texto, claro), o blog pode  ajudá-lo a ser encontrado por uma editora, já que cada vez mais a web se firma como celeiro de bons escribas. Se quiser conhecer o meu blog, clique aqui.
6) Não escreva sem saber aonde quer chegar, fica muito difícil. É claro que você pode – e deve – mudar a sua história ao longo do tempo, mas sempre tenha um objetivo definido. Um exemplo: quando comecei a pensar em escrever o Tudo por um Pop Star defini que seriam três amigas, fãs fanáticas (e desastradas), capazes de fazer as maiores loucuras para chegar perto de seus ídolos. Os detalhes vieram depois, nasceram enquanto eu escrevia.
7) Escolha um tema familiar, com o qual você se sinta à vontade. E pesquise o quanto for preciso para dar consistência ao seu romance. Com a Internet, pesquisar os mais diversos assuntos ficou bem mais fácil. E é uma das partes mais gostosas do trabalho de escrever um livro.
Obs: Se a história empacar, deixe o livro de lado por algum tempo, mas não desista. De tanto revisar uma parte, você pode acabar não vendo mais o que precisa ser corrigido. Deixe o texto descansar por algumas semanas e depois volte a ele com olhos renovados. Problemas que pareciam insolúveis se resolvem naturalmente.
9) Observe. Tudo. No carro, na portaria, no elevador, na night, observe tudo e todos. O cotidiano é uma infindável fonte de inspiração (bebem dela grandes autores, como João Ubaldo Ribeiro, Mário Prata e Fernando Sabino, só para citar alguns). Um comentário aparentemente inútil e sem importância que você ouviu no elevador pode render idéias saborosas para crônicas, contos e até romances. Fique de olhos e ouvidos bem abertos! Sempre.
10) Cuidado com a opinião de amigos ou mesmo de parentes. Ela pode ser desfavorável (ou não tão otimista quanto você esperava) e abalar a sua garra. Lembre-se de que a última coisa que os pais de Paulo Coelho desejavam era que ele se tornasse escritor. E quem vai dizer agora que ele estava errado? Além do mais, seu livro, por mais que você o ame e o ache perfeito, sempre desagradará a alguém. Nenhum livro (nenhum, mesmo!) tem aprovação unânime. Se alguém criticar seu texto, procure encarar com naturalidade. É difícil, mas é preciso.
11) Molho. Massa sem molho é uma lástima. Fica uma coisa sem graça, insossa, zero apetitosa. Texto sem molho é isso aí e mais um pouco. Escrever corretamente é uma coisa. Escrever com molho é outra. Uma boa história é capaz de prender o leitor. Mas uma boa história com molho pode conquistá-lo e ser o ingrediente que levará seu projeto de livro para frente. Luis Fernando Veríssimo, Fernando Sabino e João Ubaldo Ribeiro são ótimos exemplos de autores que sabem dar molho ao que escrevem.
12) Leia. Leia muito. Livros, jornais, revistas, bulas de remédio, manuais de máquinas fotográficas, blogs, gibis, não importa. É lendo que ficamos em contato com a matéria-prima de todo e qualquer escritor: a língua portuguesa. É como o treino para um jogador de futebol. Sem leitura, um escritor que podia ser craque vira apenas mais um perna-de-pau."

"  Estes conselhos são da excelente escritora Thalita."


fonte:
http://www.dihitt.com.br/n/pessoal/2010/11/26/aos-amigos-que-sonham-em-ser-escritor
Share:

Slide com atualizações automáticas...aprenda como é feito:




Slide com atualizações automáticas
fonte e créditos:



A Rô do Bloggersphera deu um jeito, competente que é, de colocar as últimas postagens automaticamente 
em um dos slides qe acho bem bonito, o slide XXX de criação de Jonh Resig. Eu já havia o ensinado AQUI, mas como acho interessante essa estória de slide automático, vou reproduzir neste post como se faz o danado.



Vá até o HTML de seu blog e procure pelo código:

]]></b:skin>


Cole então o próximo código acima dele. (código em 
vermelho é a imagem de fundo)




/*Slide---------------------------------------------------------------*/
#crosscol-wrapper { /* coluna onde você colocará o slide */
padding:12px;
position:relative;}
#slide-wrapper { /* container do slide - não alterar */
width:100%;}
#slide-wrapper a:link,
#slide-wrapper a:visited,
#slide-wrapper a:hover{ /* links - não alterar */
outline:none;
text-decoration:none;}

#slider { /* altere a imagem de fundo e as medidas conforme seu template */
background:url(http://1.bp.blogspot.com/_FXIne2ZDJII/SrQibvsAyFI/AAAAAAAABhw/vDf4hrpYAWg/s1600/980.png) no-repeat;
clear:both;
height:254px;
margin:20px 0 0 0;
overflow:hidden;
position:relative;
width:100%;}

#mover { /* seletor da movimentação do slide - não altere */
overflow:hidden;
position:absolute;
width:auto;}

.slide { /* a largura pode ser alterada conforme a coluna onde você colocará o slide e a imagem de fundo */
float:left;
height:200px;
padding:15px 0;
position:relative;
width:960px;}

.slide h3 { /* título do post - altere cor, fonte e medidas conforme seu template */
color:#ccc;
font-size:24px;
margin:0 0;
overflow:hidden;
padding:10px 0px 0px 10px;
width:300px;}

.summary { /* container do sumário - altere conforme seu template */
font-size:12px;
font-weight:bold;
line-height:20px;
margin:0 0;
padding:30px 0px 0px 10px;
text-transform:uppercase;
width:400px;}

.slide p{ /* parágrafo do sumário - altere conforme seu template */
color:#ccc;
font-size:12px;
line-height:20px;
margin:5px 0;
padding:10px 0px 0px 10px;
width:400px;}

/* os ítens abaixo referem-se ao link leia mais - altere conforme seu template, a imagem de fundo e a imagem do botão que colocar */

.leiamais{
background: #fff;
width: 70px;
padding: 0 30px 0 40px;
font-size:14px;
line-height:30px;
margin:0 39px 0 200px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-shadow: 0px 1px 1px #555;
}

.leiamais a:link,
.leiamais a:visited,
.leiamais a:hover{
color:#000;
text-decoration:none;}

.slide img { /* imagem do slide - as medidas e posicionamento deverão ficar de acordo com a imagem de fundo */
background:#fff;
width: 280px;
height:180px;
border: 1px solid #ccc;
position:absolute;
top:10px;
left:555px;
padding:10px 10px;}

#slider-stopper { /* texto para parar e reiniciar o slide - medidas e posicionamento devem seguir a imagem de fundo */
color:#000;
font-size:14px;
font-family:Georgia, Helvetica, Sans-Serif;
padding:3px 8px;
position:absolute;
top:111px;
right:22px;
text-transform:uppercase;}


Agora abaixo de :

]]></b:skin>


 
 cole o próximo código.


<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.1&quot;);
google.load(&quot;jqueryui&quot;, &quot;1.5.3&quot;);
</script>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <!-- JavaScript Slider -->
<script type='text/javascript'>
var delayLength=6000;function doMove(panelWidth,tooFar){var leftValue=$(&quot;#mover&quot;).css(&quot;left&quot;);if(leftValue==&quot;auto&quot;){leftValue=0};var movement=parseFloat(leftValue,10)-panelWidth;if(movement==tooFar){$(&quot;.slide img&quot;).animate({&quot;top&quot;:-200},function(){$(&quot;#mover&quot;).animate({&quot;left&quot;:0},function(){$(&quot;.slide img&quot;).animate({&quot;top&quot;:50})})})}else{$(&quot;.slide img&quot;).animate({&quot;top&quot;:-200},function(){$(&quot;#mover&quot;).animate({&quot;left&quot;:movement},function(){$(&quot;.slide img&quot;).animate({&quot;top&quot;:50})})})}}$(function(){var $slide1=$(&quot;.slide&quot;);var panelWidth=$slide1.css(&quot;width&quot;);var panelPaddingLeft=$slide1.css(&quot;paddingLeft&quot;);var panelPaddingRight=$slide1.css(&quot;paddingRight&quot;);panelWidth=parseFloat(panelWidth,10);panelPaddingLeft=parseFloat(panelPaddingLeft,10);panelPaddingRight=parseFloat(panelPaddingRight,10);panelWidth=panelWidth+panelPaddingLeft+panelPaddingRight;var numPanels=$(&quot;.slide&quot;).length;var tooFar=-(panelWidth*numPanels);var totalMoverwidth=numPanels*panelWidth;$(&quot;#mover&quot;).css(&quot;width&quot;,totalMoverwidth);$(&quot;#slider&quot;).append(&#39;&lt;a href=&quot;#crosscol-wrapper&quot;id=&quot;slider-stopper&quot;&gt;Stop&lt;/a&gt;&#39;);sliderIntervalID=setInterval(function(){doMove(panelWidth,tooFar)},delayLength);$(&quot;#slider-stopper&quot;).click(function(){if($(this).text()==&quot;Stop&quot;){clearInterval(sliderIntervalID);$(this).text(&quot;Start&quot;)}else{sliderIntervalID=setInterval(function(){doMove(panelWidth,tooFar)},delayLength);$(this).text(&quot;Stop&quot;)}})});
</script>
</b:if>



Procure então por:


<div id='content-wrapper'> 

e cole acima dele o código abaixo



<div id='crosscol-wrapper'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
       <div id='slide-wrapper'><div id='slider'>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = &quot;http://4.bp.blogspot.com/_j4fpzU2AasM/StEneoD2ZoI/AAAAAAAABfI/WhN3tHhZEy0/s1600/noimage2.gif&quot;;
showRandomImg = true;
imgwidth = 200;
imgheight = 150;
summaryPost = 100;
startpost = 2;
numposts = 6;
home_page = &quot;<data:blog.homepageUrl/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}
s=s.join("");s=s.substring(0,chop-1);return s;}
function showrecentposts(json){document.write('<div id="mover">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var item='<div class="slide"><h3><a href="'+posturl+'">'+posttitle+'</a></h3><div class="summary"><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div><div class="leiamais"><a href="'+posturl+'">Leia Mais</a></div> <a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a> </div>';if(summaryPost==0){item='<div class="slide"><h3><a href="'+posturl+'">'+posttitle+'</a></h3><div class="leiamais"><a href="'+posturl+'">Leia Mais</a></div> <a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></div>';}
document.write(item);j++;}
document.write('</ul>');}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<div class='clear'/>
</div>
</div></b:if>
</div>


Abaixo, alguns fundos em cores diferentes para o 
slide. 
Clique sobre a imagem desejada e salve em seu 
computador, hospedando em seu blog a imagem e 
colocando o endereço no primeiro código na 
inscrição na cor vermelha.











Créditos:Jonh Resig











Share:

Seguir por e-mail

Seguidores

Google+ Followers

MdMensagensDiversificadas

Loading...

arquivo

Google+ Badge