Postagens Recentes

31 de ago de 2011

Template Vídeo Tube

3 comentários:
Este template é ideal para quem tem blog de vídeos ou usa muitos vídeos em suas postagens.

Ele possui inúmeros hacks e é baseado no template Simple. As postagens são resumidas na página inicial, mas percebam que é só clicar que os vídeos tocam. Sem muitas gambiarras, esse template é fácil de implementar e de usar.  Ele possui "postagens populares" em forma de slide, menu de navegação dentro dos posts, menu com efeito neon, posts no footer com scroll, três colunas na parte superior...


As imagens nos posts devem ficar centralizadas e acima de qualquer rescrita, ou não dará certo.


ATENÇÃO:


Para colocar os vídeos do You Tube, basta seguir a imagem.


Agora vá ao editor de texto de seu Blogger (onde você escreve)

Clique em HTML e cole o código.

O código deverá vir assim:

<iframe width="560" height="345" src="http://www.youtube.com/embed/smyyQfsPhBs" frameborder="0" allowfullscreen></iframe>

Apague a parte que está em azul. Escreva o que quiser no post e publique.

O vídeo estará pequeno, mas não se importe, ele está configurado para fazer a modificação no tamanho ao ser publicado.



Para habilitar o widget Postagens  populares.

Copie o código abaixo e cole no HTML/Javascript



<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin:32px -15px 0px 0;
padding:0px 0 13px 0;
height:150px;
}

#PopularPosts1 ul {
width:460px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#PopularPosts1 li {
width:450px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:150px;
overflow: hidden;
background: url(http://blogblog.com/1kt/travel/bg_black_50.png) repeat;
}

#PopularPosts1 li .item-title {
    font-size:18px;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
font-family: normal normal 12px Calibri;
text-decoration:none;
color:#cc0000;
font-size:20px;
height:20px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#2D2E30;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:12px;
color:#fff;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#PopularPosts1 img{
width: 150px; height: 140px;
margin: 10px 0 0 8px;
}

.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

a img {
    border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>


Para habilitar o menu neon


Procure por:

 <div class='menu'>


E faça as modificações como se pede, colocando nos locais indicados os endereços que queira linkar



Para deixar os arquivos em forma de menu suspenso, clique sobre o widget e depois selecione




Colocar o link de navegação do blog dentro dos posts

2 comentários:



Há muito que penso em deixar o menu de navegação do blog dentro do post, entre outras coisinhas que estou preparando para vocês, aguardem. Acho até estranho o menu lá, embaixo de tudo, depois dos comentários, fica um pouco sem nexo. Mas vamos então implementar logo esse hack.



  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

A primeira coisa que vamos fazer será dar o estilo e depois esconder o outro menu nas páginas internas.










Vá até o Modelo de seu blog, clique em Editar modelo




Agora procure por:

]]></b:skin>  



 
Substitua então pelo código abaixo:


#menu-navegar{width:100%;  margin: 30px 0 90px 0;}
]]></b:skin>

Salve.



Agora clique em "Expandir modelos de widgets"





Procure pelo seguinte trecho:

<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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>




Troque-o pelo código abaixo:

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>


Salve.

Agora vamos implementar o menu dentro dos posts.

Para que o menu fique na parte inferior do post, procure por:

 <div class='post-footer'>

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



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='menu-navegar'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='http://4.bp.blogspot.com/-wY9AwqHbiRI/TlUpuVjr55I/AAAAAAAAAsU/GBF18N89LCk/s1600/back.png' style='float: left; padding: 10px 0;'/></a>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a expr:href='data:blog.homepageUrl'>
<img src='http://4.bp.blogspot.com/-8IT27jncY8g/TlUpvImFeUI/AAAAAAAAAsg/3vakIjXpWW4/s1600/home.png' style='  position:relative;float:right; left:-50%;'/></a><b:else/>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
<img src='http://3.bp.blogspot.com/-ETOV-I90TaU/TlUpwW84Z0I/AAAAAAAAAsw/x5K8VMt4kJw/s1600/next.png' style='float: right; padding: 10px 0;'/></a>
</b:if>

</div>
</b:if></b:if></b:if>



Para trocar as imagens, troque os códigos coloridos pelos endereços de suas imagens

Vermelho----------------------------------Seta a esquerda
Verde--------------------------------------Casinha
Azul--------------------------------------- Seta a direita



Se prefere o menu na parte superior do post, cole o último código acima de: 

 <div class='post-header'>

Nova interface do Blogger a disposição de todos

7 comentários:


A nova interface do Blogger já está disponível à todos. Basta para isso ao entrar no painel do Blogger, clicar em "Experimentar a interface atualizada do Blogger", se não gostar, tem como reverter. Eu já estou usando, e gosto bastante. Claro que você poderá detestar, mas eu estou achando bem mais prática, limpa, enfim, gosto de mudanças.

Agora para ir até o HTML do Blogger, ficou mais fácil também. Ax clicar abrirá uma janela a parte, mais ampla. Um chuchu !

Assim ficou bem mais prático.

 
Agora o HTML do Blogger abre em uma janela a parte. Gostei muito.



E se não gostou, no painel basta desfazer e voltar ao antigo modelo.



Colocar caixa de comentários do Facebook na página inicial do Blogger

15 comentários:

Essa dica é para colocar a caixa de comentários do Facebook no Blogger na página inicial, como neste exemplo. Assim, vc posta de seu próprio blog, sem necessidade de entrar no Facebook

 A primeira coisa a fazer é entrar neste endereço abaixo.


http://developers.facebook.com/docs/plugins/


Ao entrar, clique em "Comments"



Preencha o pequeno formulário com o endereço completo de seu blog, depois clique em "Get code"



Copie o código que o Face te fornecerá.
 Agora vá até o Layout de seu blog.




Clique em Adicionar um Gadget



Ao abrir, clique em  HTML/Javascript, e depois, cole o código. Arraste o widget para o local que vc quer que apareça a caixa de comentários.




Como a caixa de comentários irá aumentar de tamanho a medida que forem comentando, você pode colca-la dentro de uma caixa com scroll. Para isso, copie o código avbaixo, cole no HTML/Javascript e coloque o código do Facebook no local indicado.


<div style="padding: 3px;
overflow: auto; color: #000;
position: relative;
height: 160px;">

COLE AQUI O CÓDIGO DO FACEBOOK
</div>

30 de ago de 2011

Esconder/Mostras colunas no novo Blogger com um clique e efeito JQuery

Nenhum comentário:

Eu já havia ensinado esse hack para o antigo modelo do Blogger, o Mínima, agora, trago a dica para ser implementada no novo Blogger, no template Simple.  Este código permite esconde as colunas inteiras da sidebar, escondendo todos os elementos. Com isso, é possível um carregamento mais rápido da página além de deixar o template mais leve, te possibilita brincar com o layout dando um efeito interessante.


Vá até o Modelo de seu blog, clique em Editar modelo
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011



Agora procure por:

]]></b:skin>  
E troque por este código abaixo



 #sidebararea-wrapper, #sidebararea1-wrapper, #sidebararea2-wrapper{width: 100%; background: #ccc;padding: 12px 5px 12px 5px; margin: 12px 4px 6px 4px;border: 1px groove #ccc;-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#sidebararea-wrapper a, #sidebararea1-wrapper a, #sidebararea2-wrapper a {color: #000; text-shadow: -1px -1px white, 1px 1px #333; font-size: 19px;}
]]></b:skin>
<script src='http://sites.google.com/site/templateseacessorioselke/expande/1expande.js' type='text/javascript'/>


Salve.


Agora clique em "Expandir modelos de widget"


SE SUA COLUNA FICA A DIREITA PROCURE POR :

<div class='column-right-outer'>
        <div class='column-right-inner'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='2'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>


E troque por:



<div class='column-right-inner'>
<div id='sidebararea-wrapper'>
<div style='text-align:center;'>
      <a href='javascript:sidebararea.slideit()'>Sidebar [+ / - ]</a>
    </div>
    <div id='sidebararea'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='2'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
<script type='text/javascript'>var sidebararea=new animatedcollapse(&quot;sidebararea&quot;, 500, false)</script>
</div>
</div>
        </div>
         </div>



SE A SUA COLUNA FICA A ESQUERDA PROCURE POR:

<div class='column-left-outer'>
        <div class='column-left-inner'>
          <aside>
          <macro:include id='main-column-left-sections' name='sections'>
            <macro:param default='0' name='num' value='1'/>
            <macro:param default='sidebar-left' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>


E troque por:


<div class='column-left-outer'>
        <div class='column-left-inner'>
<div id='sidebararea1-wrapper'>
<div style='text-align:center;'>
      <a href='javascript:sidebararea1.slideit()'>Sidebar [+ / - ]</a>
    </div>
    <div id='sidebararea1'>
          <aside>
          <macro:include id='main-column-left-sections' name='sections'>
            <macro:param default='0' name='num' value='1'/>
            <macro:param default='sidebar-left' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
<script type='text/javascript'>var sidebararea1=new animatedcollapse(&quot;sidebararea1&quot;, 500, false)</script>
</div>
</div>
        </div>

28 de ago de 2011

Media player em seu blog que só toca ao ser clicado

13 comentários:
Existe uma grande polêmica a respeito de colocar ou não música em seu blog. Vamos lá: o blog é seu, a música é sua mas quem vai escutar será o visitante. E, será que ele quer ouvir ? Será o mesmo gosto musical ? Será que ele poderá acessar seu blog do serviço se tiver música ? Bem, fica difícil. Por isso existe a opção de seu visitante só ouvir a música ao clicar no play, assim transtornosr serão evitados. Para isso, copie o código abaixo e cole no HTML/Javascript em seu blog. Neste código já vem o endereço da rádio Kiss FM, minha rádio favorita, onde posso escutar rock de qualidade. Mas vai saber, que tipo de música você gosta, por isso, basta apagar o código que está na cor vermelha e colocar no lugar o endereço da propriedade de sua rádio favorita. Para mudar as proporções, troque o código em azul.



  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Clique em Adicionar um Gadget


Ao abrir, clique em  HTML/Javascript

Cole então o código fazendo as modificações necessárias.


<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="180" height="46">
<param name="autoplay" value="false" />
<param name="controller" value="true" />
<embed type="application/x-mplayer2" height="260" width="280" autostart="false" loop="false"
src= "http://www.crosshost.com.br/cbs/kiss_/radio2.asx">
</embed></object>

25 de ago de 2011

Colocar links externos no menu de páginas do Blogger

7 comentários:

Sim, é possível colocar links externos no menu de páginas do Blogger, e muito facilmente. Veja as imagens.

Vá até "Páginas" em seu blog como mostra a imagem abaixo. (Para isso, basta entrar em seu blog, pela parte de "dentro")


Clique em Páginas, depois em nova página. Ao abrir a janela, clique em Endereço da Web




Como mostra a imagem, escreva o nome do quer linkar e depois o endereço. Salve e pronto.

24 de ago de 2011

Template Teck

2 comentários:
Template em 2 colunas, slide com as últimas postagens, posts resumidos, widget com as postagens mais vistas na horizontal.





Habilitar slide

Depois do template instalado, vá até "Layout" Clique em editar, no HTML/Javascript como mostra a imagem, e cole este código abaixo, colocando o endereço de seu blog no local indicado..




<script type="text/javascript">
 // 7 variables to control behavior
 var Book_Image_Width    =450;
 var Book_Image_Height   =350;
 var Book_Border         =true;
 var Book_Border_Color   ="gray";
 var Book_Speed          =10;
 var Book_NextPage_Delay =1500; //1 second=1000
 var Book_Vertical_Turn  =0;
 // variables for content
 var random_posts        = true; // random posts
 var numposts_gal        = 10;   // number of posts
 </script>
 <script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galeryposts-bookflip.js" type="text/javascript"></script>
 <script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/bookflip.min.js" type="text/javascript"></script>
 <div id="Book" style="position:relative; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);">
 <img src="http://i1133.photobucket.com/albums/m596/abu-farhan/bookflip/placeholder.gif" width="450" height="350" />

 </div>
 <script src="ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
 <script type="text/javascript">
 ImageBook();
 </script>



Habilitar o menu

Procure por:

<ul class='pro16'>

E abaixo dele, coloque os endereços que quiser onde se pede

Trocar "Postragens mais antigas" por imagens no novo Blogger

5 comentários:

Você pode mudar o menu de navegação do Blogger, que é bem sem-gracinha. Ao invés da inscrição "postagens mais antigas", coloque setas e deixe seu blog mais profissional.



Vá até o Modelo de seu blog, clique em Editar modelo
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Clique em "Expandir modelos de widget




Procure por:

<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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>


E substitua por:


<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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src="http://4.bp.blogspot.com/-wY9AwqHbiRI/TlUpuVjr55I/AAAAAAAAAsU/GBF18N89LCk/s1600/back.png"/></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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src="http://3.bp.blogspot.com/-ETOV-I90TaU/TlUpwW84Z0I/AAAAAAAAAsw/x5K8VMt4kJw/s1600/next.png"/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://4.bp.blogspot.com/-8IT27jncY8g/TlUpvImFeUI/AAAAAAAAAsg/3vakIjXpWW4/s1600/home.png"/></a>

Acima, dentro do código, há trechos destacados com cores. São os códigos das imagens. Sequiser substituir, troque como mostra o índice:


Vermelho------------------Seta a esquerda
Amarelo-------------------Seta a direita
Azul------------------------Home

23 de ago de 2011

Template Scrap Alvo

6 comentários:
Template em 2 colunas, slide com as últimas atualizações, posts resumidos, posts relacionados, sidebar em forma de menu em abas.

















Habilitar menu social



Procure por:

<div id='menu-social'>

Template Terroso

5 comentários:
Template em 3 colunas, slide com as últimas atualizações, posts relacionados, sidebar em forma de menu accordion, postagens resumidas, sendo o primeiro post maior que os demais posts.
















Habilitar menu social


Procure pelo seguinte trecho:

<div class='menu-social'>


Coloque então  os endereços de suas páginas, como se pede no código um pouco abaixo


Habilitar slide


Para habilitar o slide, basta ir até o Layout e clicar em "Editar",  como mostra a imagem, copiar e colar este código abaixo e colocar o endereço de seu blog no local indicado.


<div id="slider">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->


<script src="ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

21 de ago de 2011

Background randômico no Blogger

3 comentários:


Você pode usar várias imagens de fundo em seu blog como fotos, backgrounds e wallpapers para que ele vá mudando enquanto seu visitante estiver em seu blog. Isso dá a seu blog uma aparência diferente.



  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Vá até o Modelo de seu blog, clique em Editar modelo
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Procure por este trecho abaixo:

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
  background: transparent $(body.background.gradient.tile) repeat scroll top left;
  _background-image: none;
}

.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;
  background: $(body.background);
  $(body.background.override)
}

.body-fauxcolumn-outer .cap-top .cap-left {
  width: 100%;
  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;
}

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}

.content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
  background-color: $(content.background.color);
}


Troque-o por este abaixo:

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
}

.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;
 
}

.body-fauxcolumn-outer .cap-top .cap-left {
  width: 100%;
}

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  margin-bottom: 1px;
}

.content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
  background: url(http://www.blogblog.com/1kt/transparent/white80.png) repeat;
}

Agora vamos implementar o hack. Procure por:

</body>

Acima dele cole este código abaixo:

<!-- Javascripts Do Not Touch -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
         $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                       $('#nav').stop().animate({'opacity':'0.2'},400);
                    else 
                        $('#nav').stop().animate({'opacity':'1'},400);
                });           
                $('#nav').hover(
                   function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'1'},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'0'},400);
                        }
                    }
                );
            });

        </script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
    // uncomment the 3 lines below to pull the images in random order
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    setInterval( "slideSwitch()", 5000 );
});
//]]>
</script>


Agora procure por:


</head>



E depois dele cole:

<!-- Background Slide Show -->
<div id='slideshow'>
<img alt='' class='active' src='ENDEREÇO DA IMAGEM 1'/>
<img alt='' src='ENDEREÇO DA IMAGEM 2'/>
<img alt='' src='ENDEREÇO DA IMAGEM 3'/>
<img alt='' src='ENDEREÇO DA IMAGEM 4'/>
<img alt='' src='ENDEREÇO DA IMAGEM 5'/>
</div>
<!-- Background Slide Show End -->


Agora procure:

]]></b:skin>


E cole antes dele o código abaixo:

/* SLider */
#slideshow {
position:relative;
z-index:-1;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
#slideshow img {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px;
}








Colocar data personalizada em todas as postagens do mesmo dia no novo Blogger

19 comentários:
 DEMO


O Blogger implementa muitos hacks mas não resolve antigos problemas. Uma pena. Se você faz mais de uma postagem por dia, o Blogger deixa a data apenas na última postagem do mesmo dia. Isso para determinados layouts personalizados pode ficar estranho, pode haver uma quebra na harmonia do blog. Para resolver isso, implemente estes códigos e tenha a data em todas as postagens do mesmo dia.


A primeira coisa a fazer é ir até configurações, clicar em Configurações, depois "Idioma e formatação" e ao abrir a janela, deixar a data configurada como mostra a imagem abaixo.



Salve !


Agora vá até o Modelo de seu blog, clique em Editar modelo
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011


Agora procure por:

]]></b:skin>  

 
Substitua então pelo código abaixo:(vermelho cor de fundo, azul tamanho da letra e amarelo cor da letra)



/*Data blog---------------------------------------------------------------------*/
.data-blog {  
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px 0 0 10px;
    background: none repeat scroll 0 0 #cc0000;
    display: block;
    top: 1px;
    bottom: 20px;
   padding: 20px 3px 10px 3px;
    float: left;
    margin-left: -85px;
    position: relative;
    width: 76px;
    height:50px;
}
.date-header {
color: #fff;
font-size: 14px;
padding: 2px 1px 2px 3px;
}

]]></b:skin>


Salve.


Procure por:

.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}


E apague.


Agora clique em "Expandir modelos de widget"


 Procure por:

<b:include data='post' name='post'/>

Acima dele você verá um código como esse :

  <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>


Troque-o por:

<div class='data-blog'>
<b:if cond='data:post.dateHeader'>
<script>var lastDate= &#39;<data:post.dateHeader/>&#39;;</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(lastDate);</script>
</h2>
</b:if>
 </div>
<div class='post-outer'>

Salve e se quiser, troque a cor de fundo, e o tamanho da letra.

Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube