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