SERP-saiba o que é e como manipula-la a seu favor!

0 comentários

O que é SERP? (Search engine results page)

SERP, abreviação de "Página Resultados da Pesquisa Engine", é a lista de resultados orgânicos ou não, nos motores de busca, em resultado de a uma determinada consulta. utiliza-se uma única ou várias palavras que um determinado usuário tente achar.

Os resultados que aparecem para você ver, são as SERPs.

Por que essas páginas das SERPs são importante? Se elas são importantes ou não e você for apenas um simples usuário, isto vai depender de sua opinião é óbvio.

Mas se você for, um blogueiro ou webmaster a coisa muda de figura. Pois o posicionamento do seu site nas SERPs será uma preocupação primordial na sua vida. Isto porque, se um leitor não puder achar seu site ou blog, como é que ele vai visita-lo? Como melhorar o meu SERP Ranking? Search Engine Optimization (SEO) é um fator extremamente importante para o sucesso de qualquer website ou blog. Eu não irei enumera-los agora, pois não é este o objetivo deste artigo.

Fatores como a construção de backlinks, Técnicas On-Page SEO, e muitos outros, estão no centro do contexto do tudoseo e serão facilmente encontradas.


Meu objetivo seria, discutir sobre a importância de colocar seu site ou blog no topo da SERP na palavra-chave que desejas. Pois, caso contrário, seu trabalho ficará no anonimato.

Uma pergunta que eu poderia fazer aos meus ilustres leitores, poderia ser: É possível colocar na pagina de resultados, várias urls nas primeiras posições da pesquisa por determinada palavra-chave?ou isto depende da concorrência?

Para tentar responder esta indagação, recentemente realizei um desafio pessoal, de colocar pelo menos 5 urls minhas, na mesma pagina de resultado.

E vejam o resultado abaixo através desta printscream.


SERP-saiba o que é

A palavra escolhida foi “ indexação de blog”, e possui (948.000 resultados), não é nada muito concorrida, mas da para se ter uma ideia do que se pode fazer com uma boa otimização de seus textos em conjuntos com as demais técnicas de SEO.

Mas uma nova pergunta pode surgir! Isto seria bom para seu blog ou site?ou seja, ter mais de uma url na primeira página do google?

Eu diria que depende do ponto de vista. Mas não emitirei minha opinião a respeito agora, porque gostaria da participação de meus Leitores, que sempre me brindam com seus comentários enriquecedores….
Continue Lendo==>>

Icones horizontal de compartilhamento social para blogger

0 comentários
Adicionando Icones horizontal de compartilhamento social  no blogger
icones sociais horizontais
 
Como sempre expus aqui, a importância do compartilhamento social para a divulgação e valorização de seus posts nas redes sociais, e observando que muitos dos widgets disponibilizados, contêm erros e nem sempre são funcionais, estou por hora disponibilizando este widget em forma de barra horizontal, que fica muito bonito e agrega valor ao seu blog, e ainda acrescenta um contador de comentários junto aos titulo dos seus posts.. e muito fácil de ser implantado.. Caso tenha, alguma sugestão ou dúvida, ao final me acione, que terei muito prazer em dirimi-las.
Vamos  agora adicionar Icones horizontal de compartilhamento social   com Contador de comentários logo abaixo titulo do post no Blogger. Para este simple processo, basta seguir os passos abaixo e tudo estará feito.
  • Vá para ​​Blogger> Modelo> Editar HTML
  • Clique dentro do Editor e encontre </ head> .... use ctr+f e digite  na caixa que aparece
  • Cole o seguinte código acima de </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src=&quot;//platform.twitter.com/widgets.js&quot;;d.parentNode.insertBefore(a, d)}})(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
