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

Blogues 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 a nossa página começa 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 página editar HTML

...procura pelo início de tua lista 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.

...em seguida:

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



Mensagem do formulário de comentário:
"comentários de anônimos, não serão publicados, e aqui... 
...não é local para desentendimentos e discórdias! 
Seja bastante educado! Frequenta qual escola, ou frequentou?
 ...ou a educação vem de berço?

veja como se faz: "Widget de últimas postagens no blog estilo ss de jornalismoit"



fonte:
templateseacessorios


Veja como se faz: "Widget de últimas postagens no blog estilo ss de jornalismoit"



"Widget de últimas postagens no blog estilo ss de jornalismoit"



..."este código o script ficará hospedado no próprio blog."

Passo-a-passo

Vá até o "Modelo de seu blog", clique em "Editar HTML" 




Hack para o template do Blogger, 
implementado em abril de 2013."






Clique no botão "Editar modelo" e 

depois nas teclas Ctrl e F. 

Ao abrir a janela, procure pelo seguinte trecho:


Procure por ]]></b:skin> 

Ao encontrá-lo,

abaixo dele, cole o próximo código:

<script type='text/javascript'>
//<![CDATA[
imgr=new Array();
imgr[0]="http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg=true;
aBold=true;
summaryPost=150;
summaryPost1=20;
summaryTitle=15;
numposts=6;
numposts1=6;
numposts2=3;
numposts3=6;
numposts4=5;
numposts5=12;
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 showrecentposts2(json){
j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;
img=new Array();
if(numposts1<=json.feed.entry.length){maxpost=numposts4}else{maxpost=json.feed.entry.length}for(var i=0;
i<maxpost;i++){var entry=json.feed.entry[i];
var posttitle=entry.title.$t;
var pcm;
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}
}
for(var k=0;
k<entry.link.length;
k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];
break}}
if("content"in entry){var postcontent=entry.content.$t}
else
if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";
postdate=entry.published.$t;
if(j>imgr.length-1)j=0;img[i]="";
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!="")){if(i==0){img[i]='<img width="295" height="180" class="alignone" src="'+d+'"/>'}else{img[i]='<img class="alignright" height="70" src="'+d+'" width="70"/>'}}var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day=postdate.split("-")[2].substring(0,2);
var m=postdate.split("-")[1];
var y=postdate.split("-")[0];
for(var u2=0;u2<month.length;
u2++){if(parseInt(m)==month[u2]){m=month2[u2];
break}}var daystr=day+' '+m+' '+y;
if(i==0){var trtd='<div class="mastoras_wide left"><div class="thumb"><a href="'+posturl+'">'+img[i]+'</a></div><div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div><span class="featuredPostMeta"><a href="'+posturl+'"></a></span></div></div><div class="mastoras_narrow right">';
         document.write(trtd)}if((i>0)&&(i<maxpost)){var trtd='<div class="mastoras_narrow"><div class="thumb"><a href="'+posturl+'">'+img[i]+'</a></div><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div>'+removeHtmlTag(postcontent,summaryPost1)+'...<div class="clear"></div></div>';
document.write(trtd)}j++}document.write('</div>')}
function showrecentposts(json) {
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 pcm;
     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;
       }
     }

for (var k = 0; k < entry.link.length; k++) {
       if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
         pcm = entry.link[k].title.split(" ")[0];
         break;
       }
     }

     if ("content" in entry) {
       var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
       var postcontent = entry.summary.$t;}
     else var postcontent = "";
    
     postdate = entry.published.$t;

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;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img  src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p></h3></li>';
document.write(trtd);    

  j++;
}

}


function showrecentposts1(json) {
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 pcm;
     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;
       }
     }

for (var k = 0; k < entry.link.length; k++) {
       if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
         pcm = entry.link[k].title.split(" ")[0];
         break;
       }
     }

     if ("content" in entry) {
       var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
       var postcontent = entry.summary.$t;}
     else var postcontent = "";
    
     postdate = entry.published.$t;

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;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<li><div><img class="alignnone" src="'+img[i]+'"/></div></li>';
document.write(trtd);    

  j++;
}

}
function showrecentposts4(json) {
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 pcm;
     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;
       }
     }

for (var k = 0; k < entry.link.length; k++) {
       if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
         pcm = entry.link[k].title.split(" ")[0];
         break;
       }
     }

     if ("content" in entry) {
       var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
       var postcontent = entry.summary.$t;}
     else var postcontent = "";
    
     postdate = entry.published.$t;

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;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = m+ ' ' + day + ' ' + y ;

var trtd = '<a href="'+posturl+'"><span>&#187; </span>'+posttitle+'</a>';
document.write(trtd);    

  j++;
}

}

function showrecentposts7(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();

   for (var i = 0; i < numposts3; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
var pcm;
     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;
       }
     }

for (var k = 0; k < entry.link.length; k++) {
       if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
         pcm = entry.link[k].title.split(" ")[0];
         break;
       }
     }

     if ("content" in entry) {
       var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
       var postcontent = entry.summary.$t;}
     else var postcontent = "";
    
     postdate = entry.published.$t;

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;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<li><a title=" '+posttitle+' " href="'+posturl+'"><img width="90" height="70"  title=" '+posttitle+' " class=" " src="'+img[i]+'"/></a></li>';
document.write(trtd);    

  j++;
}

}

//]]>
</script>


Agora procure por: <div class='content-inner'> 

Abaixo dele cole:

<div style='clear:both;'/>
<div class='headline-wrapper'>
<div class='headline'>
  <div style='float:left; background:#F7550D; padding:4px 18px 3px 20px; font-size: 14px; font-family: Oswald, sans-serif; color:#fff; overflow: hidden;'>
Ultimas
</div>
<div class='headline-left'>
<marquee behavior='scroll' bgcolor='' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='4'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts5+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts4\&quot;&gt;&lt;\/script&gt;&quot;);
 </script></marquee>
  </div> </div> </div>
<div style='clear:both;'/>


Salve !





E, para dar estilo (css)
"Implementar CSS   "                                                                           



No modelo de seu blog", clique em "Personalizar"






Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 




Copie o código abaixo e cole no local indicado.

/* Headline
---------------------------------*/
.headline-wrapper{
background: #442108;
width:100%;
height: 35px;
color:#fff;
margin: -30px 0 30px 0; /*Mude os números para subir os descer o menu de postagens aqui */
}
.headline{
width: 1000px;
line-height: 1.8em;
text-align: left;
font-family: 'Arial', sans-serif;
font-weight: normal;
color: #151515;
text-transform: none;
overflow: hidden;
clear: both;
margin: 0 auto;
padding: 10px auto
}
.headline a{
color: #fff;
font-size: 13px;
font-weight: normal;
text-decoration: none;
margin-left: 20px
}
.headline a:hover{
color: #000;
text-decoration: none
}
.headline-left{
float:left;
width:88%;
padding:2px 0;
position:relative;
overflow:hidden;
}


Depois, clique em "Aplicar ao blog", 

no canto direito de seu monitor, 

na parte superior para salvar.


///

Mensagem do formulário de comentário:
"comentários de anônimos, não serão publicados, e aqui... 
...não é local para desentendimentos e discórdias! 
Seja bastante educado! Frequenta qual escola, ou frequentou?
 ...ou a educação vem de berço?

botão voltar ao topo do blog, com "efeito-scroll" (deslizante)


 
 Botão "voltar  ao topo  do blog", com "efeito-scroll" (deslizante)


Tutorial:

Primeiro:

Logado no seu painel blogger;
Vá até o html dele.
E, procure por  ]]></b:skin>


Uma vez, encontrando-o,

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



