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

quinta-feira, 24 de novembro de 2011

Código para Posts Relacionados

Super dica que vi no Blog do meu amigo Paulo Estevão, do Códigos Blog.
Pedi sua autorização para publicar e ele, prontamente, concordou.
É um tutorial para inserir os Posts Relacionados no Blogger.
Colocando este código no layout do nosso blog, ao final de cada post, aparecerão links de posts com assuntos semelhantes, baseados nos "marcadores",o que facilitará a navegação dos nossos leitores.
Exemplo:


Vamos lá?
1º - Faça login no blogger , clique em "Layout" -> "Modelo" -> "Editar HTMl".
Antes de tudo clique em "Baixar modelo completo", para caso tenha algum erro você tem o layout salvo.
2º - Procure (Ctrl + F) a tag </head>. Cole o seguinte código logo antes dela:
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] +
'</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

3º - Salve
4º - Clique em “Expandir modelos de widgets”
5º - Procure o seguinte código:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
6º - Cole este código antes do </b:loop> :
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"'
type='text/javascript'/>
</b:if>
7º - Salve o template!

8º - Procure esse código:
<p class='post-footer-line post-footer-line-3'/>
9º - Adicione este código logo depois:

<b:if cond='data:blog.pageType == &quot;item&quot;'> Posts Relacionados</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>

quarta-feira, 23 de novembro de 2011

Personalizando Templates dinâmicos do Blogger

Depois do Blogger lançar novos templates com layout dinâmico, agora é possível personalizar os novos templates dinâmicos do blogger fazendo alterações de cores de fundo, tipos de fontes, trocar imagens de fundo e muito mais. Isso certamente deixará o seu blog muito mais bonito. Já mostramos neste outro tutorial sobre Novos Templates para Blogger.
Se você já usa um template dinâmico no seu blog e quiser testar novas cores para personalizar seu blog entre painel do blogger, depois na pagina modelo e clique em personalizar, então é só fazer testes e escolher a melhor aparência para seu blog.


Trocar a imagem de fundo do blog


Apenas clique no menu plano de fundo, depois em Imagem de plano de fundo
e aparece uma janela onde você poderá escolher diversas imagens ou texturas de fundo para seu blog e se quiser poderá enviar uma imagem clicando no primeiro item do menu (fazer upload da imagem).



Mudar a cor, tamanho e tipo das fontes (letras) do blog











Clique no menu avançado e use a barra de rolagem para achar o que deseja modificar, por exemplo, titulo da postagem, header, titulo do blog e muitas outras opções. Você só precisa selecionar e depois fazer a formatação do texto nas ferramentas ao lado. Note na imagem que alteramos as letras do titulo da postagem.

Veja Também :
Por:




Colocando bordas nas imagens do Blog

Alguma pessoas tem uma pequena dúvida a respeito de HTML. É possível colocar uma borda em todas as imagens das postagens de uma só vez ? sim ,e ainda temos a possibilidade de dar uma personalizada ou um efeito diferente nesta borda quando o mouse está sobre a imagem. Isso é uma alteração bem fácil e modifica um pouco o template, podendo deixar o blog mais bonito. Veja como ficou nosso banner com bordas(ao lado).Para colocar uma borda em todas as imagens das postagens entre na pagina editar html e coloque no junto dos outros estilos css esse código:







