Feeds RSS
Feeds RSS

Arrumando templates para o novo blogger (blogspot)

19 comentários
Esou passando por aqui hoje para postar alguns lays free que eu já tinha para blogspot e que agora eu passei de html para xml (novo blogger).
E fiz um novo tutorial de como personalizar a caixa de comentários do seu blogspot.
E gostaria de deixar aqui uma dica para meus visitantes e estudantes, que se estiverem afim de um estágio de trabalho:
http://www.ciee.org.br que é Centro de Integração Empresa Escola.
Meus estagio consegui através deste orgão, mas para quem não é estudante e gostaria também de estar se inscrevendo em um site confiavel e gratuito é este empregasaopaulo.sp.gov.br, vários conhecidos que estavam desempregados a muito tempo conseguiram emprego neste site que também é do governo.É isso ai pessoal apreveitem as dicas.

2 colunas

download modelo 1


2 colunas

download modelo 2


Modelo 2 colunas

download modelo 3


2 colunas

download modelo 4


2 colunas

download modelo 5


2 colunas

download modelo 6



Ganhei este selo da Cristal Obrigada vium foi muito fofo da sua parte. Agora esta ai e abaixo as indicadas, e como a Cristal escreveu e pelo que entendi ao enviar o email terá uma caricatura super engraça. Confiram vocês porque eu vou conferir, valeuuuuu!!!! Blog da Cristal 1 - Exiba a imagem do selo “Olha Que Blog Maneiro” Que vc acabou de ganhar!!! 2 - Poste o link do blog que te indicou.(muito importante!!!) 3 - Indique 10 blogs de sua preferência. 4 - Avise seus indicados. 5 - Publique as regras. 6 - Confira se os blogs indicados repassaram o selo e as regras. 7 - Envie sua foto ou de um(a) amigo(a) para olhaquemaneiro@gmail.com juntamente com os 10 links dos blogs indicados para vericação. Caso os blogs tenham repassado o selo e as regras corretamente, dentro de alguns dias você receberá 1 caricatura em P&B.

Personalizando a caixa de comentarios:

39 comentários
Como modificar a area de seus comentários e deixa-lo personalizada.
Bem, vi esse estilo de comentários no wordpress, dai entrando e saindo de blogs, vi este estilo também no blogspot.
Comecei então a procurar um tutorial que tornasse possivel eu usar este tipi de comentários, e achei, e agora vou traduzir aqui para vocês.
Tutorial retirado da página blogspottutorial:

Como póde ver na imagem a caixa de comentários está dentro de uma imagem personalizada.

Clique aqui para ampliar

Lembre-se que cada código no modelo é diferente um outro, mas que poderiam ser os mesmos.
Se este tutorial possui diferentes códigos do seu template (modelo), sinto muito,eu acabei de dizer "Lamento" e isso significa que você não está com sorte. Como um exemplo, eu uso os códigos do modelo mínimo (simples).

Vamos ao tutorial:
1. Não esqueça de fazer cópia do seu lay (Clique em Baixar modelo completo é importante):
2. Clique em Layout:
3. Clique em editar HTML:
4.Clique em Expandir Modelo Widget :
Obs. Quando não dá certo com o modedo expandido eu costumo usar os códigos do modelo que baixei, abrindo eum editor de html, ou para quen não tem o bloco de notas.

Procure por esse códigos no css do seu modelo: ( use Ctrl + F) localiza os arquivos mais rápido.


#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}


Sustitua por esses novos códigos abaixo (codigos originais):


#comments h4 {
margin:0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000;
}
#bg_commentblock {
width: 548px; /*tamanho da area externa dos comentarios*/
background: #ffffff;
float: left;
padding:20px;
margin:0 0 10px 0;
border:1px solid #C0C0C0;
}
#commentblock {
width: 510px; /*tamanho da area externa dos comentarios*/
background: #E8E8E8;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333;
}
#commentblock ol {
list-style-type: square;
margin: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}
.commentdate {
font-size: 12px;
padding-left: 0px;
}
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}
.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}
.commentinfo{
clear: both;
}
.commenttext {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;/*tamanho da area de comentarios*/
background: #FFFFFF url(http://lh4.ggpht.com/kangrohman/SMZb-VqQlYI/AAAAAAAAAOM/RpT6fNN3M88/commentgray_thumb%5B1%5D.gif?imgmax=800) no-repeat top left;
} /*cor do fundo combindo com cor da imagem*/
.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(http://lh4.ggpht.com/kangrohman/SMZb-VqQlYI/AAAAAAAAAOM/RpT6fNN3M88/commentgray_thumb%5B1%5D.gif?imgmax=800) no-repeat top left;
}

Novamente procure agora por este códigos:
(preste a atenção as vezes póde achar códigos semelhantes)


 

