Faça um clone do Yahoo! Pipe de artigos recentes por categoria para seu próprio uso, em seguida clique na opção Get as a Badge, conforme a imagem abaixo:
Os trechos destacados em vermelho, são aqueles que você deve adicionar ao código. O valor destacado em verde é a altura real do Gadget / Badge do Yahoo! Pipes que será exibido na sua página.<style type="text/css">.ybf,.yba,.ybad,.ybaa,.ybas,.gt,.gts{display:none;visibility: hidden;}</style><div style="position:relative;overflow:hidden;height:375px;"><script src="http://URL_ARQUIVO_JAVASCRIPT_HOSPEDADO_ANTERIORMENTE/listbadge.js">{"pipe_id":"XXXYYYZZZ","_btype":"list","pipe_params":{"urlinput1":"http:\/\/SEU_BLOG.blogspot.com","textinput1":"CATEGORIA", "numberinput1":"2"},"hideHeader":true}</script>
</div>
<b:if cond='data:blog.url != data:blog.homepageUrl'>OBS: Esta implementação pode tornar o carregamento da página inicial do seu blog mais lento, uma vez que depende do Yahoo! Pipes, um serviço externo que pode sofrer eventuais instabilidades.
<b:include name='nextprev'/>
</b:if>
Template Esqueleto Compulsivo Dark
Template Esqueleto Compulsivo Albino
©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)
Quando ainda estava trabalhando no desenvolvimento do template usado atualmente no UsuárioCompulsivo, comentei com a Ariane que depois de lançá-lo não pretendia fazer nenhuma alteração. Disse que preferia demorar e acertar todos os detalhes antes da estréia e não ficar fazendo "puxadinhos" depois... Ledo engano.
Seu jornal vem com todas as matérias completas na capa?Dito isto, vamos ao trabalho...
A Playboy, se fosse comprada pelas matérias, viria com os textos todos na capa?
Pois é, essa é a idéia de “capa”.
Caso encerrado.
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>O valor destacado em vermelho representa a quantidade de caracteres em formato Html, que será exibida nos resumos dos artigos.
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 280, // default is 100
expandEffect: 'fadeIn',
expandText: '[...]', // default is 'read more...'
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>
<div class='post-body entry-content'>Substitua tudo por:
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:blog.pageType != "item"'>OBS: Se você usa o direcionamento por seção nos anúncios do AdSense e veicula publicidade do sistema de afiliados HotWords, o código ficará um pouco diferente:
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<p><a expr:href='data:post.url'>Continue lendo...</a></p>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
<b:if cond='data:blog.pageType != "item"'>Depois de fazer as substituições apropriadas, conforme o seu caso, visualize para verificar se não houve nenhum erro. Em caso Positivo, salve e corra para o abraço!
<div class='excerpt post-body entry-content'>
<div id='HOTWordsTxt' name='HOTWordsTxt'><!-- google_ad_section_start --><data:post.body/>
<!-- google_ad_section_end --></div><div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<p><a expr:href='data:post.url'>Continue lendo...</a></p>
<b:else/>
<div class='post-body entry-content'>
<div id='HOTWordsTxt' name='HOTWordsTxt'><!-- google_ad_section_start --><data:post.body/>
<!-- google_ad_section_end --></div><div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
Template Compulsivo Posts Resumidos
©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)
http://sites.google.com/site/compulsivo/Home/Jquery.zip?attredirects=0&d=1Você deve utilizar apenas a parte destacada em vermelho, ignorando o restante da URL.
<script language='javascript' src='http://SEU_HOST/jquery-1.2.3.pack.js' type='text/javascript'/>Imagem: TheAlieness GiselaGiardino
<script language='javascript' src='http://SEU_HOST/jquery.extractor.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 280, // default is 100
expandEffect: 'fadeIn',
expandText: '[...]', // default is 'read more...'
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>
#blog-pager-newer-link {Substitua tudo, sem dó nem piedade pelo código compulsivo disponibilizado abaixo. Não esqueça de alterar os valores destacados em vermelho, conforme o seu caso (O destaque em azul é uma correção. Caso esteja com problemas verifique se essas linhas estão de acordo):
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
#blog-pager a {
text-decoration: none;
padding: .2em 1em;
margin: .2em;
color: #000000; /* Cor do texto */
background-color: #FFFFFF; /* Cor de fundo */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blog-pager a:hover {
color: #000000; /* Cor do texto */
background-color: #EEEEEE; /* Cor do destaque */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blog-pager {padding:5px;text-align:right;float:right}
#blog-pager-older-link, #blog-pager-newer-link {text-align:right}
<b:includable id='nextprev'>Agora vamos fazer da mesma forma que fizemos anteriormente nas definições CSS. Substituir todo o trecho localizado, pelo código compulsivo personalizado:
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='nextprev'>Visualize para testar, se não ocorrer nenhum erro pode salvar e correr para o abraço...
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' title='Página anterior'><<</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' title='Próxima página'>Seguinte >></a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>
<script type='text/javascript'>Em seguida, procure pelo trecho de código exibido abaixo em seu template. A parte em vermelho é o que você deve adicionar:
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>
<b:includable id='PeekABooPost' var='post'>Para testar visualize, se não ocorrer nenhum erro, salve e está pronto.
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>
Mínima Compulsivo Artigos Retráteis
©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)
.post-footer a:link, a:visited {color: #333;}OBS: Os valores destacados em azul são personalizáveis. Em vermelho são referências para ajudar a posicionar o código.
.post-footer a:hover {color: #c60; text-decoration: underline;}
.post-footer ul {font-size: 120%; list-style: none; padding: 0; margin: .2em 0 0 0;}
.post-footer ul li {margin: 0; padding: 0;}
#subscribe {width: 100%; font-size: 120%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 1em 0 1em; background: #eee; padding: 5px;}
#post-footer-container {width: 100%; clear: both; min-height:140px;}
#relacionados {width: 250px; float: left;}
#mais-opcoes {width: 140px; float: right; padding-left: 5px; border-left: 1px solid #ccc;}
/* Comments
----------------------------------------------- */
<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>
</head>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
</a>
</span>
</b:if>
<div class='post-footer-line post-footer-line-3'/>Substitua tudo pelo código compulsivo personalizado a seguir:
<b:if cond='data:blog.pageType == "item"'>
<h3>artigos relacionados</h3></b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
<div class='post-footer-line post-footer-line-3'/>Visualize para ter certeza que não há nenhum erro, salve e está pronto!
<b:if cond='data:blog.pageType == "item"'> <!-- Exibir apenas nos permalinks -->
<div id='subscribe'> <!-- Personalizar Mensagem no rodapé dos posts -->
Gostou deste artigo? Então <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='faça seu comentário'>deixe um comentário</a> e assine nosso <a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='RSS Feed'>RSS Feed</a>.
</div> <!-- fim subscribe -->
<div id='post-footer-container'> <!-- Container: Relacionados + Opcoes -->
<div id='relacionados'> <!-- Artigos Relacionados -->
<h3>Artigos Relacionados</h3>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div> <!-- fim relacionados -->
<div id='mais-opcoes'> <!-- Personalizar Mais Opções -->
<h3>Outras Opções</h3>
<b:if cond='data:post.emailPostUrl'><span class='item-action'><a expr:href='data:post.emailPostUrl' target='_blank' title='Enviar por email'>Encaminhar por email</a><br/></span></b:if>
<a href='javascript:;' onclick='window.print();return false' title='Imprimir esta página (texto e comentários)'>Imprimir esta página</a>
<p><a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar para o seu Twitter'>Enviar para o Twitter</a><br/>
<a expr:href='"http://ueba.com.br/NovoLink?url=" + data:post.url + "&titulo=" + data:post.title' target='_blank' title='Enviar para o Uêba'>Enviar para o Uêba</a><br/>
<a expr:href='"http://dihitt.com.br?botao=enviar&url=" + data:post.url + "&title=" + data:post.title' title='Recomendar este artigo no diHITT'>Recomendar no diHITT</a><br/>
<a expr:href='"http://rec6.via6.com/link.php?url=" + data:post.url + "&titulo=" + data:post.title' target='_blank' title='Recomendar este artigo no Rec6'>Recomendar no Rec6</a></p>
<a expr:href='data:blog.homepageUrl + "feeds/" + data:post.id + "/comments/default"' title='Feed dos comentários deste artigo'>Feed dos comentários</a>
</div><!-- fim Mais Opções -->
</div><!-- fim Container: Relacionados + Opcoes -->
</b:if><!-- fim Exibir apenas nos permalinks -->
Mínima Compulsivo Rodapé Customizado
©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)
<!-- JavaScript Menu em Abas -->Depois, adicione o seguinte trecho de código CSS ao seu template. Um local apropriado seria logo após o trecho referente a barra lateral, antes da linha /* Profile. Não esqueça de adequar o valor destacado em vermelho para bater com a largura da sua barra lateral:
<script src='http://URL_DO_ARQUIVO/tabber.js' type='text/javascript'/>
/*--------Tabber ---------------------------------*/Agora vamos adicionar o trecho de código HTML para incluir os elementos no menu em abas. Cole o código abaixo antes da linha <div id='sidebar-wrapper'>:
#tabsidebar-wrapper{width: 400px;float: right;border: 1px none #CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding: 0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}
<div id='tabsidebar-wrapper'>A configuração básica está pronta, visualize para certificar-se que está tudo certo e então salve.
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div><!-- Fim da tabsidebar-wrapper-->
Mínima Compulsivo Menu em Abas
©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)
/* FooterSubstitua tudo pelo seguinte código:
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
/* Footer em colunas by UsuárioCompulsivo
----------------------------------------------- */
#footer-wrapper{clear:both;width:100%;}
.footer-column{text-align:left;margin:0;width:48%;}
.footer-bottom{text-align:center;padding:10px;}
<div id='footer-wrapper'>E substitua tudo por:
<b:section class='footer' id='footer'/>
</div>
<div id='footer-wrapper'>Visualize para testar, se não ocorrer nenhum erro salve e seu rodapé em duas colunas estará pronto! Agora é só incluir os elementos de página que você desejar, nos novos locais disponíveis:
<div class='footer-column' style='float: left;'>
<b:section id='footer-left' preferred='yes'/>
</div>
<div class='footer-column' style='float: right;'>
<b:section id='footer-right' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div class='footer'>
<b:section id='footer-botom' preferred='yes'/>
</div>
</div> <!-- end footer-wrapper -->
P.S.: Aguardem, em breve o tutorial e o template pronto para download, com o rodapé em três colunas!©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)
background:url(http://URL_da_IMAGEM/ICONE.png) no-repeat;
