Fiz um template demorou um pouco por isto o  Valor é um pouco Elevado, porém muito em CONTA e com um Ótimo Custo Benefício...

O Template é sobre moda, textos, e etc... posso mudar o que voçê quizer... basta pedir...
O template é totalmente personalizado e com uma excelente indentidade visual...

Confiram:


O template contém:

- Banner ( Feito de maneira Exclusiva e super avançada  )
- Comentários Personalizados
- Menu Horizontal Personalizado
- Rodape das Postagens Exclusivo
- Titulo das Postagens Personalizado
- Data Personalizada
- Menu de Navegaçao Customizado
- Botão TOPO Exclusivo
- Fontes
- Cores
Preço :  R$ 39,90 Apenas + de Brinde 1 Capa para Facebook e 1 Background para Twitter.


Obrigado a TODAS e caso queira que eu mude algo é so pedir....
Bjos , que DEUS abençoe a TODOS.

Olá vou fazer um Tutorial pedido aqui no BLOGGER...
Vou mostrar como retirar a BARRA LATERAL do blogger no caso a SIDEBAR...
Como na IMAGEM abaixo confiram:



Então siga os PASSOS abaixo e consiguirá este resultado

1 - Vá em MODELO e em EDITAR HTML
2 - Procure por :  ]]></b:skin>

3 - Depois deste Código cole este código:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <style> #sidebar-wrapper{display:none} </style> </b:if>
 Traduzindo em miúdos, determinei que a sidebar não apareça (display:none) se a condição for a página principal do blog (homepage).

4 - Agora procure por BODY (logo no começo dos códigos CSS)  e acrescente o seguinte código:
body#layout  #sidebar-wrapper{<b>display:block;</b>margin:0px;float:right;}

Salve e torne a visitar a página 'Elementos de Página'. Veja que a sidebar reapareceu e ainda assim, não aparece na home do blogger, apenas nas páginas internas.
body#layout é o código para modificar a estrutura da página 'elementos de página',



 Pronto agora confira como FICOU... Duvidas é so DIZER COMENTEM.

Vou mostrar para voçês hoje como Colocar os MARCADORES e COMENTÁRIOS abaixo do título da Postagem do blog... é bem simples mais muda BASTANTE o Layout...

1 - Vai em Modelo e clique em EDITAR HTML

2 - Clique em CTRL + F e procure por:


<div class='post-header-line-1'/>  


Em baixo desse Código adicione o Código que voçê deseja mudar:


COMENTÁRIOS:

<span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if></b:if> </span>

MARCADORES: <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span>

NOME DO AUTOR DO BLOG: <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'><data:post.author/></span> </b:if> </span> Eu fiz o TESTE e deu certo... Abraços a TODOS Comentem....

 Olá a TODOS hoje vou mostrar a voçês como fazer o nome do Blog correr na ABA do NAVEGADOR...
Confiram:

1- Voçê vai em MODELO e em EDITAR HTML

2 - Voçê aperta CTRL + F e procura por  </head>  e cole este Código abaixo de </head> :

 

<script language="JavaScript"> var txt=" TÍTULO DO BLOG "; var espera=80; var refresco=null; function rotulo_title() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);} rotulo_title(); </script>

Onde esta escrito     TÍTULO DO BLOG  coloque o Nome do SEU BLOG
PRONTOO Bem simples neh?

Comentem....
Abraços a TODOS!

Olá galera olhe vou mostrar um Tutorial bem util... e muito procurado por todos os Blogs, vou mostrar como separar as Postagens em CAIXAR...
Confiram:

1 - Clique em Modelo e vá em EDITAR HTML

2 - Procure pelo seguinte Código:


.main-inner .column-center-outer { background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; }


3 - Assim que achar , APAGUE todo o Código e colo este no lugar:

