Mostrando postagens com marcador blog. Mostrar todas as postagens

"Ticker" automático mostra as últimas entradas de blog

fonte e créditos:
ciudadblogger

traduzido:

"Ticker" ("pedaço de tempo")

automático mostra as últimas entradas de blog

A ticker está sendo como um ticker de notícias que os portadores de passes de letreiro tipo. Seu uso é basicamente para mostrar aos leitores quais são os insumos mais importantes, embora no nosso caso vamos usar para mostrar os últimos posts do blog, sim, automaticamente para evitar a adição de entradas a ser o tempo todo ou ter que ser editar qualquer coisa. Nosso news ticker vai fazer com jQuery, e eu sei que alguns vão dizer , mas por que, se podemos fazê-lo com o rótulo FAMOSO! . Certamente que podemos fazer com Marquee, mas esse elemento não é uma adição de padrão para o seu deslocamento é normalmente muito duro, com muitas vezes o texto torna-se difícil de ler. Nós também poderia fazê-lo com animações CSS, mas os navegadores mais antigos não iria funcionar, então é por isso que vamos usar jQuery para criar a marquise efeito, também podemos escolher a velocidade ea direção de deslocamento A demo pode vê-lo aqui, se você passar o mouse sobre um título parar o ticker:

"E já que não luta edição também automático fará uma única etapa, por isso a instalação é só copiar e colar.Para fazer isso Copie o código abaixo e insira Projeto | Adicionar um Gadget | HTML / Javascript e cole-o lá."

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<style>
#headlines {
overflow:hidden;
position:relative;
line-height:25px;
background:#34495e; /* Color de fondo */
height:45px;
padding:0 0 0 135px;
}
#headlines h3 {
color:#fff;
font-family:Oswald, sans-serif;
font-size:17px;
font-weight:400;
text-transform:uppercase;
margin-left:-115px;
margin-top:10px;
position:absolute;
}
#headlines .right_arrow {
padding:0 38px 0 110px;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGyCpwq3Mm_i9aTX-mEeM2yoS8p-SxPS3NyomslihfxjDj28tj9bbPGwVDrBTlzTalIvlc-JO9cYiP5RMIj6zXVs-3utLvlkR83Cocyv_pFdHRbqPzBwTteoCwBDkO9R8Ct3urmH2Nr1wJ/s41/arrow.png) no-repeat right center;
height:46px;
line-height:46px;
position:absolute;
left:0;
top:0;
}
#ticker_post {
position:relative;
margin:0;
margin-left:20px;
height:50px;
width:auto;
}
.marquee {
width: 980px; /* Ancho del área donde se muestran las entradas */
overflow: hidden;
line-height: 45px;
}
.js-marquee a {
font-family:Oswald, sans-serif;
font-size:15px; /* Tamaño de los textos */
color: #FFF; /* Color de los textos */
padding-bottom: 20px;
text-decoration: none;
}
.ticker_separator {
color:#FFF; color: #FFF; /* Color del separador de las entradas */
margin:0 10px;
}
</style>
<div id='headlines'>
<h3>Lo Último</h3>
<div class='right_arrow'></div>
<script>
var blog_url = "http://nombre-de-mi-blog.blogspot.com";
var numero_post = 10; // Número de entradas a mostrar
</script>
<script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
<div style='clear:both;'></div>
<script>
$(window).load(function() {
$('.marquee').marquee({
direction: 'left', // Dirección de la marquesina, usar left o right
duration: 25000, // Velocidad
pauseOnHover: true,
duplicated: true
});
});
</script>

"Quando indicado em vermelho deve colocar o nome do seu blog, em verde ver onde para mudar a cor de fundo eo número de entradas para mostrar, velocidade e direção do movimento.

não se esqueça de alterar o / * Largura da área onde as entradas * / é configurá-lo na medida em que você precisa.

lembre-se que estamos usando jQuery por isso, se ele já está lá exclui a primeira linha de código. Este gadget usa dois scripts para executar, ambos já estão ficando mas se você quiser você pode baixar e enviá-los para o seu próprio alojamento para não depender dos outros. Tenha em mente que o ticker mostra as últimas entradas de blog , independentemente do rótulo, se você quer mostrar os últimos posts de uma determinada marca terá que editar o arquivo ticker.js e adicionar o que é mostrado em vermelho":"

var entries;var feed;var feed_url=blog_url.match(/\/$/)?blog_url:blog_url+"/";feed_url+="feeds/posts/default/-/Nombre-de-la-etiqueta";

Onde é o melhor? Isso depende do gosto de cada pessoa e do projeto de cada modelo, geralmente o ticker de notícias subiu ou baixa na cabeça, ou acima das entradas, mas como eu disse, isso depende do gosto de cada pessoa.

"Fazer download de arquivos"

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"

demonstração:

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:

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("<script src=\"/feeds/posts/default?max-results="+numposts5+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</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:

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:

Botões para redes sociais com contador - 21 -

fonte:
oloblogger.

traduzido:

BOTÕES PARA REDES SOCIAIS COM CONTADOR DE 21

Juan Martin CheckApps se encontraram há alguns dias que não é um serviço gratuito que permite criar botões personalizados sociais . Então eu disse que é nada que escrever, mas quando descobrimos que agora suporta as mesmas 21 redes diferentes, incluindo contadores de vezes que ele compartilhou um endereço ou seguidores que você tem uma página e, especialmente, como é fácil para adicioná-los nosso site, as coisas começam a ficar mais interessante. O site em questão é GetShares e tem um instalador para gerar código para qualquer botão com três opções de estilo, mas o mais interessante na minha opinião é a utilização de sua API para criar uma barragem de botões. É o que vemos neste post.

GetShares botões partes sociais. Blogger

Na página getshar.es botões gerador é um utilitário para ver todos os contadores de endereços web em várias redes ao mesmo tempo e algumas notas sobre a API mais intuitivo esse projeto.Este último você pode encontrá-lo inteiramente em GitHub . O serviço funciona através de um arquivo js com jQuery desenvolve todos os botões do sistema e não mais. css para tornar mais fácil para definir o estilo deles. Ambos os arquivos podem baixá-los e hospedá-los sob seu controle (respeitando a licença) se o serviço fosse sempre tornar-se saturado, o que no momento parece acontecer. Em vez disso, por agora ir muito rápido. claro, o JavaScript não GetShar.es algum dia auto-suficientes e, se não entregar o serviço, mesmo se você tem os botões de controle de código de parar de trabalhar.

Como adicionar Blogger é um pouco diferente do que há explicou, porque usar os botões com endereços dinâmicos tem que mergulhar na variável de dados e para que funcionem como parte de um JavaScript, nós ainda fazer um funileiro que consiste basicamente de "meia-volta" o código em texto simples. Assim, este é o que você deve colocar em seu modelo, como tal, dentro das mensagens região geração e, talvez, os melhores sites seria dentro da caixa pós-header ou pós-footer . Embora posto não muito ortodoxo este seguido na parte HTML, eu fiz bem para torná-lo mais fácil de adicionar ou remover de uma só vez. Eu também acrescentou uma regra de estilo para que, em qualquer caso, os botões estão centradas ... como estes que já são uma realidade e uma demonstração tangível de como eles funcionam.

8140211

<- Botões GETSHARES SOCIAIS -> 

== <b:if cond='data:blog.pageType "item"'> 

<div id='buttons'/> 

<script src = '/ / cdnjs.cloudflare. 'type =' text com/ajax/libs/jquery/2.0.3/jquery.min.js / javascript '/> 

<script src = 'http://cdn.getshar.es/lib/0.8.0.min. 'type =' text js / javascript '/> 

<link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/> 

<style> # buttons {text-align: center; margin: 10px auto; font-weight: normal;} </ style> 

<script type='text/javascript'> 

(function () { 

var configurações, 

definições = { 

raiz : $ ("# botões"), 

contador: { 

position: "dentro" 

}, 

partes: { 

url: "<data:post.canonicalUrl/>" 

imageUrl "<data: post.firstImageUrl / > " 

mensagem: "<data:post.title/>" + "<data:post.canonicalUrl/> Via: @ Oloman" 

} 

}, 

novo GetShare ($ estender (definições, {rede. " , googleplus "})); 

GetShare novo ($ estender (definições, {rede. "Twitter"})); 

. GetShare novo ($ estender (definições, {network "facebook"})), 

novo GetShare ( $ estender. (configurações, {rede: "linkedin"})) 

GetShare novo ($ estender (definições, {network: "Pinterest"}.)), 

novo GetShare ($ estender (definições, {network ". ; bolso "})) 

/ / Mais redes http://getshar.es/ 

.}) chamada (this) 

</ script> 

</ b: if>

Em tudo isso, a única coisa que deve mudar é a seção da mensagem se você quer que ele seja algo diferente do título-address-rota e, obviamente, usuário do Twitter, porque o conjunto é meu. Para enviar para outro aspecto (muito parecido realmente), você pode alterar o valor daposição , escolhendo entre dentro (dentro do botão) e divisão (como um complemento para o botão). Você também pode adicionar um parâmetro adicional configurações para o botão para exibir um ícone de texto à direita da rede. Por exemplo, o botão: {text: 'Compartilhar'} . A última parte do código que é gerado cada (botões GetShare novo ... ) e que devemos incluir o maior número de linhas como botões, indicando rede nome a rede correspondente. A lista completa está em desta página GetShares . Uma desvantagem é que os botões são adicionados a uma caixa vazia com um ID ( # botões , no exemplo), o que faz com que você não pode colocar mais de um lote de botões por página . Por esta razão, eu adicionei este condicional que você viu, então ele não mostra mais do que páginas de entradas onde as mensagens são únicas.

...
fonte:

oloblogger.

▼

BOTONES PARA 21 REDES SOCIALES CON CONTADOR

Juan Martín de CheckApps nos hizo conocer hace unos días la existencia de un servicio gratuito que permite crear botones sociales personalizados. Así dicho no es nada del otro jueves, pero cuando descubrimos que admite ahora mismo 21 redes distintas, que incluye contadores de las veces que se ha compartido una dirección o de los seguidores que tiene una página y sobre todo, lo fácil que resulta añadirlos a nuestro sitio, la cosa se empieza a poner más interesante.

El sitio en cuestión es GetShares y dispone de un instalador para generar el código de cualquier botón con tres opciones de estilo, pero lo más interesante a mi parecer es aprovechar su API para poder crear una andanada de botones. Es lo que veremos en esta entrada.

En la página de getshar.es está el generador de botones, una utilidad para ver los contadores de cualquier dirección web en varias redes de una sola vez y unos apuntes sobre la API algo más intuitivos que los del proyecto. Este último lo podéis encontrar completo en GitHub.

El servicio funciona gracias a un fichero js que junto con jQuery desarrolla todo el sistema de botones y adicionalmente hay un .css para que sea fácil configurar el estilo de los mismos. Ambos ficheros podéis descargarlos y alojarlos bajo vuestro control (respetando la licencia) por si el servicio llegara a saturarse alguna vez, cosa que de momento parece que no ocurre. Al contrario, de momento van bastante rápido.

Eso sí, el JavaScript no es autosuficiente y si algún día GetShar.es deja de ofrecer el servicio, aunque tengas el control del código los botones dejarán de funcionar.

La forma de añadirlos a Blogger es un poco diferente de lo allí explicado, porque para poder usar los botones con direcciones dinámicas tendremos que echar mano de las variables data y para que estas funcionen como parte de un JavaScript, tenemos que hacer adicionalmente una chapucilla que consiste básicamente en "medio-convertir" el código en texto plano.

De esta manera, esto es lo que habría que poner en vuestra plantilla, tal cual, dentro de la zona de generación de posts y quizás los mejores sitios serían dentro de la caja post-header o de la post-footer.

Aunque no es muy ortodoxo poner todo esto seguido en la parte HTML, lo he hecho así para que sea más fácil poner o quitar de una vez. Además he añadido una regla de estilo para que en cualquier caso los botones queden centrados... como estos que siguen que son ya reales y la demostración palpable de cómo funcionan.

8140211

<!-- BOTONES SOCIALES GETSHARES -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='buttons'/>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>

<script src='http://cdn.getshar.es/lib/0.8.0.min.js' type='text/javascript'/>

<link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/>

<style>#buttons{text-align:center; margin:10px auto;font-weight:normal;}</style>

<script type='text/javascript'>

(function(){

var settings;

settings = {

root: $(&quot;#buttons&quot;),

counter: {

position: &quot;inside&quot;

},

share: {

url: &quot;<data:post.canonicalUrl/>&quot;,

imageUrl: &quot;<data:post.firstImageUrl/>&quot;,

message: &quot;<data:post.title/>&quot; + &quot; <data:post.canonicalUrl/> Vía: @oloman&quot;

}

};

new GetShare($.extend(settings, {network: &quot;googleplus&quot;}));

new GetShare($.extend(settings, {network: &quot;twitter&quot;}));

new GetShare($.extend(settings, {network: &quot;facebook&quot;}));

new GetShare($.extend(settings, {network: &quot;linkedin&quot;}));

new GetShare($.extend(settings, {network: &quot;pinterest&quot;}));

new GetShare($.extend(settings, {network: &quot;pocket&quot;}));

//Más redes en http://getshar.es/

}).call(this);

</script>

</b:if>

En todo eso lo único que debemos cambiar es el apartado del message si es que queremos que salga algo distinto de título-dirección-vía y, evidentemente, el usuario Twitter porque el que figura es el mío.

Para presentarlos con otro aspecto (muy parecido realmente) se puede cambiar el valor deposition eligiendo entre inside (dentro del botón) y split (como añadido al botón). También se puede añadir un parámetro adicional en settings para que el botón muestre un texto a la derecha del icono de la red. Por ejemplo: button: {text:'Compartir'}.

La última parte del código es la que que genera cada uno de los botones (new GetShare...) y ahí debemos incluir tantas líneas como botones, indicando en network el nombre de la red correspondiente. La lista completa está en esta página de GetShares.

Un inconveniente es que los botones se añaden a una caja vacía mediante una ID (#buttons, en el ejemplo), lo que provoca que no se pueda colocar más de una tanda de botones por página. Por ese motivo le he añadido ese condicional que visteis, para que no se muestre mas que en páginas de entradas dónde los posts son únicos.

#a dica ee - a dica é ...►INICIO◄

Páginas

►a dica ee - a dica é ...►INICIO◄

Buscar

Pesquisar

"Ticker" automático mostra as últimas entradas de blog

traduzido:

"Ticker" ("pedaço de tempo")

automático mostra as últimas entradas de blog

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

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

Botões para redes sociais com contador - 21 -

BOTÕES PARA REDES SOCIAIS COM CONTADOR DE 21

BOTONES PARA 21 REDES SOCIALES CON CONTADOR

Postagem em destaque

Como usar a mesma conta do WhatsApp em dois celulares

"twitter-timeline"

Translate

Páginas

on

curtir

"Política de Privacidade - Google AdSense"

agregadores

Páginas

►a dica ee - a dica é ...►INICIO◄

Buscar

Pesquisar

"Ticker" automático mostra as últimas entradas de blog

traduzido:

"Ticker" ("pedaço de tempo")

automático mostra as últimas entradas de blog

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

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

Botões para redes sociais com contador - 21 -

BOTÕES PARA REDES SOCIAIS COM CONTADOR DE 21

BOTONES PARA 21 REDES SOCIALES CON CONTADOR

Postagem em destaque

Como usar a mesma conta do WhatsApp em dois celulares

"twitter-timeline"

Translate

Páginas

Inscrever-se

on

curtir

"Política de Privacidade - Google AdSense"

agregadores