Pesquisar

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

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:

"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:

Blogs com caixa de rolagem

Aqui neste espaço... 
Apenas divulgo e indico... 
Posts, notícias, dicas etc. 
 com devidas fontes  e créditos:    


Blogues com caixa de rolagem

Às vezes queremos adicionar muitos blogs na lista de atualizações que mostramos (lista de blogs) e anossa página comessa a ficar cheia, uma boa solução para esse problema é colocar uma barra de rolagem com a lista dos blogs. Para fazer isso é bem simples:
Entra na pagina editar HTML e clica para expandir os modelos de widgets, então procura pelo inicio de tualista de blogs, um jeito fácil de a encontrar é procurar pelo titulo que usas na tua lista.


<b:widget id='BlogList1' locked='false' title='Meus outros Blogs' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>


<div style="height: 200px;overflow: auto; border:1px solid #000000">
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>


Repara na linha em negrito e vermelho, no teu blog essa linha não existe, pois foi justamente isso que modifiquei para colocar a barra de rolagem, o valor 200 que está na mesma linha é o tamanho da barra, então podes mudar para o numero que achares melhor.

Onde diz :1px solid #000000 é a borda,
se não gostas assim é só apagar esse bocado do código, mas cuidado para não apagares as aspas, nem outros sinais.
Agora vamos fechar essa div(estilo) que usamos aqui. Um pouco mais para baixo no código, encontrarás isto:

<a href='javascript:void(0)'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div></div>
</b:includable>
</b:widget>

Cuidado para não te confundires e achares que já tens uma div fechada, essa que já estava no blog pertencia ao código original, então precisamos adicionar mais uma(essa que está em negrito e vermelho, não estava no modelo original do blog). Feito isso é só clicar para visualizar e depois salvar se estiver tudo correto. Essa é uma boa maneira de poupar espaço e ainda dá um novo visual com a barra de rolagem na lista de blogs.

fonte:
laranabackground

Share:

Saiba Como é feito:..."Menu horizontal com buscador e setas para deslizar o blog"

esta postagem, foi pesquisada em:
templateseacessorios.

... há tempos queria aprendê-la , e, aqui está:

"Menu horizontal com buscador e setas para deslizar o blog"





Menu com efeito hover nos botões, seta para subir e descer o blog e buscador. 


"Antes de iniciar as modificações no html de seu blog,
não se esqueça de ":
..."antes  começar salvar uma cópia de seu template,
 caso não dê certo, 
é só reinstalá-lo. 
Instale esse menu no template Simples.
Para instalá-lo vá até o HTML de seu blog e procure por:


]]></b:skin>


... ▲ ... encontrando o código , 
acima dele ( ]]></b:skin>) 
cole 
o código abaixo,   
...▼...




/*Menu horizontal-----------------------------------*/
#nav{height:42px;border-bottom:1px solid #ddd;position:fixed;top:0px;left:0px;right:0px;background:#fff url(http://1.bp.blogspot.com/_BaCxSD9NFn8/TGIsV_8BGlI/AAAAAAAAB9k/GRL5MvDGjeY/s1600/nav.png) repeat-x center left;border-bottom: 1px dashed #cc0000;}
#nav ul{height:25px;list-style:none;margin:6px auto 0px auto;width:980px;}
#nav ul li{display:inline;float:left;margin:0 2px;}
#nav a{font-size:11px;font-weight:bold;float:left;padding: 3px 6px;color:#999;text-decoration: none;border:1px solid #ccc;cursor: pointer;background:transparent;height:18px;line-height:18px;}
#nav a:hover{background:#D9D9DA none;color: #fff;}
#nav a.top span, #nav a.footer span{float:left;width:16px;height:16px;}
#nav a.top span{background:transparent url(http://4.bp.blogspot.com/_BaCxSD9NFn8/TGIrY6X8fxI/AAAAAAAAB9c/k3x_mq8A79I/s1600/001_24.png) no-repeat center center;}
#nav a.footer span{background:transparent url(http://2.bp.blogspot.com/_BaCxSD9NFn8/TGIrXfqMxLI/AAAAAAAAB9U/lAGmfD1AWW4/s1600/001_22.png) no-repeat center center;}
#back {font-size:11px;font-weight:bold;background:#fff;border: 1px solid #ddd;float:left;color:#999;
height:14px;margin-right:8px;width:218px;padding:5px}
#proc {margin-top:3px;float:left;width:23px;height:19px}


Agora, procure por:

<div id='header-wrapper'>

ou

<header>



Encontando-o cole ,  acima delefazendo as modificações necessárias,
o próximo código :

<div id='nav'>
 <ul>
  <li><a class='top' href='#header'><span/></a></li>
  <li><a class='footer' href='#footer'><span/></a></li>
  <li><a href='#'>Home</a></li>
  <li><a href='ENDEREÇO DO FACEBOOK'>Facebook</a></li>
  <li><a href='ENDEREÇO DO TWITTER'>Twitter</a></li>
  <li><a href='ENDEREÇO DO g+'>g+</a></li>
  <li><a href='ENDEREÇO DO PINTEREST'>Feed</a></li>
  <li class='search'>
   <span>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='back' maxlength='255' name='back' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' title='search' type='text' value='Procurar...'/>
<input alt='' id='proc' name='proc' src='http://3.bp.blogspot.com/_FXIne2ZDJII/TO75Wg730FI/AAAAAAAAEDw/N9DXDDBylwY/s1600/zoom.png' type='image'/>
</form></span></li></ul></div>

fonte/créditos:                                                      





Share:

Seguir por e-mail

Seguidores

Google+ Followers

arquivo

Google+ Badge

"Alô Negócios !!!…buscas populares"

Alô Negócios !!!…buscas populares