Oi oi galera
Mais uma postagem do tutorial "Criando um Template" do quadro "Para Blogueiras(os)".
Por padrão, no template mínima do blogger, os títulos da #sidebar-wrapper
são em forma de textos, mas neste post vamos aprender a substituir os títulos
em textor por uma imagem com o titulo personalizado, vamos deixar nosso blog um
pouco mais com a nossa cara!!
Segue tutorial:
Antes de tudo deveremos ter um editor de imagens, o que eu
vou usar é o Photoscape.
Obs.: Para trocar o texto por uma imagem, é necessário que
você já tenha todos os seus widgets já instalados na #sidebar-wrapper, pois precisaremos
alterar uma parte do código referente a cada widget.
Vamos lá então:
Primeiramente vamos criar uma imagem com o título do widget
que deseja com a mesma largura da nossa #sidebar-wrapper.
A minha sidebar por exemplo, tem: a largura padrão do mínima
que é 220px, então minha imagem terá 220 de largura. (e para a altura você
usará a qual preferir, no meu eu usei
40px.)
Mas Elen, eu não sei qual a largura da minha sidebar, como
que eu descubro?
Bom, vamos usar o esqueminha do Ctrl+F e vamos digitar o
código: #sidebar-wrapper
E como resultado deverá ter um código assim:
#sidebar-wrapper
{
width: 220px;
float: $endSide;
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 */
background: #FFFFFF;
padding:10px;
}
Agora vamos fazer nossa imagem, mãos à obra!!
As minhas ficaram assim:
Agora, vamos em: “Editar HTML” no painel do blogger e faça o
esqueminha Ctrl+F e procure pela tag ]]></b:skin>
Agora copie o seguinte código:
/* Widgets
Personalizados
---------------------------------
*/
.widget
.title img{
display:
block;
text-align:
center;
}
E cole-o antes da tag ]]></b:skin>
Agora usando o Ctrl+F procure pelo título de cada um dos
Widgets.
Elen, não entendi muito bem!
Ok, vou dar um exemplo:
Vou começar pelo Widget: “Arquivo do blog”
Usando o Ctrl+F eu vou procurar por “arquivo do blog”
Encontrei o seguinte código:
<b:widget
id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId +
"_ArchiveList"'>
<b:if cond='data:style ==
"HIERARCHY"'>
<b:include data='data'
name='interval'/>
</b:if>
<b:if cond='data:style ==
"FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style ==
"MENU"'>
<b:include data='data'
name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
E nesse código devemos substituir a tag: <data:title/>
Por: <img src="link da sua imagem"/>
Agora, lembra as imagem que fizemos? Vamos hospedá-las, e eu
aconselho á usar o próprio Blogger para isso.
Mas Elen, como que eu hospedo no blogger?
Bom, é fácil, abra uma nova aba/guia no seu navegador,
acesse seu painel do blogger, e clique em Layout > “adicionar gadget” > “imagem”
> “escolher arquivo” > abra a imagem que você deseja, assim que ela
aparecer, você não irá salvar, você vai apenas clicar com o botão direito do
seu mouse em cima da imagem e clicará em “copiar URL da imagem”/“copiar endereço da imagem”, feito isso
você pode fechar o pop-up que foi criado.
Agora sabe esse “URL”/“endereço”? Vamos colá-lo no lugar da frase “link
da sua imagem”.
Veja como o meu ficou:
<b:widget
id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><img
src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekGru-3gLJk0cLs0J383hH3Nro9bcOek62XEi2JjRRdXtv2KuoN9eX7fLsqX4m8VuR_bs_tXs9bO8DBx00Y6Kzkd_kC_wIOidbNBaujg0xM0Q_pptVeDUPSW9MmKkl8gQVzNqxC49LfQ/s1600-r/widgets_arquivo_do_blog.jpg"/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId +
"_ArchiveList"'>
<b:if cond='data:style ==
"HIERARCHY"'>
<b:include data='data'
name='interval'/>
</b:if>
<b:if cond='data:style ==
"FLAT"'>
<b:include data='data'
name='flat'/>
</b:if>
<b:if cond='data:style ==
"MENU"'>
<b:include data='data'
name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
Agora visualize o resultado, e veja se ficou como
você queria!!
Agora para cada titulo da #sidebar-wrapper que você vá substituir,
basta procurar (usando o CRt+F) o código referente ao widget desejado e fazer
isso que fizemos com o widget “arquivo do blog” mexendo apenas com a tag <data:title/>.
Obs.: Isso não vai dar certo com o Widget “seguidores”!
Como você notaram no meu ficou uma linha preta em baixo da
minha imagem, e isso é normal para quem fez como em um dos últimos tutoriais (colocou um background para o titulo da nossa sidebar), para concertar isso,
devemos usar o Ctrl+F e procurar por: .sidebar h2 {
Deveremos localizar o seguinte código:
.sidebar h2 {
margin:0em 0 .75em;
font-family:
Sacramento;
line-height:
1.9em;
text-transform:
Capitalize;
font-weight:
bold;
letter-spacing:.1em;
color:
#FFFFFF;
background:
#000000;
font-size:
14px;
text-align:
center;
}
Nele você irá apagar a linha: background:
E o código ficará assim:
.sidebar h2 {
margin:0em 0 .75em;
font-family:
Sacramento;
line-height:
1.9em;
text-transform:
Capitalize;
font-weight:
bold;
letter-spacing:.1em;
color:
#FFFFFF;
font-size:
14px;
text-align:
center;
}
Agora salve, e você verá que a linha que estava embaixo
sumiu!!
Bom, o tutorial de hoje foi esse!!
Qualquer duvida deixe ai nos comentários, responderei o mais breve possível!!
Está gostando do tutorial? Deixe ai o seu comentário, ele serve de incentivo para a continuação do quadro!
XoXo
0 comentários:
Postar um comentário