.post img{border: 1px solid #000000;padding: 5px;}
.post a:hover img{border: 1px solid #6699FF;}

Se tiver dúvidas sobre onde colocar procure por body{.... e coloque na linha acima dele, assim fica fácil achar para futuras alterações, o código acima é só uma das possibilidades de bordas você pode ver aqui informações mais detalhadas sobre como modificar o estilo das bordas.

Entendendo o código
A parte padding:5px faz com a borda inserida não fique junta da imagem, ou seja , 
o padding é nada mais nada menos que o espaçamento entre a borda e a imagem .Você pode retirar essa parte do código ou aumentar a distancia para deixar as imagens do seu blog com uma melhor aparência. Queremos lembrar as bordas somente mudam de aparência quando estão linkadas , se a imagem tiver um link nelas, senão mesmo com o mouse sobre elas continuaram com a mesma borda.

Veja Também : 
 Por :
Para seu Blogger !

terça-feira, 22 de novembro de 2011

Como colocar Leia mais no blog !


Como colocar Leia mais no blog !
Leia mais , um recurso muito bom e interativo que podemos usar tanto em blogs como em sites . O Leia mais é nada mais nada menos que , uma imagem ou link direcionando para a página de postagem de tal . Muito eficiente porque obriga o leito a navegar pelas páginas do seu blog , e com isso você ganha mais visualizações no seu website/blog . Ele reduz a postagem na página inicial doblog, para que o leitor tenha que clicar no leia mais ou em uma imagem afim de ser redirecionado para página de tal postagem . Enfim , eu acho que você ja entendeu o para e o porque de usarmos o Leia mais , então vamos aplica-lo .

Primeiramente ,Entre na aba Design >>Editar HTML
Já no campo de edição , você pra precionar a tecla CTRL+F e vai procurar
Pela seguinte tag :  </head>
Achando a tag , você vai colar o próximo código acima dela

<script src='http://capas-coyoteevolution.webs.com/leiamaiscoyote.js' type='text/javascript'/>

Após isso , você vai salvar o modelo , e clicar em  Expandir modelo de widgets , e vai repetir o mesmo procedimento de antes .
Você vai aperta a tecla CRTL+F sendo que dessa vez vai procurar pela tag:
<data:post.body/>

Achando a tag , você ira subtituir pelo seguinte código

<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:center'><a expr:href='data:post.url'><center><img src='https://lh3.googleusercontent.com/-bjV5cIz8tNg/TbRHTVQJf_I/AAAAAAAABhI/dlXYr9_KyU4/s288/Untitled-1.png'/></center></a>
</span></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

Após isso , salve o modelo e aproveite o seu novo widget ,
Não esqueça de nos contar como foi sua experiência nos cometários abaixo ! .

Como Inserir Mapa do site no seu blog


Umas das coisas mais importante e eficiente que seu blog deve ter , é Concerteza um mapa do site .O mapa do site serve mais ou menos como um marcador , porem com uma forma bem avantajada .Com ele os visitantes do seu blog irão ter mais  acessibilidade a certas postagens de interece . Por isso  hoje escolhi mostar a vocês o método mais fácil e prático de se fazer isso .
Primeiramente ,Já no seu blog , você ira precisar fazer uma nova página nele .
Como fazer isso ?

vá na aba Postagens >> Editar Páginas >> Nova Página .
Já com o editor do blog aberto, você irá dar o nome da página de :
Mapa do Site , em sequida , no campo de digitação , você vai clicar em HTML















E cole o seguinte cógido :

<script style="text/javascript" src="http://100rede.com/mapablogger.js"></script>
<script src="http://URL_DO_SEU_SITE/feeds/posts/default?max-results=1000&alt=json-in-script&callback=loadtoc"></script>




Logo apos ter feito todo o processo acima, você deve continuar no modo HTML do campo de postagens , caso volte para o modo ESCREVER o código ira desenvolver um erro, após colar o código salve a página imediatamente .
E não deixe de contar como foi a sua experiência nos comentários abaixo ! .

Colocando páginas numeras no seu blog/website


Colocando páginas numeras no seu blog ou website !
Hoje vou estar ensinando um recurso que o HTML disponibilizarpara nós , que é muito eficiente para você que é tanto novo quanto velho no blogger.Vou estar ensinando a como colocar páginas numeradas no seu blog ou site via HTML .


Primeiramente ... no seu blog vá na aba Design >> Editar HTML >> e precione as teclas CTRL + F

 













a procure pela tag  : ]]></b:skin>


 













 quando acha-lá , colé o seguinte cógido acima da tag encontrada :


 












  .paginator {
                margin-top:60px;
                font-size:1em;
}
.paginator table {
                border-collapse:collapse;
                table-layout:fixed;
                width:100%;
}
.paginator table td {
                padding:0;
                white-space:nowrap;
                text-align:center;
}
.paginator span {
                display:block;
                padding:3px 0;
                color:#fff;
}
.paginator span strong,
.paginator span a {
                padding:2px 6px;
}
.paginator span strong {
                background:#ff6c24;
                font-style:normal;
                font-weight:normal;
}
.paginator .scroll_bar {
                width:100%;         height:20px;
                position:relative;
                margin-top:10px;
}
.paginator .scroll_trough {
                width:100%;         height:3px;
                background:#ccc;
                overflow:hidden;
}
.paginator .scroll_thumb {
                position:absolute;
                z-index:2;
                width:0; height:3px;
                top:0; left:0;
                font-size:1px;
                background:#363636;
}
.paginator .scroll_knob {
                position:absolute;
                top:-5px; left:50%;
                margin-left:-10px;
                width:20px; height:20px;
                overflow:hidden;
                background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_WfZ2jrgIG8E0hvztrGlJ-LlVbuRGxnFAAdK03pBW-hiL0twR8eoeZdhCDfrfZ8RskpxtXCYpdhJtpwKYvAsQebJ6tlbp-4V6uKbrg8bVd0xWOEZPe5uQXVSw3Ua5q0_BsR88C6NAmwo/s1600/slider_knob.gif) no-repeat 50% 50%;
                cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
                position:absolute;
                z-index:1;
                top:0; left:0;
                width:0; height:3px;
                overflow:hidden;
                background:#ff6c24;
}

