Postagens Recentes

30 de nov de 2010

Slide com menu em forma de números

6 comentários:
DEMO


Mais um slide para o Blogger/Blogspot. Esse tem um efeito bonito com um menu em números, é leve e de fácil costumização. O único incômodo é que as imagens nele contidas devem ter um tamanho padrão, qe neste caso é de 300px de altura e 980 de comprimento.

Você poderá alterar esses números para isso, altere a numeração que está em vermelho neste primeiro código e consequentemente os números que estão em vermelho np último código.

Os números em azul representam a barra com os números.
O número em rosa representa a cor selecionada no menu em números.

Para coloca-lo em seu blog vá até o HTML de seu blog e antes de : ]]></b:skin>

Cole o códigoabaixo


Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
/* Slide
----------------------------------------------- */
.main_view {
float: left;
position: relative;
}
.window {
height:300px; /*ALTURA DAS IMAGENS-- */
width: 980px;  /*LARGURA DAS IMAGENS-- */
border:1px solid #04272D;
overflow: hidden;
position: relative;
margin: 0 0 20px 0;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
.paging {
position: absolute;
bottom: 30px;
right: -1px;
width: 400px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background:  url(http://4.bp.blogspot.com/_q4j3j-JA2ro/S0TDw0n697I/AAAAAAAANBw/XhlF84popQU/s000/transparencia.png);
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-topleft: 25px;
border:1px solid #000;
display: none;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #188696;/*COR DE FUNDO DOS NUMEROS ATIVOS*/
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a:hover {
font-weight: bold;
}

Agora depois de ]]></b:skin> Cole o código abaixo.


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

<script type='text/javascript'>
$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(&quot;.paging&quot;).show();
    $(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);
      
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(&quot;.window&quot;).width();
    var imageSum = $(&quot;.image_reel img&quot;).size();
    var imageReelWidth = imageWidth * imageSum;
   
    //Adjust the image reel to its new size
    $(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
   
    //Paging + Slider Function
    rotate = function(){   
        var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
        $active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
       
        //Slider Animation
        $(&quot;.image_reel&quot;).animate({
            left: -image_reelPosition
        }, 500 );
       
    };
   
    //Rotation + Timing Event
    rotateSwitch = function(){       
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $(&#39;.paging a.active&#39;).next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $(&#39;.paging a:first&#39;); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
    };
   
    rotateSwitch(); //Run function on launch
   
    //On Hover
    $(&quot;.image_reel a&quot;).hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation
    });   
   
    //On Click
    $(&quot;.paging a&quot;).click(function() {   
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });   
   
});

</script>

Procure então por: <div id='content-wrapper'>

E cole o próximo código abaixo dele, fazendo as modificações necessárias.


<div id='slide'>
<div class='folio_block'>

<div class='main_view'>
<div class='window'>
<div class='image_reel'>

<a href='AQUI O ENDEREÇO DO LINK 1'><img width="980px"  src='AQUI O ENDEREÇO DA IMAGEM 1' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 2'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 2' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 3'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 3' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 4'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 4' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 5'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 5' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 6'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 6' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 7'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 7'/></a>
<a href='AQUI O ENDEREÇO DO LINK 8'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 8' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 9'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 9' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 10'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 10' heigth="300px" /></a>

</div></div>
<div class='paging'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
<a href='#' rel='5'>5</a>
<a href='#' rel='6'>6</a>
<a href='#' rel='7'>7</a>
<a href='#' rel='8'>8</a>
<a href='#' rel='9'>9</a>
<a href='#' rel='10'>10</a>
</div>
</div>

</div>
</div>

Como disse, esse slide é fácil de personalizar, veja outro modelo com fundo...


DEMO deste modelo

Créditos:

26 de nov de 2010

Slide com atualizações automáticas

13 comentários:

A Rô do Bloggersphera deu um jeito, competente que é, de colocar as últimas postagens automaticamente em um dos slides qe acho bem bonito, o slide XXX de criação de Jonh Resig. Eu já havia o ensinado AQUI, mas como acho interessante essa estória de slide automático, vou reproduzir neste post como se faz o danado.



Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
Vá até o HTML de seu blog e procure pelo código:

]]></b:skin>

Cole então o próximo código acima dele. (código em vermelho é a imagem de fundo)




/*Slide---------------------------------------------------------------*/
#crosscol-wrapper { /* coluna onde você colocará o slide */
padding:12px;
position:relative;}
#slide-wrapper { /* container do slide - não alterar */
width:100%;}
#slide-wrapper a:link,
#slide-wrapper a:visited,
#slide-wrapper a:hover{ /* links - não alterar */
outline:none;
text-decoration:none;}

#slider { /* altere a imagem de fundo e as medidas conforme seu template */
background:url(http://1.bp.blogspot.com/_FXIne2ZDJII/SrQibvsAyFI/AAAAAAAABhw/vDf4hrpYAWg/s1600/980.png) no-repeat;
clear:both;
height:254px;
margin:20px 0 0 0;
overflow:hidden;
position:relative;
width:100%;}

#mover { /* seletor da movimentação do slide - não altere */
overflow:hidden;
position:absolute;
width:auto;}

.slide { /* a largura pode ser alterada conforme a coluna onde você colocará o slide e a imagem de fundo */
float:left;
height:200px;
padding:15px 0;
position:relative;
width:960px;}

.slide h3 { /* título do post - altere cor, fonte e medidas conforme seu template */
color:#ccc;
font-size:24px;
margin:0 0;
overflow:hidden;
padding:10px 0px 0px 10px;
width:300px;}

.summary { /* container do sumário - altere conforme seu template */
font-size:12px;
font-weight:bold;
line-height:20px;
margin:0 0;
padding:30px 0px 0px 10px;
text-transform:uppercase;
width:400px;}

.slide p{ /* parágrafo do sumário - altere conforme seu template */
color:#ccc;
font-size:12px;
line-height:20px;
margin:5px 0;
padding:10px 0px 0px 10px;
width:400px;}

/* os ítens abaixo referem-se ao link leia mais - altere conforme seu template, a imagem de fundo e a imagem do botão que colocar */

.leiamais{
background: #fff;
width: 70px;
padding: 0 30px 0 40px;
font-size:14px;
line-height:30px;
margin:0 39px 0 200px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-shadow: 0px 1px 1px #555;
}

.leiamais a:link,
.leiamais a:visited,
.leiamais a:hover{
color:#000;
text-decoration:none;}

.slide img { /* imagem do slide - as medidas e posicionamento deverão ficar de acordo com a imagem de fundo */
background:#fff;
width: 280px;
height:180px;
border: 1px solid #ccc;
position:absolute;
top:10px;
left:555px;
padding:10px 10px;}

#slider-stopper { /* texto para parar e reiniciar o slide - medidas e posicionamento devem seguir a imagem de fundo */
color:#000;
font-size:14px;
font-family:Georgia, Helvetica, Sans-Serif;
padding:3px 8px;
position:absolute;
top:111px;
right:22px;
text-transform:uppercase;}


Agora abaixo de :

]]></b:skin>

 cole o próximo código.