</script>
<style type='text/css'>
/*---- barra  horizontal de icones sociais  por tudoseoblog ---- */
#SocialShareBar {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
width: 610px;
margin-bottom: 20px;
margin-left: -10px;
margin-top: 10px;
position: relative;
clear:both;
z-index: 9999;
}
.social-heading h5 {
float: left;
padding-right: 20px;
padding-top: 13px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 10px;
font-family: &#39;Lora&#39;,Arial,Helvetica,Geneva,sans-serif;
font-size: 15px;
color: #555555;
}
.twitter-tweet, .facebook-like, .google-plus, .comment-counter {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
width: auto;
height: 22px;
}
.comment-counter a {
text-decoration: none !important;
}
.share-bubble{
background: url(http://4.bp.blogspot.com/-dvG3kQrRsJc/UoKM0HSkjUI/AAAAAAAAAbw/jZnkyNLnS9I/s1600/Comments.png) no-repeat;
height: 22px;
min-width: 30px;
float: left;
margin: 4px 5px 0px 5px;
}
.google-plus {
margin-left: 20px;
}
</style>
</b:if>
  • Agora, procure a seguir o código mencionado abaixo:.
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  • Agora Cole o código a seguir, logo abaixo do trecho acima mencionado:
<!-- Barra de icones sociais horizontal por Mauricio Ferraz -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='SocialShareBar'>
<div class='social-heading'>
<h5>SOCIALIZE IT &#8594;</h5>
</div>
<div class='twitter-tweet'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='facebook-like'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='google-plus'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div class='comment-counter'>
<div class='share-bubble'/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/></a>
</div>
</div>
</b:if>
  • Agora click em  Salvar modelo.

Espero que tenham gostado  deste widget, Caso tenham alguma dúvida não hesitem  em perguntar.
Continue Lendo==>>

Como adicionar Slideshow no blog/blogger

27 comentários

Como adicionar Slideshow no blog/blogger


como adicionar slideshow no blog


Agora iremos aprender Como adicionar Slideshow no blog/blogger,para destacar sua postagens mais populares . Fica bem bonito e é muito simples de implantar e torna-lo do seu jeito.
No script abaixo, altere o tamanho das imagens de acordo com seu gosto ou nas medidas do seu template.
Mude a cor do background, da exibição, cor e formato das bordas.
Caso queira a velocidade de exibição também pode ser alterada.
Então, após esta breve explanação, vamos ao que interessa:



Códigos/Script

Para mudar as cores do background, largura, formato e cor das bosdas, procure o código:background: #000000;
(veja tabela de cores AQUI)

border: 5px inset #584536;

5px é a largura da borda


inset é o formato, pode ser double, outset, solid, dashed

width: 550px; (largura)
height: 200px; (altura)
width: 550px; (largura)
Como inserir o script e as imagens acima da área de postagem:
1. Faça o login no Blogger e no seu painel clique em ►Layout

2. Clique na aba ► Editar HTML

3. Encontre a tag </head>
4. Copie código do script e cole- ANTES da tag </ head>
Para mudar o velocidade de slideshow, altere o valor ,timeOut: 4000
quanto menor, mais lento.
Salve o modelo
Agora volte para a página Layout e clique em "Adicionar um gadget" 

Escolha um gadget HTML/JavaScript e cole dentro dele o seguinte código:







<div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <a href="LINKS PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /> <span>Texto: Título do post </span></a> </li> <li class="s3sliderImage"> <a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpa1jmhmI/AAAAAAAAERA/ylF-itO90M0/s320/Foto2.jpg" /> <span>Texto: Título do post</span></a> </li><li class="s3sliderImage"> <a href=""LINK PARA SUA IMAGEM><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpczWGpSI/AAAAAAAAERE/ekpedS9Hb_k/s320/Foto3.jpg" /> <span>Texto: Título do post</span></a> </li> <li class="s3sliderImage"> <a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://4.bp.blogspot.com/_DCJ4PAWLOdE/S9bpe77w6BI/AAAAAAAAERI/kt9YqwjxDLI/s320/Foto4.jpg" /> <span>Texto: Título do post</span></a> </li></ul></div> <div class='clear'></div>



Observe que acima, estão 4 span’s, o que significa que teremos 4 imagens no slideshow, caso queira maior numero, e preciso aumentar o numero de li class no javaScript .sempre acima/antes da tag </ul>

Edite o código colocando o link e o endereço da sua imagem ,
Salve. Clique sobre o gadget, arraste e solte acima da seção "Postagens"





Visualize e salve!!



Neste exemplo usei apenas quatro imagens com links.Mas conforme mencionei acima, você pode exibir menos ou mais links acrecentando ou retirando as seções (código abaixo).



ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag </ul>






<a href="link para sua imagem"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /> <span>Texto: Título do post </span></a> </li> Pronto! creio que ira gostar do resultado! CSS Help: Mészáros Róbert -> http://www.perspectived.com/ Version: 1.0 Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top. -------------------------------------------------------------------------- */ (function($){$.fn.s3Slider = function(vars) {var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;var current = null; var timeOutFn = null;var faderStat = true;var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) {$(items[i]).mouseover(function() {mOver = true;}); $(items[i]).mouseout(function() {mOver = false;fadeElement(true); });});var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) {timeOutFn = setTimeout(makeSlider, thisTimeOut);} else {console.log("Poof..");}} var makeSlider = function() {current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo;if(faderStat == true) {if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() {if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() {faderStat = false;current = items[currNo]; if(!mOver) {fadeElement(false);}});} else {$(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false;current = items[currNo];if(!mOver) {fadeElement(false);}});}});}} else {if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) {$(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() {faderStat = true;current = items[(currNo+1)]; if(!mOver) {fadeElement(false);}});});} else {$(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() {faderStat = true;current = items[(currNo+1)]; if(!mOver) {fadeElement(false);}})});}}}}makeSlider();}}})(jQuery);//]]></script><script type='text/javascript'>$(document).ready(function() {$(&#39;#s3slider&#39;).s3Slider({timeOut: 4000});});</script><style type='text/css'>#s3slider {background: #000000;border: 5px inset #584536; width: 550px;height: 200px;position: relative;overflow: hidden;}#s3sliderContent {width: 550px;position: absolute;top:-14px;padding: 0px;margin-left: 0;}.s3sliderImage {float: left;position: relative;display: none;}.s3sliderImage span {position: absolute;left: 0;font: 20px Trebuchet MS, sans-serif;padding: 10px 0px;width: 550px;background-color: #000;filter: alpha(opacity=80); -moz-opacity: 0.8;-khtml-opacity: 0.8;opacity: 0.8;color: #fff;display: none;bottom: 0;text-align:center;} .clear {clear: both;}</style>




Para mudar as cores do background, largura, formato e cor das bosdas, procure o código:
background: #000000; (veja tabela de cores AQUI)
border: 5px inset #584536;
5px é a largura da borda
inset é o formato, pode ser double, outset, solid, dashed

#584536 é o código da cor


Borda dotted……………………………………………………………………….
Borda dashed------------------------------------------------------
Borda solid_________________________________________



Para mudar o tamanho das imagens mude:




width: 550px; (largura)
height: 200px; (altura)
width: 550px; (largura)

Como inserir o script e as imagens acima da área de postagem:


1. Faça o login no Blogger e no seu painel clique em ►Layout



2. Clique na aba ► Editar HTML



3. Encontre a tag </head>



4. Copie código do script e cole- ANTES da tag </ head>


Para mudar o velocidade de slideshow, altere o valor ,timeOut: 4000



quanto menor, mais lento.



Salve o modelo






Agora volte para a página Layout e clique em "Adicionar um gadget"



Escolha um gadget HTML/JavaScript e cole dentro dele o seguinte código:




<div id="s3slider"><ul id="s3sliderContent"><li class="s3sliderImage"> <a href="LINKS PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /> <span>Texto: Título do post </span></a></li><li class="s3sliderImage"> <a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpa1jmhmI/AAAAAAAAERA/ylF-itO90M0/s320/Foto2.jpg" /> <span>Texto: Título do post</span></a></li><li class="s3sliderImage"> <a href=""LINK PARA SUA IMAGEM><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpczWGpSI/AAAAAAAAERE/ekpedS9Hb_k/s320/Foto3.jpg" /><span>Texto: Título do post</span></a></li><li class="s3sliderImage"> <a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://4.bp.blogspot.com/_DCJ4PAWLOdE/S9bpe77w6BI/AAAAAAAAERI/kt9YqwjxDLI/s320/Foto4.jpg" /><span>Texto: Título do post</span></a></li></ul></div><div class='clear'></div>




Observe que acima, estão 4 span’s, o que significa que teremos 4 imagens no slideshow, caso queira maior numero, e preciso aumentar o numero de li class no javaScript .sempre acima/antes da tag </ul>



Edite o código colocando o link e o endereço da sua imagem ,



Salve. Clique sobre o gadget, arraste e solte acima da seção "Postagens"



Visualize e salve!!






Neste exemplo usei apenas quatro imagens com links.Mas conforme mencionei acima, você pode exibir menos ou mais links acrecentando ou retirando as seções (código abaixo).






ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag </ul>



<li class="s3sliderImage"><a href="link para sua imagem"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /> <span>Texto: Título do post </span></a></li>



Pronto! creio que ira gostar do resultado!


Version: 1.0






Copyright: Feel free to redistribute the script/modify it, as


long as you leave my infos at the top.






-------------------------------------------------------------------------- *








(function($){ $.fn.s3Slider = function(vars) { var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) { $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); }); }); var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); } } var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1 currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } } } makeSlider(); }; })(jQuery); //]]> </script> <script type='text/javascript'> $(document).ready(function() { $(&#39;#s3slider&#39;).s3Slider({ timeOut: 4000 }); }); </script> <style type='text/css'> #s3slider { background: #000000; border: 5px inset #584536; width: 550px; height: 200px; position: relative; overflow: hidden; }#s3sliderContent { width: 550px; position: absolute; top:-14px; padding: 0px; margin-left: 0; } .s3sliderImage { float: left; position: relative; display: none; } .s3sliderImage span { position: absolute; left: 0; font: 20px Trebuchet MS, sans-serif; padding: 10px 0px; width: 550px; background-color: #000; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; color: #fff; display: none; bottom: 0; text-align:center; } .clear { clear: both; } </style>