.fullsize .scroll_thumb {
                display:none;
}

.paginator_pages {
                width:600px;
                text-align:right;
                font-size:0.8em;
                color:#808080;
                margin-top:-10px;
}


Ainda não salve o modelo; depois disso você vai procurar pela tag :
</body>


 












e vai repetir o mesmo processo de antes , você vai colar o sequinte código acima da tag :


 













<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>


Agora sim você vai salvar o modelo , e clicar em >> Expandir modelos de widgets
precionando as teclas CTRL+F procure pela tag : data:label.url
achando a tag , você vai trocar por esse código:
data:label.url + &quot;?&amp;max-results=7&quot;

Pronto , agora salve seu modelo e use o recurso a vontade !







segunda-feira, 21 de novembro de 2011

Como colocar comentários do facebook no blog

Integrar seu blog com redes sociais é um jeito de conseguir mais visitas, então vamos mostrar como colocar os comentários do facebook no seu blogspot e assim dar mais uma opção de comentários e chances de divulgação de seus posts no facebook. Já falamos de alternativas para colocar comentários no blogger:


Primeiro crie um Aplicativo do Facebook para o Blogger
Para instalar os comentários do facebook no blog o primeiro passo é criar uma APP (aplicativo do facebook). Acesse a página http://developers.facebook.com/setup, coloque o nome e endereço do seu blog, selecione o local e clique no botão create App .

Então você verá uma janela com informações do aplicativo que acabou de criar. Agora copie o numero que está em App ID/API Key, cole esse numero no bloco de notas, pois vamos utilizá-lo em varias partes do código.

Colocar os Códigos do Facebook no Blog
Entre na pagina do Blogger >> Modelo, antes de fazer qualquer alteração sugerimos salvar uma cópia do seu template, assim se tiver algum problema poderá facilmente voltar ao seu layout atual sem dificuldades.
Clique em editar HTML, marque a opção: Expandir modelos de widgets.
Logo no inicio do código tem algo mais ou menos assim:

<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'.....

Coloque o código xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema' : na linha < html, fica deste jeito(não é para apagar nada, só adicionar o trecho):
<html xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema' b:version='2' class='v2' expr:dir='data:blog.languageDirection'.....

E um pouco mais abaixo você encontrará  <head>, após essa linha coloque:
<meta property="fb:app_id" content="APP ID" />

Mas no lugar de APP ID use o numero do aplicativo que copiamos no site do Facebook.

Agora procure por <div class='post-footer-line post-footer-line-1'/>: e coloque esse código logo depois:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;APPID&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/pt_BR/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>

Aqui também troque o APP ID pelo numero do aplicativo.

Clique para salvar e veja o seu blog, mas os comentários só aparecem na paginas das postagens e não na pagina inicial. Outra coisa que notará é que os comentários padrão do blogger continuam aparecendo, então vão até a pagina Configurações >> Postagens e comentários e use a opção não exibir comentários. E pronto.

Moderar os comentários do Facebook no seu Blog
Esse é o link para a pagina de moderação dos seus comentários no Facebook: http://developers.facebook.com/tools/comments, clique no link configurações e faça suas escolhas. A opção Let me approve each comment before it appears ativa a moderação, ou seja, você precisa aprovar os comentários antes deles aparecerem no seu blog.




