Mostrando postagens com marcador blogger. 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?

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'>

<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:

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:

saiba como se faz: "postagens populares com efeito de slide"

POSTAGENS POPULARES COM EFEITO DE SLIDE

►demonstração◄

..."dar as postagens populares

uma aparência de slide

um destaque a mais

para os visitantes de seu blog ? "

"Neste caso as postagens populares terão

um efeito hover

com o título das postagens,

o que dá um ar mais profissional a seu blog."

Para isso a primeira coisa a fazer é

deletar

o seu

widget de postagens populares

ou dará conflito nos códigos.

Depois de retirar o widget,

siga o 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.

<div class='main-outer'>

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

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

<div id='tm_featured'>
<div class='folder'>
<div class='folder_all'>
<b:section class='folder_item' id='folder_item' preferred='yes' showaddelement='no'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<div class='featured_item'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear:both'/>
<b:else/>
<div class='folderboxpic'>
<a class='article' expr:href='data:post.href' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='72' width='72'/>
<b:else/>
<img alt='no image' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-rdeoVRz1VM-QGTe0HoVoAVzt4nXiLURn-MCjN9nauxZKdopRquKJKQl0xa5u5nTW3k5z3fMVC9FbyCE7icOrGUSNzeJ9fFAsf768GTXzmRcAd27-326lMgEtcOhHqC4gcoiK5padK4A/s1600/sem+imagem3.png' width='200'/>
</b:if>
<div class='folderboxtitle'><div class='folderboxbackground'><div id='tm-folderboxbackground-720'><data:post.title/></div></div></div>
</a>
<div class='clear'/>
</div>
</b:if>
</b:if>
</div>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<div class='clear'/>
</div>
</div>
</div>
</b:if>

Salve.

Agora ...

... "dar estilo implementando o CSS"

"Implementar CSS " :

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

Copie o código

abaixo e cole no local indicado.

..." em destaque

a largura total do slide, em cor vermelha

as imagens das postagens (cada quadradinho)

está em destaque na cor azul.

"Modifique para que fique de acordo com seu blog."

"A cor de fundo está em destaque na cor amarela e

as bordas e cor de fundo da área dos títulos estão

em destaque na cor verde."

/*Popular post slide-----------------------------------*/
.folder{margin: -24px 0 28px 0}
#tm_featured {background: #808080; /*Cor de fundo da área */padding: 0; }
.folder_all{padding:0}
.folder_all { padding: 0px 0; margin: -20px 0; width: 1200px; /*largura do slide*/ }
.featured_item {float:left}
.folderboxpic {border: 2px solid #DF6D88; background: #fff;
height:104px;width:104px; /*tamanho das imagens*/
overflow:hidden;position:relative;}
.folderboxpic img{border: 2px solid #DF6D88; height:104px;width:104px}
.article {display:block;width:100%;height:100%;color:#ffffff;font-size:13px;text-decoration:none;font-family:Open Sans,Arial,Verdana;text-overflow:ellipsis;}
.article .folderboxbackground {
font-family: 'Yanone Kaffeesatz', sans-serif;background:#DF6D88;color:#000;padding: 6px;font-size:12px;text-transform: uppercase;}

.article .folderboxtitle {
position:absolute;
bottom:0;
opacity:0;
-webkit-transition:all 0.4s ease-in 0s;
-moz-transition:all 0.4s ease-in 0s;
-ms-transition:all 0.4s ease-in 0s;
-o-transition:all 0.4s ease-in 0s;
transition:all 0.4s ease-in 0s;
letter-spacing:0.4px;
width:104px; /*tamanho da área dos títulos*/
height:0px;
display:block;
font-family:bebasneueregular,bebas,arial;
font-size:12px;
text-align:center;
}

.article:hover .folderboxtitle{opacity:0.9;height:100%}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

- See more at: http://templateseacessorios.blogspot.com.br/2014/07/postagens-populares-com-efeito-de-slide.html#sthash.dOYoVBfM.dpuf

fonte:
templateseacessorios

Mensagem do formulário de comentário:

#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

Blogues com caixa de rolagem

Blogues com caixa de rolagem

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

saiba como se faz: "postagens populares com efeito de slide"

POSTAGENS POPULARES COM EFEITO DE SLIDE

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

Blogues com caixa de rolagem

Blogues com caixa de rolagem

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

saiba como se faz: "postagens populares com efeito de slide"

POSTAGENS POPULARES COM EFEITO DE SLIDE

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