<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.1&quot;);
google.load(&quot;jqueryui&quot;, &quot;1.5.3&quot;);
</script>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <!-- JavaScript Slider -->
<script type='text/javascript'>
var delayLength=6000;function doMove(panelWidth,tooFar){var leftValue=$(&quot;#mover&quot;).css(&quot;left&quot;);if(leftValue==&quot;auto&quot;){leftValue=0};var movement=parseFloat(leftValue,10)-panelWidth;if(movement==tooFar){$(&quot;.slide img&quot;).animate({&quot;top&quot;:-200},function(){$(&quot;#mover&quot;).animate({&quot;left&quot;:0},function(){$(&quot;.slide img&quot;).animate({&quot;top&quot;:50})})})}else{$(&quot;.slide img&quot;).animate({&quot;top&quot;:-200},function(){$(&quot;#mover&quot;).animate({&quot;left&quot;:movement},function(){$(&quot;.slide img&quot;).animate({&quot;top&quot;:50})})})}}$(function(){var $slide1=$(&quot;.slide&quot;);var panelWidth=$slide1.css(&quot;width&quot;);var panelPaddingLeft=$slide1.css(&quot;paddingLeft&quot;);var panelPaddingRight=$slide1.css(&quot;paddingRight&quot;);panelWidth=parseFloat(panelWidth,10);panelPaddingLeft=parseFloat(panelPaddingLeft,10);panelPaddingRight=parseFloat(panelPaddingRight,10);panelWidth=panelWidth+panelPaddingLeft+panelPaddingRight;var numPanels=$(&quot;.slide&quot;).length;var tooFar=-(panelWidth*numPanels);var totalMoverwidth=numPanels*panelWidth;$(&quot;#mover&quot;).css(&quot;width&quot;,totalMoverwidth);$(&quot;#slider&quot;).append(&#39;&lt;a href=&quot;#crosscol-wrapper&quot;id=&quot;slider-stopper&quot;&gt;Stop&lt;/a&gt;&#39;);sliderIntervalID=setInterval(function(){doMove(panelWidth,tooFar)},delayLength);$(&quot;#slider-stopper&quot;).click(function(){if($(this).text()==&quot;Stop&quot;){clearInterval(sliderIntervalID);$(this).text(&quot;Start&quot;)}else{sliderIntervalID=setInterval(function(){doMove(panelWidth,tooFar)},delayLength);$(this).text(&quot;Stop&quot;)}})});
</script>
</b:if>



Procure então por:

<div id='content-wrapper'> 

e cole acima dele o código abaixo



<div id='crosscol-wrapper'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
       <div id='slide-wrapper'><div id='slider'>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = &quot;http://4.bp.blogspot.com/_j4fpzU2AasM/StEneoD2ZoI/AAAAAAAABfI/WhN3tHhZEy0/s1600/noimage2.gif&quot;;
showRandomImg = true;
imgwidth = 200;
imgheight = 150;
summaryPost = 100;
startpost = 2;
numposts = 6;
home_page = &quot;<data:blog.homepageUrl/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}
s=s.join("");s=s.substring(0,chop-1);return s;}
function showrecentposts(json){document.write('<div id="mover">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var item='<div class="slide"><h3><a href="'+posturl+'">'+posttitle+'</a></h3><div class="summary"><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div><div class="leiamais"><a href="'+posturl+'">Leia Mais</a></div> <a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a> </div>';if(summaryPost==0){item='<div class="slide"><h3><a href="'+posturl+'">'+posttitle+'</a></h3><div class="leiamais"><a href="'+posturl+'">Leia Mais</a></div> <a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></div>';}
document.write(item);j++;}
document.write('</ul>');}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<div class='clear'/>
</div>
</div></b:if>
</div>



Abaixo, alguns fundos em cores diferentes para o slide. Clique sobre a imagem desejada e salve em seu computador, hospedando em seu blog a imagem e colocando o endereço no primeiro código na inscrição na cor vermelha.











Créditos:Jonh Resig

Dividir os marcadores (labels) do Blogger

Nenhum comentário:


Facílimoooooooooooooo...
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI


Vá até o HTML de seu blog, procure por

]]></b:skin>


 Cole então acima dele este código abaixo.




#Label1 ul li{
float: left;
width: 45%;
}


Vi na Mamanunes ;-)

25 de nov de 2010

Menu horizontal com buscador e setas para deslizar o blog

6 comentários:


Menu com efeito hover nos botões, seta para subir e descer o blog e buscador. Para instala-lo vá até o Modelo e clique em "Editar HTML":












Procure por:


]]></b:skin>


E cole o código abaixo acima dele.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Instale esse manu no template Simples. 


/*Menu horizontal-----------------------------------*/
#nav{height:42px;border-bottom:1px solid #ddd;position:fixed;top:0px;left:0px;right:0px;background:#fff url(http://1.bp.blogspot.com/_BaCxSD9NFn8/TGIsV_8BGlI/AAAAAAAAB9k/GRL5MvDGjeY/s1600/nav.png) repeat-x center left;border-bottom: 1px dashed #cc0000;}
#nav ul{height:25px;list-style:none;margin:6px auto 0px auto;width:980px;}
#nav ul li{display:inline;float:left;margin:0 2px;}
#nav a{font-size:11px;font-weight:bold;float:left;padding: 3px 6px;color:#999;text-decoration: none;border:1px solid #ccc;cursor: pointer;background:transparent;height:18px;line-height:18px;}
#nav a:hover{background:#D9D9DA none;color: #fff;}
#nav a.top span, #nav a.footer span{float:left;width:16px;height:16px;}
#nav a.top span{background:transparent url(http://4.bp.blogspot.com/_BaCxSD9NFn8/TGIrY6X8fxI/AAAAAAAAB9c/k3x_mq8A79I/s1600/001_24.png) no-repeat center center;}
#nav a.footer span{background:transparent url(http://2.bp.blogspot.com/_BaCxSD9NFn8/TGIrXfqMxLI/AAAAAAAAB9U/lAGmfD1AWW4/s1600/001_22.png) no-repeat center center;}
#back {font-size:11px;font-weight:bold;background:#fff;border: 1px solid #ddd;float:left;color:#999;
height:14px;margin-right:8px;width:218px;padding:5px}
#proc {margin-top:3px;float:left;width:23px;height:19px}


Agora procure por:

<header>

 E cole o próximo código acima dele fazendo as modificações necessárias.

<div id='nav'>
 <ul>
  <li><a class='top' href='#header'><span/></a></li>
  <li><a class='footer' href='#footer'><span/></a></li>
  <li><a href='#'>Home</a></li>
  <li><a href='ENDEREÇO DO FACEBOOK'>Facebook</a></li>
  <li><a href='ENDEREÇO DO TWITTER'>Twitter</a></li>
  <li><a href='ENDEREÇO DO GOOGLE BUZZ'>Buzz</a></li>
  <li><a href='ENDEREÇO DO BLOGBLOGS'>BlogBlogs</a></li>
  <li><a href='ENDEREÇO DO FEED'>Feed</a></li>
  <li class='search'>
   <span>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='back' maxlength='255' name='back' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' title='search' type='text' value='Procurar...'/>
<input alt='' id='proc' name='proc' src='http://3.bp.blogspot.com/_FXIne2ZDJII/TO75Wg730FI/AAAAAAAAEDw/N9DXDDBylwY/s1600/zoom.png' type='image'/>
</form></span></li></ul></div>

Template Autuum

Um comentário:
Template estilo revista com vários hacks. Formulário para email, breadcrumbs, menu com botões sociais, leia mais, tables menu...



Para habilitar os botões sociais: (cuidado e atenção redobrada para não apagar aspas, pontos, vírgulas pois dará erro se isso acontecer)


Clique no botão F5 de seu teclado e procure por:



  • ENDEREÇO DO FACEBOOK e substitua pelo endereço de seu Facebook
  • ENDEREÇO DO TWITTER  e substitua pelo endereço de seu Twitter
  • ENDEREÇO DO ORKUT e substitua pelo endereço de seu Orkut
  • ENDEREÇO DO EMAIL e substitua pelo endereço de seu Email
  • ENDEREÇO DO FEED e substitua pelo endereço de seu Feed



Para habilitar o formulário de email

Clique no botão F5 de seu teclado e procure por: ENDEREÇO DE SEU EMAIL AQUI, coloque então o endereço de seu email.

Código para não deixar a sidebar deslizar pelo blog

Um comentário:


Geralmente quando mexemos nos códigos do template e inserimos mais de uma coluna pode acontecer que quando a postagem é pequena a sidebar se desloque para a parte inferior da área dos posts. Para que isso não aconteça insira um dos códigos em vermelho, (dependendo de que lado esteja sua sidebar) acima da área da sidebar: (no HTML de seu blog)




<div style='clear: right;'/> (direita)


ou


<div style='clear:left;'/> (esquerda)

Visto no Blogersphera

24 de nov de 2010

Link Feeds e feeds comentários acima da header