/* to top */
    #toTop {
    width:50px;  /* Largura do botão * /
    border:1px solid #000; /* Cor e tipo da borda */
    text-align:center; /* Alinhamento do texto */
    padding:5px; /* Distancia entre texto e borda */
    position:fixed; /* Posição que faz com que ele corra por toda a página*/
    bottom:5px; 
    right:5px;
    cursor:pointer;
    color:#ff0000; /* Cor da fonte do botão */
    text-decoration:none;
    font-weight:700;  /* Define o negrito da fonte */
    -moz-border-radius:5px;  /* Definições para o ângulo do botão */
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }



Visualize!
Salve!


Agora,
acima de </body>

cole o código:


<a href='#' id='toTop'>Topo</a> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'>    
/*-----------------------     
* jQuery Plugin: Scroll to Top     
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)     
*      
* Copyright (c) 2009 Ph.Creative Ltd.     
* Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling.     
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx     
*      
* Version: 1.0, 12/03/2009     
-----------------------*/ 
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var   scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html,  body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}}); 
  $(function() {    
                $(&quot;#toTop&quot;).scrollToTop();     
            });     
        </script>


Visualize!
Estando tudo certo,
Salve!


 Nota:

Caso prefira uma imagem,ao invez de escrito "topo"

troque
o código


<a href='#' id='toTop'>Topo</a> 

por este código a seguir:


<a href='#' id='toTop'><img src='Aqui você insere o ENDEREÇO DE SUA IMAGEM aonde a hospedou'>
 </img></a>

Caso você prefira, uma dica mais simples:


cole, em gadget, do lado de "html" (<>),
de seu "lay-out", do template blogger,
fazendo as alterações necessárias,
o código a seguir:
 

<div style="position:fixed; bottom:0px; right:0px;"><a href="#">
<img src="LINK DA IMAGEM" border="0" /></a></div>                 
 
 
 
 
 
 
 

Mensagem do formulário de comentário:
"comentários de anônimos, não serão publicados, e aqui... 
...não é local para desentendimentos e discórdias! 
Seja bastante educado! Frequenta qual escola, ou frequentou?
 ...ou a educação vem de berço?

Aprenda Como:..." colocar-botao-curtir-do-facebook"

"colocar-botao-curtir-do-facebook"


Aprenda Como:..."   colocar-botao-curtir-do-facebook"



pesquisa realizada em:                                    


 

Colocar Botão "  Curtir" Do Facebook no Blogger

..."J Miur do Vagabundia trouxe uma novidade bem interessante para divulgar postagens. O botão "Curtir" do Facebook que pode ser colocado nos posts ou direto na home do seu blog Blogger. Leia a matéria toda no Vagabundia."
"Trecho traduzido
 :"
"Para aqueles que usam o Facebook, estão aparecendo devagar os métodos de  integração fácil entre blogs e sites. A empresa está em uma luta aberta para "morder" uma fatia de mercado que o Google agora domina."

O código para o botão é o seguinte:
<iframe 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=450&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=dark&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:60px'/>
 Há algumas coisas que podemos personalizar:
&amp;layout=standard define otipo de botão, pode-se mudar por button-count para simplifica-lo
&amp;show-faces=true mostra o avatar do usuario e eliminar-se colocando false
&amp;action=like é o texto a mostrar e pode ser substituido  por recommend
&amp;colorscheme=light é o desenho geral, a outra opção é dark
&amp;font=arial é ol tipo da letra opcional e pode ser tahomaariallucida+grandesegoe+uitrebuchet+msverdana
&amp;width=530 é a largura total en pixeles (530 o 450)
&amp;height=60 es la altura total en pixeles

Se quiser exibi-lo no rodapé das postagens faça o seguinte:

Login no Blogger ► opção "layout"  ► Editar HTML 

Procure pelo trecho <div class='post-footer-line post-footer-line-1'>

Cole o código ABAIXO do trecho

Para exibir ao lado do título da postagem procure pelo trecho
<div class='post-header-line-1'/>

Cole o código ABAIXO do  trecho.

Se queremos exibi-lo em nossa página (pode-se  usá-lo em qualquer página), o código é o mesmo e apenas definir a URL correta, substituindo data:post.url pelo endereço do nosso blog e, neste caso, devemos mudar os símbolos //: (barra dois pontos)
por seus  equivalentes % 3A% 2F:

Exemplo ...


Fica assim: 
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblogger-dicasmamanunes.blogspot.com%2F&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&&action=like&amp;font=tahoma&amp;colorscheme=dark" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>


Referencia: VAGABUNDIA


Para quem usa o Facebook, estão aparecendo devagar os métodos de integração simples com blogs e outros sites da web como a empresa está em uma briga direta para controlar a quota de mercado que o Google agora é o único Senhor e Mestre. Até recentemente , a maioria dessas coisas foram bastante complexa, mas começaram a oferecer alguns códigos simples que podem ser vistos em suapágina do desenvolvedor . Talvez, o mais interessante são os plugins sociais e, entre eles, o famoso botão Likes permitindo aos usuários compartilhar conteúdo entre o seu site e Facebook visitantes.



Tudo que você precisa adicioná-lo para o Blogger é copiar e colar o código que não é nada mais que um iframe :
<Iframe expr: src = '"http://www.facebook.com/plugins/like.php?href =" + dados: post.url + allowTransparency frameborder = 'true' = '0 'scrolling =' no 'style =' border: none; overflow: hidden, width: 450px, height: 60px "/>
O mais razoável seria a de colocá-lo em cada entrada, juntamente com o resto dos ícones sociais, por exemplo, no pós-footer das entradas. Embora este é o código padrão, há coisas que podem ser personalizadas que estes parâmetros são estão ligados à nossa entrada URL: & layout = normadefine o tipo de botão, pode ser alterado por contagem botão para simplificar e mostram-faces = true mostra o avatar do usuário e pode ser removido colocando falsa ação & = como é o texto a ser exibido e pode ser alterado para recomendar & colorscheme = luz é a concepção global, a outra opção é dark & font = arial fonte é opcional e pode ser tahoma , arial , lucida + grande , Segoe + uitrebuchet + ms , verdana & width = 530 é a largura total em pixels (530 ou 450) & height = 60 é a altura total em pixels se colocarmos em nossa casa (nada impede o uso em qualquer página) o código é o mesmo e apenas definir a URL correta, substituindo os dados: post.url pela direção do nosso blogue e, neste caso, devemos mudar os colonos e seus equivalentes bar 3A% e % 2F :


<Iframe allowTransparency = "true" frameborder = scrolling "0" = "no" style = "border: none; overflow: hidden, width: 450px, height: 60px"> </ iframe>

"Adicionar V2"... "Estilo Popular Posts"..." Widget" " Com Multi Color"... "Para Blogger"

Add V2 Style Popular Posts Widget With Multi Color For Blogger

This is about Popular post widget. Actually
earlier i posted about How To Add Multi-Color 
Popular Posts Widget For Blogger. So this is
also same, But, this design is different, Its
look Like round corners. You can add this effect
with easily,You can try it.

Multi-Color Blogger Popular Posts


1. Log in to blogger account & Go to Design >> Edit HTML

2. Find this code 
 by using Ctrl+F  ]]></b:skin>