Esperamos que gostem de mais essa opção de comentários para seu blogger e deixem a opinião de você sobre qual o melhor sistema de comentários para usar no blog: facebook, disqus, intensedebate, os comentários padrão do blogger ou algum outro tipo.

 

Como exibir caixa de links do Post para compartilhar seu Blog

A todo instante queremos divulgar nossos links e queremos que outras pessoas façam o mesmo. Podemos facilitar a vida de nossos visitantes ao oferecer uma caixa de links, onde basta copiar e colar para ser divulgado. Nesse modelo de gadget para Blogger vou ensinar como gerar automaticamente caixa de link completo, para texto âncora e para fóruns. Assim, quem quiser divulgar o conteúdo do seu blog, só precisará copiar o link e colar onde form melhor.

Já ensinei algo semelhante, disponibilizando uma caixa de link encurtado automaticamente. Quando o visitante gosta do conteúdo, pode copiar o link encurtado e colar no Twitter, por exemplo, sem precisar ir até os sites encurtadores.

Mas o que vou ensinar agora pode ser um ótimo complemento e você até pode juntar os dois recursos no rodapé dos posts do seu blog. Ficará algo semelhante à imagem abaixo ou você pode clicar aqui para ver o gadget funcionando no meu blog de testes.

O modelo que vou ensinar funciona apenas no Blogger e é algo bem simples de aplicar, funcionando automaticamente até nos modelos novos de templates.
Vá ao menu e clique em “Modelo”. Abaixo da imagem do template do seu blog, clique no botão “Editar HTM” para ver o código fonte do seu blog. Na janela que abrir, marque “Expandir modelos de widgets”, como na imagem abaixo e procure pela seguinte linha no código:
<data:post.body/>

Como destacado na imagem também:

Imediatamente ABAIXO disso, cole o seguinte trecho modificando apenas o que está indicado:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='compartir-post'>
<p>Gostou do conteúdo? Então use os links abaixo para divulgar:</p>
<p>&lt;label for=&quot;aa-url&quot;&gt;Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;</p><p>&lt;label for=&quot;aa-forum&quot;&gt;Âncora de texto:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;</p><p>
&lt;label for=&quot;aa-forum&quot;&gt;Âncora para Fóruns:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]<data:post.title/>[/url]&quot; /&gt;</p>
</div>
</b:if>


 Os textos destacados em vermelho servem para você descrever como achar melhor os tipos de links.
Salve o modelo clicando no botão laranja “Salvar Modelo” para ver o resultado em seu blog.
A cor do texto e o tamanho das caixas se ajustam segundo o estilo do seu blog, sem precisar de códigos CSS ou configurações específicas, ficando mais compatível com o seu layout e mais natural.

segunda-feira, 8 de agosto de 2011

Download – Ferramentas para Técnicos de Informática











Primeiro kit – Kit de Ferramentas p/ técnicos 4.0 O Kit de Ferramentas para técnicos disponibiliza em versão portable alguns dos principais softwares usados por que faz manutenção de computadores.O objetivo é oferecer portabilidade a quem presta este serviço, podendo fazer uma manutenção preventiva em computadores somente levando consigo um pendrive que contenha este kit.
Segundo kit - Kit de Ferramentas 5.0 Lite .O Kit de Ferramentas é um iniciativa disponibiliza em versão portable alguns dos principais softwares usados por técnicos que fazem manutenção de computadores. Porém na versão 5.0 Lite o kit foi cuidadosamente selecionado para que usuários domésticos pudessem usufruir desta ferramanta, ao contrário da antiga versão 4.0. Esta versão traz somente softwares básicos para fazer uma boa limpeza e otimização de seu computador ou notebook, identificar os componentes de hardware, monitorar as temperaturas do PC ou até mesmo desinstalar programas que teimam em não sair do computador por bem.Como todos os programas são portáteis, você pode usar o kit em qualquer computador com sistema operacional Windows, sem a necessidade de ficarinstalando um monte de software. O kit vem com um menu de fácil acesso que permite abrir qualquer software do mesmo com apenas um clique.

Informações:
Fabricante:RBTtech 
Versão do Aplicativo: 4.0 e 5.0
Plataforma: PC
Estilo: variado
Lançamento: 2011
Ídiomas: Português
Formato: ISO
Tamanho: 278 MB
Serial: Todos Programas Já ativados

Download :
Megaupload



 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Eagle Belt Buckles