Tutos For Designer: Fazendo seu Template Part.2

Part.2

Bom hoje Vamos mexer muito com HTML , eu tenho dificuldade mas duvidas comente

Vamos tirar aquelas ondinhas feias que ficam encima do template

Dê um Ctrl + F e procure por content-outer .content-cap-top { e apague o que está contornado de rosa na imagem abaixo:

Visualize e se as ondinhas tiverem saído, salve.

Vamos centralizar o título do post

Dê um Ctrl + F e procure por h3.post-title { e abaixo disso cole text-align: center;

Vamos fazer um cabeçalho bem bonito

Clique nesse link e siga todas as instruções de como fazer um cabeçalho

                     Vamos deixar a barra de rolagem mais bonita

Dê um Ctrl + F e procure por ]]></b:skin> e antes dessa Tag cole o seguinte código:

/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*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:#ff0f72; /*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: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}

Agora é só você alterar como quiser. As instruções estão todas no código.

Vamos tirar agora a navbar

Dê um Ctrl + F e procure por <body expr:class='"loading" + data:blog.mobileClass'> e acima disso cole:

<script type='text/javascript'>
<![CDATA[

]]>
</script>

Visualize e se a navbar tiver saído, salve!

Vamos deixar os gadgets bem fofos

Vá em Layout no seu blog > Adicione um HTML/JavaScript e cole este código:

<style>

/**PERSONALIZAÇÃO DA SIDEBAR BY CANDYLLAND**/