3.Paste below code Before ]]></b:skin> code

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}



4. Now Click  Save Template.
    You are done...

fonte: bloggertrix


traduzido:

"Adicionar V2 

Estilo Popular Posts Widget 

Com Multi Color Para Blogger"


Este é widget post sobre Popular. Na verdade, 
mais cedo eu postei sobre como adicionar Multi-Color 
Mensagens Popular Widget para Blogger. Portanto, este é 
também mesmo, Mas, este projeto é diferente, seu 
olhar como cantos arredondados. Você pode adicionar este efeito 
com facilidade, você pode experimentá-lo.

Multi-Color Blogger Posts mais populares


. 1 Efetue login na conta blogger & Go para projetar >> Editar HTML 

2. Encontre este código  usando Ctrl + F  ]]> </ b: skin> 

3. Cole o código abaixo antes de ]]> </ b: skin> código:


# PopularPosts1 ul li a: hover {color: # fff; text-decoration: none}
# PopularPosts1 ul li a {-webkit-text-size-adjust: auto-webkit-text-stroke-width: 0px; color: # 333333; display: block; font-family: Georgia, 'Times New Roman', Times , serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 0px 0px 40px; min-height: 30px; órfãos: 2; padding: 0px; text-align:-webkit-auto, text-decoration: nenhum importantes; text-indent: 0px; text-transform: none; white-space: normal; viúvas: 2; palavra -spacing: 0px;}
# PopularPosts1 ul li
# PopularPosts1 ul li: first-child: em seguida,
# PopularPosts1 ul li: first-child + li: depois,
# PopularPosts1 ul li: first-child + li + li: depois,
# PopularPosts1 ul li: first-child + li + li + li: depois,
# PopularPosts1 ul li: first-child + + li li li + + li: depois,
# PopularPosts1 ul li: first-child + + li li li + + + li li: depois,
# PopularPosts1 ul li: first-child li + + + li li li + + + li li: depois,
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + li: depois,
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + + li li: depois,
# PopularPosts1 ul li: first-child li + + + li li li + + + li li li + + + li li: after {position: absolute; top: 10px; direita: 5px; border-radius: 50%; margem: 2px solid # ccc; background: # 353535;-webkit-box-shadow: 0px 0px 5px # 000;-moz-box-shadow: 0px 0px 5px # 000; width: 30px; height: 30px; line-height: 1em; text-align: center; font-size: 28px; color: # fff}
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + li {background: # DF01D7; width: 90%}
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + li: after {content: "8"}
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + + li li {background: # B041FF; width: 90%}
# PopularPosts1 ul li: first-child + + li li li + + + li li li + + + li li: after {content: "9"}
# PopularPosts1 ul li: first-child li + + + li li li + + + li li li + + + li li {background: # F52887; width: 90%}
# PopularPosts1 ul li: first-child li + + + li li li + + + li li li + + + li li: after {content: "10"}
# PopularPosts1 ul li: first-child + + li li li + + + li li {background: # 7ee3c7; width: 90%}
# PopularPosts1 ul li: first-child + + li li li + + + li li: after {content: "6"}
# PopularPosts1 ul li: first-child li + + + li li li + + + li li {background: # f6993d; width: 90%}
# PopularPosts1 ul li: first-child li + + + li li li + + + li li: after {content: "7"}
# PopularPosts1 ul li: first-child + + li li li + + li {background: # 33c9f7; width: 90%}
# PopularPosts1 ul li: first-child + + li li li + + li: after {content: "5"}
# PopularPosts1 ul li: first-child li + + + li li {background: # c7f25f; width: 90%}
# PopularPosts1 ul li: first-child + li + li + li: after {content: "4"}
# PopularPosts1 ul li: first-child + + li li {background: # ffde4c; width: 90%}
# PopularPosts1 ul li: first-child + li + li: after {content: "3"}
# PopularPosts1 ul li: first-child + li {background: # ff764c; width: 90%}
# PopularPosts1 ul li: first-child + li: after {content: "2"}
# PopularPosts1 ul li: first-child {background: # ff4c54; width: 90%}
# PopularPosts1 ul li: first-child: after {content: "1"}
# PopularPosts1 ul {margin: 0; padding: 0px 0; tipo list-style: none}
# PopularPosts1 ul li {position: relative; margin: 6px 0; border-radius: 25px 0px 25px 0px; border: 2px solid # f7f7f7;-webkit-box-shadow: 3px 3px 3px # 000;-moz-box-shadow: 3px 3px 3px # 000; padding: 10px}



4. Agora Clique em  Salvar modelo.
    Está feito ...




Seguir por e-mail

Topo