BLOG DE TESTE

31 dezembro 2014

CÓDIGO para colocar video do you tube em molduras (EM TESTE)

<table width="331.25" height="228.75" align="center" style="background-color:#D54242; border-color:#C11515; border-width: 10px; border-style: outset;"><tr><td width="349.25" height="150" align="center" valign="middle" style="background-color:#D54242; background-image: url(http://i62.tinypic.com/1t3k15.jpg)"><table width="200" border="0" align="center"><tr><td align="center" style="background-color: transparent;"><span><font size="3" face="Times New Roman" color="#E21F1F">A FÉ,SEM TEMPLO</font></span></td></tr></table><iframe width="250" height="150" src="http://www.youtube.com/embed/uaZiL4MBQW4?" frameborder="0" allowfullscreen></iframe></td></tr></table><br />

Personalizando o gadget de postagens relacionadas

Antes de começar vocês tem que instalar o linkwithin no blog

Vá no seu HTML dê um ctrl + f e na barra de pesquisa que apareceu, procure por: ]]></b:skin>

Agora cole o seguinte código ANTES de ]]></b:skin>

/* LinkWithin personalizado

----------------------------------------------- */

.linkwithin_div {

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

padding: 0 10px;

}

.linkwithin_text {

font-size:22px; /* Tamanho do título do gadget */
color:#FFAEB9; /* Cor do título do gadget */

font-family: 'Sofia', cursive; !important;

}

a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {

display:none; /* Com isto eliminamos o link */

}

.linkwithin_posts {

width: 560px !important; /* Tamanho do gadget */

}

.linkwithin_posts a {

border: 0 !important;

padding-right: 28px !important;

}

.linkwithin_posts a:hover {

background: #FFFACD !important; /* Cor de fundo ao passar o cursor */

-webkit-border-radius: 10px !important;

-moz-border-radius: 10px;

border-radius: 10px;

}

.linkwithin_img_0 div, div.linkwithin_img_0,

.linkwithin_img_1 div, div.linkwithin_img_1,

.linkwithin_img_2 div, div.linkwithin_img_2,

.linkwithin_img_3 div, div.linkwithin_img_3,

.linkwithin_img_4 div, div.linkwithin_img_4,

.linkwithin_img_5 div, div.linkwithin_img_5,

.linkwithin_img_6 div, div.linkwithin_img_6,

.linkwithin_img_7 div, div.linkwithin_img_7,

.linkwithin_img_8 div, div.linkwithin_img_8,

.linkwithin_img_9 div, div.linkwithin_img_9,

.linkwithin_img_10 div, div.linkwithin_img_10,

.linkwithin_img_11 div, div.linkwithin_img_11,

.linkwithin_img_12 div, div.linkwithin_img_12,

.linkwithin_img_13 div, div.linkwithin_img_13,

.linkwithin_img_14 div, div.linkwithin_img_14,

.linkwithin_img_15 div, div.linkwithin_img_15,

.linkwithin_img_16 div, div.linkwithin_img_16,

.linkwithin_img_17 div, div.linkwithin_img_17,

.linkwithin_img_18 div, div.linkwithin_img_18,

.linkwithin_img_19 div, div.linkwithin_img_19,

.linkwithin_img_20 div, div.linkwithin_img_20 { /* Bordas redondeadas */

-webkit-border-radius: 10px !important;

-moz-border-radius: 10px;

border-radius: 10px;

border-style: dashed !important;

}

.linkwithin_title {

color: #000000 !important; /* Cor dos títulos das postagens */
font-family: 'Sofia', cursive; !important; /* Tipo de fonte dos títulos das postagens */
font-size: 13px !important; /* Tamanho dos títulos das postagens */

line-height: 10px !important;

text-align:center;

text-decoration: none;

}

.linkwithin_title:hover {

color: #FF1493 !important; /* Cor dos títulos ao passar o cursor */

font-weight: bold !important;

}

O próprio código já diz o que deve ser feito

Widget acima da área da postagem

Vá no seu HTML e procure por: showaddelement='no' e substitua por: showaddelement='yes'

Salve. agora vá em ''elementos da página'' e verá o novo campo para adicionar Widgets acima da área da postagem.

Rodapé das postagens

TTutorial tirado do blog:(www.isjackiezzdream.blogspot.com.b)

coloquei no lugar do Background-color(ou seja a cor do fundo COLOQUE A URL DA
IMAGEM QUE VOCÊ QUIZER) e o espaço dos comentários.