Para mudar o tamanho das imagens mude:

width: 550px; (largura) 

height: 200px; (altura) 
width: 550px; (largura)


Como inserir o script e as imagens acima da área de postagem:


1. Faça o login no Blogger e no seu painel clique em ►Layout

2. Clique na aba ► Editar HTML

3. Encontre a tag </head>

4. Copie código do script e cole- ANTES da tag </ head>





Para mudar o velocidade de slideshow, altere o valor: ,timeOut: 4000
quanto menor, mais lento.
Salve o modelo

Agora volte para a página Layout e clique em "Adicionar um gadget"

Escolha um gadget HTML/JavaScript e cole dentro dele o seguinte código:





<div id="s3slider"><ul id="s3sliderContent"><li class="s3sliderImage"><a href="LINKS PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" /><span>Texto: Título do post </span></a></li><li class="s3sliderImage">



<a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpa1jmhmI/AAAAAAAAERA/ylF-itO90M0/s320/Foto2.jpg" />









<span>Texto: Título do post</span></a></li><li class="s3sliderImage"><a href=""LINK PARA SUA IMAGEM><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpczWGpSI/AAAAAAAAERE/ekpedS9Hb_k/s320/Foto3.jpg" /><span>Texto: Título do post</span></a></li><li class="s3sliderImage"><a href="LINK PARA SUA IMAGEM"><img style="width:550px;height:200px;" src="http://4.bp.blogspot.com/_DCJ4PAWLOdE/S9bpe77w6BI/AAAAAAAAERI/kt9YqwjxDLI/s320/Foto4.jpg" /><span>Texto: Título do post</span></a></li></ul></div><div class='clear'></div>




