► Mensagens Diversificadas |MD|: blogspot

Pesquisar

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

. "como adicionar infinito efeito"... /..."pós rolagem para blogger"



"como adicionar infinito efeito"... /..."pós rolagem para blogger"


" Infinite Post Scrolling Effect"
???

Este tutorial/dica, é:



...sobre :
"como adicionar...
" infinito efeito" 

"pós rolagem para blogger"

...caso você
não entenda o que é
"infinito efeito
pós desdobramento",


...vá para a página :  Facebook
e role a página...
    e
      veja
         ...como, exemplo de 
      "infinit scroll":        
      poderá   observar, 
      que a página
      rolará infinitamente  ...





lá no facebook,  você verá "auto carregamento "(rolagem
...entradas mais antigas ...:

►  o efeito é chamado de: "rolagem infinita."

..."é um trabalho baseado em "jQuery" 
...


Bem,
...depois de adicionar esse "script", de "infinit scroll"
para o seu blog,
...você notará ao rolar a página de

..."post antigo"  

...serão  "mostrados automaticamente"
     os outros posts 
     conforme este exemplo ... 
acessando  aqui e verá  + demonstração do efeito em epígrafe...

...isto   significa que você não precisa clicar em postagens antigas...



"O principal benefício "

...usando essa  versão ,

verá que 

você vai poder carregar a
"rolagem infinita "
em                         

cada página,         
página de arquivo 
e                            
página de busca,  
enquanto que o "script "
não irá carregar  
em sua página item 

páginas estáticas
ou seja, 

posts e páginas. 

Significando, por conclusão,  que seu blog será  
mais ágil e rápido.

Programa demonstrativo ►clica aqui◄
 

Agora,
vejamos 
"Como adicionar "Infinito Mensagem Scrolling" Efeito Para Blogger



Nota:
Este "script" só funciona em "modelos padrão do Blogger"
ou naqueles que
não são "modelo" , 
porém,
   "altamente personalizado".



 - Primeiro Passo:


Logado em seu painel do blogger ->

Ir para:


-> 1  - Modelo
-> 2 - Editar HTML
 

 vide exemplo na imagem a seguir:



Clique em  em  
"Editar HTML " (caixa de seleção)



. Agora, 

procure por </head> ,
no código html de seu template.

Assim:

...dê um clique com o botão direito do mouse ,
na tela do código de html de seu template, e verá aparecer um espaço em branco, na lateral direita/superior, e escreva  ali:
</head>,
...em seguida dê um "ENTER", via teclado,
e encontrará a palavra buscada no html de seu template, no caso 
aqui,
a palavra é </head>

 ...

Encontrando: </head>  (palavra/código), buscada...

Copie e cole,
logo acima  de </head>,
o código a seguir:


<b:if cond='data:blog.pageType == "index"'> <script src='https://sites.google.com/site/scriptsedilenebds/scripts/jquery.min...jQuery%20v1.9.1.js'></script> <script src='https://sites.google.com/site/scriptsedilenebds/scripts/jquery.ias.minInfinito%20Scroll%20Ajax%2C%20um%20plugin%20jQuery.js' type='text/javascript'></script> <script type='text/javascript'> jQuery.ias({ container : '.blog-posts', item: '.post-outer', pagination: '#blog-pager', next: '#blog-pager-older-link a', loader: 'http://1.bp.blogspot.com/-kdPMrXPLEzk/UaB_PY7LxvI/AAAAAAAASE4/vxjD_2pkTtI/s1600/loading.gif'});</script></b:if>


Salve!
Pronto !


Atenção:
Remover  no código
acima ,
a linha ,
caso o seu  blog 
já tenha 
 o plugin 
 "jQuery"

obs.:
..."originalmente ,

esse script  foi criado 

por Simplex design.
Bom, 
espero ter ajudado!!!
Qualquer dúvida entre em contato!
:)
ou 
escreva  nos  comentários
ou 
via

Share:

... mole, mole, fácil, fácil...De maneira "fácil" de executar! ...Tutorial para instalar o "Hack"..." Leia Mais"

... mole, mole, fácil, fácil...De maneira "fácil" de executar! ...Tutorial para instalar o "Hack"..." Leia Mais"



 

No NOVO BLOGGER:
  

