DiretorioUP

Postagens relacionadas no rodapé dos posts no blogger

2011-05-26T12:28:00.001-03:00

Um dos widgets mais interessantes que eu até utiliso aqui no Diretórioup é a Lista de artigos relacionados que fica no final de cada postagens, de acordo com o os seus marcadores, Já dei um dica que muitos blogueiros usam que é o LinkWithin é simples e mais vem com o link do site abaixo das postagens relacionadas. Portanto, esse Widget que vou postar com a idéia brilhante do Site Mundo Blogger, não vem com nenhuma propaganda somente seus posts.

Ok vamos a prática.

Primeiramente logado no blogger ~> Design ~> Editar HTML, não precisa "Expandir os modelos de widgets" procure pela tag </head> e ACIMA dela poste o código abaixo:


<!--Artigos Relacionados com Imagens Estilo e Script Inicio -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style type="text/css">
  #related-posts {
  float:center;
  text-transform:none;
  height:100%;
  min-height:100%;
  padding-top:5px;
  padding-left:5px;
  }
  #related-posts h2{
  font-size: 1.6em;
  font-weight: bold;
  color: black;
  font-family: Georgia, “Times New Roman”, Times, serif;
  margin-bottom: 0.75em;
  margin-top: 0em;
  padding-top: 0em;
  }
  #related-posts a{
  color:black;
  }
  #related-posts a:hover{
  color:black;
  }
  #related-posts  a:hover {
  background-color:#d4eaf2;
  }
  </style>
  <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
   </b:if>
  <!--Artigos Relacionados com Imagens Estilo e Script Final-->

Procure por uma das partes abaixo no seu template usando CONTROL+F


div class='post-footer-line post-footer-line-2

 class='post-footer-line post-footer-line-2

class='post-footer-line post-footer-line-3

Achando a parte do código que citei acima, basta colar todo o codigo abaixo, após a linha encontrada acima.

<!--Inicio do Codigo Artigos Relacionados-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Artigos Relacionados";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!--Fim do Código Artigos Relacionados-->

Salve as alterações!

O código acima está projetado para que os artigos relacionados apareçam apenas nas páginas internas. Caso queira que apareça também na página inicial, basta apagar a 1º e a última linha do código(destacado em vermelho).

Você pode editar os estilos aplicados no código ,e para isso você precisará alterar alguns elementos no primeiro código que você colou logo acima da tag

Se não se lembra qual é, procure pela linha:

#related-posts -> se refere ao título.

font-size: 1.6em; -> tamanho da fonte

color: black; -> cor da fonte

Se quiser acrescentar um fundo (background) no titulo, acrescente a linha:

background: #fff; --> (Edite a cor conforme seu gosto)

Se quiser acrescentar uma imagem como background ao Titulo, acrescente:

background: #fff url('endereço da sua imagem') repeat;

#related-posts a{

color:black; -> se refere a cor do texto.

#related-posts a:hover{

color:black; -> se refere a cor do texto quando passa o mouse em cima.

#related-posts a:hover {

background-color:#d4eaf2; -> cor do plano de fundo quando passa o mouse em cima.

Lembrando que não é possível a visualização das alterações nos estilos , elas só ficam visíveis apos serem salvas.

Adicione um Slide para destacar seus artigos em Sites/Blogs

2011-04-05T15:19:00.001-03:00

Olá pessoal! Hoje vou postar a pedidos de alguns leitores, um tutorial simples mais com ótimas finalidades, Um Slide show de destaque para seus artigos. É muito simples o tutorial se divide apenas em dois códigos,vamos lá?

Logado em seu Blog/Site, vá em Em Design ~> Editar HTML, não precisa Expandir modelos de Widgets, copia todo o código abaixo e cole antes da tag </head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
     long as you leave my infos at the top.
