NetBlog

6 fantásticas caixas de pesquisa blogger

2015-06-14T19:35:00.000+01:00

A presença de uma caixa de pesquisa num site ou blogue é praticamente obrigatória, é por meio dela que os seus visitantes chegam exactamente ao conteúdo que pretendem, sem perderem muito tempo. Não se esqueça que o visitante é apressado, quer resultados imediatos. Se isso não acontecer, ele sai e vai para outro sítio que lhe permita ter essa informação de forma imediata.
Apresento hoje seis caixas de pesquisa, totalmente personalizadas, que lhe permitirão prender os seus leitores.
A instalação é muito fácil, como perceberá já a seguir, mas falta um aspecto fundamental: coloque-a em lugar de destaque, para que o visitante a encontre facilmente, de outra forma de pouco valerá ter esta widget.

Há algum tempo atrás, publiquei uma entrada, que talvez lhe interesse, caso nenhuma das propostas de hoje sejam do seu agrado. Veja, então, esta

Caixa de pesquisa em CSS.

Vamos à instalação.

O procedimento é igual para todas:

Passo 1 - Entrar no esquema do seu template> inserir uma nova mini-aplicação> HTML/JavaScript> colar o código escolhido> gravar

................................................................ Modelo 1 ................................................................

Código do Modelo 1

................................................................ Modelo 2 ................................................................

Código do Modelo 2

................................................................ Modelo 3 ................................................................

Código do Modelo 3

................................................................ Modelo 4 ................................................................

Código do Modelo 4

................................................................ Modelo 5 ................................................................

Código do Modelo 5

................................................................ Modelo 6 ................................................................

Código do Modelo 6

E já está!
Agora é só escolher e tirar todos os benefícios que esta ferramenta proporciona.
Espero que seja do vosso agradO.
Até breve!

Imagens em movimento com HTML

2015-06-11T09:14:00.003+01:00

Um dos assuntos mais lidos aqui no NetBlog prende-se com os códigos HTML/CSS. Aliás, há vários posts sobre isso, pequenos códigos, muito básicos, que permitem efeitos interessantes. Podem vê-los, clicando no Menu superior em HTML/CSS ou então espreitar estes links:

O que vos trago hoje é um pequeno código, que permite inserir uma imagem em movimento. O resultado é este:

Como fazer? É bastante simples.
Passo 1 -Criar a imagem a que se pretende dar movimento e alojá-la.
Passo 2 - Inserir o código que preferir.
Passo 3 - Substituir A_SUA_IMAGEM.jpg pela URL da imagem que alojou anteriormente.

IMAGEM A DESLIZAR PARA A ESQUERDA

<marquee><img src="A_SUA_IMAGEM.jpg"></marquee>

IMAGEM A DESLIZAR PARA A DIREITA

<marquee behavior="scroll" direction="right"><img src="A_SUA_IMAGEM_AQUI.jpg"/></marquee>

IMAGEM A DESLIZAR ALTERNADAMENTE

<marquee behavior="alternate"><img src="SUA_IMAGEM_AQUI.jpg"></marquee>

IMAGEM A DESLIZAR PARA A ESQUERDA COM FUNDO

<marquee bgcolor="#959393"><img src="A_SUA_IMAGEM_AQUI.jpg"></marquee>

O campo a verde, corresponde ao código da cor que pretende, altere-o a seu gosto. Não sabe como obter o código da cor, entre entre no gerador de código HTML do Netblog e escolha-a. O código vai aparecer no canto inferior direito.
A vermelho, já sabe, é a URL da imagem, que deverá ser substituída pela da sua.

Fabuloso Menu Metro estilo Windows 8 para Blogger

2015-06-09T10:55:00.002+01:00

Os menus de navegação são uma ferramenta absolutamente necessária em qualquer página. Graças a eles, os visistantes têm a possibilidade de, de forma fácil e eficiente, conhecer os assuntos publicados. No entanto, já terá reparado que todos os menus são muito semelhantes... que tal algo completamente diferente? Um menu funcional, leve e cheio de estilo? Um menu que chama a atenção pelo design inovador e pelas semelhanças ao Metro Style do Windows 8?
Mas calma, se preferir algo mais tradicional e discreto, veja o que já publicámos a pensar em si:

Supondo que prefere mesmo algo mais arrojado, veja só o aspeto final:

Poderá também vê-lo nesta DEMONSTRAÇÃO.

Agora que já decidiu, vamos à instalação, que é extraordinariamente simples: dois passos e já está!

Passo 1- Entre no Esquema do Template> Adicione uma nova mini-aplicação> Escolha HTML/JavaScript e cole o seguinte código:

Passo 2 - Faça as alterações necessárias:

# - substitua pelos seus próprios links;
As palavras a vermelho poderão ser mantidas ou alteradas, de acordo com a sua necessidade.

Espero que tenham gostado!
Até breve!

.....................................................................................................................................
Informação traduzida e adaptada por NetBlog retirada de MBL Freshable

5 incríveis formulários de contacto para página estática Blogger

2015-06-08T10:59:00.003+01:00

Uma das formas dos nossos leitores entrarem em contacto connosco, de forma prática, rápida e eficiente é através de um formulário de contacto. Daí que esta ferramenta esteja presente em todas as páginas que pretendem, efectivamente, manter um elo com os seus visitantes.

Este é um dos widgets padrão do Blogger, no entanto, o seu aspecto é muito pobre e surge apenas na barra lateral.

Aquilo que hoje vos proponho, é o resultado de experiências minhas, com vários códigos que encontrei e cujo resultado, parece-me, é excelente.

Apresento-vos cinco modelos diferentes. A base do código é a do formulário Blogger, no entanto, acrescentei o CSS para ter um aspecto diferente daquela que é disponibilizada por defeito.

Como devem proceder?

É simples!

Basta criarem uma nova página> aba HTML> colar o código da vossa preferência.

Vamos aos códigos.

Modelo 1

Código:

Modelo 2

Código

Modelo 3

Código

Modelo 4

Código

Modelo 5

Código

Espero que gostem de uma das cinco propostas que vos trouxe. Não se esqueçam de partilhar!
Até breve!

5 fantásticos menus verticais para Blogger

2015-06-08T09:02:00.002+01:00

Um menu no template é absolutamente fundamental, todos o sabemos, pois facilita a navegabilidade da página, direccionando os leitores para assuntos específicos.
Aqui no NetBlog, temos alguns exemplos deste menus tão úteis, veja por exemplo:

Hoje, trago-vos um conjunto seleccionado por mim, enquanto navegava pela net. Tomei esta decisão, pois, tantas vezes, escolhemos uma aplicação, depois encontramos outra de que gostamnos mais e lá temos nós de refazer todo o trabalho. Assim, mostrando um leque variado, será mais facil fazer a sua escolha. Ou não!:)

Vamos então aos menus.

A forma de instalação é sempre a mesma:

Esquema do Template> Adicionar mini-aplicação> HTML/JavaScript> Colar o código do modelo escolhido.

Modelo 1

Código:

<style type="text/css"> /* CSS for Vertical Menu */ #cssmenu { padding: 0; margin: 0; border: 0; } #cssmenu ul, #cssmenu li { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; } #cssmenu ul li { min-height: 1px; line-height: 1em; } #cssmenu a { display: block; text-decoration: none; } /* Custom CSS Styles */ #cssmenu { font-family: Helvetica, Arial, sans-serif; font-weight: bold; width: 160px; } #cssmenu ul { background: urlundefineddata:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background-color: #F1F1F1; background-image: -webkit-linear-gradientundefinedtop, white, whitesmoke); background-image: -moz-linear-gradientundefinedtop, white, whitesmoke); background-image: -o-linear-gradientundefinedtop, white, whitesmoke); background-image: linear-gradientundefinedwhite, whitesmoke); border: 1px solid #CCC; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu li { border-bottom: 1px solid #CCC; -moz-box-shadow: 0 1px 0 white; -webkit-box-shadow: 0 1px 0 white; box-shadow: 0 1px 0 white; padding: 1px; } #cssmenu li:last-child, #cssmenu li.last { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-bottom: 0 none; } #cssmenu li.active { -moz-box-shadow: 1px 2px 0 -1px rgbaundefined0, 0, 0, 0.25); -webkit-box-shadow: 1px 2px 0 -1px rgbaundefined0, 0, 0, 0.25); box-shadow: 1px 2px 0 -1px rgbaundefined0, 0, 0, 0.25); background: urlundefinedhttp://i40.tinypic.com/4ta4ih.png); background-image: -webkit-linear-gradientundefinedtop, #555555, #3b3b3b); background-image: -moz-linear-gradientundefinedtop, #555555, #3b3b3b); background-image: -o-linear-gradientundefinedtop, #555555, #3b3b3b); background-image: linear-gradientundefined#555555, #3b3b3b); position: relative; left: -8px; width: 170px; } #cssmenu li.active a { border: 1px dashed #6e6e6e; border: 1px dashed rgbaundefined255, 255, 255, 0.25); border-right: 0 none; position: relative; color: #FFF; text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.3); } #cssmenu li.active:before, #cssmenu li.active:after { content: ''; } #cssmenu li.active:before { z-index: 1; width: 0px; height: 0px; position: absolute; left: 0; bottom: -5px; border-style: solid; border-width: 0 8px 5px 0; border-color: transparent #222222 transparent transparent; } #cssmenu li.active:after { background: urlundefinedhttp://i41.tinypic.com/fky2ro.png) no-repeat; display: block; height: 48px; width: 24px; position: absolute; right: -24px; top: 0px; z-index: 1; } #cssmenu a { border: 1px solid transparent; color: #444; height: 42px; line-height: 40px; padding: 0 12px; text-align: right; text-overflow: ellipsis; } </style> <div id='cssmenu'> <ul> <li class='active'><a href='LINK AQUI'><span>Home</span></a></li> <li><a href='LINK AQUI'><span>Produtos</span></a></li> <li><a href='LINK AQUI'><span>Sobre</span></a></li> <li class='last'><a href='LINK AQUI'><span>Contato</span></a></li> </ul> </div>

Modelo 2

Código:

<style type="text/css"> #cssmenu { margin: 0; padding: 0; font-family: Verdana, Helvetica, Arial, sans-serif; } #cssmenu{ width: 210px; } #cssmenu ul{ list-style: none; text-indent: 0px; } #cssmenu li{ margin-top: 3px; } #cssmenu a{ font: 12px Verdana; padding: 4px; color: #646464; display:block; padding: 6px 30px; height: 20px; text-decoration: none; background: urlundefinedhttp://3.bp.blogspot.com/-pVjel70jBa4/UhOTqx-mUSI/AAAAAAAABr0/rgol_0PrtDA/s1600/background.gif) no-repeat; } #cssmenu a:hover{ background: urlundefinedhttp://3.bp.blogspot.com/--p6ptYuCuE0/UhOTq1ohsVI/AAAAAAAABr4/SKiVN-lTjG0/s1600/highlight.gif) no-repeat right; padding: 6px 40px; }:148px;background:urlundefinedimages/nav_active.jpg) no-repeat;color:#b18211;} </style> <div id='cssmenu'> <ul> <li class='active '><a href='LINK AQUI'><span>Home</span></a></li> <li><a href='LINK AQUI'><span>Produtos</span></a></li> <li><a href='LINK AQUI'><span>Sobre</span></a></li> <li><a href='LINK AQUI'><span>Contato</span></a></li> </ul> </div>

Modelo 3

Código:

<style type="text/css"> #cssmenu { padding: 0; margin: 0; border: 0; } #cssmenu ul, #cssmenu ul li, #cssmenu ul ul { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; float: left; } #cssmenu ul li { float: left; min-height: 1px; line-height: 1em; vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul ul ul { top: 1px; left: 99%; } #cssmenu ul li:hover > ul { visibility: visible; } #cssmenu ul ul { top: 1px; left: 99%; } #cssmenu ul li { float: none; } #cssmenu ul { font-weight: bold; } #cssmenu ul ul { margin-top: 1px; } #cssmenu ul ul li { font-weight: normal; } /* Custom CSS Styles */ #cssmenu { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; background-color: #141414; background-image: urlundefineddata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==); background-repeat: repeat-x; width: 200px; } #cssmenu:after { content: ''; display: block; clear: both; } #cssmenu a { background-color: #141414; background-image: urlundefineddata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==); background-repeat: repeat-x; color: white; display: block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; font-weight: normal; line-height: 180%; padding: 13px 20px; text-decoration: none; } #cssmenu ul { border-right: 2px solid #0fa1e0; list-style: none; width: 200px; } #cssmenu > ul { float: left; } #cssmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; right: 0; top: 50%; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #0fa1e0; margin-top: -10px; } #cssmenu > ul > li:first-child >a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; } #cssmenu > ul > li:last-child > a { border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; -webkit-border-radius: 0 0 0 5px; } #cssmenu > ul > li.active a { box-shadow: inset 0 0 3px black; -moz-box-shadow: inset 0 0 3px black; -webkit-box-shadow: inset 0 0 3px black; background-color: #070707; background-image: urlundefineddata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==); background-repeat: repeat-x; } #cssmenu > ul > li:hover > a { background-color: #070707; background-image: urlundefineddata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==); background-repeat: repeat-x; box-shadow: inset 0 0 3px black; -moz-box-shadow: inset 0 0 3px black; -webkit-box-shadow: inset 0 0 3px black; } #cssmenu .has-sub { z-index: 1; } #cssmenu .has-sub:hover > ul { display: block; } #cssmenu .has-sub ul { display: none; position: absolute; width: 150px; top: 5px; left: 100%; } #cssmenu .has-sub ul li { *margin-bottom: -1px; } #cssmenu .has-sub ul li a { background: #0fa1e0; border-bottom: 1px dotted #6fc7ec; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; } #cssmenu .has-sub ul li:hover a { background: #0c7fb0; } #cssmenu .has-sub .has-sub:hover > ul { display: block; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #cssmenu .has-sub .has-sub ul li a { background: #0c7fb0; border-bottom: 1px dotted #6db2d0; } #cssmenu .has-sub .has-sub ul li a:hover { background: #095c80; } </style> <div id='cssmenu'> <ul> <li><a href='LINK AQUI'><span>Home</span></a></li> <li class='active has-sub'><a href='LINK AQUI'><span>Produtos</span></a> <ul> <li class='has-sub'><a href='LINK AQUI'><span>Produto 1</span></a> <ul> <li><a href='LINK AQUI'><span>Sub Produto</span></a></li> <li class='last'><a href='LINK AQUI'><span>Sub Produto</span></a></li> </ul> </li> <li class='has-sub'><a href='LINK AQUI'><span>Produto 2</span></a> <ul> <li><a href='LINK AQUI'><span>Sub Produto</span></a></li> <li class='last'><a href='LINK AQUI'><span>Sub Produto</span></a></li> </ul> </li> </ul> </li> <li><a href='LINK AQUI'><span>Sobre</span></a></li> <li class='last'><a href='LINK AQUI'><span>Contato</span></a></li> </ul> </div>

Modelo 4

Código:

Modelo 5