Observe que acima, estão 4 span’s, o que significa que teremos 4 imagens no slideshow, caso queira maior numero, e preciso aumentar o numero de li class no javaScript .sempre acima/antes da tag </ul>






Edite o código colocando o link e o endereço da sua imagem ,






Salve. Clique sobre o gadget, arraste e solte acima da seção "Postagens"






Visualize e salve!!






Neste exemplo usei apenas quatro imagens com links.Mas conforme mencionei acima, você pode exibir menos ou mais links acrecentando ou retirando as seções (código abaixo).






ATENÇÃO! Cole sempre os códigos adicionais acima/antes da tag </ul>




<li class="s3sliderImage">
<a href="link para sua imagem"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_DCJ4PAWLOdE/S9bpWEzM6nI/AAAAAAAAEQ8/VXC4YJTouPk/s320/Foto1.jpg" />
<span>Texto: Título do post </span></a>

</li>

Pronto! creio que ira gostar do resultado!
Continue Lendo==>>

Como retirar a tag shareThis #Sthash no final de suas urls copiadas

6 comentários
Retirando a tag share this


No último post eu expliquei " Como colocar ícones sociais flutuantes no blog ", mas logo descobri que quando eu copiava um texto do meu  blog , a URL continha esta Atribuição, como abaixo da imagem.
como retirar a tag shareThis#Stahash no final de suas urls copiadas
Muitos blogueiros estão enfrentando essa questão crítica,  realmente tem trazido descontentamento a muitos blogueiros.
Por que isto ocorre com a  tag # sthash  ao final de textos copiados?
Essa tag é desenvolvida principalmente para acompanhar o compartilhamento de URL em várias redes sociais, por isso cada vez que alguém copia o conteúdo do blog  ele recebe a URL t com # sthash e extensão com. Dpuf ou. DPBS no final desta url.
Após pesquisar  muito para a solução deste problema e não encontrar nenhuma solução prática, até, depois de vasculhar tudo que podia, percebi, que o problema, vinha de uma falha contida no script do ShareThis.Durante minhas pesquisas, li vários relatos, onde alguns davam de forma ineficaz, o seguinte truque:
instruíam para  que encontrar esta palavra " stLight.options "do scrípt do  widget no modelo acima </head> e substituir todo o script com o script abaixo:
<script type='text/javascript'> stLight.options ({onhover: false, doNotHash: true, DoNotCopy: true, hashAddressBar: false}); </ script>
Atenção!
Não realize o indicado acima. pois, quando isso for
feito,seu widget de compartilhamento social ShareThis
deixará de funcionar imediatamente.
Enfim,entrei em contato com o Centro de Apoio ShareThis, e o que eles me informaram?
Que isto acontece em virtude da função que permite copiar  uma parte de seu conteúdo, por este motivo, você está recebendo essas tags # sthash em seu widget.Como retirar  a tag shareThis #Sthash no final de suas urls copiadas é mais simples que possa imaginar.  Para isto, siga estes passos:
1. Vá para o Blogger> Painel> Template
2. Clique em Editar HTML.
3. Encontre este código </head> , depois encontre esta parte no script , pressionando CTRL + F "stLight.options"
4. Depois que encontrar o trecho do script acima, você verá algo como  a seguir,

 <script type="text/javascript">stLight.options({publisher: "INSERTYOURPUBKEY", doNotHash:false,
doNotCopy:false,hashAddressBar:true});</script>

5. Você verá sua  ID Publisher no ShareThis,Então faça a substituição conforme abaixo: veja que onde tem true, coloca-se "false" e onde tem false coloca "true", não esqueça de pôr sua ide, que você já possui!

<script type="text/javascript">stLight.options({publisher: "INSERTYOURPUBKEY", doNotHash:true,doNotCopy:true,hashAddressBar:false});</script>                       

Note, que as únicas modificações foram nas "" e doNotHash: false.... onde estava true, foi
substituído por false...
Agora, para quem for fazer uso deste maravilhoso widget, desmarque as opções conforme abaixo no momento de transferir o script...
painel ShareThis

6. Acho que não precisa lembrar que cada publisher tem sua id, portanto a do exemplo acima é a minha, e a sua, estará no script que esta no seu html, conforme disse no item 4 deste tutorial..
7. Salve o seu modelo, pronto,é isso! Está feito agora!
Não se esqueça de compartilhar esse post e Você também  se inscrever para para receber as  últimas Atualizações .
Cadastre-se!



Continue Lendo==>>

Caixa de pesquisa em HTML para seu blog

3 comentários

Caixa de pesquisa em HTML

Caixa de pesquisa em HTML

Recentemente em meu artigo sobre 3 caixas de pesquisas customizáveis e adaptáveis a qualquer layout, um leitor me perguntou se existia aquele formulário em html, então me dispus a colocar aqui este, para talvez atender a vontade deste leitor e de outros que possam ter a mesma curiosidade.