.sidebar .widget {

width:100% !important;

background:#fff;

margin:10px 0 !important;

border-top:10px #ff1490 solid;

border-radius:0 0 10px 10px;

padding:10px;

box-shadow: inset 0 0 20px #eee, 0 0 3px #ccc;

overflow:hidden

.sidebar .widget h2 {

background:#fee /** COR DO FUNDO DO TITULO **/;

color:#f9b /** COR DO TITULO **/;

font-size:17px /** TAMANHO DO TITULO **/;

text-shadow:0 1px #ddd /** SOMBRA DO TITULO **/;

margin-top:-10px /** MARGIN **/

margin-left:-9px /** MARGIN **/;

margin-bottom:10px /** MARGIN **/;

padding:5px;

width:107%;

overflow:hidden

/** FIM DA SIDEBAR BY [www.candylland.net]**/

</style>

Modifique como quiser e salve!




                                             Vamos colocar babadinho no blog


Adicione um gadget HTML/JavaScript > Cole no gadget esse código:
 
 <div style="background-image: url('URL_DO_BABADINHO');background-repeat:repeat-x;top:0;left:0;width:100%;height:50px;z-index:100;position:fixed;"></div> 


Em URL DO BABADINHO cole a URL de algum babadinho. Alguns pra vocês:





























      Agora vamos colocar um widget para você colocar suas redes sociais
 
Adicione um Gadget HTML/JavaScript e cole o seguinte código:
 
<!-- CANDY SOCIAL WIDGET INICIO -->
<div class="social"><script type="text/javascript">// < ![CDATA[
function totalPosts(json) {
document.write('<b>' + json.feed.openSearch$totalResults.$t + '');
}
function totalComments(json) {
document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');
}
// ]]></script>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr><!-- RSS -->
<td valign="top" width="65">
<p align="center"><a title="Assine o Feed" href="http://feeds.feedburner.com/NOME_DO_FEED"> <img src="URL_DA_IMAGEM" alt="Assinar Feed" /></a> Assinantes
<strong><script type="text/javascript" src="http://ferramentasblog.com.br/twitter/twitter-feedburner.js"></script><script type="text/javascript">// < ![CDATA[
xfeedburner("NOME_DO_FEED")
// ]]></script></strong></p></td>
<!-- TWITTER -->
<td valign="top" width="65">
<p align="center"><a title="Siga no Twitter" href="http://twitter.com/SEU_USUÁRIO_TWITTER"> <img src="URL_DA_IMAGEM" alt="Seguir no Twitter" /></a> Followers
<strong><script type="text/javascript" src="http://www.ferramentasblog.com.br/twitter/twitter-php.php?usuario=SEU_USUÁRIO_TWITTER"></script></strong>
</p></td>
<!-- FACEBOOK -->
<td valign="top" width="65">
<a title="Curta no Face" href="URL_FAN-PAGE_FACEBOOK"> <img src="URL_DA_IMAGEM" alt="Curtir" /></a> Fas
<strong><script type="text/javascript" src="http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=ID_DA_SUA_FAN_PAGE"></script></strong></td>
<!-- POSTS -->
<td valign="top" width="65">
<p align="center"><img title="Artigos Publicados" src="URL_DA_IMAGEM" alt="Artigos publicados" /> Posts
<script type="text/javascript" src=" /feeds/posts/default?alt=json-in-script&amp;callback=totalPosts"></script>
</p></td>
<!-- COMENTARIOS -->
<td valign="top" width="65">
<img title="Comentarios recebidos" src="URL_DA_IMAGEM" alt="Comentarios recebidos" /> Comentarios
<script type="text/javascript" src=" /feeds/comments/default?alt=json-in-script&amp;callback=totalComments"></script></td>
</tr>
</tbody>
</table>
</div>
<!-- CANDY SOCIAL WIDGET FIM [www.candylland.net] -->
 

Atenção!



1- É preciso ter uma conta ativa do Feedburner (Para ativar o contador, vá ao painel do FeedBurner, clique no menu Publicize >> FeedCount e, no final, salve e ative)

2- Para saber a id da sua fan page Acesse sua página de fãs no Facebook e clique em GERENCIAR >> Editar pagina >> visualize o url na barra do navegador, o numero final é a sua ID



Alguns ícones:


























        Agora vamos deixar os posts fofos também né?
 
Adicione um gadget HTML/JavaScript e cole um desses códigos:



<style>
/** CANDY POSTS DIVIDIDOS INICIO **/
@font-face {font-family:'Salsa';font-weight:400;src:url('http://themes.googleusercontent.com/static/fonts/salsa/v3/A4KcPjUX7Ams2Jqasy0vzQ.woff') format('woff')}
 
.main-inner .column-center-outer {
background:transparent none !important;
_background-image: none;
}
 
/** post **/
.date-outer{
background:#fff;/* cor do bg */
margin-bottom:20px; /* espaço entre os posts */
padding:15px !important; /* espaço interno */
border-radius:0 0 15px 15px; /* arredondamento */
border-top:15px #fee solid; /* borda no topo */
}
 
.date-outer img{max-width:99% !important} /* a imagem do post nunca vai "pular" rs */
 
/** data do post **/
.date-header{
width:35px;/** largura **/
height:50px;/** altura **/
overflow:hidden;
margin-bottom:-80px;/** desce **/
margin-left:-50px;/** margin pra esquerda **/
text-align:center;/** alinha o texto **/
padding:10px 5px;/** espaço interno **/
background:url(http://3.bp.blogspot.com/-XkS0xqFlrwQ/T6nO1NlqBYI/AAAAAAAAgVM/nsGRyRqpiGY/s1600/data.png)no-repeat; /** bg **/
font:normal 10px verdana !important;
color:#fff !important;/** cor da fonte **/
font-weight:400;/** afina a fonte **/
}
 
/** título do post **/
h3.post-title a, h3.post-title{
font: normal 25px Salsa; /** font **/
color: #f9b !important; /** cor **/
text-shadow:0 1px #eee; /** sombra **/
margin-left:5px !important;/** margin do titulo em relação a data **/
}
 
/** CANDY POSTS DIVIDIDOS FIM by Candylland [www.candylland.net] **/
</style>





<style>
/** CANDY POSTS DIVIDIDOS INICIO **/
@font-face {font-family:'Salsa';font-weight:400;src:url('http://themes.googleusercontent.com/static/fonts/salsa/v3/A4KcPjUX7Ams2Jqasy0vzQ.woff') format('woff')}
 
.main-inner .column-center-outer {
background:transparent none !important;
_background-image: none;
}
 
/** post **/
.date-outer{
background:#fff;/* cor do bg */
margin-bottom:20px; /* espaço entre os posts */
padding:15px !important; /* espaço interno */
border-radius:0 0 15px 15px; /* arredondamento */
border-top:15px #87cecc solid; /* borda no topo */
}
 
.date-outer img{max-width:99% !important} /* a imagem do post nunca vai "pular" rs */
 
/** data do post **/
.date-header{
width:35px;/** largura **/
height:50px;/** altura **/
overflow:hidden;
margin-bottom:-80px;/** desce **/
margin-left:-50px;/** margin pra esquerda **/
text-align:center;/** alinha o texto **/
padding:10px 5px;/** espaço interno **/
background:url(http://4.bp.blogspot.com/-WIQd_0_T2JM/T6nTFERaHXI/AAAAAAAAgVY/yhEw6DwFfm0/s1600/data.png)no-repeat; /** bg **/
font:normal 10px verdana !important;
color:#fff !important;/** cor da fonte **/
font-weight:400;/** afina a fonte **/
}
 
/** título do post **/
h3.post-title a, h3.post-title{
font: normal 25px Salsa; /** font **/
color: #87cecc !important; /** cor **/
text-shadow:0 1px #eee; /** sombra **/
margin-left:5px !important;/** margin do titulo em relação a data **/
}
 
/** CANDY POSTS DIVIDIDOS FIM by Candylland [www.candylland.net] **/
</style>





<style>
/** CANDY POSTS DIVIDIDOS INICIO **/
@font-face {font-family:'Salsa';font-weight:400;src:url('http://themes.googleusercontent.com/static/fonts/salsa/v3/A4KcPjUX7Ams2Jqasy0vzQ.woff') format('woff')}
 
.main-inner .column-center-outer {
background:transparent none !important;
_background-image: none;
}
 
/** post **/
.date-outer{
background:#fff;/* cor do bg */
margin-bottom:20px; /* espaço entre os posts */
padding:15px !important; /* espaço interno */
border-radius:0 0 15px 15px; /* arredondamento */
border-top:15px #777 solid; /* borda no topo */
}
 
.date-outer img{max-width:99% !important} /* a imagem do post nunca vai "pular" rs */
 
/** data do post **/
.date-header{
width:35px;/** largura **/
height:50px;/** altura **/
overflow:hidden;
margin-bottom:-80px;/** desce **/
margin-left:-50px;/** margin pra esquerda **/
text-align:center;/** alinha o texto **/
padding:10px 5px;/** espaço interno **/
background:url(http://2.bp.blogspot.com/-BSk8dIX4Vow/T6nUfo1WRgI/AAAAAAAAgVg/v6pHaYUUPGA/s1600/data1.png)no-repeat; /** bg **/
font:normal 10px verdana !important;
color:#fff !important;/** cor da fonte **/
font-weight:400;/** afina a fonte **/
}
 
/** título do post **/
h3.post-title a, h3.post-title{
font: normal 25px Salsa; /** font **/
color: #999 !important; /** cor **/
text-shadow:0 1px #eee; /** sombra **/
margin-left:5px !important;/** margin do titulo em relação a data **/
}
 
/** CANDY POSTS DIVIDIDOS FIM by Candylland [www.candylland.net] **/
</style>










Se  ajudo comente pff

14.1.14

Fazendo seu Template Part.2

Um comentário: