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