Atenção,
antes de começar  o tutorial,
salve uma cópia de seu template,
caso não dê certo, 
é só reinstalá-lo."




O "LEIA MAIS" 

...

...será
assim, colocado :

 



Este " hack" coloca resumo das postagens em seu blog automaticamente e reduz as imagens dos posts.

Mas atenção, ele invalida o "  Leia mais"   (jump break) nativo do Blogger.


.Primeiro Passo:

. Logado no painel blogger;
. Vá até o html de seu template blogger
e encontre o 
seguinte código:


 <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>

    <b:if cond='data:post.hasJumpLink'>

      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>


Ao encontrá-lo,

 substitua pelo código seguinte:

   ▼

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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 id='showlink'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Visualize! 
Estando tudo certo! 
Salve!



.2º- Passo:

 


.Procure por: ]]></b:skin>


 

 Encontrando-a,
 cole abaixo de ]]></b:skin>
o código a seguir:

<!-- JavaScript Posts Resumidos-->
<!--/*****************************************************
Auto-readmore link script, version 4.1 (for blogspot)
(C)2009 by Anhvo
Please dont remove this copyright or change it into your own
******************************************************/-->
<style type="text/css">
.thumbnailimg IMG {
   max-width:150px;
   width: expression(this.width > 150 ? 150: true);
   max-height:120px;
   height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
 float:left;
 padding:10px 10px 0px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>

<script  type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}

function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
  
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
  
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
 var post2 = new Array();
 for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
 }

  var s = "";
 var indentBlank = "";
 for(var i=0;i<indent;i++){
  indentBlank += " ";
 }
 if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
 } else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
 } 
 return s;
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var content = div.innerHTML;
 if (/<!--\s*more\s*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
 }
 else {

 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) {
  if(thumbnail_mode == "float") {
   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
   summ = summary_img;
  } else {
   imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
 }

 var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';

 div.innerHTML = summary;
 div.style.display = "block";
 }
}
//]]>
</script><!-- Fim JavaScript Posts Resumidos-->


 


Visualize! 
Estando tudo certo! 
Salve!




Nota:

Aonde está na cor verde, no código acima,
poderá ser  alterado 
para personalizar 
os posts resumidos de seu blog.

...




<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>

...



Em CSS:

 
.thumbnailimg IMG {
max-width:150px; →Valor máx. da largura da miniatura da imagem do seu post
width: expression(this.width > 150 ? 150: true);
max-height:120px; →Valor máx. da altura da miniatura da imagem do seu post
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left; → Lado que a miniatura ficará flutuada no resumo do post
padding:0px 10px 5px 0px; → Margem interna da imagem
}







Para você , optando em configurar, de sua maneira, a parte do  "Script":

var thumbnail_mode = "no-float"; 

Para que a miniatura fique sempre à esquerda selecione "float"
Determina a flutuabilidade variável à esquerda da imagem.

var classicMode = false ;  


false 
para modo clássico desligado. 

Recomenda-se deixar em "true "  
se a var thumbnail_mode for definida para "float".
 


---
 

var summary_noimg = 50; 
Vem  a ser a diminuição dos caracteres, no  resumo das postagens, se deixar "ZERO", aparcerá apenas a imagem, sem caracteres (escritos)

var summary_img = 40; 

Vem  a ser a diminuição dos caracteres, no  resumo das postagens, quando seu post tem imagem. Nesse casso , o que foi escrito acima, tem de ser maior que "Zero"
 

Em tempo:

O valor atribuído = 50  representa ser  "50 (cinquenta) palavras";

e, já o valor atribuído = 50  representa ser  "50 (cinquenta) palavras"; para o classicMode definido como "true".

|||


Nota:

Caso,  você queira colocar, uma imagem, no lugar de Leia Mais


Procure por, no html de seu template blogger

<a expr:href='data:post.url'>Leia Mais</a>

Encontrando:

substitua 
Leia Mais 
pelo código:  

<img src='URL da Imagem' />

Dessa forma, você irá incluir uma imagem ao invés das palavras.


Share:

"Novos tamanhos de anúncios para o Google AdSense"

