19 de janeiro de 2013

Tutoriais para blog

Trago para vocês alguns tutoriais de fácil execução.


:: Imagem no fundo do título do post ::

Vá no HTML do seu blog e procure por h3.post-title {
logo a baixo coloque:

Background:#F6DDFF;

para colocar imagem no background:

background:transparent url("Link de seu Fundo")no-repeat center top;

padding:16px 25px 20px 20px;

font-size:140%;

line-height:1.4em;

margin-top: 12px;

Para colocar borda:

border:1px dashed;

para arrendondar a borda:

-border-radios:10px 10px 10px;

--->>> Você pode editar as bordas;
--->>> Onde tem Background: coloque a cor de fundo que preferir.


:: Linha Pontilhada abaixo das postagens ::

No HTML do seu blog e marque a opção Expandir modelos de widgets, 

aperte ctrl+f e procure por:

<div class='post-footer'>

quando encontrar cole acime dele:

<div style='border-top: 1px dashed #AC00EE'/>

Entendendo o código:

1px-->> expessura da borda;
dashed-->> tipo da borda;
#AC00EE-->> cor da borda.


:: Cortininha no blog ::

Para colocar cortininha no topo do blog siga os passos abaixo:


Vá em design - Editar HTML.

 Tecle  CTRL + F e procure por:

        <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

 Quando encontrar cole o código abaixo depois dele:

 <div style=' background-image: url(URL da Cortininha Aqui); 
top: 0px; left: 0px; width: 100%; height:43px; z-index: 100; position: fixed;'/>



:: Como retirar o link Assinar Postagens Atom ::

Muita gente não gosta deste link, mas não sabem retirá-lo do blog.
Hoje vou mostrar como é super fácil...

Vá HTML do seu blog e marque a opção Expandir modelos de widgets, 
aperte ctrl+f e cole dentro da caixinha:

<b:include name=’feedLinks’/>

quando encontrar é só apagar este trecho.


:: Arredondar as bordas das imagens no blog ::


No seu HTML, aperte ctrl + f e procure por .post-body {

Depois de "}" cole o código abaixo:

.post img {
-moz-border-radius: 7px;
-webkit-boder-radius: 7px;
border-radius: 7px;
}

Edite as bordas se preferir.


:: Dividir as postagens do blog ::


No seu HTML, aperte no teclado do computador ctrl+f e digite .main-inner .column-center-outer { 
Quando encontrar apague todo o html e coloque:

.post-outer{
background: #000000; /*Fundo, está na Cor preta */
padding-top: 5px; /* Espaço do topo */
padding-left: 5px; /* Espaço da esquerda */
padding-right: 5px; /* Espaço da direita */
padding-bottom:5px; /* Espaço de baixo */
margin: 5px 3px 25px;
}

para arredondar as bordas das postagens coloque abaixo de margin:

-border-radios:10px 10px 10px;


Criar área de crédito no rodapé do template

Vá em designe -->> Editar html, não precisa expandir
modelos de widgetes, aperte ctrl+f, quando abrir a caixinha de pesquisa
coloque:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/> 

Quando encontrar faça como tem abaixo:

-->> Onde tem: True, troque por false;
                      -->> Na linha acima, onde está showaddelement='no'
Troque por: showaddelement='yes

Salve. Vá em layout, no final do blog tem atribuitton e delete.
Depois de salvo, coloque na caixinha de pesquisa </body>
Quando encontrar coloque o código abaixo acima dele:

<div align='center' class='credit'><a href='#'>NOME-DO-SEU-BLOG-AQUI</a> &#169; 
Copyright 2011. Tecnologia do <a href='http://www.blogger.com/'>
Blogger</a>. </div>

-->> Onde tem NOME-DO-SEU-BLOG, coloque o nome de seu blog.
     Ex: Gifs e Scraps para Orkut

:: Cabeçalho mais perto do topo do blog ::

No html de seu blog, aperte ctrl+f, quando a caixinha de busca aparecer
digite: <b:section class='header' id='header'

Acima dele, cole o seguinte código:

<div style="margin-top:-50px;"> 

--->>> Altere o valor (50px) até ficar grudado lá no topo (ou o quanto você preferir). 

Agora acrescente </div> depois de </b:section>. Ficando assim:

<div style="margin-top:-50px;">
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Gifs e Scraps para Orkut(Cabeçalho)' type='Header'/>
</b:section></div>



:: Barra de rolagem colorida ::

No html de seu blog aperte no seu teclado ctrl+f, quando a brir a
caixinha de pesquisa coloque ]]></b:skin> e cole o código
cole o código abaixo antes dele:


::-webkit-scrollbar-thumb:vertical {

    background: #bgh ; /*Cor da barrinha que se move*/
    border: 1px solid #bgh; /*Coloque borda se quiser*/
    height:50px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    }
    /** Rolagem da Horizontal da Página**/

    ::-webkit-scrollbar-thumb:horizontal {

    background-color:#bgh; /*Cor da barrinha que se move*/
    border: 1px solid #bgh; /*Coloque borda se quiser*/
    height:10px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
     }
    /** Parte fixa da rolagem (fundo que não se move) **/

    ::-webkit-scrollbar {

    height:10px;
    width:15px; /*Largura da barra de rolagem*/
     background: #bgh; /*Cor da parte fixa, que fica no mundo*/
    border: 1px solid #bgh; /*Coloque borda se quiser*/
    }

--->> Onde tem bgh coloque a cor da barrinha que melhor ficar em seu blog.


Primeira letra do post grande:

No html de seu blog cole o código abaixo antes de ]]></b:skin>

 .big {
font-size:40px; /*tamanho da fonte*/
font-style:bold;
color: #3397FD; /*Cor da letra*/
line-height:30px; /* altura da linha*/
float:left;
}

Quando você for fazer sua postagem faça assim com a primeira letra:

<big>C</big>


Nenhum comentário:

Postar um comentário

Seu comentário é bem vindo!
Qualquer dúvida pergunte que
responderei em breve.☆

/)__/)
(=':'=)
(")_(")

Obrigado por seu comentário!

Welcome

-->> Amigos <<--

-->> Arquivinho do blog <<--

Gifs e Scraps para Orkut- Modelo Ethereal- Modoficado por Claudine Netto; © Copyright 2013. Tecnologia do Blogger.