BLOG DE TESTE

10 abril 2014

Personalizar os titulos da sidebar

No painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.

Aperte Ctrl+F e procure por h2 {
Logo abaixo do trecho que você procurou, vai ter algo parecido com isso:

h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}

Apague toda essa parte e no lugar coloque esse código:

.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: #fbfbfb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}

Agora é só modificar as cores e a fonte como quiser. Se em vez de cor, você quiser colocar uma imagem de fundo, substitua essa parte:

background: #fbfbfb; /*Cor de fundo*/

Por isso:

background: url(link_da_imagem) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/

Visualize se está tudo certo e salve. A partir desse código você pode aplicar outros efeitos, como sombra, bordas arredondadas e outros estilos de bordas. Espero que tenha sido útil. Se usarem, não esqueçam dos créditos ok ;
Código do blog :http://www.cherryboomb.com
Que não está mais sendo atualizado,por isso coloco os tutorias aqui para eu Usá-los,
você pode usá-los também.

Nivo Slider

CLIC EM:(Ctrl + F) ;e procure por }]]></b:skin>

E acima dele cole o código abaixo;

/* The Nivo Slider styles */

#slider {position:relative;}

#slider img {position:absolute; top:0px; left:0px;

display:none;}

#slider a {border:0; display:block;}

.nivoSlider {position:relative; width: 556px; /* largura */ height: 440px; /* altura */ } .nivoSlider img {position:absolute; top:0px; left:0px;}

/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {position:absolute; top:0px;

left:0px; width:100%; height:100%; border:0;

padding:0;margin:0; z-index:6; display:none;}

/* The slices and boxes in the Slider */

.nivo-slice

{display:block;position:absolute;z-index:5;height:100%;}

.nivo-box {display:block;position:absolute;z-index:5;}

/* Caption styles */

.nivo-caption {position:absolute;left:0px; bottom:0px;

background: #ccc; /* Cor de fundo do título */ color: #fff; /* Cor do título */ text-transform: uppercase; width: 100%; z-index:50; border-right: 5px solid #;padding: 5px 0;}

.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}

.nivo-caption a {display:inline !important;}

.nivo-html-caption {display:none;}

.nivo-directionNav a

{position:absolute;top:45%;z-index:99;cursor:pointer;}

.nivo-prevNav {left:0px;}

.nivo-nextNav {right:0px;}

/*============================*/

/*=== Custom Slider Styles ===*/

/*============================*/

.slider {width:100%;}

.slider img

{position:absolute;top:0px;left:0px;display:none;}

.slider a {border:0;display:block;}

.nivo-controlNav {display:none;}

.nivo-directionNav a

{display:block;width:31px;height:34px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibrht-Lyj874yPcQLztqbiH-ZPFdLVWJqYCsNRRIH_QBNsu4aQe6xHO4pUTcg8LzPXageI5ASx_P0_oOY0WRFXj7AUrR-g2GfKxneju5k_StOZUBscuOqwrOgEaINgCXXq9neQ_D4zGOsl/s1600/s-12.png)

no-repeat; /* imagem das setinhas */ text-indent:-9999px;border:0; }

a.nivo-nextNav {background-position:-30px 0;right:15px;}

a.nivo-prevNav { left:15px;}

.nivo-caption {font-family:"Trebuchet MS", Arial,

Helvetica, sans-serif;}