"Novos tamanhos de anúncios para o Google AdSense"
"Nós ouvimos de ambos os editores e anunciantes que novos formatos de anúncios maiores fornecem uma grande tela para os criativos ricos e um bom desempenho em muitos sites.  "
..." temos o prazer de compartilhar dois novos tamanhos de anúncios  
- 970 x 250 da Billboard 
300 x 1050 Retrato  
- que ajudarão você a atingir mais anunciantes ao mesmo tempo, melhorar a experiência do usuário e engajamento em seu site."
300x1050_256.png

"Tal como acontece com a maioria dos nossos tamanhos de anúncios, esses dois blocos de anúncios podem acomodar anúncios de texto padrão, além de anúncios gráficos."
 "Além disso, eles podem mostrar anúncios gráficos de tamanho semelhante ao fazê-lo irá maximizar o desempenho do seu bloco de anúncios. "
"Neste caso, 
um anúncio de 300 x 250 
serviria no bloco de anúncios  
970 x 250 
 
um 160 x 600 
serviria no bloco de anúncios de 
300 x 1050.  "
"Como esses dois novos tamanhos são grandes blocos de anúncios, você pode colocar um máximo de uma página por. "
"Como sempre, lembre-se de manter um equilíbrio entre o seu conteúdo e anúncios e garantir que seus posicionamentos de anúncios em conformidade com nossos regulamentos do programa AdSense . "

 ..." sempre à procura de seus comentários e sugestões para nos ajudar a fornecer-lhe o anúncio tamanhos que você precisa para se manter flexível para o anunciante e as necessidades do usuário. "

"Fique atento para mais atualizações em breve  
e compartilhar seus comentários na seção de comentários "

"Postado por Alexey Petrov, Especialista AdSense" 

Compartillhe sua opinião no blog do adsense!

  ...clica a seguir :"Compartilhe sua opinião ."
 ▼
https://docs.google.com/forms/d/1FuGvpGtwyBPmAcI-61t_BkeNbRQbmYZmTMd6DxC0rU8/viewform
fonte:

Share:

Atenção, urgente, aos amigos..."em algum lugar do passado "/ A quem interessar possa! ...encontrei, através de http://euhh.wordpress.com...as antigas postagens guardadas e salvas!

. .

A quem interessar possa! 

Atenção, urgente, aos amigos...
"em algum lugar do passado " 
...encontrei, através de http://euhh.wordpress.com...
as antigas postagens 
guardadas e salvas! 
em


http://euhh.wordpress.com/ euhhwordpress


encontrei, através de :
http://euhh.wordpress.com,
site este, de quando eu ainda treinava usar o wordpress,
e e esse , ainda não era o worpress.org (o pago).

Era o não pago!

...as antigas postagens guardadas e salvas!

Postagens estas , que sumiram, deste blog, no dia, em que alguém, deletou, e deixou o blog zerado!

Aí tive que começar do zero!

Sorte, ainda que ainda deu para salvar a o URL, no blogger (Google).

Demorou, mas hoje, sem estar procurando, caiu como uma luva!!!
Obrigada meu Deus!
. .
Share:

Saiba como: "Retirar o gadget Atribuição do seu blog !"



fonte e céditos dessa pesquisa: 
templatesparavoce

Retirar o gadget Atribuição do seu blog !

Não existe a opção de excluir!


Daí , para que você consiga retirar esse gadget ,
terá que ir ao HTML 
do seu template para conseguir !

Antes:
Salve o sewu código "HTML", caso algo não dê certo, para repô-lo!


1º - Apague a widget Attribution do HTML do seu template

  
Escolha o template que deseja retirar a frase "Tecnologia do Blogger" e clique em Modelo » Clique em Editar HTML » Clique em cima do código e Utilize as teclas Ctrl+F e Procure pela widget 

Attribution:


 <b:widget id='Attribution1' locked='true' title='' type='Attribution'>...</b:widget>

Apague esta widget » 
Clique em Salvar





Aonde está o retângulo rosa, tem uma setinha preta, clica nela, e descompacte o widget,
para selecionar e deletar, caso queira. Senão pode deletar o que está dentro do retângulo rosa que dá no mesmo!





Visualize seu blog.

Sumiu?
Então, se sumiu, é sinal que
deu certo de primeira 
e da forma mais fácil.

"Mas esse gadget , tem a possibilidade de não desaparecer com um procedimento tão simples."

2º - Outra maneira de tirar o gadget "Tecnologia do Blogger" do seu template

