Sejam bem vindos meu ao bloguinho, ele foi criado com o intuito de ensinar a quem necessita de ajuda em html e css, temos diversos tutoriais e materiais. Fiquem bem a vontade e qualquer dúvida que tiverem entrem em contato comigo ou peçam pela ask. Beijinhos caramelados e inté mais ♡
Search here
All that you want is here, css and html
Welcome to garota no mundo html.
- efeito legenda nas imagens de posts
- backgrounds grandes em aquarela
- Avatar do autor no post footer
- Leia mais na mesma linha do header
- Efeito Dragqueen e efeito Swing
- Três modelos de menus agenda
- Usando temas de tumblr no blog
- Criando seu próprio modelo de data
O tema atual do layout é: the fall of leafs
A meta dos posts do blog é de: 300 posts
A meta de comentários do blog é de: 3500
O blog foi inaugurado no dia: 27/12/2012
os Seguidores do blog atualmente são: 865
A versão atual do layout está na: 41ª vers.
folhinhas que estão no blog online agora:
folhinhas que já passaram por aqui:

Efeito descrição surpresa e slide na sidebar ;)


Olá meus fofutchos tudo bem? Então, super atrasada, feliz natal para quem não dei >.< Eu estava fora na verdade viajando... E como estava sem net "boa" não postei nada, e com isso também peço desculpas para a leitora Rayane que pediu minha ajuda, e eu sem net e sem tempo não dediquei tanto tempo assim para ajudá-la. Então para me redimir, irei postar os 2 tutoriais que ela pediu ;)  Em primeiro lugar irei postar o efeito descrição surpresa que eu tenho aqui na sidebar!


 Efeito Descrição Hover Surpresa: Live prewiew Aqui

Vamos ao tuto? Vá em seu modelo e em editar Html, dê Ctrl C e procure por: ]]></b:skin
E quando achar acima dele cole o seguinte código:

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}
.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a{
color: white;
}
.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}


Salve, vá até layout e adicione o Html java script, dentro cole esse código aqui:

<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2"> <!- AONDE DIZ WIDTH, MUDE PELA LARGURA DA SUA IMAGEM, E AONDE DIZ HEIGHT, MUDE PELA ALTURA ->
<img src="COLE A URL DA SUA IMAGEM AQUI" />
<div class="desc">
ESCREVA ALGO AQUI, É ISSO AQUI QUE VAI APARECER QUANDO VOCÊ PASSAR O MOUSE NA IMAGEM.
</div>
</div> 

Bem nem preciso dizer o que precisa mudar aqui no java script pois está todo explicadinho..

Então agora postarei sobre o slide na sidebar.
Slide na Sidebar:

Vá no seu modelo e em editar Html, procure por: </head>
Quando achar cole acima dele este código aqui:

<!-- JavaScript Slider Horizontal - Inicio--><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 $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //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 $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").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><!-- JavaScript Slider Horizonta - Fim-->

Salve, agora procure por: ]]></b:skin> 
Quando achar acima dele cole o seguinte código:

/*--Container geral--*/
.main_view {
float: left;
position: relative;
}
/*--Estilos do container das imagens--*/
.window {
height:200px; /*-- Altura do Slide (as imagens devem ter a mesma altura */
width: 550px;  /*-- Largura do Slide (as imagens devem ter a mesma largura)-- */
overflow: hidden;
position: relative;
}.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
display: none;
}
/*--Estilos do link da numeração (Estilo dos numeros)--*/
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #fff;
background: #bad5d9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link ativo da numeração--*/
.paging a.active {
font-weight: bold;
color: #fff;
background: #b97ac9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link hover da numeração--*/
.paging a:hover {
font-weight: bold;
}.feed-links {
 display: none; }


Salve novamente e saia do modelo, vá até o layout e adicione o gadget html java script, e dentro cole o seguinte código:

<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="LINK_1" alt="" ><img src="URL_IMG_1"/></a>
<a href="LINK_2" alt=""><img src="URL_IMG_2"/></a>
<a href="LINK_3" alt=""><img src="URL_IMG_3"/></a>
<a href="LINK_4" alt=""><img src="URL_IMG_4"/></a>
</div></div>
<div class="paging">
<a href="www.blogger.com" rel="1">1</a>
<a href="www.blogger.com" rel="2">2</a>
<a href="www.blogger.com" rel="3">3</a>
<a href="www.blogger.com" rel="4">4</a>
</div></div>

Na verdade esse slide é o mesmo slide que todo mundo está usando no cabeçalho eu apenas não coloquei no cabeçalho pois não curto muito, e além do mais todo mundo está com o slide no mesmo lugar =/ Então para diferenciar eu apenas coloquei o gadget na sidebar, é só isso simples assim =) Onde está escrito link coloque o link da página da postagem que você quer por em destaque no slide, e em imagens coloque a imagem que você quer que mostre quando passar os destaques! Se quiser mais imagens e links é só copiar e aumentar a quantidade de links e de url das imagens!! É isso Rayane espero ter te ajudado ok? Qualquer dúvida é só perguntar por comentários mesmo tudo bem? Beijos para quem fica e um ótimo fim de semana e feliz ano novo para todos!!!


Crédito pelo efeito da descrição: Aqui
Crédito pelo modelo de slide: Aqui

5 comentários:

  1. obrigada!! =^-^=
    Ashaushaushaushuashau acho que abusei do seu tempo, desculpa :) já estou fazendo o layout :) acho que tá ficando esquisito, mas vai valer a pena :D
    vou pedir outro tutorial ausausuahsuashuashua (eu sou mal U_U) a playlist que tem aqui que toca umas músicas, eu até vi o tutorial no kawaii world, mas tinha que colocar o url da música, aí nessa parte eu boiei O.O não precisa postar, é só me mandar um e-mail mesmo :)
    rayanedorock@hotmail.com

    ResponderExcluir
  2. Flor eu tenho um tutorial aqui explicando como se coloca player pequeno no blogger!
    Aqui está o tutorial linda =)
    http://garotanomundohtml.blogspot.com.br/2012/09/player-pequeno-no-blogger.html

    Está tudo bem explicadinho ok?
    Beijos..

    ResponderExcluir
  3. obrigada!!!! meu blog está ficando lindo *-* seu blog vau fazer parte dos créditos :3! bjsss >.<

    ResponderExcluir
  4. Meninaaa, eu juntei a ideia da descrição surpresa junto com imagens indo de um lado pro outro, ficou L-I-N-D-O!! Dá uma olhada lá :) Jovem e doce

    ResponderExcluir
  5. aaah, e é claro, você tá na página de créditos :D

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)