.post-outer { margin: 4px 2px 10px; background:#fff; padding: 20px 10px; } 

Onde esta o 4px é o tamanho do ESPAÇO entre as Postagens... caso queria aumentar é so aumentar o número...
Comentem
Abraços a TODOS...

Olá  Galera.. Hoje vou falar sobre o Atributo : @Font-Face
É o Codigo que usamos para colocar fontes diferentes nas Páginas HTML, PHP ou ate Blogs... mais é claro que tem várias formas de fazer isto...

Para usar a FONTE ela precisa estar hospedada... não é dificil hospedar eu recomendo o Tumblr mais pode hospedar em outro host também...

Veja agora na Prática como ficara o Código CSS:

@font-face{ src:url(link da fonte); font-family: "link da fonte.ttf"; }


Também podemos fazer  desta forma:

@font-face { font-family: "nomedafonte.ttf"; src: url('link da fonte'); }
 Esse atributo é muito importante para dominar o CSS... é bom aprendermos porque sempre será util no dia-a-dia.... Abraços a TODOS
Bjos

Olá hoje vou ensinar como colocar SLIDE SHOW no TOPO do Blogger é bem SIMPLES...

Basta Seguir os PASSOS:

1 - Vá em Modelo
2 - Clique em EDITAR HTML
3 - Aperte CTRL + F e procure por HEAD e cole o seguinte CÓDIGO abaixo:

<style type="text/css"> /* <![CDATA[ */ #w2bSlideContainer {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/} #w2bNivoSlider { position:relative; width:640px !important; /*largura do slide*/height:300px !important; /*Altura do slide*/ background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHzNBhx0_ngtu6DYiftVyiYrq65QANcN2ShR8UFfVi-o4oULY74oi7A0HD_6CswW5zhPuv9BAoPNTUXZF74MUHcaGP4kqUnAPxilcmh4tq_a_EY2A2_722TGUqzBhRfkm_ar_c_iKeG8w/s1600/w2bLoader.gif") no-repeat 50% 50%; margin: 20px auto 35px; border: 3px solid #000;/*Coloque borda se quiser*/ } #w2bNivoSlider img {position:absolute; top:0; left:0; display:none} .nivoSlider {position:relative;width:100%;height:auto;} .nivoSlider img {position:absolute;top:0;left:0} .nivo-main-image {display:block!important;position:relative!important;width:100%!important} .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none} .nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0} .nivo-box {display:block;position:absolute;z-index:5;overflow:hidden} .nivo-box img {display:block} .nivo-caption {padding: 5px; font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 630px;/*Largura da legenda*/ z-index:8;} .nivo-caption p {padding:2px;margin:0} .nivo-caption a {display:inline!important} .nivo-html-caption {display:none} .nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px; background: url("URL_IMG_SETA") no-repeat;text-indent:-9999px;border:0} .nivo-prevNav {left:10px} .nivo-nextNav {background-position:-30px 0!important;right:10px} .nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center} .nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px; background:url("URL_IMG_BULLETS") no-repeat;text-indent:-9999px;border:0;margin-right:3px} .nivo-controlNav a.active {font-weight:bold;background-position:0 -22px} /* ]]> */ </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/> <script type='text/javascript'> /* <![CDATA[ */ jQuery(document).ready(function($) { $('#w2bNivoSlider').nivoSlider({ effect : 'random', slices : 10, boxCols : 8, boxRows : 4, animSpeed : 500, pauseTime : 4000, startSlide : 0, directionNav : true, directionNavHide : true, controlNav : true, keyboardNav : false, pauseOnHover : true, captionOpacity : 0.8 }); }); /* ]]> */ </script>


4 - Depois Voçê vai no inicio do BLOGGER e clique em Adicionar um Gadget... veja a IMAGEM:




5 - Cole este Código no Gadget:  ( E clique em SALVAR )

<div id="w2bSlideContainer"> <div id="w2bNivoSlider"> <a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a> <a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a> <a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a> <a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a> </div> </div>


6 - Depois voçê arras ele para a ÁREA  de CABELHAÇO... veja a IMAGEM:





7 - Vai ficar assim... Veja a IMAGEM:



8- Agora clique em Salvar alterações... Veja a IMAGEM:






Pronto AGORA é so conferir os RESULTADOOS é BEM FACIL... Comentem...


CASO QUEIRAM UM TEMPLATE PERSONALIZADO É SO PEDIR ENCOMENDE SEU TEMPALTE   Bjaoo...

Olá galera, hoje vou ensinar para voçês como AUMENTAR ou DIMINUIR o tamanho da área da postagem...


Siga os Passos abaixo que voçê verá que é bem simples:

1 - Vá em Modelo
2 - Editar HTML
3 - CTRL + F e procure por :        #outer-wrapper

Voçê achará o seguinte codigo:


#outer-wrapper { width: 900px; margin:0 auto; padding:0px; text-align:left; font: $bodyfont; background-color: #bgcolor; } #main-wrapper { margin-left: 5px; width: 550px; float: left; 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 */ } #sidebar-wrapper { margin-right: 0px; width: 250px; float: right; 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 */ }
 Se não conseguir achar desta forma procure por : #sidebar-wrapper  ou #sidebar que voçê irá encontrar

Após localizar o código veja a a palavra WIDTH que significa TAMANHO... é la que voçê irá alterar o tamanho da Área que voçê deseja...

Veja abaixo o significado de cada código e seus objetivos...

#outer-wrapper  : É o ID da folha da página ( coluna principal )
#main-wrapper : É o ID da área da POSTAGEM
#sidebar-wrapper : É o ID da SIDEBAR ( coluna lateral )

4 - Onde está #main-wrapper altere o WIDTH, caso queira que a Área aumente coluna um NÚMERO maior ... caso queira que diminua coloque um número menor...

Bjos é super simples e voçê pode também alterar a SIDEBAR é super facil..
Fiquem com DEUS

Olá a TODOS nesse tutorial vou mostrar como fazer efeito HOVER no Títulos das POSTAGENS...
Outro tutorial bem facil... vejam



É bem simples este será o EFEITO:



1 - Vá em Modelo
2 - Editar HTML
3 - CTRL + F e procure por :        /* Posts       ou      h3.post-title
4 - Abaixo dessa Tag voçê vai encontrar             h3.post-title
5 - Logo depois da  { voçê vai colar este codigo:
text-align: left;
Vai ficar ASSIM:
6 - Agora procure pela TAG:

h3.post-title a {Depois de   {  cole este código:

border-left: 5px solid #SUACOR; /* Personalização da borda */padding-left: 10px; /* Distância entre a borda e o texto */ 7 - Onde está escrito   #SUACOR, voçê deve substituir pelo código da cor de sua preferência, nesse site tem várias PALETAS com os mais DIVERSOS TONS... vale a pena CONFERIR

8 - Um pouco abaixo da TAG acima, voçê vai encontrar:

.. h3.post-title a:hover { Depois da chave    {     cole este código:

border-left: 5px solid #SUACOR; /* Personalização da borda */padding-left: 10px; /* Distância entre a borda e o texto */


Prontinhoooo... É o mesmo efeito do código anterior so que voçê irá colocar o código no caso a cor que quer que APAREÇA...

Bjãooo   ~~  <3
Fiquem com DEUS.

Fiz um template demorou um pouco por isto o  Valor é um pouco Elevado, porém muito em CONTA e com um Ótimo Custo Benefício...

O Template é sobre moda, textos, e etc... posso mudar o que voçê quizer... basta pedir...
O template é totalmente personalizado e com uma excelente indentidade visual...

Confiram:


O template contém:

- Banner ( Feito de maneira Exclusiva e super avançada  )
- Comentários Personalizados
- Menu Horizontal Personalizado
- Rodape das Postagens Exclusivo
- Titulo das Postagens Personalizado
- Data Personalizada
- Menu de Navegaçao Customizado
- Botão TOPO Exclusivo
- Fontes
- Cores
Preço :  R$ 39,90 Apenas + de Brinde 1 Capa para Facebook e 1 Background para Twitter.


Obrigado a TODAS e caso queira que eu mude algo é so pedir....
Bjos , que DEUS abençoe a TODOS.

Hoje vou Postar uma Ilustração minha bem simples... mais bem legal também em breve posto sobre como fazer Ilustrações..








Bom eu Desenhei a MÂO mesmo depois passei para a ARTE GRÁFICA usando o PHOTOSHOP CS5,
não é permitido o uso dessas imagens em blogs, tumblr's ou etc...
Eu fiz apenas para exemplo e para usar como referência em 1 blog que eu for FAZER.
Obrigado a TODOS Bjos, Fiquem com DEUS.

Hoje vou trazer para voçês algumas paletas de cores...
Estas são bem simples mais ajudam bastante se saberem usar... todas tem ótimas cores espero que gostem, confiram:







Bom fiz so estas apenas para voçês usarem no dia-a-dia nada demais..
Bjos , Fiquem com DEUS;

Olá hoje vamos aprender a separar as POSTAGENS, é bem simples
e também muito eficaz...



1 - Vá em Modelo e em EDITAR HTML

2 - Aperte CTRL + F e procure por:

.main-inner .column-center-outer { background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image

3 - Quando voçê achar esse codigo apague ele todo e cole esse aqui no lugar dele:
.post-outer { margin: 4px 2px 10px; background:#fff; padding: 20px 10px; }

Agora é so modificar segundo o que voçê precisar ou deseja....
Obrigado a TODOS e QUE DEUS os Abençõe.

Olá, a todos nesse tutorial vou ensinar a personalizar os marcadores das postagens....
A Label a que fica debaixo ou encima das postagens...
Isoto vai deixar sua área de POST bem mais atrativa...

Vai ficar como o modelo abaixo:


1 - Vá em MODELO e em EDITAR HTML
2 -  Aperte CTRL + F e procure por ]]></b:skin>
3 - Copie o codigo e cole acima

.post-labels a { display: inline-block; padding: 4px; /*distancia um do outro */ outline: 0; color: #FFF; /*cor texto normal*/ background : #f677c5; /*cor do botão principal*/ margin: 2px; font-family: 'Open Sans', sans-serif; text-decoration: none; height: 20px; /*altura do efeito */ } .post-labels a:hover { background: #f9a5d5;/*cor do botão hover*/ text-decoration: none; color: #ffffff; /*cor texto hover*/ -webkit-border-radius: px; -moz-border-radius: px; -o-border-radius: px; border-radius: px; }


Edite a seu GOSTO.... È bem fácil e deixa com uma otima aparencia....
Obrigado a TODOS e Bjos QUE DEUS OS ABENÇÕE.

   ------- ANTES FAÇA BACKUP  ------------ 

1 - Ente no BLOGGER, vai em modelo e  Editar HTML;
2 - Clique no codigo e digite "CTRF + F" para procurar qualquer código;
3 - Procure por      ]]></b:skin> e aperte ENTER;
4 - Acima de  ]]></b:skin> cole o seguinte código:

div.avatar-image-container { position: absolute !important; min-width: 60px; min-height: 60px; border: 5px solid palevioletred; /*cor da borda da imagem*/ -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px 60px 60px 60px; padding: 0pt !important; box-shadow: 0pt 0pt 3px #cccccc; margin-left: -10px !important; margin-top: -12pt !important; background: palevioletred; /*Cor do fundo da imagem*/ } div.avatar-image-container img { min-width: 60px; min-height: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } #comments .comment-author { padding-top: 1.5em; font-size: 12px; text-align: left; border-top: 1px solid; background-position: 0 1.5em; } #comments .comment-author:first-child { text-align: left; padding-top: 0px; border-top: none; } .comments .comments-content .comment:last-child { padding: 2px; border-bottom: 3px solid palevioletred; /*Cor da borda inferior do último comentário*/ } .comments .comments-content .comment:first-child { padding: 2px; } .avatar-image-container { margin: 0.2em 0pt 0pt; } #comments h4 { text-align: center; display: block; font-weight:bold; } .comments { font-style: normal !important; font-size: 12px !important; /*Tamanho da fonte dos comentários*/ font-family: arial !important; /*Fonte dos comentários*/ color: #482531; */Cor da fonte dos comentários*/ } #commnet-form, .comment-form{ margin-bottom: 40px; } #comments-block { text-align: left; margin:10px auto; line-height:1.6em; } #comments-block .comment-author { text-align: left; margin:5px auto; padding:5px auto; } .blog-author-comment { margin:5px auto; } .blog-author-comment p{ margin:5px auto; } #comments-block .comment-body { text-align: left; margin:.35em 0 0 auto; line-height: normal; } #comments-block .comment-footer { text-align: left; margin:-.25em 0 2em auto; line-height: 1.4em; margin:10px auto; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { text-align: left; margin:10px auto; } .deleted-comment { font-style:italic; color:gray; } #comments dl dd { padding: 0; margin: 0; line-height: 110%; text-align: left; } .comment { background: #F6DFE7; /*Cor de fundo dos comentários*/ color: #482531; /*Cor da fonte dos comentários, coloque igual a anterior*/ font-size: 12px; /*Tamanho da fonte dos comentários, coloque igual ao anterior*/ border: 3px solid palevioletred; /*Cor da borda dos comentários*/ -moz-border-radius: 20px 0px 20px 0px; -webkit-border-radius: 20px 0px 20px 0px; border-radius: 20px 0px 20px 0px; padding-right:5px;-moz-box-shadow: 3px 3px 3px #cccccc; -webkit-box-shadow: 3px 3px 3px #cccccc; box-shadow: 3px 3px 3px #cccccc; } .comment a { color: deeppink; /*Cor do link*/ } .comment a:hover { color: yellowgreen; /*Cor do link quando passamos o mouse*/ } .comment-content { margin-right: 5px; } .comments .comments-content .comment-header, .comments .comments-content .comment-content { margin: 0pt 8pt 8px; } .comments .comments-content { margin-bottom: -50px; } #commentpaging { float:right; } #commentpaging a { margin-right:5px; } .comments .comments-content .comment-header, .comments .comments-content .comment-content { 0pt 0pt 8px; } .comments .comments-content .user a, .comments .comments-content .user { border: 0pt none; color: white !important; /*Cor do nome de quem comentou*/ text-shadow: 0pt 1px rgb(153, 153, 153); font-family: Coming Soon !important; /*Fonte do nome de quem comentou*/ font-size: 14px; /*Tamanho do nome de quem comentou*/ text-decoration: none; background: palevioletred; /*Cor do fundo do nome de quem comentou*/ padding: 5px 12px; margin-left: -12px; border-bottom-right-radius: 10px; -moz-border-radius: 0px 0px 10px 0px; -webkit-border-radius: 0px 0px 10px 0px; } .comments .comment-block { position: static !important; background: transparent; margin-left: 23px; padding: 0pt 0pt 0pt 30px; } .comments .comment .comment-actions a, .comments .continue a { font-size: 11px !important; color: white !important; /*Cor da fonte dos botões responder e excluir*/ padding: 3px 6px; border: 0pt none !important; line-height: 30px; margin: 3px; border-radius: 0.5em 0.5em 0.5em 0.5em; -moz-border-radius: 0.5em 0.5em 0.5em 0.5em; -webkit-border-radius: 0.5em 0.5em 0.5em 0.5em; background: palevioletred; /*Cor de fundo dos botões responder e excluir*/ font-weight: 800; box-shadow: 0pt 1px 2px rgb(102, 102, 102) inset; } .comments .continue a { color: #666666 !important; /*Cor da fonte do botão responder da direita*/ float: right; padding: 0px 4px !important; height: 23px; line-height: 23px !important; margin-top: -53px !important; text-shadow: 0pt 0pt !important; background: white !important; /*Cor de fundo do botão responder da direita*/ margin-right: 10px; } .comments .comments-content .comment { margin-bottom:20px; padding-bottom:10px; } .comments .comments-content .icon.blog-author { display: none !important; } .comments .comments-content .datetime { display: none; /*Apaga a data*/ } .comments .thread-toggle { margin-bottom: 15px; } span.icon.user { display: none !important; }

Vou postar de outras formas.... caso alguém não consiga diga nos coméntarios...
Bjos .