Se o gadget "Tecnologia do Blogger" não tiver sido apagado. Você deve voltar em Modelo » Procurar pela widget Attribution novamente e apagar toda a <b:section>  em que ela estiver localizada.



Porém,  você não quer perder a <b:section> onde o gadget Atribuição está.

Então você deverá primeiro excluir a widget Attribution no HTML do template (mais fácil), como ensineado acima,   no 1º passo » Salve o modelo.


»Depois selecione a seção <b:section> recorte e cole em um bloco de notas »  


Clique em 
Salvar modelo » 

Visualize seu blog e certifique-se que conseguiu tirar o Gadget Atribuição.

Aí você copia a <b:section class='foot' id='footer-3' showaddelement='no'>...</b:section>
que tinha colado no bloco de notas e volta para o lugar de antes.


Observação:

Neste caso a seção é no rodapé do Template Simple e se você deixá-la como está não irá aparecer no Layout do seu blog, não permitindo que você coloque gadgets nela.

Então mude a palavra no 
em
[showaddelement='no'] 
para  
yes 
ficando assim:
 

<b:section class='foot' id='footer-3' showaddelement='yes'> » 


Clique em
Salvar modelo


Vá em "Layout" 
e certifique-se 
de que a seção está lá.




Caso não apareça, clique em F5 e atualize a página do layout do seu blogger que irá aparecer.


by Áurea:

"Acredito que existam situações em que este gadget não se aplica ao template nem ao tema do blog. Por isso acho que deveria ter a opção de retirá-lo sem ter que recorrer a recursos mais avançados. Entendo a posição do blogger em não dar esta opção, mesmo assim nos permite que retire. Isso eu admiro nesta plataforma."
Share:

Saiba como implementar Widget ( código) de "responder comentarios no blog"/(simples)

Saiba como implementar  Widget  
( código)  de "responder comentarios no blog"/(simples)


Em alguns templates, não existe a opção "responder comentários";

...daí,
o jeito, é implementá-lo!

Muito simples, porém, existem vários modelos e esquemas para tal.

Aqui
vou passar um tutorial muito simples e fácil de fazer!
 

Tutorial :
... responder comentários no blog


Bom:


Logado no painel blogger...

. Vá até o html de seu lay-out
. e,
em html
procure por
 <data:commentPostedByMsg/>
ao encontrar o código:


 <data:commentPostedByMsg/>

...abaixo dele, fazendo as alterações necessárias,
cole o seguinte código:

<span class='comment-reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=AQUI VOCE COLOCA O ID DE SEU BLOG&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'> &#9668; <i>Responder comentário</i>
</a></span>




Nota:


O que está escrito em vermelho,
coloque o ID de seu blog

vide imagem:

▼ 



 Você pode ver o número da ID  de seu blog na barra de endereços do seu navegador.



Obs.:

Você pode colocar também, 
abaixo de
abaixo do seguinte código: 

<dd class='comment-footer'>

 Assim
 o link 
aparecerá  abaixo do comentário!


Bom,
espero ter ajudado!

Use sua criatividade!
Share:

Saiba como é feito esse modelo: "Lista de Postagens Populares na Horizontal"

Este presente post, vem a ser referente a um belíssimo e funcional tutorial, feito por por Ariane, do blog   templatesparanovoblogger,
...considero bem feito e funional, e bonito, por conseguinte, quero tê-lo sempre por perto! 


"Lista de Postagens Populares na Horizontal"

 
...widgets..." Postagens Populares"


"É uma maneira interessante de atrair seus visitantes para outros textos que talvez não se apresentem na página inicial, além de mostrar os assuntos que mais agradam seus leitores. "

"No entanto, por padrão, a lista aparece na vertical, limitando a possibilidade de mostrá-la em outras áreas do blog que não a sidebar, além de ocupar bastante espaço da coluna lateral, mesmo que se escolha poucos posts a serem mostrados."

Uma maneira que considerada por Ariane, do blog   templatesparanovoblogger

interessante foi mostrar esta mesma lista na horizontal, dentro de alguma div que ocupe toda a largura da página,  
como a  
div #crosscol-wrapper (e neste caso, apareceria abaixo do cabeçalho, como neste blog).

"Também é possível arrastar o widget para o
Footer, por exemplo, e a apresentação dos Posts Populares ficaria no final da página"

Tutorial para quem usa os Modelos de Layout (2006)

A primeira coisa que se deve fazer é se certificar da largura total de 

 #outer-wrapper (a div que engloba todas as outras). 
Procure no CSS do seu template por 
#outer-wrapper 
e veja o valor que está em 
 width

Se no seu template este valor for 100%
será preciso então definir um valor para  
#content-wrapper 
(a div que engloba #main-wrapper e #sidebar-wrapper). 
Se o valor de width em 
#outer-wrapper 
 for algo como 980px
não será preciso definir 
#content-wrapper.

Para definir uma largura para content-wrapper
acrescente no CSS (imediatamente 
acima da 
 tag ]]></b:skin> ):

#content-wrapper{margin: 0 auto; width: 990px}

 

o valor de width 

deve ser alterado conforme a largura que você desejar.

Tendo definido uma largura para content-wrapper, acrescente também este trecho (ainda acima
da tag ]]></b:skin> )
 

#crosscol-wrapper{margin: 0 auto; padding: 0px}
#PopularPosts1{width: 100%; margin: 0px auto; padding: 5px 0px} /*
define que o widget ocupe 100% de largura */
#PopularPosts1 h2{font-size:18px;text-align:left; border-bottom: 1px dotted #fff} /*
estilo para o título do widget */
.PopularPosts .widget-content{float:left;margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.PopularPosts .widget-content ul {margin: 0px auto;padding: 0px 0px;width: 100%; list-style:none; } /* estilo para a lista de posts */
.PopularPosts .widget-content li {margin: 0px 6px 10px 6px;width: 182px;padding: 0px;height: 180px; overflow:hidden;list-style:none; float:left; border: 1px solid #fff;} /*
estilo para cada item da lista. Altere os valores de width, height, border, etc, para que se encaixem na largura total. */
.item-content{font-size: 12px; text-align:left; padding: 5px 10px}
/* estilo para o resumo do post */
.PopularPosts img{margin: 0px 0px;padding: 4px; background: #fff; float:right}
/*estilo para a imagem */
.PopularPosts .item-title{line-height:1.3em} /*
estilo para o titulo de cada post */

Salve a modificação.
 


Em Elementos de Página
arraste o widget 
Postagens Populares 
para sob o cabeçalho (ao arrastar, deve aparecer um retângulo  onde se deve encaixar o widget), ou para #footer.
 
"Se você desejar, poderá também colocar no início ou final da coluna dos posts, 

mas deverá modificar as medidas para que se encaixem na largura da coluna. "

 No exemplo de Ariane, as medidas são ideais para 
#content-wrapper com width: 990px; 
mostrando cinco posts populares por 'linha'.
 

Se quiser mostrar os posts populares apenas na primeira página, 
vá em Editar HTML...
...  e, encontre o widget PopularPosts expandido. 

É um código bastante extenso e a condicional (em vermelho) 
deve ser colocada logo após <b:includable id='main'> e
seu fechamento logo antes de </b:includable>
 como mostrado abaixo:

<b:widget id='PopularPosts1' locked='false' title='Populares' type='PopularPosts'>
<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
 ......... mais código .........


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

 
Para os que usam os Modelos de Designer

Para os que usam os novos modelos, 

...Ariane fez " este teste" 
mas é necessário fazer algumas aterações no HTML. 

Primeiro vá em Designer do Modelo => Avançado e em Adicionar CSS
 acrescente os códigos passados acima 
(aqui, a única diferença será que você deve especificar uma medida exata de largura e altura para #crosscol-wrapper
como na imagem abaixo - clique para ampliar -):



Salve a modificação e vá  

em Editar HTML 
e procure por:

<div class='region-inner tabs-inner'>
      <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
      <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
    </div>

E acrescente depois de
</div>:


<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol-wrapper' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
"Salve as modificações e em Elementos de Página, arraste o widget Posts Populares para o espaço abaixo do cabeçalho. "

"Se quiser mostrar os posts populares apenas na primeira página, deixe desta maneira:"



<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol-wrapper' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>


</b:if>




fonte e créditos: 
templatesparanovoblogger
Share:

Seguir por e-mail

Seguidores

Google+ Followers

arquivo

Google+ Badge

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

Alô Negócios !!!…buscas populares

publicidade/espaço


https://goo.gl/w8Ze2R




.adf.ly