Acesse o painel de controle do seu blog, depois clique no menu Layout > Adicionar um Gadget > HTML/JavaScript. .

2. Copie o código que é mostrado a seguir e cole-o no campo de conteúdo do gadget.
<form name="input" action="/search" method="get">
<input type="text" name="q" style="width:260px;font-family:Arial;font-size:12px;"><input type="submit" value="Pesquisar">
</form>
Você pode ajustar a largura do campo de busca mudando o valor que foi destacado em vermelho. E pode mudar também a frase que aparece no botão alterando a parte que foi destacada em azul.
3. Depois de fazer os ajustes, basta clicar no botão Salvar. Pronto! Agora, vá no seu blog e confira se está tudo certo. Abaixo você pode conferir um exemplo de como o formulário de busca ficará:


É um formulário de busca bem simples, mas se você tiver conhecimentos em HTML/CSS você pode estiliza-lo a seu critério, assim como os formulários de busca que postei no artigo sobre caixa de pesquisa.

artigo sobre caixa de pesquisa

Continue Lendo==>>

Porque Web Design Responsivo é a melhor opção para sua estratégia de SEO móvel

0 comentários

Porque Web Design Responsivo é a melhor opção para sua estratégia de SEO móvel

 

web-design responsivos e seo










O uso crescente de dispositivos móveis como smartphones e tablets, demanda na importância de sites móveis Amigáveis a estas plataformas.

Se SEO é um componente central de sua estratégia de marketing digital, ter um site móvel-amigável vem se   tornando vital.

Usuários de dispositivos  móveis já ultrapassaram aos de desktops, e  o acesso à Internet móvel tem a previsão de suplantar ao uso da Internet de mesa neste ano . E isto mostra claramente que as buscas nestes dispositivos móveis  ultrapassarão as busca em desktop muito breve também.

Cerca 72 por cento destes usuários afirmam que estarão mais inclinados a adquirirem produtos e serviços de um site móvel amigável, torna-se de suma importância a adoção por parte das empresas, de sites com esta função, e um  web design responsivo especificamente.

A discussão entre a possibilidade de escolher um site ágil ou um site móvel separado é um tema muito debatido. No entanto, a verdade é que ambas as opções têm seus prós e contras.

A melhor escolha para o seu negócio deriva de muitos fatores, como o objetivo do site, o público-alvo pretendido, e se a otimização em seo é um fator agregado.

Se a otimização em SEO é um fator agregado, aqui estão três motivos imponderáveis, pelos quais consideramos o web design responsivo  a melhor opção para a sua estratégia de SEO móvel.

1. Sugerido pelo Google:

Com cerca de 67 por cento do mercado de busca, quando o Google faz este alerta,  devemos ouvi-lo e seguir esta tendência.  O Google afirma que web design responsivo é sua configuração móvel sugerida como extremamente importante, e vai ainda mais longe ao referir-se a web design responsivo como a melhor prática para se obter um bom retorno nas buscas .

Isto é porque os sites de design responsivo tem  URL e o mesmo HTML, independentemente do dispositivo, o que torna mais fácil e mais eficiente para o Google para rastrear, indexar e organizar o conteúdo. Compare isso com um site móvel separado, que tem uma URL diferente e HTML diferente para plataforma em  desktops, exigindo  que o Google  rastreie e indexe várias versões do mesmo  website ou blog.

Além disso, o Google prefere web design responsivo,pois  o conteúdo alojado em um site e um URL é muito mais fácil para os usuários  compartilharem, interagirem, e linkarem  que o conteúdo  de um site móvel separado.

Consideremos  por exemplo um usuário móvel  dividindo o conteúdo de um site móvel com um outro amigo no Facebook , e que em sequência, acessa esse mesmo conteúdo em  um desktop, o  resultado,  é que o usuário visualiza um site móvel agradável em seu desktop. Isso gera  uma experiência abaixo da desejada, e por conta  da grande importância disto, o  Google está agora colocando a experiência do usuário como um fator de ranking, Portanto tenha isto na conta do chá, na hora de projetar o sua estratégia de SEO.
2. Um site para muitas plataformas:

Um dos aspectos mais gratificantes para o usuário de um site moderno com web design responsivo, é que  pode lhe proporcionar uma enorme experiência no uso de muitos dispositivos e resoluções de tela. Isto é um detalhe que extrapola em sua importância , já que é impossível prever todos os dispositivos e resoluções de telas que  usarão para acessar seu site. Um site bem montado e funcional, independentemente dessas variáveis ​​irá proporcionar uma experiência proveitosa ao seu usuário, melhor e mais consistente que um site móvel exclusivo para este dispositivo, que é estruturado para um tipo de dispositivo e tamanho de telas específicos.

Imaginemos o seguinte: Uma pessoa procura por algo em seu smartphone no horário de seu almoço no trabalho.  Ela encontra um site que tem o  que está buscando, e decidir continuar a pesquisa deste produto no mesmo site, quando chega em casa. provavelmente irá  usar a sua área de trabalho em seu desktop, em vez de seu smartphone.

Então, neste exemplo, se o site é responsivo, essa pessoa terá uma experiência  positiva  na transição de móvel para área de trabalho, pois ela verá  a mesma interface gráfica  do site em seu ambiente de trabalho, como obteve através de seu smartphone. Mas em vez disto, se o site é um site móvel dedicado, essa pessoa vai ficar decepcionada com o fato de que ela terá dificuldade para localizar o produto que busca mais uma vez,na versão desktop do site.

3. Simplicidade para organizar e administrar:

Implantar um web-designer  em exclusividade para  site móvel, exige também  campanhas de SEO separadas. Torna-se bem mais simples e eficiente, gerenciar uma campanha única. Esta é uma das principais vantagens que um site ágil terá em relação à um site móvel separado.

Isto posto, há vantagens em ter uma estratégia especifica de SEO móvel, como a otimização de palavras-chave que são mais utilizadas  por alguém que está em seu smartphone.

Supomos que alguém realize uma busca móvel para um restaurante local. Ela estará mais inclinada a utilizar a palavra "próximo" em sua  pesquisa. No entanto, um site móvel separado não é um requisito para uma estratégia de SEO móvel, e não há nenhum fundamento para que as palavras-chave móveis específicos não possam ser incorporadas também em um site de designer responsivo.

Concluímos que:

Web design responsivo é sugerido pelo Google, que viabiliza  um site a fornecer uma ótima experiência ao seu usuário em vários dispositivos e tamanhos de tela, e isso também faz com que o gerenciamento de sua estratégia de SEO se torne mais fácil. Por este motivo, web design responsivo é a melhor opção para a sua estratégia de SEO móvel.


Continue Lendo==>>
setaretornoaotopo