Vá no seu HTML (use ctrl + f pra facilitar a busca) e procure por:

.post-footer {

Se você nunca tiver mexido nessa área do template ele irá aparecer acompanhado pelo seguinte código:

.post-footer {

margin: .5em 0;

line-height: 1.6;

}

Substitua todo o código acima por este:

.post-footer {
border-top:1px dotted #000000;
background-image:url('URL DA SUA IMAGEM AQUI'); background-repeat:no-repeat; font-family: 'Cookie', cursive;
font-size: 16px;
letter-spacing:1px;
margin:0.73em 0;
padding:5px 8px;
text-transform:none;
}
.post-footer a{
color:#FF1493;
text-decoration:;
font-weight: ;
background-color: #FFFF00;
}
.post-footer a:hover{
color:#FFFF00;
text-decoration:none;
background-color:#FF1493;
}
.comment-link {
margin-left:17px;
magin-top:500px;
color: #ccc;
background-color: #FFFF00;
}

Pra fonte funcionar corretamente primeiro você precisa instalar ela no template entenda mais lendo este post (www).

Instalando a fonte!

Cole o código abaixo acima de: </head>

Personalizando a imagem de fundo!

Agora você só precisa criar uma imagem que fique no fundo, assim como eu fiz, exemplo:

(só pra que usa o google chrome, baby) Pra acertar as medidas vá na área que fica o rodapé do seu template e aperte o Button direito do mouse e selecione a opção ''inspecionar elemento''

Agora que você sabe a medida certa é só criar uma imagem e colar a url dela no local indicado de vermelho (não apague os tracinhos do lado) : background-image:url('URL DA SUA IMAGEM AQUI');

Visualize se estiver tudo certo salve ;D

Colocando imagem para cada autor da postagem

TUTORIAL 1

Vá no seu HTML e cole o código abaixo logo após <div class='post-footer'>

<b:if cond='data:post.author == "AUTOR1"'>
<img src='URL-DA-IMAGEM-AUTOR1' style='float:left;border:0px;'/>
</b:if>
<b:if cond='data:post.author == "AUTOR2"'>
<img src='URL-DA-IMAGEM-AUTOR2' style='float:left;border:0px;'/>
</b:if>

Entendendo o código:
AUTOR - Onde esta grifado de vermelho, coloque o nome do autor MAAAAS cuidado na hora de alterar o nome do autor (onde coloquei autor1, autor2), pois deve ser exatamente igual como está no perfil da pessoa. Caso contrário NÃO irá funcionar.
Por exemplo:

PERMISSÕES

Autores do Blog

Meu nome está escrito assim: Anadir Pedro se no código eu escrever anadir pedro não vai funcionar, porque eu usei letras minusculas sendo que no meu perfil está em maiúsculo, entenderam?

URL DA IMAGEM - É simples você vai copiar a url da imagem e colar no local indicado! Caso não saiba fazer isso."Entre no site :www.tinypic.com"e faça a URL da imagem que você quizer.Pode fazer no Programa:PhotoScape:www.photoscape.com

Quanto mais autores você queira com imagens personalizadas é só ir repetindo o código, ok?

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

TUTORIAL 2

Vá no seu HTML e marque a opção

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif

expandir modelos de widgets.

Procure por: <div class='post-footer'>

O código precisar estar mais ou menos assim:

Daí você cola isso <img src='URL DA IMAGEM' style='border:0px;'/> igual está na imagem ABAIXO:

Efeito cute pulsar

Créditos HTMLuv

Esse efeito de coração batendo é realmente muuuuito fofo *---* mais quem quiser, pode trocar a imagem mudando a url. Agora vá pro seu HTML que já vamos começar

Aperte (ctrl+f) na caixa de pesquiza que aparecer procure por essa linha
Cole esse código acima de

.bass{

max-width:74px;

margin:1px;

border-radius:10px;

-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;

}

.bass:hover{

-webkit-animation: smallToBig 300ms alternate infinite ease;-moz-animation: smallToBig 300ms

alternate infinite ease;

}

Salve! Agora sempre que você quiser usar o efeito pulsar

basta colar o código abaixo em um gadget de HTML/Javascript ou na postagem na aba
HTML.

VOCÊ PODE COLOCAR OUTRAS IMAGENS,É SÓ TROCAR O URL.

Personalizando o título das postagens

Esse tutorial se trata de algo muito simples. Certamente você já viu em algum blog ou até mesmo no seu, o titulo da postagem super personalizada e quando você clica no post em questão fica totalmente diferente e sem personalização alguma, certo? Isso acontece porque provavelmente você ainda não sabe que o titulo da postagem tem 3 momentos:

- O momento que está na página inicial

- O momento em que se passa o cursor em cima do titulo

- E por fim o momento em que você já clicou no título e está na página que mostra somente o post.

E pra cada um desses ''momentos'' existe um código especifico pra você personalizar. Gente eu juro que não é difícil, segue essa linha de raciocínio que vai dar tudo certo

O código de personalização é esse:

1° Você irá copiar todo esse código

text-align:center; /*deixa o título dos posts centralizado. Se você não quiser centralizá-los, apague essa linha.*/

font-family: "NOME DA FONTE AQUI"; /*Se refere a fonte*/

font-size: 26px; /*Tamanho da fonte*/

color: #FF1493; /*Se refere a cor da fonte*/

border-bottom: 2px dashed #FF1493; /*Se refere a borda pontilhada abaixo do titulo. Se não quiser apague essa linha*/

background: #fff; /*Nesse trecho você pode colocar uma cor de fundo*/

Pra facilitar eu coloquei a explicação do lado de cada código. A fonte eu vou ensinar a mudar logo no final desse post.

2° Agora vá no seu HTML e procure por: h3.post-title a {

(Esse código se refere ao momento em que título do post está na página inicial). Agora cole o código de personalização ANTES dessa chavinha:

3° Agora faça o mesmo com os outros 2 códigos:

h3.post-title a:hover {

(Este código refere-se ao momento em que se passa o cursor em cima do titulo).

h3.post-title {

(Este código refere-se ao momento quando o leitor já clicou no link da postagem e está na página onde aparece somente o post que ele está lendo).

Visualize. Se estiver tudo OK salve!

Por último personalize a fonte

Esse é o link da sua fonte hospedada (deixe aí por enquanto).

Agora cole esse código acima de ]]></b:skin>

@font-face { font-family: "NOME DA FONTE"; src: url(URL DA FONTE); }

Onde esta vermelho coloque o nome que você quiser e onde esta roxo coloque a URL do arquivo que tu hospedou.

Exemplos prontos (podem usar).

@font-face { font-family: "honey"; src: url(http://static.tumblr.com/fmvhucp/r9Cn17b5u/honeyscript-light.ttf); }

@font-face { font-family: "running"; src: url(http://static.tumblr.com/fmvhucp/2RQmy7wug/running_for_a_cause.ttf); }

@font-face { font-family: "amati"; src: url(http://static.tumblr.com/fmvhucp/ILHmy7tju/amaticsc-regular.ttf); }

@font-face { font-family: "are you"; src: url(http://static.tumblr.com/fmvhucp/at7my7ofj/are_you_freakin__serious.ttf); }

@font-face { font-family: "love"; src: url(http://static.tumblr.com/fmvhucp/2Htmyccu5/amandarae.ttf); }

Agora vocês podem personalizar qualquer fonte do seu blog, é só saber onde fica o font-family de cada um e alterar o nome da fonte padrão para o nome da fonte que vocês escolheram.

Imagens giratórias com efeito zoom no post do blog

Vá no seu HTML, dê um CTRL +F e na caixa de pesquisa que apareceu pesquise por: ]]></b:skin>

e ACIMA dela acrescente os seguintes códigos CSS:

****************************************************************

.post-body img {
z-index:999999;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
}

.post-body img:hover{
z-index:9999;
-webkit-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-moz-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-o-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
}Visualize, se estiver todo ok salve! Fácil né?

Espero que tenham gostado

14 abril 2014

CENTRALIZAR IMAGENS E RODAPÉ DO BLOG

Quando você inserir uma imagem com o código de HTML para alguma Widget na sua página, você vai colocar no início do código de HTML <div style=”text-align:center”> e no final do código </div>

O teu código de HTML vai ficar assim: <div style=”text-align:center”> "Imagem HTML" </div>

Pronto! Super fácil!

Centralizar imagem e titulo do cabeçalho

Centralizando imagem do cabeçalho:

Vá em Modelo > Editar HTML > Expandir Modelos de Widgets e procure:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

Achando esse código, coloque antes:

<center>

e depois do código, coloque:

</center>

Agora seu código deve estar assim:

<center><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></center>

********************************************************************************************************

Centralizando o título do cabeçalho:

Vá em Modelo > Editar HTML > Expandir Modelos de Widgets e procure:

.Header h1 {

abaixo, cole:

text-align: center;

CÓDIGO para caixa rolante

O crédito do blogé do :Dicas para blogs;www.dicasparablogs.com.br

<center>
<marquee direction="up" height="250" scrollamount="5" style="border: 4px double #0D8F63; padding-bottom: 0; padding-left: 2; padding-right: 3; padding-top: 0;" width="180">

<center><span style="color: #8080ff; font-family: arial; font-size: 85%;">
</span>

vc vai colocar o código das imagens e texto sempre com a palavra <center>
na frente de cada um, para eles ficarem certinho no meio da caixa rolante!!!Deixe um espaço entre cada um, para o caso de dar problema, vc identificá-lo mais rápido.. coloquea largura(width) da sua caixa em 180, se quizer mais largo é só ir aumentando o número... A altura(height) está em 250, se quizer mais alta é só mudar a numeração... A cor (color), coloquei #8080ff,se não gostar é só trocar o código da cor que quer E sempre que for colocar coisa nova , colar antes dessa parte aqui abaixo,que está em negrito,onde está escrito marquee.
</center></center></marquee></center><</center>
Você pode mudar BACKGROUND-COLOR (FUNDO): #F6FF7F para a cor que quiser. A altura e a largura também podem ser mudadas.

AQUI VOCÊ PEGA AS CORES:
♥www.mxstudio.com.br/
♥

10 abril 2014

Fundo de papel nas postagens

Abra seu HTML. Aperte ctrl+F e procure por:

.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}

Procure pela primeira linha para facilitar. Quando achar, apague todo o código e coloque esse no lugar:

.main-inner .column-center-outer {
background: url(URL da imagem) repeat-Y;
}

Agora é substituir pela url da imagem que você quiser.
Aqui que entra a correção. Vocês viram que quando coloca a imagem, a letra do post fica por cima da beirada do papel não é? Para resolver isso, aperte ctrl+F e procure por: .main-inner .column-center-inner {
Substitua o trecho:

padding: $(content.posts.padding) 0;

por esse código abaixo:

padding: 10px 10px 10px 20px;

Você pode ter que alterar o valor em roxo de acordo com a imagem que você usar.

Fundo nos títulos dos posts

O código é simples, o que complica é só ajustar as margens (como na hora de por fundo na c-box). Só lembrando que esse tutorial foi feito no modelo Viagem (Travel) do blogger, então o código correspondente ao título dos posts pode ser diferente em outros modelos.

Abra o blogger, vá em design > Editar HTML.

Procure por:

h3.post-title {

Cole logo abaixo desse trecho o seguinte código:

background:transparent url(LINK DA IMAGEM AQUI) no-repeat bottom;
align: center;
margin:.25em 0 0;
padding: 40px 5px 5px 50px;

Coloque o link da imagem onde se pede.

As medidas do "padding" deste código se ajustam á uma imagem de 500x60 pixels. Se a imagem que você for usar tiver um tamanho diferente, você terá que alterar os valores do padding. Lembrando que as medidas do padding seguem esta ordem:

padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda);

Visualize se ficou bom e depois salve ou cancele.

Se quiser colocar apenas uma cor de fundo, basta colocar esse código abaixo de h3.post-title { :

background-color: #codigodacor;

Separar widgets da sidebar

1- Abra o blogger, vá em modelo > Personalizar
2- No designer do modelo, clique em "plano de fundo da barra lateral" e escolha transparente, como mostra a imagem abaixo (clique para ampliar):

3- Salve as alterações.
4- Volte ao modelo do blog, e agora clique em "Editar HTML"
5- Aperte Ctrl+F e procure por:

.sidebar .widget {

6- Logo abaixo deste trecho cole a seguinte linha:

background: #000;

7- Agora é só trocar #000 pelo código da cor que você quer e salvar!
- Se quiser aumentar a distância entre cada widget, altere o valor dessa linha:

margin: 10px 0;

Trocando o 10 por um número maior.

Pronto! Bem simples não é? Tenho alguns recadinhos para vocês.
1º - Ainda dá tempo de participar do sorteio que está rolando aqui no blog!
2º - Vou postar em breve um video tutorial de como fazer essas faixinhas que eu uso na sidebar e que vocês já viram em outros blogs. Pode demorar alguns dias porque estou gripada e só vou gravar quando minha voz deixar de parecer a de um pato :/
3º - Atualizei os créditos do blog, tava devendo isso desde que mudei o layout. Deem uma olhada lá para ver os blogs e sites divos que me ajudam sempre.

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