Adicionando o botão (Curtir Like) do Facebook

Como indiquei alguns plugins no artigo anterior, agora vamos adicionar o botão Curtir "like" do Facebook ao blog...

Adicionando redes sociais com botões

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...

Sidebar com abas e Jquery

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...

Caixa de Subscrição para Blogger

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...

Quanto vale seu Site/Blog?

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...

Postagens relacionadas no rodapé dos posts no blogger 1

João Santos | 12:28 | , , ,

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 3

João Santos | 15:19 | , , ,

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!


Menu horizontal para Blogs/Sites 2

João Santos | 12:47 | , ,

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:


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

Até a próxima!


 
DiretorioUP Copyright © 2010 is Designed by Lasantha Page Rank Technology Blogs - Blog Rankings Technology (Electronics) - TOP.ORG Home | RSS Feed | Comment RSS