.nivo-caption a {color:#efe9d1; text-decoration:underline;}

As únicas coisas que você precisa alterar são as negritadas. Principalmente o tamanho (width e height).

Agora procure por </head> e acima dele cole:

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

<script src='http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js' type='text/javascript'/>

<script type='text/javascript'>

var $nv4wp = jQuery.noConflict();

$nv4wp(window).load(function() {

$nv4wp('#slider').nivoSlider({

effect:'random',

slices:15, // For slice animations

boxCols: 4, // For box animations

boxRows: 2, // For box animations

animSpeed:500, // Slide transition speed

pauseTime:3000, // How long each slide will show

startSlide:0, // Set starting Slide (0 index)

directionNav:true, //Next and Prev

directionNavHide:true, //Only show on hover

controlNav:true, // 1,2,3... navigation

controlNavThumbs:false, // Use thumbnails for Control Nav

controlNavThumbsFromRel:false, // Use image rel for thumbs

controlNavThumbsSearch: '.jpg', // Replace this with...

controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src

keyboardNav:true, //Use left and right arrows

pauseOnHover:true, //Stop animation while hovering

manualAdvance:false, //Force manual transitions

captionOpacity:0.8, //Universal caption opacity

prevText: 'Prev', // Prev directionNav text

nextText: 'Next', // Next directionNav text

beforeChange: function(){}, // Triggers before a slide transition

afterChange: function(){}, // Triggers after a slide transition

slideshowEnd: function(){}, // Triggers after all slides have been shown

lastSlide: function(){}, // Triggers when last slide is shown

afterLoad: function(){} // Triggers when slider has loaded

});

});

</script>

Visualize e se estiver tudo ok salve.

O slide ainda não irá aparecer. Para mostrá-lo vá até Layout e adicione em um lugar estratégico um gadget de HTML/JavaScript. Dentro dele cole:

<div id="slide"><div id="slider">

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

</div></div>

Altere o que se pede e seja feliz!

Lembrando que você deve alterar height e width conforme o tamanho que estipulou lá no primeiro código!

Espero que consigam e tenham gostado!

08 abril 2014

MOLDURAS PARA VIDEOS

<center><div style="background:
URL(ENDEREÇO DA IMAGEM)
no-repeat center; height: 367px; width: 640px;">
<div style="float: left; padding-left: 30px; padding-top:
35px;">
<object height="300" width="580"><param
name="movie"
value="ENDEREÇO DO VÍDEO?fs=1&hl=pt_BR">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed
src="ENDEREÇO DO VÍDEO?fs=1&hl=pt_BR"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" height="300"
width="580"></embed></object></div>
</div>
</center>
Salve as molduras em seu computador.
Coloque nos devidos espaços, os endereços ou URLs da imagem e do vídeo. Veja que o endereço do vídeo deve ser introduzido duas vezes no código.
Obs.: Dependendo do local onde o vídeo será colocado em seu blog ou site, poderá haver uma diferença ficando o vídeo, um pouco fora da moldura. Esse problema poderá ser sanado regulando as medidas que estão na cor verde do código.
É isso aí! Espero que gostem...faça um comentário...até a próxima.
CRÉDITOS DO BLOG:http://dr-misterblog.blogspot.com.br/

Adicionar Borda no Video do Youtube


<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/RA2myM4lSpQ?fs=1&hl=pt_BR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RA2myM4lSpQ?fs=1&hl=pt_BR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object

 
Na imagem você vê que o próprio youtube nos fornece um código html do vídeo, algo como o seguinte código:

Para adicionarmos uma borda basta adicionarmos o seguinte código:

2. <object width="480" height="385" border="3x solid"><param
 name="movie" 
value="http://www.youtube.com/v/RA2myM4lSpQ?fs=1&amp;hl=pt_BR"></param><param
 name="allowFullScreen" value="true"></param><param 
name="allowscriptaccess" value="always"></param><embed 
src="http://www.youtube.com/v/RA2myM4lSpQ?fs=1&amp;hl=pt_BR" 
type="application/x-shockwave-flash" allowscriptaccess="always" 
allowfullscreen="true" width="480" height="385" border="3x solid"></embed></object>

Laranja:  Você só  deve 
alterar o valor '3' por outros números, como '5,6,7,8' ou o que desejar.
 Quanto maior o número, maior a borda! Lembrando que deve alterar nas 
duas partes em laranja para que funcione!

07 abril 2014

Video dentro de um background

Quer colocar um nos videos?
Entre no blog:http://goimagines.blogspot.com.br/

Como colocar background nos vídeo

Fazendo a imagem

1- Vá ao youtube e pegue um vídeo de exemplo (qualquer vídeo, é só pra ver o tamanho)
2- Clique em compartilhar > incorporar (coloque o código novo,porque o antigo eu não consegui,porque o video não foi.No código onde está "frameborder troquei o zero pelo numero 5 .e coloque a largura que deseja que os vídeos tenham (coloque uns 40px menor que a área da postagem), então vai aparecer a altura automaticamente. Isso serve pra descobrir a altura correta em relação à largura do vídeo, ou seja, pra ficar proporcional.
3- Agora que você tem a largura e a altura pode usar a criatividade pra criar a imagem! Lembre-se de fazer a imagem maior que o vídeo, para ficar com a "bordinha".

Não desanime vale a pena quebrar a cabeça.Você pode fazer suas próprias molduras no :wwwphotoscape.com.

Baixe no seu computador ele é grátis

Código

Copie o código abaixo e cole na aba "Editar HTML" da postagem, fazendo as alterações necessárias:

<div style="background: url(URL DA IMAGEM) left no-repeat; height: 413px; width: 550px;"><div style="float: left; padding-left: 48px; padding-top: 60px;">CÓDIGO DO VÍDEO</div></div>

Entendendo:

- Onde está destacado de rosa, você vai substituir pelo que está sendo pedido.

- Onde está destacado de azul, você vai substituir pelo tamanho da sua imagem (largura: widht / altura: height)

- No que está destacado de roxo, você pode alterar para o vídeo ficar no lugar que você quiser em cima da imagem. Em padding-left você pode alterar o valor para a esquerda, lembrando que existem números positivos (1;) e negativos (-1;). Em padding-top altere para cima.

Você pode usar esse código para qualquer gadget é só colocar o código html desejado (c-box, contador, fanbox...) onde está escrito "código do vídeo".
No blog: http://goimagines.blogspot.com.br/
Você encontra muitos tutoriais:este eu tirei de lá,mas o crédito não é meu é dela.
Visite o blog e deixa um oi.

Essa moldura fui eu que fiz no photoscape,você pode fazer no tamanho que desejar.

Créditos do blog:goimagines.blogspot.com.br