-------------------------------------------------------------------------- */
(function($){
$.fn.s3Slider = function(vars) {
var element     = this;
var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current     = null;
var timeOutFn   = null;
var faderStat   = true;
var mOver       = false;
var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
   $(items[i]).mouseover(function() {
      mOver = true;
   });
   $(items[i]).mouseout(function() {
       mOver   = false;
       fadeElement(true);
   });
});
var fadeElement = function(isMouseOut) {
   var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
   thisTimeOut = (faderStat) ? 10 : thisTimeOut;
   if(items.length > 0) {
       timeOutFn = setTimeout(makeSlider, thisTimeOut);
   } else {
       console.log("Poof..");
   }
}
var makeSlider = function() {
   current = (current != null) ? current : items[(items.length-1)];
   var currNo      = jQuery.inArray(current, items) + 1
   currNo = (currNo == items.length) ? 0 : (currNo - 1);
   var newMargin   = $(element).width() * currNo;
   if(faderStat == true) {
       if(!mOver) {
           $(items[currNo]).fadeIn((timeOut/6), function() {
               if($(itemsSpan[currNo]).css('bottom') == 0) {
                   $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                       faderStat = false;
                       current = items[currNo];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               } else {
                   $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                       faderStat = false;
                       current = items[currNo];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               }
           });
       }
   } else {
       if(!mOver) {
           if($(itemsSpan[currNo]).css('bottom') == 0) {
               $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                   $(items[currNo]).fadeOut((timeOut/6), function() {
                       faderStat = true;
                       current = items[(currNo+1)];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               });
           } else {
               $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
               $(items[currNo]).fadeOut((timeOut/6), function() {
                       faderStat = true;
                       current = items[(currNo+1)];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               });
           }
       }
   }
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

A velocidade do Slide é de 4000, mude o valor para o desejado, enfim, alterando apenas o que está indicado, se não conhece HTML, não mexa! Visualize, se estiver tudo bem, salve!

Vá em Elementos da Página, e adicione um Gadget HTML/JavaScript, copie todo o código abaixo e cole-o no Gadget.


<div
id="s3slider">
<ul
id="s3sliderContent">
<li
class="s3sliderImage">
<a
href="SEU-LINK-AQUI"><img
style="width:550px;height:200px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDW9oRRvmLipIHRx1GFKoby-NSLtqQn3EjnEohcOgWKDFi23Xm9lN2PebgER-TU9W6BrxqVXOytWLmNlsvU1kiF6zNqisyJKQgNiqKL7ng7V-CnN96vd3Guoiz67FOvAt1Yqgiy7SlOevW/s1600/Crysis-11.jpg"
/>
<span>Crysis
: Download Full Version</span></a>
</li>
<li
class="s3sliderImage">
<a href="
SEU-LINK-AQUI "><img style="width:550px;height:200px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixmxpmC7_5CqXMA296N3P0ErQMD6h4x2_De_Fbvav5d4PQ2JN-_I4b9TWIKN_NXkOna3jG4HzZjzHyEOGz-n80esQh4mO78huN-8c6vWRKZzgvoqzhHeQfWEhXsUpArdaGBDQV41N_jQR/"
/>
<span>Halo
3 : Play Game Online</span></a>
</li>
<li
class="s3sliderImage">
<a
href=" SEU-LINK-AQUI "><img
style="width:550px;height:200px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbN0yG6bq9TLEQtgN2tohDAynZzebC0-FK1gjbx8qaZfqGjRtbJQ6Hq_GmRAwVxSDS2pGL3xVXdzk1EE9z-rLzSc3yinwv4EohkxehrZsMwinT8JZKmcoeX9xBX7bjycZTUqf_3M9MKCBb/"
/>
<span>Avatar
: Watch Movie Now !!!</span></a>
</li>
<li
class="s3sliderImage">
<a
href=" SEU-LINK-AQUI "><img style="width:550px;height:200px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLhsS1oPx4XfG1Gz9dyhYqtWU_hxWNJznq6gYLIUgMobu5gVGSZmuFWL_xL3j3IzqREk6pvEjuPKrUh9mCkV2euX0_VF-t8fk8-EHyMk_WF9lWW2R88JckOiH2CG3S1XqTPcCTxtcdO5CD/s1600/call+of+duty-11.jpg"
/>
<span>Call
Of Duty 4 : Get Here</span></a>
</li>
</ul>
</div>
<div
class='clear'></div>

Com o ultimo código adicionado em seu devido lugar, troque para o seu conteúdo, onde está "SEU LINK AQUI" é onde você irá colocar a URL de seu artigo, e não se esqueça de alterar as imagens que já vem com o código para as suas respectivas imagens. E qualquer dúvida, deixe um comentário.

Até a próxima!

Demo:

Via

Menu horizontal para Blogs/Sites

2011-03-29T12:47:00.003-03:00

Olá pessoal, Hoje vai mais um menu horizontal com efeitos e bastante firme, que por meio do Design Lasantha Bandara, podemos ter e repassar a vocês. Já publiquei outros menus por aqui, inclusive você pode ver um desses Clicando Aqui , muito bom, não deixe de conferir.

Vamos à prática?!? É muito simples... Vá em Design ~> Elementos da Página ~> Editar HTML ~> e adicione todo o código abaixo acima da tag </head>.

Demo


  
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Color Animations
* Copyright 2007 John Resig
* Released under the MIT and GPL licenses.
*/
(function(jQuery){
// We override the animation for all of these color styles
jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
 jQuery.fx.step[attr] = function(fx){
  if ( fx.state == 0 ) {
   fx.start = getColor( fx.elem, attr );
   fx.end = getRGB( fx.end );
  }
  fx.elem.style[attr] = "rgb(" + [
   Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
   Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
   Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
  ].join(",") + ")";
 }
});
// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/
// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
 var result;
 // Check if we're already dealing with an array of colors
 if ( color && color.constructor == Array && color.length == 3 )
  return color;
 // Look for rgb(num,num,num)
 if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
  return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
 // Look for rgb(num%,num%,num%)
 if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
  return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
 // Look for #a0b1c2
 if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
  return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
 // Look for #fff
 if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
  return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
 // Otherwise, we're most likely dealing with a named color
 return colors[jQuery.trim(color).toLowerCase()];
}
function getColor(elem, attr) {
 var color;
 do {
  color = jQuery.curCSS(elem, attr);
  // Keep going until we find an element that has color, or we hit the body
  if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
   break;
  attr = "backgroundColor";
 } while ( elem = elem.parentNode );
 return getRGB(color);
};
// Some named colors to work with
// From Interface by Stefan Petre
// http://interface.eyecon.ro/
var colors = {
 aqua:[0,255,255],
 azure:[240,255,255],
 beige:[245,245,220],
 black:[0,0,0],
 blue:[0,0,255],
 brown:[165,42,42],
 cyan:[0,255,255],
 darkblue:[0,0,139],
 darkcyan:[0,139,139],
 darkgrey:[169,169,169],
 darkgreen:[0,100,0],
 darkkhaki:[189,183,107],
 darkmagenta:[139,0,139],
 darkolivegreen:[85,107,47],
 darkorange:[255,140,0],
 darkorchid:[153,50,204],
 darkred:[139,0,0],
 darksalmon:[233,150,122],
 darkviolet:[148,0,211],
 fuchsia:[255,0,255],
 gold:[255,215,0],
 green:[0,128,0],
 indigo:[75,0,130],
 khaki:[240,230,140],
 lightblue:[173,216,230],
 lightcyan:[224,255,255],
 lightgreen:[144,238,144],
 lightgrey:[211,211,211],
 lightpink
 lightyellow:[255,255,224],
 lime:[0,255,0],
 magenta:[255,0,255],
 maroon:[128,0,0],
 navy:[0,0,128],
 olive:[128,128,0],
 orange:[255,165,0],
 pink:[255,192,203],
 purple:[128,0,128],
 violet:[128,0,128],
 red:[255,0,0],
 silver:[192,192,192],
 white:[255,255,255],
 yellow:[255,255,0]
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var hoverColour = "#FFF";
$(function(){
$("a.hoverBtn").show("fast", function() {
 $(this).wrap("<div class=\"hoverBtn\">");
 $(this).attr("class", "");
});
//display the hover div
$("div.hoverBtn").show("fast", function() {
 //append the background div
 $(this).append("<div></div>");
 //get link's size
 var wid = $(this).children("a").width();
 var hei = $(this).children("a").height();
 //set div's size
 $(this).width(wid);
 $(this).height(hei);
 $(this).children("div").width(wid);
 $(this).children("div").height(hei);
 //on link hover
 $(this).children("a").hover(function(){
  //store initial link colour
  if ($(this).attr("rel") == "") {
   $(this).attr("rel", $(this).css("color"));
  }
  //fade in the background
  $(this).parent().children("div")
   .stop()
   .css({"display": "none", "opacity": "1"})
   .fadeIn("fast");
  //fade the colour
  $(this) .stop()
   .css({"color": $(this).attr("rel")})
   .animate({"color": hoverColour}, 350);
 },function(){
  //fade out the background
  $(this).parent().children("div")
   .stop()
   .fadeOut("slow");
  //fade the colour
  $(this) .stop()
   .animate({"color": $(this).attr("rel")}, 250);
 });
});
});
//]]>
</script>
<style type='text/css'>
div.hoverBtn {
position:   relative;
float:   left;
background:  #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzS-TL7r-5cxB5javIIgSnBSotDC-L-Jue94XWjUnaOaquhIe3u9ZatEnMWxRLzGifdU3RiOprwg3rk-_jAbjBhr_p2ObUZYgd98LzhxKY0jpD9H8e2pGwWqXh8AKqh9u3v58Y3OyLzaey/) repeat-x 0 0 scroll;
}
div.hoverBtn a {
position:   relative;
z-index:   2;
display:   block;
width:    100px;
height:   30px;
line-height:   30px;
text-align:   center;
font-size:  1.1em;
text-decoration: none;
color:   #000;
background:  transparent none repeat-x 0 0 scroll;
}
div.hoverBtn div {
display:  none;
position:   absolute;
z-index:   1;
top:    0px;
background:  #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFvlEvVxPTkH5SYbrXwIq9x1U9MFei8oinQ0bX-IzvIimkPb8GxVhI9rdr9f8VZhUaXCBZE5H-GvvIGDH1aImMiQbmSjIwY06SA1oj0Ty9x6VT6vK2HpcuxXzox9ge9iRXmmrsFDv7iRFy/) repeat-x 0 0 scroll;
</style>

Não se assuste o código é enorme mesmo, visualize, se tudo estiver bem salve!

Agora adicione um Gadget HTML/JavaScript, em seguida, adicione todo o código abaixo dentro.


<a class="hoverBtn" href="#">Início</a>
<a class="hoverBtn" href="#">HTML</a>
<a class="hoverBtn" href="#">CSS</a>
<a class="hoverBtn" href="#">Parcerias</a>
<a class="hoverBtn" href="#">Sobre nós</a>
<a class="hoverBtn" href="#">Tutoriais</a>
<a class="hoverBtn" href="#">Contato</a>

Depois é só escolher um lugar abaixo do seu banner superior (header), não esquecendo de alterar os # com a URL desejada e alterar os nomes dos links de acordo com seu gosto. E salvar!

Eu sugiro que hospedem os arquivos que estão neste código para não ter complicações futuras, o google sites faz isso.>> Arquivo 01 - Arquivo 02 - Arquivo 03 em seguida é só substituir pela ordem que está aqui. Salve tudo e ao final ficará assim:

Demo:

Qualquer eventual dúvida, deixe seu comentário.

Até a próxima!

Botão flutuante do Twitter para blogs/Sites.

2011-03-22T10:32:00.001-03:00

Olá pessoal! Mais uma dica muito útil para quem usa o Twitter no Blogger, ou até mesmo em sites. Esse botão flutuante é ótimo para canalizar seus leitores. Com estilo bem moderno e atraente fica difícil não vê-lo.

Aplica-lo é muito simples. São duas as opções:

1ª - Vá até Design ~> Elementos da Página ~> adiciona um Gadget HTML/JavaScript e em seguida copie todo o código abaixo e cole dentro. Salve!

2ª – Vá até Design ~> Editar HTML e sem marcar a caixa “Expandir modelos de Widgets”, procure pela tag de fechamento </body> e ACIMA cole todo o código abaixo. Visualize e se estiver tudo bem, Salve!


<!-- twitter follow badge by go2web20 -->
<script src='http://www.go2web20.net/twitterfollowbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'SEU-ID-TWITTER';
tfb.label = 'Follow-me';
tfb.color = '#00bff3';
tfb.side = 'r';
tfb.top = 250;
tfb.showbadge();
--></script>
<!-- end of twitter follow badge -->

Vamos as personalizações, é tudo muito simples mude somente o que está em vermelho para suas preferências onde está “ SEU-ID-TWITTER” Mude para o seu ID, e esse trecho tfb.color = '#00bff3'; é onde você irá mudar as cores que você desejar. > Veja aqui mais cores <

E ao final ficará assim:

Qualquer dúvida, deixe seu comentário.

Até a próxima!

Customizando o Gadget "Seguir por e-mail" para Blogger.

2011-03-18T14:51:00.003-03:00

Olá pessoal, ontem como vimos, apresentei e ensinei passo a passo como adicionar o Gadget "seguir por e-mail", como também falei anteriormente, já postei aqui algo parecido, veja aqui, mais hoje vamos customizar esse novo gadget , de uma forma simples vamos aplicar estilos e dá mais "volume" a ele, vamos praticar?

Já com seu Gaget adicionado vá em Design ~> Editar HTML, não precisa "Expandir modelos de widgets", usa Contro+F para uma melhor visualização, e procure pela tag ]]></b:skin> e imediatamente adicione todo o código abaixo acima.




#FollowByEmail1{
border:1px solid #0000000; //* edite a cor da borda*//
padding:10px;
-moz-border-radius: 20px; -webkit-border-radius: 20px;
background:#242424;
background: url(http://216-55-136-216.dedicated.abac.net/images/stories/rss-feed-icon.jpg) no-repeat left;
padding-left: 15px;
list-style-type:none; 
}

Visualize, se estiver tudo bem, salve! Volta na edição, marque a caixinha "Expandir modelos de Widgets" e procure pela parte abaixo:



   
<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
<input class='follow-by-email-submit' type='submit' value='Submit'/>

E subistitua todo o código acima, por esse abaixo:

  <input class='follow-by-email-address' name='email' placeholder='Escreva seu email...' type='text'/>
        </span>
        <input class='follow-by-email-submit' type='submit' value='Assine'/>
        <p><a href='http://feeds.feedburner.com/SEU-FEED'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/SEU-FEED?bg=FFCC00&amp;fg=0000000&amp;anim=1' style='border:0' width='88'/></a></p>

Troque onde está em vermelho pelo nome que você usa no Feed, eu uso Diretorioup, mude para o seu. Visualize, se tudo estiver bem, salve! irá fica assim seu Gadget, com bordas arredondadas, imagem ao fundo, e quantos leitores assinaram.

Ah, você pode mudar a imagem de fundo por qualquer uma, basta trocar onde está em vermelho pela URL de sua nova imagem. Bom é isso ae. Espero que gostem.

Até a próxima!

Adicionando Gadget "Seguir por E-mail" no Blogger

2011-03-17T17:50:00.009-03:00

Olá pessoal, o blogger acaba de lançar mais um Gadget muito útil na vida dos blogueiros, o "seguir
por E-MAIL" trata-se de uma caixa onde seus leitores vão poder assinar seus feeds de uma maneira mais "atraente", vamos dizer assim. Já fiz uma postagem anterior com o mesmo assunto que é Caixa de subscrição claro, com mais recursos. Vamos a prática?

É muito simples de adicionar, basta ir em Design ~> Elementos da Página ~> Adicionar um Gadget e em seguida, clicar no Gadget "Seguir por E-mail" Acompanhe as imagens a seguir.

(Primeira etapa)

Adicionar o Gadget.

(Segunda etapa)

Você não tem que se preocupar com quase nada, o Gadget já traz seu endereço de Feed.

(Etapa final )

Depois disso é só personalizar a gosto e adicionar em um lugar estratégico em seu blog. Geralmente é no início da sidebar.

Até a próxima.

Internet Explorer 9 Gratuito para baixar.

2011-03-15T11:48:00.001-03:00

(A Microsoft anunciou mundialmente nesta segunda-feira 14) o lançamento do seu novo navegador Windows Internet Explorer 9 em 40 idiomas. O programa estará disponível para download à meia-noite de terça-feira (15) no horário de Nova York, ou 2h no horário de Brasília. Segundo a empresa, foi o browser que teve mais downloads da versão testes, cerca de 40 milhões. Ele chega com aposta nos novos padrões da web, como o HTML5 e o CSS3 e que oferece recursos para os desenvolvedores e webdesigner interagirem mais com seus usuários.

Um deles é o de Sites Fixos e Listas de Atalhos, permitindo aos usuários fixarem os atalhos dos sites na barra de tarefas do Windows Vista ou 7 (únicos sistemas com suporte ao produto) e interagirem com eles, como num site de música em que os botões principais de play, pause e stop aparecem sob a janela de pré-visualização quando se passa o mouse por cima do ícone.

E já existem provedores de conteúdo, como sites de comparação de preços, compras coletivas, blogs e de notícias, que já implementaram esse novos recursos em seus produtos e esperam, além de maior audiência e permanência no site, poder entender melhor o comportamento do seu público através de ferramentas específicas para este fim disponíveis para os desenvolvedores.

Download
Para baixar o IE9 acesse o site do Baixatudo. É importante lembrar que é necessário o Windows Vista com o SPx ou Windows 7.

Novidades
De novo, o IE9 traz uma interface mais limpa, com mais espaço para os sites e menos para as barras de ferramentas, priorizando o conteúdo e não o próprio navegador. Outro apelo que a Microsoft ressalta é a velocidade de processamento de conteúdo multimídia, que faz uso da placa aceleradora gráfica do PC para melhorar o desempenho. Há ainda previsão para o Internet Explorer 9 estar disponível no sistema operacional móvel Windows Phone 7. Porém, não há data definida.

>> Veja a matéria completa...

"Ouça este post" para Blogger(BlogSpot)

2011-03-13T12:06:00.001-03:00

Olá pessoal, tenho uma dica bastante útil, para que seu blog, tenha mais uma ferramenta de “acessibilidade” e nessa ferramenta, os leitores ou quem quiser podem baixar as suas matérias, se chama Vozme. Assim as pessoas não só vão poder ler, mais também irão ouvir seus artigos e com mais clareza poder aprender. Enfim... vamos à prática?

Esse Widgets é muito simples de adicionar diretamente em seu template. Siga rigorosamente as instruções. Design ~> Editar HTML ~> marque a caixa “Expandir Modelos de Widgets” e antes da linha <span class='post-icons'> adicione todo o código abaixo. Visualize, se estiver tudo bem, salve!


<script src='http://vozme.com/get_text.js' type='text/javascript'/><a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"pt\",\"ml\");"' href='javascript:void(0);' style='margin-left:1.5em;'>((&#8226;)) Ouça este post</a>

Mais se você quiser com a opção de uma imagem junto ao link “ouça este post” segue as mesmas instruções que citei acima. Mais com uma condição antes de <div class='post-footer'>, adicione todo o código abaixo. Visualize, se estiver tudo bem, salve.




<div id='voice'>
  

<script src='http://vozme.com/get_text.js' type='text/javascript'/> <a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"pt\",\"ml\");"' href='javascript:void(0);'><img src='http://vozme.com/img/paper_sound32x32.gif' align='left' alt='' border='0' style='margin-right:0.4em;'/></a>
<a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"pt\",\"ml\");"' href='javascript:void(0);' style='font-size:10px;'>Ouça<br/>este post</a>
</div>

Espero que ajude no crescimento de Site/Blog, qualquer dúvida, deixe um comentário.

Até a próxima

Como incorporar a URL, HTML e Links para Fórum abaixo de cada postagem no blogger

2011-03-12T11:06:00.001-03:00

Olá pessoal! Vou ensinar passo a passo por meio do Site Blogger Tip & Trick como adicionar URL, HTML e Código para fóruns ao final de cada postagem, é certo que vocês já devem ter visto em sites na web, no final de cada postagem tem uma caixa de divulgação com links. Pois é isso que vamos aprender hoje. Para que assim os seus leitores compartilharem seu código rapidamente direto de seu Blog. Vamos à prática?

Procure pela tag </head> e copie todo o código abaixo e cole acima.


<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>

Salve. Copie todo o código abaixo e procure pela parte <data:post.body/> e adicione TODO o código abaixo, abaixo da parte de código em negrito.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>

Se você encontrou este artigo útil, por 
favor link para esta página de seu site 
ou blog.</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;HTML Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Forum Link:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='http://www.bloggertipandtrick.net/' style='display:none;' target='_blank'>Widget by BloggerTipAndTrick</a></p>
&lt;/div&gt;<br/>
</b:if>

Visualize, se tudo estiver bem, salve e vai estar sempre ao final de cada postagem sua! Você pode mudar o texto em vermelho que segue o código, para o que você achar melhor.

Até a próxima.

6 Sites e "1000" utilidades para Blogger (BlogSpot)

2011-03-10T14:28:00.004-03:00

Olá pessoal! Apresento-lhes cinco sites e “1000” utilidades, cada um ótimo em sua função, com ferramentas que em minha opinião, ajudam bastante e serve assim para dar uma “incrementada” em seu blog, fazendo um aglomerado de vantagens para que você turbine seu blog/site.

O primeiro se chama “Bookmark Craze”. Funciona da seguinte forma, você escolhe a quantidade de botões de determinadas redes sociais, e dá um nome e um titulo para cada um. Assim tornando-se uma ferramenta de compartilhamento muito forte em seu blog.

O segundo se chama “Emailmeform” é uma poderosa “arma” para quem está procurando um formulário de contato atraente e bem profíssional, inclusive é esse formulário que uso no meu blog. Ou para você que tem um blog e quer um botão de downloads. Enfim, o que você pensar em utilidade encontra aqui.

O terceiro “Wibiya” é um site parecido com o AddThis. Você já deve ter visto em algum site na Web, ao entrar na página inicial, ou em qualquer uma das páginas , automaticamente aparece uma barra no rodapé da página. Com diferentes botões de redes sociais (Twitter, Orkut, FaceBook, etc..) Lá você pode também saber quantas pessoas estão online, e saber quem está compartilhando seu conteúdo.

O quarto se chama “Grsites” ele é um excelente site. Muito versátil, nele você pode adquirir um menu horizontal, vertical (Inclusive com efeito) e você pode personalizar da cor e da maneira que preferir, botões, logo e caixa de texto com bordas arredondadas; quadradas; efeito gradiente, enfim, uma série de utilidades em um só lugar.

O quinto se chama “Icon Archive” Você já casou na web, ícones de redes sociais? Do jeitinho que você quis? E não achou? Bom agora já achou, esse site te proporciona tudo isso. Conforme você escolhe o seu ícone preferido. Você poderá escolher os tamanhos que quer também. Ex. 32x32, 48x48 e assim vai. É uma ótima opção para quem gosta de adicionar diferentes ícones ao seu blog.

O sexto se chama “Logosnap”, para você que anda pensando em criar um logo mais não sabe como? Ou você que quer mudar? Esse site faz tudo isso para você. É muito simples, são três categorias, siga as etapas e ao final, você terá um logo diferente e com design profissional.


Nota! Todos os sites que citei acima exigem cadastro, exceto “IconArchive”.

Espero que vocês gostem, qualquer dúvida é só deixar um comentário.

Até a próxima.

Quanto vale seu Site/Blog ? (BizInformation)

2011-03-04T10:46:00.005-03:00

Olá pessoal. Achei fantástica a ideia de um site, onde você pode avaliar seu site ao vivo. Sai o resultado na hora. O BizInformation é muito simples e bem fácil de manusear, na verdade o que você tem que fazer é apenas colocar a URL do seu Site/Blog e e clicar em "VALUE" que o Site faz todo o serviço. Depois de feito tudo, você saberá na hora quanto vale seu Site. E de sobra você ganha um mini-banner, onde você pode colar em seu Site/Blog e todos vão saber quanto vale seu Site/Blog.

Avaliei o meu Blog e deu:

Meu site vale$33,358.24

Quero deixar bem claro que são apenas estimativas. Provavelmente na internet tem milhões de sites igual ao "BizInformation".

Até a próxima!

Sidebar com Abas e Jquery no Blogger/BlogSpot

2011-02-26T12:06:00.006-03:00

Olá pessoal. Vocês já devem ter notado no meu Blog, na sidebar (lateral), abas com três Gadgets, que são: "Destaque", "Recentes" e "Marcadores". É bastante vantajoso você ter em seu Blog, saiba porque: fornecer bastante espaço no seu template, o design de seu Blog fica mais atraente, fica com cara de profissional. Enfim... tem muitas vantagens. Mais para que saia tudo de acordo com que eu vou passar aqui, é necessário que você preste bastante atenção, vamos a pratica ?

Antes de qualquer alteração em seu template é necessário que você faça o backup de seu template, para quem não sabe o que é, veja aqui. Vá em Design ~> Editar HTML, e procure pela tag ]]></ b: skin> e imediatamente cole todo o código abaixo acima.

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab  ul li:last-child {
border-bottom:none;
}
.widget-tab  ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab  ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content  ul li a:hover {
color:#a59c83;
}
.tab-content  ul li a:hover small {
color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;        
}
ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Esse script necessita da instalação da biblioteca Jquery, mais se você já tem, não será necessário a instalação dele em seu template. Mais quem não tem é só colar o código abaixo antes de </head>.

<!-- jQuery Call -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<!-- End of jQuery Call -->

Bom, agora vejamos se está tudo ok, temos o CSS , Jquery devidamente instalados, agora vamos para o ultimo passa. Que é onde dá todo o "brilho" para nós. Basta colocar corretamente todo o código abaixo, antes de </head>

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>

Tudo instalado em seus devidos lugares, agora vamos as personalização, como você pode ter notado no último código, existe essas três partes

var starttab=0;

var endtab=2;

var sidebarname="sidebar1";

Rapidamente para você entender o que se trata. var starttab=0; é o ponto de partida dos Widgets instalads e começa contar a partir de 0. var endtab=2; É o numero dos seus Widgets anteriores e var sidebarname="sidebar1"; é a ID de sua sidebar. Geralmente esse ID é só "sidebar" mesmo, mais se não for, você terá que procurar, e uma boa maneira de chegar até isso, é procura por “sidebar-wrapper” e você terá algo assim:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Nota: Se caso as imagens não estiverem aparecendo. Ou se por ventura apareceu e depois sumiu. Não precisa entrar em pânico. Eu tenho as imagens se caso precise, entre em contato comigo.

Encontrado, é só copiar a ID de seu blog e adicionar em seu devido lugar como falei anteriormente. O tutorial é bem simples, e com excelentes resultados. Qualquer dúvida deixe um comentário.

Até a próxima!

Artigo original Abu Farhan

Google altera algoritimo, assim rebaixando conteúdo de má qualidade

2011-02-25T18:43:00.005-03:00

O Google anunciou na quinta-feira, uma mudança importante no seu algoritmo de pesquisa em um esforço para melhorar o ranking dos sites de alta qualidade nos resultados de busca. O objetivo é reduzir a visibilidade das páginas de baixa qualidade.

Embora a empresa não tenha dito explicitamente, a mudança parece ser dirigida, em parte, às chamadas "fazendas de conteúdo" (content farms), que geram artigos baseados em pesquisas populares para subir ao topo do ranking e atrair cliques.

O Google vem enfrentando críticas por parte de alguns usuários por permitir que artigos que não são úteis apareçam com destaque nos resultados da pesquisa. Isso agora mudou, de acordo com a empresa.

A empresa disse que faz cerca de 500 mudanças em seu algoritmo por ano, mas a maioria é tão pequena que a empresa prefere não anunciá-la. Porém, esta última modificação irá afetar 11,8% das buscas, valor grande o suficiente para alterar significativamente os resultados que as pessoas vêem.

Leia o Artigo completo...

O editor HTML do Blogger voltou a funcionar

2011-02-25T12:24:00.005-03:00

Há mais ou menos 24 horas, o Blogger para muita gente não estava funcionando na grande parte de seu site. Mais principalmente o editor HTML. estava como se não funcionasse os botões "salvar" e visualizar", estavam "paralisados" Muita gente achou que era problema com seu template e uns até tentaram trocar template. Enfim... mais QUASE tudo voltou a sua normalidade. Para alívio dos de alguns Bloggers.

Botões de redes sociais com CSS no Blogger(BlogSpot)

2011-02-25T08:58:00.009-03:00

Hi, pessoal. como já disse em outros artigos, está virando mania, ou regra ter botões de redes sociais em sites/blogs. Portanto, apresento-lhes por meio do Site Dicas Blogger, um estilo de botões que na minha opinião é demais! A forma de posta-los é bem simples e até aqueles que não tem muita prática com CSS e HTML, vão saber fazer.

Vai em Design ~> Editar HTML e em seguida procure por ]></b:skin> e cole todo esse código abaixo acima da tag.

/* SOCIAL MEDIA
----------------------------------------------- */
  
#socialmedia{background:#F6F8F8;border:1px solid
#DBE2E0;padding:10px 5px 15px 10px; margin: 5px;}
  
#socialmedia:hover{border:1px
solid #90C2D7;}
#socialmedia
a{color:#666666;text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif}
  
#socialmedia
a:hover{color:#3c88b2;text-decoration:underline}
  
#socialmedia
img{vertical-align:middle;margin-right:5px;}

Salve, vá em Elementos da Página e imediatamente adicione um Gadget HTML/JavaScript e cole o código abaixo nele.

<div id='socialmedia'><img alt=''
src='http://img148.imageshack.us/img148/9250/socialconnecttwitter.png'
style='width: 32px; height: 32px; float:left;'/>
<a href='URL DO TWITTER'>Siga
no Twitter</a>
  
</div>
  
<div id='socialmedia'><img alt=''
src='http://img822.imageshack.us/img822/1862/socialconnectrss.png'
style='width: 32px; height: 32px; float:left;'/>
  
<a href='URL DOS FEEDS'>Assine
os feeds</a>
  
</div>
  
<div id='socialmedia'><img alt=''
src='http://img823.imageshack.us/img823/788/socialconnectfacebook.png'
style='width: 32px; height: 32px; float:left;'/>
  
<a href='URL DO FACEBOOK'>Curta no Facebook</a>
</div>

Onde está em vermelho são os lugares a serem alterado com suas devidas URL como mostra no código, feito isso, escolha um lugar estratégico para seus botões, e em seguida salve.

Até a próxima!

3 Tipos de Botões Sharethis para Blogger(BlogSpot)

2011-02-24T14:03:00.008-03:00

Olá pessoal. Em um tutorial anterior, eu mostrei como adicionar botões do Addthis no blogger, mais hoje vamos aprender a postar botões similares ao anterior. Os botões do Sharethis, são também botões de compartilhamento, parecido com o Addthis, com um vantagem o Sharethis é muito mais fácil e simples de instalar em seu template. Com apenas 2 códigos cada linha de botões, fica muito mais simples e prático de inserir. Nesse tutorial eu selecionei 3, acho que são os que mais pode ajudar você a divulgar seu conteúdo. Chega de papo vamos à prática.

Você fará para as três opções as mesmas coisas. Só que para cada código de botões é ímpar. Sendo que o script é igual para todos. O que você tem que fazer é: Design ~> Editar HTML ~> Control+F e procurar por </head>. Feito isso. adicione todo o script ANTES/SOBRE de </head>


<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'689472c2-740c-4ee9-a475-5e432dd00ba6'});</script>

Com o script instalado, escolha um dos 3 códigos abaixo e adicione o botão que deseja, pode ser 1 ou 2 enfim quantos desejar e adicione em um Gadget HTML/JavaScript. Ou se você quer que apareça em todas as suas postagens automaticamente, eu aconselho que veja esse artigo>> AQUI.

(Vertical Contadores)


span class="st_twitter_vcount" displayText="Tweet"></span><span class="st_facebook_vcount" displayText="Share"></span><span class="st_email_vcount" displayText="Email"></span><span class="st_sharethis_vcount" displayText="Share"></span>

(Multi-Canal)


<span class="st_twitter_large" displayText="Tweet"></span><span class="st_facebook_large" displayText="Facebook"></span><span class="st_ybuzz_large" displayText="Yahoo! Buzz"></span><span class="st_gbuzz_large" displayText="Google Buzz"></span><span class="st_email_large" displayText="Email"></span><span class="st_sharethis_large" displayText="ShareThis"></span>

(Horizontal Contadores)


displayText="Tweet"></span><span class="st_facebook_hcount" displayText="Share"></span><span class="st_email_hcount" displayText="Email"></span><span class="st_sharethis_hcount" displayText="Share"></span>

Bom, pessoal é só escolher um dos 3 e posicionar de acordo com seu gosto os botões que vão ser sucesso certamente.

Até a próxima!

Menu Horizontal com CSS e Jquery (efeito hover) para Blogger - BlogSpot

2011-02-19T12:30:00.015-02:00

Olá pessoal. Rodando pela net, e ao me deparar com o blog Template novo Blog, vi um artigo que ensinava passo a passo como instalar um menu horizontal com CSS e Jquery com efeito hover, Veja o demo > AQUI < e me lembrei que um leitor do blog me pediu para publicar o tal menu. O criador do menu foi o Soh do blog Soh Tanaka. O menu é ótimo para quem gosta desse efeito e para aqueles que não tem nenhum menu horizontal, será ótimo. Fiz algumas alterações, pois os iniciantes, não iriam entender. Vamos ao que interessa...

Primeiro você deve criar uma imagem com 80px de altura onde metade de cima dela (40px) aparecerá quando o menu estiver em estado normal e a metade de baixo no estado hover (quando passa o mouse por cima), como neste exemplo:

Feito a figura, hospede em seu site preferido, pode ser em qualquer lugar, reserve o link da imagem. Agora vá em Design ~> Editar HTML e procure por esse trecho no seu template ]]></b:skin>, adicione todo o código ABAIXO desse trecho.


<style type='text/css'>

.container {
    width: 520px;
    height: 100px;
    position: absolute;
    top: 10%; left: 60%;
    margin: 0px 0 0 -80px;
    overflow: hidden;
}
img {border: none;}
ul#topnav {
    margin: 10px 0 20px;
    padding: 0;
    list-style: none;
    font-size: 1.1em;
    clear: both;
    float: left;
    width: 520px;
}
ul#topnav li{
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height:40px;
}
ul#topnav a, ul#topnav span {
    padding: 10px 10px;
    float: left;
    text-decoration: none;
    color: #fff;
    clear: both;
    height: 20px;
    line-height: 20px;
    background: #1d1d1d;
}
ul#topnav a {    color: #7bc441; }
ul#topnav span {
    display: none;
}

ul#topnav.v2 span{
    background: url(coloque aqui a url da imagem) repeat-x left top;
}
ul#topnav.v2 a{
    color: #555;
    background: url(coloque aqui a url da imagem) repeat-x left bottom;
}
</style>

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

<script type='text/javascript'>
$(document).ready(function() {
           $(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

    $(&quot;#topnav li&quot;).each(function() { //For each list item...
        var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
        $(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
    });

    $(&quot;#topnav li&quot;).hover(function() {    //On hover...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
        }, 250);
    } , function() { //On hover out...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;0&quot; //Move the span back to its original state (0px)
        }, 250);
    });
   
});
</script>

Feito isso, altere as partes de vermelho com a URL da imagem que você hospedou anteriormente, salve, volte em Design, ~> Elementos da Página ~> Adicione um Gadget HTML/JavaScript e em seguida, cole todo o código abaixo.

<ul class='v2' id='topnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>

Feito tudo, procure uma posição acima das postagens e abaixo do seu banner.(header), como mostra o demo que vimos no início do artigo. Lembrando que temos que alterar as seguintes partes do código acima. onde está # é o lugar que será inserido o seu link desejado. E de acordo com o que você quer que apareça nos botões, você irá alterar onde está "home" ou "services", ai vai de sua imaginação.

Qualquer dúvida não deixe de me contatar.

Até a próxima!

Botão de compartilhamento do Okrut no Blogger (BlogSpot)

2011-02-17T20:08:00.011-02:00

Olá pessoal! Aqui no Brasil uma das redes sociais mais usadas é o Orkut, então como já tinha feito anteriormente artigos iguais a esse, como: botões de compartilhamento do FaceBook e Twitter, hoje vamos aprender a postar o do Orkut. Chega de papo vamos a prática?

Logado ao Blogger, Vá em Design ~> Editar HTML ~> Marque a caixinha "Expandir modelos de Widgets". Mais sempre fazendo o Backup antes. Para evitar transtorno futuro, Feito tudo, Copie todo o código abaixo, eu sugiro que leia esse artigo > aqui < os locais ideais para por no seu template. Para que apareça em todas as páginas.


<!-- Google Orkut Share Element -->
<div id="cse" style="width:100%;">Loading</div><script src="http://www.google.com/jsapi" type="text/javascript"></script><script type="text/javascript">google.load('orkut.share', '1');google.setOnLoadCallback(function(){new google.orkut.share.Button({style:mini}).draw('orkut_share');}, true);</script>

Depois de feito tudo, visualize, se estiver tudo bem, salve.

Até a próxima.

Menu vertical na lateral (Sidebar) do blogger - Blogspot

2011-02-15T17:06:00.003-02:00

Olá pessoal! Tenho uma excelente sugestão para quem gosta de menu com efeitos e mais ainda para quem gosta de menu na lateral (sidebar) do blogger, onde você poderá postar páginas extras em um só lugar, é muito simples, prático e em apenas "um clique", você terá seu menu com efeitos e com um design moderno no blogger. Vamos ao que interessa...

Logado ao blogger, vá em Desing ~> Elementos da Página ~> Adicionar um Gadgets HTML/JavaScript, copie e cole todo o código abaixo no Gadgets.


<style type="text/css">


#ddblueblockmenu{
border: 1px solid
#FF4500; /*Cor da borda*/
border-bottom-width: 1;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90%
'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%;
text-decoration: none;
color: #363636; /*
Cor da fonte do menu */
background-color: #A9A9A9; /*cor do background */
border-bottom: 1px
solid #FF4500; /*Cor da borda do botão */
border-left: 7px
solid #363636; /*cor da borda esquerda */
list-style-type:none;
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%;
}
#ddblueblockmenu a:hover {
background-color: #B5B5B5; /*Cor do background do
menu de baixo*/
border-left-color:
#FF4500; /*cor da borda do menu esquerdo*/
}
#ddblueblockmenu
div.menutitle{
color: #ffffff; /*
Cor da fonte do titulo */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #FF4500;  /*cor do
background do menu inicial*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande',
Arial, sans-serif;
}
</style>
<div id="ddblueblockmenu">
<div class="menutitle">Menu Lateral</div>
<ul>
<a href="#">Página Inicial</a>
<a href="#">Seu-titulo01</a>
<a href="#">Seu-titulo02</a>
<a href="#">Seu-titulo03</a>
<a href="#">Seu-titulo04</a>
<a href="#">Seu-titulo05</a>
</ul></div>

O lance é bem simples, nada de preocupação, poste em
cada parte do código tudo o que você deve saber, onde tá #, é exatamente onde você vai colocar
seu link alterando os determinados
nomes, por exemplo, se você for colocar um link de "contato" mude
onde está SEU-TITULO para contato e assim com os demais.

Na parte das cores, tá tudo explicado ao lado de cada um entre "/*----*/” ao longo do código. Quando as alterações estiverem todas terminadas salve, veja o Demo

Qualquer dúvida deixe um comentário.

Até a próxima.

Caixa de Subscrição (Subscription Box) para Blogger - BlogSpot

2011-02-14T12:30:00.004-02:00

Olá pessoal! Acho que muita gente já deve ter visto por alguns blogs/sites, geralmente na parte superior direito uma "Subscription Box" ou Caixa de subscrição, onde você assina os feeds e sabe quantos leitores assinaram e quantos seguidores do twitter em tempo real. E além de deixar seu blog com muito mais cara de profissional, ainda agrupa suas redes sociais em um só lugar.

Mais antes de tudo, você tem que ter uma conta no FeedBurner, Feito isso, você terá algo parecido com isso, modificando o que está de vermelho pelo seu nome de usuário do site.

http://feeds.feedburner.com/Seu-Feedburner-Feed

É o seguinte, primeiramente, logado ao blogger vá em Design ~> Elementos da página ~> Adiciona um Gadget HTML/JavaScript e em seguida, adicione todo o código abaixo:


<div style="background-color :
#ffffff;padding-top:10px;">

<a href="http://feeds.feedburner.com/SeuFeedburnerFeed" target="_blank"
title="Subscribe To The Latest Posts"><img
style="float:left; width:30px; height:30px; margin-right:5px"
src="http://img171.imageshack.us/img171/162/rssicons.jpg"
/></a><a href="http://feeds.feedburner.com/SeuFeedburnerFeed" target="_blank"
title="Subscribe To The Latest Posts"><b><u>Assine nosso Feed RSS</u></b></a> 

e vamos deixar que você saiba quando temos novos
posts!

<br />

<center>

<b>Ou pegar as últimas postagens via
e-mail</b>

<form style="padding-top:6px;"
id="subscribe"
action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SeuFeedburnerFeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return
true"> 

<input type="text" value="Enter
your email address..." id="subbox" onfocus="if (this.value
== &#39;Enter your email address...&#39;) {this.value =
&#39;&#39;;}" onblur="if (this.value == &#39;&#39;)
{this.value = &#39; Digite
seu endereço de e-mail...&#39;;}" name="email"
style="width:170px;" /> 

<input type="hidden" value="SeuFeedburnerFeed" name="uri" /> 

<input type="hidden"
name="loc" value="pt_BR" /> 

<input style="

       
padding-left:3px;

       
padding-right:3px;

        border: 1px solid
#333333;

        cursor:
pointer;

        background-color:
#000000;

        color:
#FFFFFF;" 

type="submit" value="Submit"
/> 

</form>

</center> 

<center>

<table border="0"> 

<tr> 

<td>

<a href="SeuFacebookPaginaUrl/FacebookPerfilUrl" target="_blank"
title="Contato no Facebook">

<img style="width:54px; height:54px;"
src="http://img29.imageshack.us/img29/3497/facebookiconf.jpg"
/></a>

</td>

<td>

<a
href="http://twitter.com/YourTwitterUsername"
target="_blank" title="Let's be friend. lols.">

<img style="width:54px; height:54px;"
src="http://img291.imageshack.us/img291/3765/twittericon.jpg "
/></a>

</td>

<td> 

<td>

<a href="http://feeds.feedburner.com/SeuFeedburnerFeed"><img
src="http://feeds.feedburner.com/~fc/SeuFeedburnerFeed?bg=000000&amp;fg=FFFFFF&amp;anim=1"
height="26" width="88" style="border:0;
padding-top:5px" alt="Fellow Readers" /></a>

<script type="text/javascript"
language="JavaScript" src="http://twittercounter.com/embed/SeuTwitterUsuario/ffffff/111111"></script>

</td> 

</td>

</tr> 

</table>

</center> 

</div>

Com o código no Gadget, altere as seguintes partes em VERMELHO de acordo com seus perfis. Exatamente como pede, sem modificar o código, feito isso, escolha um lugar estratégico no seu blog. salve.

Espero que curtam! E qualquer dúvida deixe seu comentário.

Até a próxima!

Fontes: Junks Blogger

Menu vertical Hover no Blogger(BlogSpot)

2011-02-13T17:02:00.008-02:00

Olá pessoal! Embalado na onda dos botões de compartilhamento do AddThis, vou tentar "traduzir" para vocês, o Menu vertical Hover, que também é do Addthis, para que vocês possam entender o que é e como funciona trata-se de "uma coluna de menu único mínima torna a partilha de pequeno porte, focado e escorregadio. jQuery poderes do efeito hover." É assim, quando bem instalo funciona da seguinte forma, ao invés de ficar exposta irá ficar um link com algo assim "Hover over me" ou "Passe o mouse sobre mim" e quando seus leitores passarem o mouse por cima, um menu que até então não aparecia, desce.

Veja o Demo

Chega de papo vamos a prática?

Logado no Blogger, vá em Design, Editar HTML, faz o backup do seu template, marque a caixa Expandir modelos de widgets e procure por ]]></b:skin> e imediatamente Antes/Acima cole todo o código abaixo:


/* AddThis Vertical Hover Menu */
  
