Categorias"expandir modelos de widgets" caixa...
fonte:
http://www.bloggerbuster.com/2008/09/elegant-post-summaries-for-blogger-with.html
...
" A capacidade de exibir extratos de mensagens é uma característica que muitos de nós gostaria de ver adicionado ao Blogger! Tal característica impediria leitores ter que se deslocar muito para baixo a página para encontrar o próximo post sobre a casa e páginas de arquivos, e em muitos casos, pode oferecer o potencial de diferentes estilos de layout ...
Muitos usuários do Blogger adoptaram Selectiva Ramani's posts expansível hack ou uma alternativa semelhante. No entanto, tenho encontrado estes a ser um pouco complicado: eles exigem a edição manual de cada post ou causar outros problemas irritantes. Em minha busca por uma alternativa elegante e menos pesado, eu descobri uma solução quase perfeita: o jQuery Expander Plugin por Karl Swedberg. "
" Integrando o plugin jQuery Expander para o Blogger oferece muitas opções úteis e recursos:
Vou começar com uma explicação padrão que irá resumir mensagens com um link para expandir na mesma página (isto requer apenas duas etapas). Em seguida, podemos fazer duas pequenas alterações que impedem a expansão e adicionar um link para a página de postagem.
Finalmente eu vou explicar como você pode alterar algumas opções para extratos que podem ser aplicadas a ambos os métodos.
Para qualquer função que você preferir, a instalação é simples eo resultado será resumos post elegante para o seu Blogger Powered blog:)"
Este é o método mais simples para adicionar funcionalidade trecho de seu blogger blog powered!
Em primeiro lugar, vá para Layout> Editar HTML no seu painel do Blogger e marque a caixa " expandir modelos de widgets" caixa.
Em seguida, encontrará o fechamento
" Em seguida, encontrar essa seção do código (ou similar) em seu modelo:"
Se você não consegue encontrar facilmente esta seção, procure a seguinte tag usando a função de busca do seu navegador:
Você precisa de realçar este e qualquer código circundante, como neste screenshot:
" Substitua essa seção do código /\
com o seguinte comando: \/ "
" Agora, visualizar o seu modelo. Agora você deve notar que os lugares em sua home page foram resumidos e apresentam uma elipse, no ponto de truncamento que (uma vez visto na página ao vivo) é um link para expandir / truncar o post:"
" Se você estiver satisfeito com isso, você pode salvar seu modelo e aproveite a resumos nova mensagem imediatamente. Alternativamente, para ler sobre métodos de prevenção da expansão na mesma página, e personalizar os trechos de acordo com suas preferências."
" Minha preferência pessoal é para mostrar apenas um excerto de mensagens com um link para o artigo completo. Isso requer apenas duas pequenas alterações para a instalação padrão:
1. Procure esta linha na seção <head> do seu modelo:
Tenho destaque o nome de arquivo diferente em negrito vermelho para que você possa ver a mudança de relance.
2. Em seguida, localizar o código que você adicionou ao redor da seção <data:post.body/>, e adicione a linha em negrito vermelho, conforme mostrado abaixo:
" Tenha cuidado para adicionar esta no local correto, logo acima da
" Agora, visualizar o seu modelo. O "ligados" reticências agora deve ser substituído por um simples, e você deve ver o Continue a ler "link" aparecem abaixo do extrato. Você pode alterar o texto da ligação a qualquer coisa que você prefere (por exemplo: " Ler mais", " Full Post", etc.) Em seguida, avance para salvar o seu modelo."
" Ambos os plugins, portanto, ter opções idênticas que pode ser definida, adicionando ou alterando o código no seu modelo de blog."
" As opções podem ser configuradas dentro do javascript interno no chefe de secção que, por padrão aparece como este:"
" Aqui estão algumas das opções mais utilizadas, e como eles podem ser alterados. A lista completa de opções pode ser encontrada no plugin expansor para a página jQuery."
" Você pode adicionar ou alterar qualquer uma das linhas acima, como apropriado para suas necessidades."
" O Plugin para jQuery Expander foi criado por Karl Swedberg e está licenciado sob a dupla MIT e GPL licenças. "
" Se você prefere hospedar o script jQuery no seu próprio servidor, você pode baixar uma pasta zipada, incluindo todos os scripts a partir deste tutorial e Mínimos de um modelo básico no qual essa função foi adicionada para fins de demonstração ou testes. Como no caso do original Expander Plugin e jQuery ficheiro, estas são fornecidas sob a licença GPL."
" Download Elegant Blogger Post Resumos Arquivos"
" Espero que você encontrou esse tutorial para ser uma solução útil e elegante para a criação e uso de resumos de postagem para o seu modelo do Blogger. "
Muitos usuários do Blogger adoptaram Selectiva Ramani's posts expansível hack ou uma alternativa semelhante. No entanto, tenho encontrado estes a ser um pouco complicado: eles exigem a edição manual de cada post ou causar outros problemas irritantes. Em minha busca por uma alternativa elegante e menos pesado, eu descobri uma solução quase perfeita: o jQuery Expander Plugin por Karl Swedberg. "
" Integrando o plugin jQuery Expander para o Blogger oferece muitas opções úteis e recursos:
- " Ele pode ser adicionado facilmente em apenas dois passos!
- O comprimento (e outras opções) de trechos é completamente personalizável dentro do modelo de blog (não há necessidade de editar arquivos JavaScript!)
- Poderíamos optar por ampliar postos na mesma página (com uma transição suave) ou adicionar um "leia post completo" link para a página do artigo em vez disso.
- Tags HTML e palavras completas são preservados (ao contrário de muitas formas de trechos Wordpress)
- Não há exigência de marcas adicionais ou edição de mensagens: ele funciona imediatamente após a instalação!
- É possível utilizar diferentes comprimentos de extratos para uso em layouts estilo magazine (na verdade estou trabalhando em um projeto como este agora ...)"
" Instalação"
" Dependendo do estilo de resumos de postagem você prefere para mostrar, o método de instalação será um pouco diferente.Vou começar com uma explicação padrão que irá resumir mensagens com um link para expandir na mesma página (isto requer apenas duas etapas). Em seguida, podemos fazer duas pequenas alterações que impedem a expansão e adicionar um link para a página de postagem.
Finalmente eu vou explicar como você pode alterar algumas opções para extratos que podem ser aplicadas a ambos os métodos.
Para qualquer função que você preferir, a instalação é simples eo resultado será resumos post elegante para o seu Blogger Powered blog:)"
" Método 1: resumos de postagem expansíveis"
Este é o método mais simples para adicionar funcionalidade trecho de seu blogger blog powered!
Em primeiro lugar, vá para Layout> Editar HTML no seu painel do Blogger e marque a caixa " expandir modelos de widgets" caixa.
Em seguida, encontrará o fechamento
</ head> tag no seu modelo de blog, e cole o seguinte seção de código imediatamente antes que: <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$ (document). ready (function () (
$ ( 'trecho'.). expansor ((
slicePoint: 280, / / default é 100
expandText:'[...]', / default / é 'leia mais ...'
});
});
</ script>" Em seguida, encontrar essa seção do código (ou similar) em seu modelo:"
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <! - clear for photos floats ->
</ div>Se você não consegue encontrar facilmente esta seção, procure a seguinte tag usando a função de busca do seu navegador:
<data:post.body/>Você precisa de realçar este e qualquer código circundante, como neste screenshot:
" Substitua essa seção do código /\
com o seguinte comando: \/ "
<b:if cond='data:blog.pageType != "item"'>
post-body class='excerpt <div entry-content'>
<data:post.body/>
<div style='clear: both;'/> <! - clear for photos floats ->
</ div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <! - clear for photos floats ->
</ div>
</ b: if>" Agora, visualizar o seu modelo. Agora você deve notar que os lugares em sua home page foram resumidos e apresentam uma elipse, no ponto de truncamento que (uma vez visto na página ao vivo) é um link para expandir / truncar o post:"
" Trechos Método 2: com um link para a página da postagem"
" Minha preferência pessoal é para mostrar apenas um excerto de mensagens com um link para o artigo completo. Isso requer apenas duas pequenas alterações para a instalação padrão:
- Usar um plugin jQuery ligeiramente diferentes (alterar o URL)
- Adicionar um Continue a ler "link" abaixo os trechos
1. Procure esta linha na seção <head> do seu modelo:
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/> " E substituí-lo desta forma:"
<script language http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery = 'javascript' src = '.extractor.js"Type =" text / javascript '/>Tenho destaque o nome de arquivo diferente em negrito vermelho para que você possa ver a mudança de relance.
2. Em seguida, localizar o código que você adicionou ao redor da seção <data:post.body/>, e adicione a linha em negrito vermelho, conforme mostrado abaixo:
<b:if cond='data:blog.pageType != "item"'>
post-body class='excerpt <div entry-content'>
<data:post.body/>
<div style='clear: both;'/> <! - clear for photos floats ->
</ div>
<a expr:href="data:post.url"> Continue Reading </ a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <! - clear for photos floats ->
</ div>
</ b: if>" Tenha cuidado para adicionar esta no local correto, logo acima da
<b:else/> sim, caso contrário ele não será exibido!"" Agora, visualizar o seu modelo. O "ligados" reticências agora deve ser substituído por um simples, e você deve ver o Continue a ler "link" aparecem abaixo do extrato. Você pode alterar o texto da ligação a qualquer coisa que você prefere (por exemplo: " Ler mais", " Full Post", etc.) Em seguida, avance para salvar o seu modelo."
" Resumo Post Opções"
" O jQuery plugins utilizados para estes métodos são quase idênticos, exceto que os extractos de "versão" tem o link "mais" removido."" Ambos os plugins, portanto, ter opções idênticas que pode ser definida, adicionando ou alterando o código no seu modelo de blog."
" As opções podem ser configuradas dentro do javascript interno no chefe de secção que, por padrão aparece como este:"
<script type='text/javascript'>
$ (document). ready (function () (
$ ( 'trecho'.). expansor ((
slicePoint: 280, / / default é 100
expandText:'[...]', / default / é 'leia mais ...'
});
});
</ script>
" Aqui estão algumas das opções mais utilizadas, e como eles podem ser alterados. A lista completa de opções pode ser encontrada no plugin expansor para a página jQuery."
<script type='text/javascript'>
$ (document). ready (function () (
$ ( 'trecho'.). expansor ((
slicePoint: 280, / / mudar isso para o tamanho em caracteres que você gostaria de mostrar.
/ Tags HTML incluídos nesta contagem.
/ / As funções folllowing aplicar ao escolher a versão pós expansão
expandEffect: "fadeIn ', / / o efeito usado para exibir o texto ampliado.
expandText:'[...]', / / Alterar a partir de uma elipse para "Leia Mais", por exemplo
userCollapseText:'[^]' / / Este é o ícone usado para truncar o cargo depois de ter sido ampliado.
});
});
</ script>
" Você pode adicionar ou alterar qualquer uma das linhas acima, como apropriado para suas necessidades."
" Licença, créditos e Download"
" Essa função usa o biblioteca JavaScript jQuery e plugin jQuery Expander para as funções de base. "" O Plugin para jQuery Expander foi criado por Karl Swedberg e está licenciado sob a dupla MIT e GPL licenças. "
" Se você prefere hospedar o script jQuery no seu próprio servidor, você pode baixar uma pasta zipada, incluindo todos os scripts a partir deste tutorial e Mínimos de um modelo básico no qual essa função foi adicionada para fins de demonstração ou testes. Como no caso do original Expander Plugin e jQuery ficheiro, estas são fornecidas sob a licença GPL."
" Download Elegant Blogger Post Resumos Arquivos"
" Espero que você encontrou esse tutorial para ser uma solução útil e elegante para a criação e uso de resumos de postagem para o seu modelo do Blogger. "
...