Nenhum comentário:
Adicione links para os Feeds de seu blog, o feed de postagem e o feed de comentários. Para coloca-los em seu blog no novo modelo "Simple"  vá até o editor de modelos de seu bloge clique em "Editar modelo"


Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI



Ao abrir a janela, procure por:


    <div class='header-outer'>


Agora cole o código abaixo acima dele.




<div id='feed-header'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='Subscrever Postagens' src='http://4.bp.blogspot.com/_fN8wBWylUn8/TQ71hZN0UlI/AAAAAAAACsk/QRWPwxHpBjQ/s1600/feed.png'/></a> <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Feed Posts</a>
<a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'><img alt='Subscrever Comentários' src='http://1.bp.blogspot.com/_fN8wBWylUn8/TQ71VIJtypI/AAAAAAAACsg/yawaH2YHvd4/s1600/feed_ballon.png'/></a> <a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Feed Comentários</a>
</div>


Para customizar basta copiar o código abaixo e colar acima de:  ]]></b:skin>

#feed-header{
margin:0 auto;
clear: both;
line-height: 2.5em;
font-size: 12px;
text-align: right;
}
#feed-header a{
font-size: 12px;
color: #000;/*cor da letra*/
}

22 de nov de 2010

Efeito nas imagens dos posts

Um comentário:
Outro código que dá um belo efeito nas imagens.






Vitória do Brasil






Copie o código e cole-o no editor de textos (onde você faz os posts) no modo "Editar HTML". Vc poderá colocar várias imagens, mas basta no entanto repetir o código que está na cor azul





<div class="figure">
<img src="ENDEREÇO DA IMAGEM" /><br />
ESCREVA AQUI</div>



<style>
/* en el div contenedor se verá la imagen en forma de miniatura */
.figure {
background-color: #FFF;
border: 10px solid #FFF;
left:40%; /* la posición en la pantalla es la parte engorrosa del asunto */
position: relative;
width:120px; /* tamanho da miniatura */
-moz-box-shadow: 0 3px 10px #CCC; /* sombra no Mozilla e Chorme */
-webkit-box-shadow:  0 3px 10px #CCC;
-moz-transform: rotate(3deg); /* lo rotamos levemente en Mozilla y Chorme */
-webkit-transform: rotate(3deg);
}
/* la imagen */
.figure img { width:100%; }
/* el texto */
.figure span {
display: block;
text-align: center;
/* cualquier otra propeidad, color, tamaño y tipo de fuente, etc */
}
/* el efecto al poner el cursor encima */
.figure:hover {
z-index: 9999;
/* eliminamos la rotación y ampliamos la imagen por ejemplo tres veces */
-webkit-transform: rotate(0deg) scale(3);
-moz-transform: rotate(0deg) scale(3);
}
</style>



Gracias Vagabundia ;-)

Outros efeitos AQUI

Expandir imagens ao passar o mouse

3 comentários:


 Para quem tem blog e utiliza iamagens eis um bom código para economizar espaço e organizar bem os posts.Super fácil e leve, pode ser usado direto nas páginas de postagem do blog, no modo "Editar HTML"



<img class="expa" src="AQUI O ENDEREÇO DA IMAGEM" />
<style>
  img.expa {
    cursor: pointer;
    max-width: 150px;
  }
  img.expa:hover {
    max-width: none;
  }
</style>


Vagabundia


 Mas se quer mais praticidade, vá até o HTML de seu blog e depois de   ]]></b:skin> cole o código abaixo


<style>
  img.expa {
    cursor: pointer;
    max-width: 150px;
  }
  img.expa:hover {
    max-width: none;
  }
</style>









Agora vá até Configurações, agora clique em Formatação. Lá em baixo na página vc verá uma área em branco, cole o código abaixo e salve.

<img class="expa" src="AQUI O ENDEREÇO DA IMAGEM" />




Sempre que precisar basta colar o endereço da imagem desejada, se não, basta apagar.

19 de nov de 2010

Imagens de neve e estrelinha

Nenhum comentário:
Clique sobre a imagem, salve em seu computador, hospede-as e cole no script para a neve cair em seu blog. Pegue o código AQUI.

Todas as imagens tem o fundo transparente.





















Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube