Olá galerinha, hoje vim mostrar a vocês como expandir cada widget do seu blogspot.
Segue o Tutorial com fotos...
Neste Tutorial vou usar um template de exemplo para ficar melhor .
Antes de tudo, salvem o modelo do seu template em uma pasta, caso ocorra algum erro você terá ele de volta.
Para quem não sabe como salvar bastar fazer o seguinte.
entrem no painel de controle do seu blogspot.
Cliquem em Layout logo em seguida em editar HTML, e cliquem em baixar modelo completo como a imagem abaixo:
E salve em uma pasta de sua preferência.
Vamos visualizar o blog no caso eu quero expandir este widget.
Ok. Vamos ao Trabalho.
Vamos até o editar html como na primeira imagem. e vamos marca a opção Expandir modelos de widgets.
Como a Imagem Abaixo.
Marcado a opção, com esta janela aberta de um Ctrl-f . irá abrir uma caixa de pesquisa no seu navegador nesta caixa escreva o nome do Widget que deseja expandir. no caso o meu é downloads como na 2ª Imagem e clique em pesquisar. vou mostrar o screen lembrando o meu navegador é Mozila Firefox.
Após ter feito isto procure um pouco abaixo de download o seginte código..
<b:includable id='main'>
Encontrou?
Logo abaixo cole este seguinte código:
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
Ou este Código:
<script src='http://adotdf.x10hosting.com/javascripts/expandir%20widgets%201.js'
type='text/javascript'/>
[+/-]
<script src='http://adotdf.x10hosting.com/javascripts/expandir%20widgets%202.js'
type='text/javascript'/>
Você também pode colocar uma imagem para expandir o menu de vez o [+/-] como no código acima basta você apagar o [+/-] e colocar o endereço da imagem como o código abaixo:
<img src="ENDEREÇO DA IMAGEM"/>
Para hospedar a imagem de sua preferencia clique aqui
Voltando ao Tutorial...
Um pouco mais abaixo procure o seguinte código:
<div class='widget-content'>
Agora abaixo dele cole o seguinte código:
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
Ou este outro código:
<script src='http://adotdf.x10hosting.com/javascripts/expandir%20widgets%203.js'
type='text/javascript'/>
Agora um pouco mais abaixo procure por este código:
<b:include name='quickedit'/>
e cole o seguinte código acima dele:
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
Ou este outro código:
<script src='http://adotdf.x10hosting.com/javascripts/expandir%20widgets%204.js'
type='text/javascript'/>
Agora visualize, se estiver tudo ok, é só salvar vou mostrar o meu como ficou, caso não tenha imagem de vez colocar [+/-] eu aconselho coloca somente +, se vocês observarem a direita do meu blog exitem menus expandiveis com o + .
Resultado:
Exemplo de como o código deverá ficar
O código em preto é o que deverá ter no HTML do seu blog, e a parte em vermelho é a que voC~e irá inserir. Deverá ficar assim:
<b:widget id='Text1' locked='false' title='Do coração' type='Text'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:content/>
</div>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Gostou? Não gostou?
Comente o importante é avaliar .
0 comentários:
Postar um comentário
Gostou do que encontrou aqui?
Comente este artigo que acabou de ler.
Quer entrar em contato ou tirar alguma dúvida? Formulário de Contato
Nos comentários dos artigos escreva apenas o que for referente ao tema.
Antes de Comentar leia nossa Política para Comentários para saber como interagir com nossos artigos, tirar suas dúvidas e ser respondido(a).