Código

Difícil vai ser escolher!
Espero que tenham gostado.
Até breve!

5 fantásticas caixas de subscrição por email para Blogger

2015-06-07T12:37:00.003+01:00

Uma das formas de angariar mais leitores é proporcionar aos nosso visitantes uma caixa de subscrição por email, o que é o mesmo que dizer, possibilitar-lhe a recepção de todos os novos posts na sua caixa de correio electrónico.
Aqui no NetBlog, já mostrámos algumas, veja, por exemplo, esta

Todas elas são funcionais e cumprem o seu papel e, para lhe dificultar essa escolha, deixo-lhe hoje mais dez destas imprescindíveis caixas. Agora opte por aquela que achar mais elegante ou mais chamativa.

A forma de instalação é quase sempre a mesma: entre no Esquema do Template> Adicione uma nova mini-aplicação> HTML/JAVASCRIPT e nela cole o código do modelo que pretender.

.................................MODELO 1.................................

Esquema do Template> Adicione uma nova mini-aplicação> HTML/JAVASCRIPT

CÓDIGO:

<div class="subscribe_outer"> <div class="subscribe_wrapper"> <p>Subscreva a newsletter! É GRÁTIS</p> <div id="btntEmailsub"> <form class="btntEmailform" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=FeedID', 'popupwindow', 'scrollbars=yes,width=600,height=540');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify"> <input type="hidden" value="Netblog" name="uri" /> <input type="hidden" value="en_US" name="loc" /> <input class="emailText" type="text" value="Insira o seu email..." onfocus="if undefinedthis.value == " enter="" your="" email...")="" {this.value="" }"="" onblur="if undefinedthis.value == " ")="" ;}"="" onclick="value=&#39;&#39;" name="email" /> <input class="emailButton" type="submit" value="Assine já!" title="" /> </form> </div> </div> </div> <style> .subscribe_outer { background: urlundefined"http://1.bp.blogspot.com/-R8OgBaEYEfQ/UHf_0V7jVjI/AAAAAAAAPJE/FDP4NWvVBhQ/s1600/color-chronicl.gif") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; } .subscribe_wrapper { background: urlundefined"http://1.bp.blogspot.com/-aJhnRZuZjyw/UHf_1zcxQtI/AAAAAAAAPJU/jJJEOM8J52s/s1600/pattern-chronicl.png") repeat scroll 0 0 #333333; color: #CCCCCC; font-size: 15px; font-weight:bold; line-height: 20px; padding: 10px 50px 18px 38px; } .emailButton { background:#249334; border: 0 none; border-radius: 4px 4px 4px 4px; color: #FFFFFF; cursor: pointer; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.4); width: 100%; } .emailText { background: urlundefined"http://4.bp.blogspot.com/-pphfyiwvVr8/UHf_1a5jAvI/AAAAAAAAPJM/cxbjM4o0crk/s1600/email.png") no-repeat scroll 10px center #FFFFFF; border: 0 none; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 3px rgbaundefined0, 0, 0, 0.05) inset; color: #444444; padding: 10px 40px; margin: 0 0 15px; outline: none; text-decoration: none; width: 70%; } input, textarea { font-family:'Lora',georgia,serif; } .subscribe_wrapper { color: #CCCCCC; font-size: 14px; line-height: 20px; } .emailButton { width: 300px; } .emailButton { background: -moz-linear-gradientundefinedcenter top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent; border: 0 none; border-radius: 4px 4px 4px 4px; color: #FFFFFF; cursor: pointer; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.4); width: 100%; } </style>

Substitua 'Netblog', pelo ID do seu feed.

.................................MODELO 2.................................

Esquema do Template> Adicione uma nova mini-aplicação> HTML/JAVASCRIPT

CÓDIGO

Substitua 'Netblog', pelo ID do seu feed.

.................................MODELO 3.................................

Comece por encontrar a tag

]]></b:skin>

e ANTES dela, cole o seguinte código:

.widget.stt_newsletter_widget { background: urlundefinedhttp://3.bp.blogspot.com/-Y9ZhvmIidl4/VQZ056hjpVI/AAAAAAAAKc8/Z01jdkGNJ_4/s1600/subscription-envelope-bg.png) no-repeat; width: 250px; height: 158px; padding: 25px; margin-bottom: 30px; } .stt_newsletter_widget h3 { font-size: 18px; line-height: 22px; margin: 0 0 5px 0; } .stt_newsletter_widget h3 p { background: none; color: #444444; padding: 0; font-size: 18px; line-height: 2px; -webkit-box-shadow: 0 0 0 #222222; -moz-box-shadow: 0 0 0 #222222; box-shadow: 0 0 0 #222222; } .stt_newsletter_widget input[type="text"] { padding: 9px 10px 9px 10px; margin-bottom: 10px; width: 132px; display: inline; border-right: none; -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .stt_newsletter_widget input[type="email"] { padding: 9px 10px 9px 10px; margin-bottom: 10px; width: 128px; display: inline; -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .stt_newsletter_widget input[type="submit"] { background: #E53B2C; width: 90px; font-size: 13px; font-weight: bold; line-height: 21px; color: #FFFFFF; cursor: pointer; padding: 9px 12px; margin: 0; border: none; display: inline; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } .stt_newsletter_widget input[type="submit"]:hover { background: #222222; } .stt_newsletter_widget p { background: none ! important; margin-bottom: 17px; }

Agora, entre no Esquema do Template> Adicione uma nova mini-aplicação> HTML/JAVASCRIPT e nela cole o código seguinte:

<div class="row widget stt_newsletter_widget"> <h3 class="widget-title"> Subscreva a nossa Newsletter</h3> Receba as novidades. Truques e dicas Blogger, Adsense,Icríveis widgets e muito mais. Assine já!<br /> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify? uri=Netblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="email" type="text" /><input name="uri" type="hidden" value="SpicyTechTips" /> <input name="loc" type="hidden" value="en_US" /> <input type="submit" value="Assinar" /> </form> <div class="clear"> <div style="text-align: right;"> </div> </div> </div>

Substitua 'Netblog', pelo ID do seu feed.

.................................MODELO 4.................................

Esquema do Template> Adicione uma nova mini-aplicação> HTML/JAVASCRIPT

CÓDIGO

Substitua o seguinte:
idfeed (3 ocorrências) - ID do seu Feed;
idtwitter - ID do seu Twitter;
idfacebook - ID do seu Facebook;
idgoogle+ - ID do seu Google +
idyoutube - ID do seu canal Youtube

.................................MODELO 5.................................

Esquema do Template> Adicione uma nova mini-aplicação> HTML/JAVASCRIPT

CÓDIGO

Substitua o seguinte:
idfeed (2 ocorrências) - ID do seu Feed.

E é tudo, espero que estas caixas sejam do vosso agrado.
Até breve!

Incrível widget de "Mensagens Populares" para Blogger

2015-06-06T12:15:00.003+01:00

Há uns dias atrás, publicámos uma Fantástica widget de posts populares para o Blogger. Elegante e funcional, cumpre a função principal: dar destaque às mensagens mais vistas pelos nossos leitores.
Hoje apresento-vos uma outra, também ela extremamente funcional, mas que, talvez, ganhe em relação à anterior pela parte estética, parece-me ideal para um blogue direccionado para as artes, pela sua elegância estética.
Seguramente com ela, não correrá o risco de os seus leitores não repararem nela, como pode constatar pelo resultado final , que poderá ver no blogue de provas, nesta

DEMONSTRAÇÃO

ou até pela imagem:

A sua instalação é bem simples, vamos aos habituais passos.

PASSO 1- Entre no Esquema do seu Template> adicionar uma nova mini-aplicação> Mensagens Populares.

PASSO 2 - Entre no modelo do seu template> Editar HTML e procure pela tag

]]></b:skin>

ACIMA dela cole o seguinte código:

/* Popular Posts Widget customized by AllBloggerTricks.com */ .PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; } .PopularPosts .item-title { position: relative; } .PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; } .item-title a { background:rgbaundefined0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; } .item-snippet { background:rgbaundefined0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; } .item-content:hover img {transform: rotateundefined10deg) scaleundefined1.2);} .item-content { position: relative; }

PASSO 3 - Procure, agora, pela tag

</body>

e ACIMA dela cole o seguinte script:

Espero que tenham gostado do resultado final.
Até breve!
.........................................................................................
Tutorial traduzido por NetBlog, retirado de All Blogger Tricks

Download Photofiltre Studio X 10.9.2 (última versão)

2015-06-06T10:52:00.002+01:00

Trago-vos hoje a versão mais recente (Janeiro de 2015) deste simples, mas poderoso programa.

Como sabem, existem muitos programas para edição de imagem, por que razão hei-de ter escolhido este. É simples: porque, embora leve, é uma ferramenta poderosa, bastante completa, na linha do Photoshop.

Inclui muitos filtros, trabalha com camadas, possui ajustes no teclado, possibilita a conversão de formatos, permite a criação de gifs animados, dando ao utilizador uma experiência extremamente gratificante pelos resultados que proporciona.

Após vários anos de utilização, aponto apenas um aspecto negativo ao programa: tornar-se muito lento, quando se trata da edição de imagens mais pesadas, no entanto, este factor também depende muito da capacidade do seu computador.

	Versão para instalação no PC 11MB DOWNLOAD AQUI
	Versão portable (não precisa de qualquer tipo de instalação, pois corre a partir de uma pendrive, sem perder nenhum dos recursos) 11MB DOWNLOAD AQUI

Para registar o programa, veja este post:

Registo do PhoroFiltre Studio X

Para traduzir o programa, veja este post:

Traduzir o PhotoFiltre Studio X

Pode, ainda, ver alguns dos tutoriais que já aqui publicámos:

Por hoje, é tudo.

Até breve!

Extraordinário sitemap para blogger

2015-06-05T18:35:00.000+01:00

Ter um mapa no site é absolutamente fundamental, pois permite uma navegação mais demorada, na medida em que o leitor acaba por ter à sua frente todos os conteúdos já publicados.
Naturalmente, quem entra mapa do nosso site ou procura algo específico, ou então, tenta ter uma visão generalizada de todos os assuntos já abordados. Seja por uma razão ou por outra, a verdade é que acabará por fazer uma visita mais demorada, encontrando,por vezes posts já "adormecidos" no tempo.
Há várias formas de inserir um mapa do site, umas mais complexas que outras, umas mais chamativas, outras mais organizadas.
Já usei várias, mas fiquei rendida a esta que vos trago, a mesma que uso aqui no NetBlog, veja o Mapa do Site e encante-se com a elegância e a competência desta ferramenta.

Se preferir algo mais simples, então não deixe de ver
- Mapa do site por categorias

Pois bem, a instalação é bastante fácil.
Vamos ver:

Passo 1 - Crie uma nova página em branco para o seu blogue e dê-lhe o nome de Mapa do Site.
Passo 2 - Abra a aba HTML do editor de texto da sua nova página, conforme as instruções abaixo.

Passo 3 - Cole os códigos que se apresentam seguidamente: CSS+HTML+JavaScript uns abaixo dos outros pela ordem que se apresenta:

CÓDIGO CSS

CÓDIGO HTML

<div dir="ltr" style="text-align: left;" trbidi="on"> <div id="table-outer"> <table><tbody> <tr><td><label>Pesquisar por : </label></td><td><select id="orderFeedBy"><option selected="" value="published">Novos Posts</option><option value="updated">Post updated</option></select></td></tr> <tr><td><label>Pesquisar por categoria : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Aguarde...</option></select></span></td></tr> <tr><td><label>Pesquisar por palavra-chave : </label></td><td><form id="postSearcher"> <input type="text" /></form> </td></tr> </tbody></table> </div> <br /> <header id="resultDesc"></header><br /><br /> <ul id="feedContainer"></ul> <div id="feedNav"> Aguarde...</div>

CÓDIGO JAVASCRIPT

Passo 4 - Grave.

E pronto, é tudo, o seu sitemap está pronto. Até breve!

........................................................................................................
Informação traduzida por NetBlog, retirada de Blogger Spice

9 fantásticas barras de carregamento para Blogger

2015-06-05T13:55:00.001+01:00

Que adicionar uma barra de carregamento ao seu blogue e não sabe como fazê-lo?

O procedimento é bem simples e vai ser explicado abaixo.

Esta é uma ferramenta que não é indispensável, no entanto, ainda assim, é bastante útil, pois, sobretudo se a página for muito pesada, permite ao visitante perceber o tempo que falta para ficar completamente carregada.

Abaixo, deixo alguns scripts, que permitem a sua instalação, tendo cada um deles, aspectos diferentes.

Experimente, para ver o resultado, mas opte apenas por um, para evitar conflitos no código do seu blogue.

Poder ver um deles em ação nesta DEMONSTRAÇÃO.

Vamos, então à instalação:

Passo 1 - Procure pela tag

]></ b: skin>

e ABAIXO dela cole o seguinte código:

Passo 2 - Grave.
O código acima é o da demonstração referida. Se pretender outras formas de carregamento, opte por um dos códigos que são deixados abaixo, sendo o procedimento sempre o mesmo. Uma vez mais, escolha APENAS UM código.

Cá vão eles:

BARRA AZUL DISCRETA

BARRA AZUL MAIS LARGA

ANIMAÇÃO AZUL NO CANTO SUPERIOR DIREITO

CÍRCULO AZUL NO CANTO SUPERIOR DIREITO

PEQUENA BARRA CENTRAL

PEQUENO CÍCULO CENTRALIZADO

TEMA ÁTOMO CENTRALIZADO

TEMA RADAR CENTRALIZADO

E é tudo! Faça a sua escolha, agora! Até breve!

....................................................................................................................
Informação traduzida e selecionada por Netblog e retirada de Blogger Tips and Tricks

Fantástica widget de posts populares

2015-06-04T18:51:00.000+01:00

Uma widget com os posts mais populares do blogue é uma das melhores formas de prender os nossos leitores, daí que, actualmente, faça parte da maioria dos blogues. Por ter tamanha importância, há que dar-lhe destaque, para que não se perca no barra lateral da nossa página e prenda de imediato a atenção de quem nos visita.

A que aqui trago cumpre fielmente esse propósito, pois, para além de extremamente elegante, chama a atenção do visitante.

Poderão ver a DEMONSTRAÇÃO na barra lateral blogue de provas.
O aspecto será este:

A sua instalação é bastante simples, vejam:

1- Entre no Esquema do Template>Adcionar uma miniaplicação> Mensagens populares

2 - Após isso, entre no Esquema do Template> Editar HTML, procure pela tag

]]></b:skin>

e imediatamente ANTES, cole o seguinte código:

/*Splendid Popular Posts by http://www.bloggerspice.com*/ #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:#04BDFA;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:#05EEFB;width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:#04BDFA;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:#05EEFB;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#04BDFA;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#05EEFB;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#04BDFA;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#05EEFB;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#04BDFA;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:0px;right:-15px;border-radius:5%;background:#353535;width:20px;height:100%;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border-radius:15%;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;} #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none} #PopularPosts3 img{ -moz-border-radius: 130px; -webkit-border-radius: 130px; border-radius: 130px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; padding:4px; border:1px solid #fff !important; background: #F2F2F2;}#PopularPosts1 img:hover { -moz-transform: scaleundefined1.2) rotateundefined-560deg) ; -webkit-transform: scaleundefined1.2) rotateundefined-560deg) ; -o-transform: scaleundefined1.2) rotateundefined-560deg) ; -ms-transform: scaleundefined1.2) rotateundefined-560deg) ; transform: scaleundefined1.2) rotateundefined-560deg) ; }

Espero que seja do vosso agrado.
Até breve!

Elegante widget flutuante Blogger para partilhar nas redes sociais

2015-06-04T15:20:00.000+01:00

Se procura uma elegante, útil e funcional ferramenta que permita aos seus visitantes artilhar o seu conteúdo nas redes sociais, poderá encontrar várias aqui no NetBlog:

Talvez preferira uma das que já foram publicadas, no entanto, se procurar algo mais dinâmico, sem ser intrusivo, a que vos trago hoje é absolutamente fantástica e respeita todas essas exigências.

Os botões de partilha são, seguramente, uma das formas de atrair mais seguidores e fazer com nos sigam nas várias redes sociais. Os desta "widget" são flutuantes e discretos, aparecendo apenas os logótipos das várias páginas, no entanto, assim que se lhe coloca o rato em cima, expandem-se, surgindo o apelo a que o visitante nos siga.

O aspecto, depois de se passar o rato por cima, será este:

Também poderão vê-la nesta DEMONSTRAÇÃO

Vamos então à instalação.

1- Comece por procurar a tag

]]></ b: skin>

e ANTES dela cole o seguinte código:

.social-buttons{position:fixed;top:150px;width:45px;z-index:9999} .button-left{left:0} .button-right{right:0} .social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon{background-color:#33353B;background-image:url(http://1.bp.blogspot.com/-zt3csy2DqGo/U661h1iTakI/AAAAAAAAAFc/v5tUjZIJDHs/s1600/mas-icons.png)} .button-left #facebook-btn span{background-position:right 10px} .button-left #twitter-btn span{background-position:right -35px} .button-left #google-btn span{background-position:right -127px} .button-left #rss-btn span{background-position:right -80px} .button-right #facebook-btn span{background-position:12px 10px} .button-right #twitter-btn span{background-position:11px -35px} .button-right #google-btn span{background-position:10px -127px} .button-right #rss-btn span{background-position:11px -80px} .social-buttons #facebook-btn:hover .social-icon{background-color:#3B5998} .social-buttons #twitter-btn:hover .social-icon{background-color:#62BDB2} .social-buttons #google-btn:hover .social-icon{background-color:#DB4A39} .social-buttons #rss-btn:hover .social-icon{background-color:#FF8B0F} .social-buttons #pinterest-btn:hover .social-icon{background-color:#D43638} .social-buttons #youtube-btn:hover .social-icon{background-color:#C4302B} .social-buttons a:hover .social-text{display:block} .button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:left;height:43px;margin-bottom:2px;width:43px} .button-left .social-text{display:none;float:right;font-size:1em;font-weight:700;white-space:nowrap;margin:11px 40px 11px 0} .button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px} .button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:11px 0 11px 40px} .social-buttons .social-text{color:#FFF} .button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px} .button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px}

2- Procure, agora, a tag

</ head>

e imediatamente ANTES dela, cole o código que a seguir se apresenta.

3- Finalmente, procure por

</ body>

e ANTES desta tag, cole o código seguinte:

<Div class = "-botões sociais botão direito do mouse escondida-phone oculto-tablet"> <a class = 'itemsocial' href = ' https://www.facebook.com/SUAIDFACEBOOK"rel = nofollow '' id = 'facebook "target =" _ blank -btn "> <span class ="-ícone social "> <span class =" text-social "> Siga-nos via Facebook </ span> </ span> </a> <a class = ' itemsocial 'href =' https://twitter.com/SUAIDTWITTER "rel = nofollow '' id = '' target = 'twitter-btn _ blank"> <span class = "-ícone social"> <span class =' social- texto "> Siga-nos via Twitter </ span> </ span> </a> <a class = 'itemsocial' href = ' https://plus.google.com/SUAIDGOOGLE+ "rel = nofollow '' id = ' google-btn 'target =' _ blank '> <span class = "-ícone social"> <span class = "text-social"> Siga-nos através do Google </ span> </ span> </a> <a class = 'itemsocial' href = ' http://pinterest.com/SUAIDPINTEREST "rel =" nofollow "id = target = 'Pinterest-btn' '_ blank'> <span class ="-ícone social "> <span class = "social -text "> Siga-nos via Pinterest </ span> </ span> </a> <a class = 'itemsocial' href = ' https://www.youtube.com/user/SUAIDYOUTUBE "rel = nofollow '' id = 'youtube-btn' target = '_ blank'> <span class = "-ícone social"> <span class = "text-social"> Siga-nos via Youtube </ span> </ span> </a> <a class = href 'itemsocial' = ' http://feeds.feedburner.com/SUAIDFEED "rel = nofollow '' id = alvo" btn-rss '=' _ blank '> <span class = "-ícone social"> <span class = "text-social"> Siga-nos através do RSS </ span> </ span> </a> </ div>

Não se esqueça de substituir a informação a vermelho pelas suas ID das várias redes sociais.

https://www.facebook.com/SUAIDFACEBOOK
https://twitter.com/SUAIDTWITTER
https://plus.google.com/SUAIDGOOGLE+
http://pinterest.com/SUAIDPINTEREST
https://www.youtube.com/user/SUAIDYOUTUBE
http://feeds.feedburner.com/SUAIDFEED

Espero que tenham conseguido instalá-la e que seja do vosso agrado! Até breve!

Fantásticas Pop-up para assinar o Feed

2015-06-03T17:36:00.000+01:00

Esta é uma ferramenta absolutamente essencial para qualquer página ou blogue, já que permite que os nossos leitores passem a receber na sua caixa de correio todas as actualizações que fizermos. Desta forma, trago-vos esta fantástica pop-up, que abre cada vez que alguém entra na nossa página.

Poderão encontrar outras formas de subscrição, estas fixas, que já aqui foram publicadas:

Caixa de subscrição por email; ou então

O blogue no seu email

A que vos trago hoje tem esta aparência:

Aspecto final

Vamos ao "modo de preparação", mas antes, pode ver a

DEMOSNTRAÇÃO

1 - Entre no template do seu blogue> editar HTML e procure pela tag

</head>

e antes dela, cole o seguinte código:

2- Procure, agora pela tag

</body>

e antes dela cole o seguinte código

<center><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.openundefined"http://feedburner.google.com/fb/a/mailverify?uri=Netblog" , "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'> <input name='uri' type='hidden' value='Netblog'/> <input name='loc' type='hidden' value='en_US'/> <input class='emailinput' id='boxfeed' name='email' onblur='if undefinedthis.value == "") {this.value = "Insira o seu email";}' onfocus='if undefinedthis.value == "Insira o seu email") {this.value = ""}' type='text' value='Insira o seu email'/> <input id='buttonfeed' type='submit' value='Assinar'/> </form></center> <div id="creditcc"> <a href="JavaScript:voidundefined0)" id="closecc"><img src="http://4.bp.blogspot.com/-n5Xshozx_qE/VWixkZ9Si_I/AAAAAAAAKEo/S0sVOG35Ag8/s1600/icon-close.png" width="15px"/>Fechar</a> </div> </div> </div> </div>

3 - Faça a seguinte substituição:
- onde aparece Netblog, substitua pelo seu ID FeedBurner.

Grave as alterações e já está.
Espero que seja do vosso agrado.
Até breve!

10 formas de adicionar Adsense ao seu blogue

2015-06-02T11:43:00.002+01:00

Neste artigo tentarei, de forma simples, mostrar em que locais do blogue podemos adicionar códigos do Adsense, quais os melhores formatos e a forma de os implementar.
O artigo poderá ficar um pouco extenso, mas tentarei ser clara.
É importante ler detalhadamente as instruções, para que tudo corra conforme o esperado.

1 - Adsense na "Sidebar"

Como inserir?

É extremamente fácil: ou adicionamos um elemento HTML/JavaScript e colocamos os código, ou simplesmente adicionamos um elemento Adsense, a partir do esquema do template.

Formatos recomendados: 125x125; 120x600; 160x600 ou 300x600.

2 - Adsense entre os posts

Como inserir?

Trata-se também de uma forma fácil, basta entrar no esquema do template, na caixa dos posts clicar em Editar e seleccionar a opção "Mostrar anúncios entre mensagens".

Formatos recomendados: 468x60; 300x250 ou 336x280.

3 - Adsense por baixo da "Header"

Como inserir?

Antes de tudo, depois de ter o seu código, importa convertê-lo. Poderá convertê-lo neste CONVERSOR ADSENSE que o NetBlog disponibiliza.

De seguida, entre no editor HTML do seu blogue e procure (CTRL+F) e procure por:

<div id='header-wrapper'>

Quando encontrar, cole o seu código CONVERTIDO imediatamente abaixo.

Formatos recomendados: 798x90 ou 728x15.

4 - Adsense acima da área dos posts.

Como inserir?

Poderá fazê-lo de duas formas, ou através de um elemento de página HTML/JavaScript, que deverá posicionar na área assinalada, ou então, caso o seu template não permita esta opção, deverá converter o seu código e colá-lo imediatamente abaixo da seguinte linha:

<div id='main-wrapper'>

Formatos recomendados: 460x68; 468x15 ou 336x280.

5 - Adsense abaixo do título dos posts (visível em todas as páginas)

Como inserir?

Converta o seu código e vá ao seu Template > Editar HTML e procure (CRTL+F) pela linha

<div class='post-header-line-1'/>

Nota: se não conseguir encontrar, retire a barra /.

Abaixo dela cole o seu código convertido.
Este método fará com que o anúncio apareça em todas as páginas. Se pretender mostrá-lo apenas nas páginas dos posts, então proceda da seguinte forma:

Converta o seu código e vá ao seu Template > Editar HTML e procure (CRTL+F) pela linha

<div class='post-header-line-1'/>

Nota: se não conseguir encontrar, retire a barra /.
Seguidamente, cole o seguinte trecho:

<B: if 'dados: blog.pageType == "item"' = cond> <! - Adicione aqui o código do seu anúncio- > </ b: if>

e cole o seu código na área assinalada.

Formatos recomendados: 468x15 ou 468x68.

6 - Adsense no "Post-footer"

Como inserir?

Converta o seu código e procure pela linha (CTRL+F)

<p class='post-footer-line post-footer-line-3'/>

Nota: se não conseguir encontrar, retire a barra /.
Cole o seu código imediatamente abaixo dela.

Formatos recomendados: 468x15 ou 468x68.

7 - Adsense no corpo dos posts (à direita) - visível em todas as páginas.

Converta o seu código e procure pela linha (CTRL+F)

<div class='post-body entry-content'>

Caso não a encontre, procure, simplesmente, por:

<div class='post-body'>

e cole abaixo dela o seu código convertido, da seguinte forma:

<div style='float:right'>  </div>

Formatos recomendados: 125x125; 180x150; 120x240 ou 200x200.

8 - Adsense no corpo dos posts (à direita) - visível apenas nas páginas dos posts.

Converta o seu código e procure pela linha (CTRL+F)

<div class='post-body entry-content'>

Caso não a encontre, procure, simplesmente, por:

<div class='post-body'>

e cole abaixo dela o seu código convertido, da seguinte forma:

<b:if cond='data:blog.pageType == "item"'> <div style='float:right'>  </div> </b:if>

Formatos recomendados: 125x125; 180x150; 120x240 ou 200x200.

9 - Adsense entre os posts e os comentários (visível em todas as páginas)

Converta o seu código e procure pela linha (CTRL+F)

</b:includable> <b:includable id='postQuickEdit' var='post'>

e cole o seu código acima dela, como se indica:

<b:if cond='data:blog.pageType == "item"'>  </b:if>

Formatos recomendados: 468x60; 300x250; ou 336x280.

10- Adsense no footer do blogue.

Converta o seu código e procure pela linha (CTRL+F)

<div id='footer-wrapper'>

Cole o seu código convertido imediatamente abaixo.

Formatos recomendados: 728x90 ou 728x15.

FAQ

1- Não consigo encontrar o código, o que fazer?
Antes de tudo, certifique-se de que os está a utilizar exatamente como são fornecidos, sem espaços a mais ou a menos; os códigos apresentados são padrão no Blogger, poderá não os encontrar, caso tenha sido feita alguma alteração ao template, ou se este for, por exemplo, uma adaptação à plataforma Blogger.

2 - Por que razão tenho de converter o código Adsense?
Caso não seja convertido, o modelo do Blogger irá lê-lo como texto e não como código, para evitar erros, é imprescindível que se faça a conversão.

3 - Posso colocar os 10 anúncios no meu blogue?
Não, nem convém, para que não atrapalhem o conteúdo do seu blogue, isso sim o mais importante; Além disso, o Regulamento do Adsense apresenta limites que devem ser respeitados, sob pena de cancelamento da conta.

4 - Quantos anúncios posso exibir?
Segundo o Regulamento do Adsense, apenas três de conteúdo; caso pretenda mostrar mais, então combine estes com, por exemplos, anúncios apenas de texto.

Informação retirada e traduzida de Help Blogger

Pop-up like box do Facebook

2015-05-31T13:51:00.000+01:00

Uma forma de conseguir mais fãs é, sem dúvida, ter uma pop-up, que surge de cada vez que alguém entra no nosso blogue, ou página.
O procedimento é bem simples e o resultado altamente compensador.
Pois é mesmo isso que vos trago, uma pop-up, que permite angariar mais fãs e assim fazer crescer o número daqueles que nos lêem.
Hoje em dia, as redes sociais são uma das melhores ferramentas para a divulgação de conteúdo, pelo que todos estes widgets são bem-vindos. Além disso, rata-se de uma janela nada intrusiva e bastante leve.
Vamos então aos procedimentos para a sua instalação:

1 - Adicione um novo elemento de página;
2 - Seleccione HTML/JavaScrip e cole o seguinte código:

<style type='text/css'> #popup{ position: fixed; top:100px; z-index:9999; display:none; padding:0px; right:600px; border:10px solid rgba(82, 82, 82, 0.7); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ -webkit-border-radius:8px 8px 8px 8px; -moz-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px; width:400px; height:360px; overflow:hidden; } #popup span{ font-size:20px !important; font-weight:bold !important; } #popup h1{ background:#6d84b4 url(http://4.bp.blogspot.com/-rNUTIpDQ21s/T0NqE_vv6GI/AAAAAAAACps/GSoWE2n9Oy8/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat; border:1px solid #3b5998 !important; color:#FFFFFF !important; font-size:20px !important; font-weight:700 !important; padding:5px !important; margin:0 !important; font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important; overflow:hidden !important; } .htmlarea{ font-size:12px !important; font-weight:normal !important; height:265px !important; padding:1px !important; background:#fff !important; border-bottom:2px solid #ddd; overflow:hidden !important; } #mdfooter{ text-align:left; background:#F2F2F2 !important; height:56px !important; padding:10px 10px 10px 10px !important; overflow:hidden !important; } #mdclose{ float:right; background-color:#eee !important; border:1px solid #ccc !important; color:#111 !important; font-weight:bold !important; padding:5px 8px 5px 8px !important; text-decoration:none !important; display:inline-block !important; font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important; outline:none !important; position:relative !important; font-size:18px !important; margin:1px !important; } #mdclose:active{ top:1px; left:1px; } </style> <script type='text/javascript'> jQuery(document).ready(function() { function _ppopup() { var sec = 10 var timer = setInterval(function() { $("#mdfooter span").text(sec--); if (sec == 0) { $("#popup").fadeOut("slow"); clearInterval(timer); } },1000); var mdwh = jQuery(window).height(); var mdpph = jQuery("#popup").height(); var mdfromTop = jQuery(window).scrollTop()+50; jQuery("#popup").css({"top":mdfromTop});} jQuery(window).fadeIn(_ppopup).resize(_ppopup) //alert(jQuery.cookie('sreqshown')); //var mdww = jQuery(window).width(); //var mdppw = jQuery("#popup").width(); //var mdleftm = (mdww-mdppw)/2; var mdleftm = 500; //var mdwh = jQuery(window).height(); //var mdpph = jQuery("#popup").height(); //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2; jQuery("#popup").animate({opacity: "1", left: "0" , left: mdleftm}, 0).show(); jQuery("#mdclose").click(function() { jQuery("#popup").animate({opacity: "0", left: "-5000000"}, 1000).show();});}); </script> <div id="popup"> <h1>Seja nosso fã!</h1> <div class="htmlarea"> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FSUAPAGINAAQUI&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe> </div> <div id="mdfooter"> Please wait..<span>10</span> Seconds <a href="#" id="mdclose" onclick="return false;">Fechar</a> </div> </div>

Ficará algo semelhante :

(imagem meramente ilustrativa)

Os elementos a vermelho, permitem ser alterados, sendo que, um deles é obrigatório, pois, de outra forma não irá funcionar.
Assim, onde se encontra SUAPÁGINAAQUI, deverá colocar o nome da sua página de fãs, ou, se for o caso, o ID, sem alterar nada. Apenas substitui o que está a vermelho.
E é tudo.
Caso não funcione, poderá dar-se o caso de faltar a biblioteca jqwery ao seu template. Para resolver isso, basta que acrescente a seguinte linha, ANTES da tag </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

E é tudo! Espero que tenham gostado!
Até breve!

Comentários recentes com animação

2015-05-30T16:59:00.002+01:00

São tantos os widgets deste género, que hesitei em publicá-lo, no entanto, por ser tão simples de instalar, ter um visual tão limpo e ainda por cima ser animado, optei por deixá-lo aqui.
Com a sua instalação teremos acesso aos últimos comentários deixados no nosso blogue e mostrando aos outros visitantes, de forma fácil, o que outros escreveram sobre nós.
A instalação é francamente simples, basta adicional uma nova mini-aplicação, escolher um elemento HTML/JavaScript e colar o código que aqui vos deixo. Fazer uma pequeníssima alteração,s e assim o entenderem e gravar.

Então cá vai:
1 - Adicione um novo elemento ao esquema do seu template;
2 - Selecciona HTML/JavaScript;
3- Copie e cole o seguinte código:

O resultado, se tudo correr bem, será este:

Antes de adicionar o widget, poderá querer fazer algumas alterações:

numComments - o número de comentários que serão mostrados.
showAvatar - mude para false, caso não pretenda qualquer imagem.
avatarSize - a medida da imagem em px.
roundAvatar - mude para false, se não pretender o sombreado na imagem.
characters - número de letras que pretende que sejam mostradas.
defaultAvatar - imagem que será mostrada por defeito, caso quem comente não tenha imagem de perfil.
adminBlog - coloque o seu nome de administrador, caso não pretenda aparecer nesta lista.

E é tudo.
Obrigada por continuarem a visitar o Netblog, apesar da ausência prolongada. Até breve!

Como adicionar anúncios Adsense no "footer" do blogue

2015-05-27T12:29:00.000+01:00

Para terminar este tema, trago hoje uma última forma de adicionar anúncios Adsense na área do template do blog e com isso permitir uma rentabilização das publicações online.
Desta vez, mostro como colocá-los no "footer" do blogue,uma área tantas vezes menosprezada, mas que pode trazer benefícios financeiros, caso tenhamos um blogue bem estruturados e de conteúdo relevante.
Vamos então ao tutorial:

Converta o seu código e procure pela linha (CTRL+F)

<div id='footer-wrapper'>

Cole o seu código convertido imediatamente abaixo.

Formatos recomendados: 728x90 ou 728x15.

Veja também outras formas de adicionar este códigos:

-na "sidebar"

-na "header"

- acima da área dos posts

- entre os posts

- abaixo do título dos posts

- entre a área dos "posts" e comentários

- no corpo dos posts (duas formas)

- no "post-footer" do blogue

ou talvez prefira este post onde estão reunidas todas as formas:
10 maneiras de inserir anúncios Adsense no seu template

Como colocar Adsense entre a área de "posts" e comentários

2015-05-21T12:26:00.000+01:00

O tutorial de hoje mostra-vos como colocar códigos de Adsense entre a área dos "posts" do vosso blogue e a de comentários, à semelhança dos anúncios dentro dos posts, esta é também uma das formas de melhor rentabilizar estes anúncios.

Seguem os procedimentos:

Converta o seu código e procure pela linha (CTRL+F)

</b:includable> <b:includable id='postQuickEdit' var='post'>

e cole o seu código acima dela, como se indica:

<b:if cond='data:blog.pageType == "item"'>  </b:if>

Formatos recomendados: 468x60; 300x250; ou 336x280.

Veja também outras formas de adicionar este códigos:

-na "sidebar"

-na "header"

- acima da área dos posts

- entre os posts

- abaixo do título dos posts

- no "footer" do blogue

- no corpo dos posts (duas formas)

- no "post-footer" do blogue

ou talvez prefira este post onde estão reunidas todas as formas:

10 maneiras de inserir anúncios Adsense no seu template

Como colocar Adsense no corpo dos posts (duas formas de visibilidade)

2015-05-20T12:22:00.000+01:00

Deixo-vos aqui mais uma forma de inserirem o código Adsense no vosso blogue. Desta vez, no corpo do post, à direita e com duas possibilidades: visível em todas as páginas ou apenas nas dos posts, de acordo com aquilo que pretenderem.

Um conselho útil, para além da produção de conteúdo relevante, que não é propriamente um conselho, antes uma obrigatoriedades, será o de não serem colocados demasiados anúncios, pois, para além de relegar para segundo plano o conteúdo da página, também se torna demasiado intrusivo e produzir o efeito contrário: afastar leitores, em vez que os angariar, o que não é, de forma alguma, aquilo que se pretende por quem quer gerar um rendimento extra.

Segue, então o "modo de fazer".

Converta o seu código e procure pela linha (CTRL+F)

<div class='post-body entry-content'>

Caso não a encontre, procure, simplesmente, por:

<div class='post-body'>

e cole abaixo dela o seu código convertido, da seguinte forma:

<div style='float:right'>  </div>

<div class='post-body entry-content'>

Caso não a encontre, procure, simplesmente, por:

<div class='post-body'>

e cole abaixo dela o seu código convertido, da seguinte forma:

<b:if cond='data:blog.pageType == "item"'> <div style='float:right'>  </div> </b:if>

Formatos recomendados: 125x125; 180x150; 120x240 ou 200x200.

Veja também outras formas de adicionar este códigos:

-na "sidebar"

-na "header"

- acima da área dos posts

- entre os posts

- abaixo do título dos posts

- entre a área dos "posts" e comentários

- no "footer"

- no "post-footer" do blogue

ou talvez prefira este post onde estão reunidas todas as formas:

10 maneiras de inserir anúncios Adsense no seu template

Como inserir Adsense no "post-footer"

2015-05-19T12:17:00.000+01:00

Tal como tem vindo a ser hábito nas últimas publicações, trago hoje mais uma forma de colocar anúncios Adsense, desta vez no "post-footer" do post, uma área bastante importante, já que se trata de uma das que gera maior número de cliques, logo uma maior receita.
Naturalmente que se o seu conteúdo não for elevante, dificilmente obterá os ganhos que pretende, pelo que, leia bastante e tenha todo o primor na forma como redige as suas publicações. Só dessa forma poderá conseguir o sucesso financeiro que pretende.

Como inserir?

Converta o seu código e procure pela linha (CTRL+F)

<p class='post-footer-line post-footer-line-3'/>

Nota: se não conseguir encontrar, retire a barra /.
Cole o seu código imediatamente abaixo dela.

Formatos recomendados: 468x15 ou 468x68.

Veja também outras formas de adicionar este códigos:

-na "sidebar"

-na "header"

- acima da área dos posts

- entre os posts

- abaixo do título dos posts

- no footer do blogue

- no corpo dos posts (duas formas)

ou talvez prefira este post onde estão reunidas todas as formas:
10 maneiras de inserir anúncios Adsense no seu template

Como inserir Adsense abaixo do título dos posts

2015-05-17T12:13:00.000+01:00

Uma vez mais, um tutorial sobre códigos Adsense e a sua inserção no template do seu blog.
O tutorial de hoje, ensina a colocar os anúncios abaixo do título dos posts. A tarefa não é difícil e poderá constituir uma excelente forma de conseguir algum rendimento extra com o seu blogue. Naturalmente, e nuncae demais referir a importância, aliás, a exigência absoluta de se produzir conteúdo relevate, pois de outra forma não será possível atrair um número de leitores considerável, que permita o tão desejado retorno monetário.
Vamos, pois, ao tutorial:

Como inserir?

Converta o seu código e vá ao seu Template > Editar HTML e procure (CRTL+F) pela linha

<div class='post-header-line-1'/>

Nota: se não conseguir encontrar, retire a barra /.
Seguidamente, cole o seguinte trecho:

<B: if 'dados: blog.pageType == "item"' = cond> <! - Adicione aqui o código do seu anúncio- > </ b: if>

e cole o seu código na área assinalada.

Formatos recomendados: 468x15 ou 468x68.

-na "sidebar"

-na "header"

- acima da área dos posts

- entre os posts
-entre os posts e os comentários

- no footer do blogue

- no corpo dos posts (duas formas)

ou talvez prefira este post onde estão reunidas todas as formas:

10 maneiras de inserir anúncios Adsense no seu template

Como adicionar código Adsense entre os posts

2015-05-15T12:00:00.000+01:00

Recentemente publiquei um pequeno artigo que ensinava a colocar código Adsense na sidebar do blogue. Hoje, trago uma nova forma de inserir este tão desejado código por todos queles que pretendem obter um rendimento extra com a sua página.
O procedimento é semelhante e muito simples, como poderão ver desde já.

Como inserir?

Trata-se também de uma forma fácil, basta entrar no esquema do template, na caixa dos posts clicar em Editar e seleccionar a opção "Mostrar anúncios entre mensagens".

Formatos recomendados: 468x60; 300x250 ou 336x280.

E é tudo, até breve!

Veja outras formas de inserir os anúncios:

-na "sidebar"

- acima da área dos posts

- abaixo do título dos posts

- entre a área dos "posts" e comentários

- no "footer"

- no "post-footer" do blogue

ou talvez prefira este post onde estão reunidas todas as formas:

10 maneiras de inserir anúncios Adsense no seu template

Como colocar anúncios Adsense abaixo da "Header" do blogue

2015-05-14T12:03:00.000+01:00

Vários tem sido dos posts sobre Adsense que tenho vindo a publicar. Pretendo, com eles, possibilitar a todos que se sirvam deste poderoso recurso (quando bem utilizado) para poder rentabilizar a sua página.

Desta vez ensino como colocar os anúncios abaixo da "header" do blogue, uma das áreas mais importantes, por ser uma daquelas que maior rendimento pode gerar.

Nunca é demais alertar para a absoluta necessidade de produzir conteúdo relevante e original, pois de outra forma, dificilmente conseguirá obter aquele rendimento extra.

Vamos então ao tutorial.

Como inserir?

Antes de tudo, depois de ter o seu código, importa convertê-lo. Poderá convertê-lo neste CONVERSOR ADSENSE que o NetBlog disponibiliza.

De seguida, entre no editor HTML do seu blogue e procure (CTRL+F) e procure por:

<div id='header-wrapper'>

Quando encontrar, cole o seu código CONVERTIDO imediatamente abaixo.

Formatos recomendados: 798x90 ou 728x15.

Veja outras formas de inserir os anúncios:

-na "sidebar"

- acima da área dos posts

- entre os posts

- abaixo do título dos posts

- entre a área dos "posts" e comentários

- no "footer"

- no "post-footer" do blogue

ou talvez prefira este post onde estão reunidas todas as formas:

10 maneiras de inserir anúncios Adsense no seu template

Como colocar Adsense acima da área dos posts

2015-05-12T12:09:00.000+01:00

Têm sido vários os posts em que tenho trazido instruções para a inserção de códigos Adsense nas várias áreas do template do blogue.

Hoje trago mais uma dessas formas: acima da área dos posts. Um pouco mais complexa, caso o seu template não permita a inserção a partir dos elementos de página, mas não de impossível concretização.

Vamos, então, ao tutorial.

Como inserir?

<div id='main-wrapper'>

Formatos recomendados: 460x68; 468x15 ou 336x280.

Veja outras formas de inserir os anúncios:

-na "sidebar"

- entre os posts

- abaixo do título dos posts

- entre a área dos "posts" e comentários

- no "footer"

- no "post-footer" do blogue

ou talvez prefira este post onde estão reunidas todas as formas:

10 maneiras de inserir anúncios Adsense no seu template

Como adicionar anúncios Adsense na "Sidebar" do blogue

2015-05-07T11:56:00.000+01:00

Vamos ver como coloca o código do Adsense na "Sidebar" do blogue.
O procedimento é simples e poder-nos-á trazer algum retorno financeiro, desde que, e isto é o grande segredo, consigamos produzi conteúdo relevante que atraia leitores. Sem isso, poderíamos até ter o número máximo de anúncios, que o rendimento seria nulo.
Vamos então ao tutorial, que é bem simples.

1 - Adsense na "Sidebar"

Como inserir?

É extremamente fácil: ou adicionamos um elemento HTML/JavaScript e colocamos os código, ou simplesmente adicionamos um elemento Adsense, a partir do esquema do template.

Formatos recomendados: 125x125; 120x600; 160x600 ou 300x600.

Veja outras formas de inserir os anúncios:

-na "header"

- acima da área dos posts

- entre os posts

- abaixo do título dos posts

- entre a área dos "posts" e comentários

- no "footer"

- no "post-footer" do blogue

ou talvez prefira este post onde estão reunidas todas as formas:

10 maneiras de inserir anúncios Adsense no seu template