<b:includable id='comments' var='post'> 
<div class='comments' id='comments'> 
<a name='comments'/> 
<b:if cond='data:post.allowComments'> 
<h4> 
<b:if cond='data:post.numComments == 1'> 
          1<data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
          &#160;
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
        </span>
      </b:if>

      <dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>

        <b:if cond='data:post.embedCommentForm'>
          <b:include data='post' name='comment-form'/>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
    </b:if>

 

Substitua por esses novos códigos abaixo:

 

<b:includable id='comments' var='post'>

  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

<div id='bg_commentblock'>

<h4>

Comments :

   </h4>

   <div id='commentblock'><!--commentblock-->

<b:if cond='data:post.numComments == 1'>1
        <b:else/>
           <strong><data:post.numComments/> <data:commentLabelPlural/>  to &#8220; <data:post.title/> &#8221;</strong>
        </b:if>

      <dl class='commentlist'>
        <b:loop values='data:post.comments' var='comment'>
          <span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt> on &#160;<dd class='comment-footer' style='display:inline; margin:0px'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd></span>
          <dd class='commenttext'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
        </b:loop>
      </dl>
      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>
    </div><!--end commentblock-->

</div>
    </b:if>

 



Salve o templates


Fim, é só testar



Você tem como base o css e se entender um pouco salve apartir dai da para mudar a largura e a imagem:

Aprendeu aqui credite:

Paginação no blogger:

24 comentários
Paginação no blogger:
Este é um script que vai possibilitar a numeração dos seus posts, ao invés de ficar com o next, no caso passará a ser numerado.

: Pagina do autor do script:



Vamos lá:
1- Cole estes códigos no seu CSS antes </b:skin>:
Estes codigos no css permitirão então a personalização das cores onde aparecerá as paginações dando portanto estilo.
.showpageArea a {text-decoration:underline;}

.showpageNum a {
background:#ADADAD;
text-decoration:none;
border: 1px solid #595959;
margin:0 3px;
padding:3px;}

.showpageNum a:hover {
border: 1px solid #595959;
background-color:#FFFFFF;}

.showpagePoint {
color:#F997B5;
text-decoration:none;
border: 1px solid #000;
background: #D4D4D4;
margin:0 3px;
padding:3px;}

.showpageOf {
background: #DADADA;
border: 1px solid #808080;
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;}

.showpage a {
background: #D4D4D4;
text-decoration:none;
border: 1px solid #000;
padding:3px;}

.showpage a:hover {text-decoration:none;}

.showpageNum a:link,
.showpage a:link {
text-decoration:none; color:#FAA0BB;
}
.showpagetotal{
border: 1px solid #000;
background-color: #B92C02;
color: #000000;
font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpagetotal :hover {
font-size:11px;
border: 1px solid #000;
color: #000000;
background-color: #C5E0FE;
}


2º parte é o seguinte, irá em Adicionar um Gadget e copiar e colar o script abaixo:

Download aqui do script:



3º parte vai arrastar a gadget que criou e colocou o script arrastar para area de posts conforme imagens abaixo;




Na linha 5, você pode precisar alterar as ". Com" a fim de reflectir o seu domínio extention se você usar um domínio personalizado.

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==". com/ "; var isFirstPage = thisUrl.substring (thisUrl.length-5, thisUrl.length )==". com.br / ";

Esta instalação padrão deve funcionar bem para quem hospeda no Blogspot,com ou sem domínio, mas você terá que alterar este ponto se o seu domínio personalizado termine em. Co.uk ou. Info por exemplo.

Nas linhas 19 e 20, você pode alterar esses valores a alterar a forma como muitos lugares são exibidos em cada página, e quantas ligações serão visíveis ao mesmo tempo.

O var pageCount = 1; secção define o número de postagens exibidas em cada página,(IDEAL UMA POSTAGEM POR PÁGINA)
enquanto var displayPageNum = 5; define o número de links que são exibidos (ex.: 1 - 2 - 3 - 4 - 5) abaixo da seção lugares.
Quando você adiciona este código JavaScript e fez todas as alterações nescessarias para as suas necessidades, salve o seu modelo e abra seu blog em seu navegador.
Agora você deve ver a paginação links aparecem abaixo dos seus principais lugares seção, e também nos rótulos e Arquivo páginas.

Semelhança entre Maysa e Amy

29 comentários
Quem acompanhou o seriado Maysa Figueira Monjardim, mais conhecida como Maysa Matarazzo ou simplesmente Maysa,O uso de álcool e moderadores de apetite deixavam seu temperamento instável. Foram conhecidos os escândalos que promoveu em hotéis.
bem assisti a alguns capítulos e achei bem interessante a semelhança dela com a cantora inglesa Amy Jade Winehouse com os seus problemas com drogas e álcool têm sido noticiados pelos meios de comunicação ao redor do mundo em 2008.
Bem a Maysa já morreu e quanto Amy Winehouse neste ano de 2009 garantiu estar se recuperando. Nesse ano afirmou pretender lançar um album cujo nome será Stronger Than Me; de namorado novo, declarou-se muito feliz e confirmou ter largado as drogas.

Categoria e nova gandget no blogspot

5 comentários
Colocando categoria no blogspot:



è simples ao criar um novo post, abaixo dele tem um espaço escrito Opções de postagem Marcadores para esta postagem:
exemplo, patinetes, férias, outono : Ali você escreve as palavras chave do seu post criando assim categoria (marcador, labels).
veja na imagem abaixo:



Você póde ir em Adicionar um Gadget e optar por marcadores que ira aparecer na lateral do seu blog (sidebar).
Dica: Se você ao editar a categoria der apenas um nome diferente para cada postagem, você terá então uma lista das suas postagens ou página se preferir na lateral do seu blogger, tendo inclusive a opção de organiza-las em ordem alfabética, dando titulo desejado e tudo mas...

Como criar uma nova Gadget:

Como criar uma nova Gadget:
Bem pessoal vim compartilhar para mim ao menos uma novidade:
Estava lá eu criando um novo lay, tema doll, com uma janelinha lá emcima para colocar um banner 88x31 de destaque:
Vi então a necessidade de aprender a cria-lo, tão fácil, observei os códigos do meu próprio lay e lá estavam os códigos:

Os códigos do css é este abaixo:


/*--------------DESTAQUE----------------*/
#header2-banner {
width: 300px;
float: left;
margin-left: 200px;
padding-top: 125px;
}


Os códigos para a nova gandget é este abaixo:


<!-- --------id da nova gandget------- -->
<div id='header2-banner'>
<b:section class='header2-banner' id='header2-banner'/>
</div>


Prontinho é só slavar e vai estar lá a nova gandget onde poderá adicionar qualquer elemento, no meu caso eu fiz especificamente apenas para estar adicionando um banner de 88x31.

Paz e guerra:

13 comentários
Fui indicada para o meme de 2009 pela fofa da Luciane, muito obrigada viu!
Então vou colocar aqui alguns desejos, mas acreditem são muitos, muitos mesmo, rsrsrsrs...
Regras:

1 - Linkar a pessoa que te indicou.
2 - Escrever as regras do meme em seu blog.
3 - Contar 9 coisas que deseja este ano.
4 - Indique mais 9 pessoas e coloque os links no final do post.
5 - Deixe a pessoa saber que você o indicou, deixando um comentário para ela.

1. Ler mais.
2. Comprar um carro.
3. Passear muito, conhecer lugares.
4. Praticar um esporte.
5. Celular novo preciso!
6. Visitar parentes e amigos.
7. Dedicar-me mais aos estudos.
8. Ir mais vezes ao cinema.
9. Ler a bíblia inteira.




Nestas férias temporararias de fim de ano assisti a muita televisão, gente e que bagunça anda o mundo.
Hoje então resolvi escrever sobre um assunto que é parte constante nos noticiários, e isto incomoda-me, quero compartilhar então com meus visitantes.
Não surpreendam-se, sou assim mesmo do rosa ao negro, rsrsrsrsrsr, o fato é, gosto de escrever embora não saibe fazer isso muito bem, mas... vale a intenção, não é mesmo?
Podemos considera a nossa própria vida pelo que vivemos, temos ou fazemos?
Será que é possivel realmente sermos assim, egoistas de próposito ou sem propósito.
A vida taí, uma dádiva do criador, se moro em um país que não há guerras, porque iria preocupar-me com aqueles que estão em guerras, isso é real?
Infelizmente é assim mesmo, lemos em noticiários sobre as guerras sofremos até mesmo enquanto dura a reportagem , ou a leitura, mas tal fato não fica guardado em nossa mente, ao ponto de querermos ir lá fazer justiça, lamentamos, comentamos, o fato é, não está em nossas mãos resolver esta questão, enquanto os que estão no poder não aprenderem a amar, e entenderem o verdadeiro propósito da vida, este dado pelo criador de tudo e todas as coisas.
Até mesmo porque não fomos criados para nos matarmos dessa maneira egoista e sem próposito, se o presidente i quer brigar com o presidente p, então que partam para uma arena e briguem lá até morrerem, sem levar uma sociedade inteira a um caos da qual eles separaram-se para proteger-se. E se aquelas crianças, idosos e mulheres fossem as suas? apludiriam ou protegeriam as suas familias, e não é o presidente como um pai de uma grande familia? e o que faz um pai, por acaso não é proteger a sua familia, se precisar dando a própria vida em prol de seus filhos?
É... realmente as guerras chocam-me, gostaria que não fossem real, e elas estão ai, distantes e ao mesmo tempo presentes, nas esquinas de nossas ruas, em frente ao nosso portão ou até mesmo dentro de casa, e é real.

E indicarei as novas pessoas para o meme nos comentes e depois coloco os nomes aqui.