.addthis_toolbox .custom_hover {
position: relative;
}
.addthis_toolbox .custom_hover .custom_button {
font-weight: bold;
padding: 6px 12px 6px 12px;
color: #00bff3;
cursor: pointer;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
.addthis_toolbox .custom_hover .custom_button.active {
background-color: #eee;
}
.addthis_toolbox .hover_menu {
display: none;
position: absolute;
background: #fff;
}
.addthis_toolbox .custom_hover .tower {
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius-topleft: 0;
}
.addthis_toolbox .hover_menu {
width: 136px;
padding: 1px;
border: 3px solid #eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.addthis_toolbox .hover_menu a {
position: relative;
display: block;
width: 102px;
padding: 4px 0 4px 34px;
text-decoration: none;
color: #00bff3;
}
.addthis_toolbox .hover_menu a:hover {
background: #f5f5f5;
color: #027999;
text-decoration: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.addthis_toolbox .hover_menu span {
position: absolute;
left: 14px;
top: 4px;
}
.addthis_toolbox .hover_menu .more {
border-top: solid 1px #eee;
padding: 10px 0 0 0;
margin: 10px 10px 0 10px;
text-align: center;
}
.addthis_toolbox .hover_menu .more a {
padding: 4px 0;
margin: 0;
}
.addthis_toolbox .hover_menu .more a:hover {
background: none;
}
.addthis_toolbox .hover_menu .more span {
display: none;
}

Não mexa em nada, incluir o arquivo de Script abaixo em qualquer lugar do seu template, geralmente antes do fechamento da tag </body>.

Atenção!: No código abaixo tem que fazer alteração para o seu perfil do AddThis lá onde está em vermelho, coloque o seu ID, para que as pessoas possam compartilhar SEU conteúdo.


<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ACCOUNT-ID"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function() {
    var delay = 400;
   
    function hideMenu() {
        if (!$('.custom_button').data('in') && !$('.hover_menu').data('in') && !$('.hover_menu').data('hidden')) {
            $('.hover_menu').fadeOut('fast');
            $('.custom_button').removeClass('active');
            $('.hover_menu').data('hidden', true);
        }
    }
   
    $('.custom_button, .hover_menu').mouseenter(function() {
        $('.hover_menu').fadeIn('fast');
        $('.custom_button').addClass('active');
        $(this).data('in', true);
        $('.hover_menu').data('hidden', false);

Agora vem o HTML, eu fiz em duas versões a 1ª fica no template direto e as posições onde você irá postar o código HTML abaixo estão AQUI, a segunda adicionando um gadget HTML/JavaScript. Eu aconselho para quem não simpatiza muito com HTML a segunda opção é bem melhor e bem mais fácil de aplicar.

<div class="addthis_toolbox">
    <div class="custom_hover">
        <span class="custom_button">Hover over me</span>
    </div>
    <div class="hover_menu">
        <div class="column1">
            <a class="addthis_button_email">Email</a>
        </div>
        <div class="column2">
            <a class="addthis_button_print">Print</a>
        </div>
        <div class="clear"></div>
        <div class="top"></div>
        <div class="column1">
            <a class="addthis_button_twitter">Twitter</a>
            <a class="addthis_button_facebook">Facebook</a>
            <a class="addthis_button_myspace">MySpace</a>
        </div>
        <div class="column2">
            <a class="addthis_button_delicious">Delicous</a>
            <a class="addthis_button_stumbleupon">Stumble</a>
            <a class="addthis_button_digg">Digg</a>
        </div>
        <div class="clear"></div>
        <div class="more">
            <a class="addthis_button_expanded">More...</a>
        </div>
    </div>
</div>

Fica atento, mude se quiser o titulo que está em vermelho para o que você preferir, algo que vá chamar a atenção de seus leitores.

Qualquer dúvida, não deixe de me contatar.

Até a próxima!

Adicionando Redes Sociais Com Botões ao Blogger/BlogSpot

2011-02-13T11:31:00.013-02:00

Olá pessoal! Como já virou mania ou quase regra ter botões de redes sociais em blogs e sites. Tenho uma dica super inportante para passa a vocês. E um código bem simples e com exelentes resultados. Vamo lá!? Vai em Design adicionar gadgets HTML/JavaScript, e postar todo o código abaixo nele. depois de fazer isso, você terá que mudar tudo que está em vermelho, pela URL de seu perfil em cada um. Por exemplo: o seu perfil do Twitter é www.twitter.com/seuperfil , você irá postar a sua URL onde está em vermelho, e a mesma coisa com o orkut, facebook e Feed.


<div style="margin: 5px; padding: 10px;"><a  
href="ENDEREÇO DO FEED"><img
style="border: 0px solid ; width: 48px; height: 48px; float: left;"
alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdlT5xmH-axedsp6sMKo-sGO1GRV_BKh8Z_IEfwNPwZ9voeXLOUk19vFFKoHjT7r6HDUPLwmiDDvAEvKjWOs36Go1Bw1imBSBliXoY1ALLNmC_xvZ4jqPliS-8xtavci417WNOo2s5Dfkv/s1600/RSS-icon.png"><a
href="ENDEREÇO DO TWITTER"><img
style="border: 0px solid ; padding-left: 5px; width: 48px; height: 48px;"
alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr4wbdL7d38CbEaJ-2Lkfw-ihtd_xgnt22JhtioAQfUxlhTfyYll_skjNDiXG3LBvgZ9DKnCxYIkNiMRDU8CqjqSOdszG-e_jOL_JmKCFpGvVswlfMqZ4megs68HqBiRtC2fy6HOJsxZWh/s1600/Twitter-icon+%25282%2529.png"><a
href="ENDEREÇO DO ORKUT"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4892xAPdgiWKeIWEnmbpBoYgtUqHF6pvgJWyACiDB8xx1PRknkIa8b-iMZKrPqnmkiwg_6F8dB_MXfOSFFQItzbR4vzAXxsyA3vSCNB9sHmqU4rrmirbjzm4T26YU2pSYe_kFlR-cegpr/s1600/Orkut-icon.png"><a
href="ENDEREÇO DO FACEBOOK"><img
style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"
alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjODMm-8r_EO0ybL-TG5ZGhWob1KrGX3zrStPJWXNn-Nd31N8fPN6qWwO0vijuCSIgej-tDMgKd8SNQk8oiU08rTZUZ32G7RciXEFbpH3Kj2S1jCcpMVjcnjH3vf0-_giu8wXJZF5_pXjgD/s1600/Facebook-icon.png"><br /></img

É só seguir tudo como expliquei e o resultado vai ser esse:

Qualquer dúvida deixe um comentário. Até a próxima!

Fotes:Dicas Blogger

Adicionar atalho do seu perfil FaceBook ao Blogger/Blogspot

2011-02-11T15:20:00.006-02:00

Olá pessoal, tenho uma dica super legal, que é adicionar perfil do facebook ao blog, junto do seu perfil você pode adicionar. e-mail, suas atualizações. Em um banner que o próprio facebook cria de diferentes formas e tamanho. de acordo com seu template e seu gosto. É muito simples entre em seu facebook, vá até o final, em baixo de seu ultimo amigo no canto inferior esquerdo, e procure pelo o que a imagem abaixo mostra, se não consegue ver clique em cima dela.

Clica em cima do link "adicionar um atalho ao seu site", abrirá uma outra página onde você vai poder configurar de acordo com o seu gosto como mostra a imagem abaixo:

Onde tá o quadrado é onde há várias opções de atalhos, onde está o logo do meu blog ficará o seu, onde está o circulo é onde irá detalhar seu atalho configurando de acordo com seu gosto e onde está a ceta, é o código que você irá adicionar em um gadget HTML/JavaScript. Depois disso é só posicionar onde você desejar. Até a próxima...

Publicidade: Top 5 sites criadores de Banners para Blogger - Sites - Wordpress

2011-02-11T10:50:00.005-02:00

Olá pessoal, hoje em dia com a força da publicidade não dá mais para ter algum negócio e não promover seu empreendimento com anúncios em em jornal, em rádios e Internet e é justamente na Internet que se usam os “BANNERS”, para quem ainda não sabe o que é um banner é simples basta olhar no canto direito acima no Orkut, propagandas do Google ou até mesmo no facebook no lado direito. Enfim em todo cantinho da Internet tem! Além do mais é uma forma de você divulgar seu blog especificamente falando. Tem vários programas que fazem esse trabalho, um banner bem elaborado tem que ter técnica e pouca gente sabe, por isso resolvi separar cinco grandes sites simples e práticos que fazem todo esse trabalho para nós, em apenas um clique.

1 - Banner Creator

2 - 3D Textmaker

3 - 123-Banner

4 - BannerFans

5 - Mybannermaker

Aproveitem! Até a próxima.

Baixar modelo completo (Backup) no Blogger BlogSpot

2011-02-09T17:40:00.004-02:00

Olá pessoal! vai ai mais uma dica, que muita gente não faz ou simplesmente não sabe fazer, antes de modificar seu template. Baixar modelo completo, que é o mesmo que um Backup, é uma cópia de segurança, se você errar ou danificar seu template, com o backup feito antes de modificar poderá reverter a situação e tudo volta ser como antes. É muito simples veja a imagem abaixo e é só clicar em cima "de BAIXAR MODELO COMPLETO" e salve em seu PC.

É simples,e é seguro de fazer antes de qualquer ação no seu template, valeu e

até a próxima!