domingo, 23 de setembro de 2012

Veja como criar janelas Pop-up para seu site



Olá Galera. 

Como muitas pessoas perguntam no canal (#webmasters - Via BrasNet) como criar aqueles links que abrem janelinhas (POP-up), resolvi criar este tutorial. 

O Código é bastante simples, e utiliza JavaScript. 

Segue o códigofonte: 

  1.  <a href="#"onclick="window.open('http://codigofonte.net', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=YES, TOP=10, LEFT=10, WIDTH=770, HEIGHT=400');">Clique para abrir a janela POP-up</a>  


Explicarei os comandos que utilizei neste códigofonte: 

  1.  'http://codigofonte.net'  
- Aqui fica o endereço da página que será exibida na janela pop-up. 
  1.  'Pagina'  
- Nome interno para a janela. NÃO É O TÍTULO. 
  1.  STATUS=NO  
- Este, exibe a barra de status do IE. 
  1.  LOCATION: NO  
- Serve para exibir a localização do site (aquela barrinha de endereços). 
  1.  TOOLBAR=NO  
- Exibe a barra de ícones básicos do IE. Do tipo COPIAR, COLAR... 
  1.  DIRECTORIES: NO  
- Serve para exibir a barra de links (atalhos do IE). 
  1.  RESISABLE=NO  
- Permite que o usuário redimensione a janela. 
  1.  SCROLLBARS=YES  
- Exibe a barra de rolagem. 
  1.  TOP=10  
- Define com quantos pxls a página irá ser exibida a partir do topo. 
  1.  LEFT=10  
- Define com quantos pxls a página irá ser exibida a partir da esquerda. 
  1.  WIDTH=600  
- Largura da Janela 
  1.  HEIGHT=400  
- Altura da Janela. 

Bom. É isto aí. 

A segui segue este exemplo: 

GERADOR DE BOTÃO

 

quinta-feira, 23 de agosto de 2012

Menu navegação em flash para o novo Blogger

Procure por:

.blog-pager {
  background: $(paging.background);
}

Troque-o então por:

<b:if cond="data:blog.pageType != &quot;item&quot;">"
.blog-pager {
  background: $(paging.background);
}
</b:if>

Agora procure por:

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}



E troque-o por:

<b:if cond="data:blog.pageType != &quot;item&quot;">"
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}
</b:if>


Salve ! 

Agora procure por:

]]></b:skin>

Troque-o pelo seguinte trecho:



#fnp-nav {font-size:13px;color:#000;text-align:left;}
.fnp-previous {position:fixed;top:50%;left:10px;height:37px;width:20px;z-index:9999;}
.fnp-next {position:fixed;top:50%;right:10px;height:37px;width:20px;z-index:9999;}
.fnp-previous a, .fnp-next a {transition:all 0.4s ease;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;opacity:0.6;}
.fnp-previous a:hover, .fnp-next a:hover {opacity:1;text-decoration:none;}
.fnp-box-left {position:relative;width:20px;height:37px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA3Dn_29UGgvrHymADTkWgWvO3GejT166bGw7PizrdQC26WHkp4By_C5iVruTqx12w4AsnIGgr7z6pHBWPjrs5LPBq4lUP8XIQqyC3iXyhyphenhyphentsPSav3Bcgu4D-ueVtIGX0fu9ieLaF1beQl/s1600/arrow-left.png) no-repeat;}
.fnp-content-left {overflow:hidden;width:200px;height:101px;padding:5px 10px 0 60px;border:1px solid #ccc;color:#000;background:#fff;display:block;position:absolute;top:-36px;left:-235px;z-index:-1;-moz-border-radius:0 20px 20px 0;-webkit-border-radius:0 20px 20px 0;border-radius:0 20px 20px 0;}
.fnp-box-right {position:relative;width:20px;height:37px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl6kgr-jjXpZ-hc1ydndRwE1HC6y6nGy5Ozw9Q6Ua9PjpqZRA1K4i36VCidM-gPjewzkI4cRgblEfP13TwvSEhonvroSr17YouLnix7spdgwQaKcPQXaaWoow4ebAXzBCmJO0Q0F0Jh-uZ/s1600/arrow-right.png) no-repeat;}
.fnp-content-right {overflow:hidden;width:200px;height:101px;padding:5px 60px 0 10px;border:1px solid #ccc;color:#000;background:#fff;display:block;position:absolute;top:-36px;right:-235px;z-index:-1;-moz-border-radius:20px 0 0 20px;-webkit-border-radius:20px 0 0 20px;border-radius:20px 0 0 20px;}
.fnp-nav-title {opacity:0;font-weight:bold;margin:5px 0;}
.fnp-nav-link {opacity:0}
.fb-content-left .fb-content-border,.fb-content-right .fb-content-border {display:none;}
@media screen and (max-width: 900px) {
.fnp-previous {display:none;}
.fnp-next {display:none;}
]]></b:skin>


<!-- Início código navegação por página -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var alts = jQuery.noConflict();
alts(document).ready(function(){
var newerLink = alts(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = alts(&quot;a.blog-pager-newer-link&quot;).text();
alts(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
var olderLink = alts(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = alts(&quot;a.blog-pager-older-link&quot;).text();
alts(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
});

var fnp = jQuery.noConflict();
fnp(document).ready(function(){

    fnp(&quot;.fnp-previous&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-10
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });
    fnp(&quot;.fnp-previous&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-400
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().animate({
            opacity:0},500)
    });fnp(&quot;.fnp-next&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-10
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });fnp(&quot;.fnp-next&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-400
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().animate({
            opacity:0
        },500);
    });
});
</script>
</b:if>
<!-- Fim do menu navegação por página -->

Salve.




Agora clique em "Expandir modelos de widget e procure pelo seguinte código:

<b:includable id='shareButtons' var='post'>

Veja que acima dele há o seguinte trecho:

 </b:includable>

Apague tudo que estiver daí até:



<b:includable id='nextprev'>



Agora no lugar do que você apagou, cole este trecho abaixo:


<b:includable id='nextprev'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fnp-nav'>
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>

terça-feira, 14 de agosto de 2012

Essa mensagem é feia, desnecessária e só ocupa espaço.
Mensagem Ferramentas Blog
Existem duas formas de retirar isso, dá pra aplicar as duas juntas pra ter certeza de que irá funcionar. Existem alguns modelos de template que não aceitam alguns códigos, então veja qual é melhor para você.
Retirar isso é bem simples:
Antes de fazer qualquer modificação no código-fonte de seu blog, crie uma cópia Backup do modelo.
Primeiro modo.
1. Vá ao painel do blogger e escolha “Layout” e a opção “Editar HTML”.
2. Procure pela linha de código:
]]></b:skin>
3. E, acima dessa linha, cole o seguinte:
.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {
display: none;
}
4. Salve o modelo e teste para ver se funciona e se não tem erros.
Segundo modo.
1. Do mesmo modo, entre em “Layout” e depois em “Editar HTML”
2. Procure pela linha, logo no início do código-fonte, “<head>” e, abaixo dela cole:
<style type='text/css'>
.status-msg-wrap{
display:none;
}
.status-msg-body{
display:none;
}
.status-msg-border{
display:none;
}
.status-msg-bg{
display:none;
}
.status-msg-hidden{
display:none;
}
</style>
3. Salve o modelo e teste para ver se funciona e se não tem erros.
Veja mais sobre opções para personalizar o layout do seu blog e assine nosso Feedpara ficar por dentro das atualizações.
Não sei uma forma de mudar as características dessa mensagem, nem como alterar o texto que aparece ou o link. Aqui só foi possível mostrar como retirar a mensagem de alerta. também não sei se é possível mudá-la de lugar, para o final da página.

terça-feira, 31 de julho de 2012

Menu dentro da imagem do cabeçalho

Agora vamos ao mapeamento da imagem. Já ensinei como mapear pelo paint aqui no blog, mas se você quiser algo mais rápido entre nesse site: www.image-maps.com

Lá tem a opção de fazer upload da imagem, mas eles não hospedam ela. Você deve hospedar a imagem em outro site como o www.tinypic.com e depois colar a url dela lá no site. Veja o print:

a

Depois que sua imagem for carregada, clique no botão image  na lateral do site e faça um retângulo em volta de onde você quer por um link. Veja o exemplo:


Depois é só clicar em save. Faça isso em todos os links do menu. Quando terminar, clique em:  , depois clique na guia HTML Code.
Selecione o código só até </map>  e copie.
image

Vá no blogger > Design e adicione um gadget de HTML/Javascript. Cole o código do gadget e depois do fim do código, coloque a tag </div> para fechar o código.

Salve o gadget e arraste ele para o topo do blog. Depois clique em Salvar lá em cima, e seu cabeçalho com menu está pronto!
image

div2
Você pode usar o image maps para fazer vários outros mapeamentos, é só usar a criativdade! Espero que tenham gostado, Kissus!

domingo, 29 de julho de 2012

IMAGENS DESLIZANTE


Colocar slide no blog

 Um Slide bonito e agradavel é indispensável para blogs de noticias, mas indenpendente do nicho em que seu blog atua, este slide pode ser um aliado para deixar seus melhores posts em destaque. Este Slide não deixará seu blog pesado, e irá se ajustar automaticamente ao tamanho de sua pagina  além de possuir setas de para esquerda e direita.


Veja o slide funcionando em 2 Blogs: Clique aqui  ou Clique Aqui 

Antes de começar recomendo que faça um backup do seu template.

Veja também: 20 Plugins de Slide para Wordpress


Colocando Slide no Blog

1.Entre em Layout > Editar HTML

Adicione o código abaixo antes de 
</HEAD>:

<script src="http://dl.getdropbox.com/u/1815091/Slider/mootools.v1.11.js" type="text/javascript"></script>
<script src="http://dl.getdropbox.com/u/1815091/Slider/jd.gallery.js" type="text/javascript"></script>

2. E esta parte acima de ]]></b:skin> Clique para ver o Codigo! 
3. Agora vá até Layout > Elementos da pagina:
Crie um novo elemento HTML / JavaScript com o seguinte codigo:

<style type="text/css">
#myGallery
{
width: 100% !important;
height: 250px !important;
}
</style>

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>

<div id="myGallery">
<div class="imageElement">
<h3>
Titulo da Imagem</h3>
<p>
Descrição da imagem</p>
<a href="
URL do Post" class="open" title="Read More"></a>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

<div class="imageElement">
<h3>
Titulo da Imagem</h3>
<p>
Descrição da imagem</p>
<a href="
URL do Post" class="open" title="Read More"></a>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

</div>
4. Agora adicione as URLS de suas imagens e os titulos nos locais indicados em vermelho no codigo,

5. Salve e veja o resultado

Se quiser adicionar mais imagens copie o código abaixo e cole entre: 
<div id="myGallery"> & </div>

<div class="imageElement">
<h3>
Titulo da Imagem</h3>
<p>
Descrição da imagem</p>
<a href="
URL do Post" class="open" title="Read More"></a>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="
Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

sexta-feira, 18 de novembro de 2011


Como Inserir uma contagem regressiva no blog

Publicado em: 7 de janeiro de 2011 - Arquivado em: 

Olá pessoal, estou aqui com mais um tutorial, neste tutorial eu irei ensinar como inserir uma contagem regressiva no blog. Uma contagem regressiva é uma espécie de contador,você escolhe uma data, quando chegar o determinado segundo, do determinado minuto, da determinada hora do dia que você escolheu surge uma mensagem dizendo que chegou o momento que você marcou. Eu utilizou muito este serviço para marcar a hora em que o resultado de minhas promoções serão publicadas.

1. COMO CRIAR E INSERIR UMA CONTAGEM REGRESSIVA NO BLOG
Vamos ao Tutorial:
1º - Acesse o Seguinte Site: http://clockeasy.com/
2º - De cara você vai ver uma tela similar à esta:

ESPECIFICAÇÕES:
Clock - Um relógio para seu blog,
Alarm - Despertadorque desperta na hora determinada em seu Blog,
Countdown - Um contagem regressiva ou seja uma contagem decrescente.
Chrono - Cronômetro ou seja uma contagem crescente.
3º - Em seguida nós iremos selecionar o tipo de contador, que no nosso caso é Countdown.
4º - Vamos as especificações de cada campo:


























5º - Após preencher clique no botão Generate.
6º - Agora espere e clique no botão Get code após isso copie o código que ele lhe mostrará.
7º - Agora acesse o Painel do seu Blog e clique na Aba Design.
8º - Agora clique em adicionar um gadget na Sub-aba Elementos da página.
9º - Agora selecione o tipo de Gagdet HTML/Javascript
10º - E cole o código que você copiou anteriormente.
11º - Agora clique em Salvar. (Caso você for seguir os passos de como deixar em português NÃO SALVE)

2. COMO DEIXAR A CONTAGEM REGRESSIVA EM PORTUGUÊS
Vamos ao Tutorial:
1º - Agora nós iremos editar aquele código que copiamos.
2º - Seguramos as teclas CTRL + F (Teclas de busca na página).
3º - Agora procure por day e substitua por dia.
4º - Procure por hours e Substitua por horas.
5º - Agora procure por minutes e substitua por minutos.
6º - Agora procure por Seconds e Substitua por segundos.

PRONTO! CONTAGEM REGRESSIVA E AINDA MAIS EM PORTUGUÊS APLICADA!