BLOG DE TESTE

05 abril 2014

Como colocar música/playlist em seu blog ou flog

Entre nesse site : http://scmplayer.net

Teve um pedido perguntando como colocar música, mas não foi específicado onde e nem por qual site, por isso vou explicar pelo SCM Music.

Marque a opção de player que você quer, feito isso, vá na aba EDIT PLAYLIST e onde está escrito SONG TITLE, coloca o nome da música ou de quem canta ela.

Na parte SONG URL coloque o link de um vídeo do youtube que contenha a música que você quer que toque. Faça isso com quantas músicas quiser.

Feito isso, clique em CONFIGURE SETTINGS e ajuste como você preferir.

Autostart - Player automático (eu não recomendo, é irritante kk)

Shuffle Playback - Reprodução aleatória

Default Volume - Volume padrão

Placement of Player Bar - Colocação (top é em cima da página e bottom é na parte debaixo) Depois disso clique em DONE e aparecerá o código da sua playlist.

Copia ele e cola onde quiser que apareça.

Se for no tumblr, vá no Customize >> Custom HTML, dê CTRL + F, pesquise por </style> e coloque o código logo em seguida.

No blogspot,você coloca o código gerado do player no :
HTML/JavaScript

Vá em layouts,adicionarAdcionar/gadget.

Vai abrir uma janela com várias opções,clic em HTML/JavaScript.

Espere abrir uma janela em branco,e cole ali o código que voce copiou

no http://scmplayer.net .

Salve e pronto.

No youtube, Voce copia a URL e cole no canto direito do player

No lado esquerdo escreve o nome da musica.

No flogvip coloque no post fixo e salve.Espero ter ajudado.

Se for no tumblr, vá no Customize >> Custom HTML, dê CTRL + F, pesquise por </style> e coloque o código logo em seguida.

Como usar o CSS do flogvip.

Dicas de uso de css

Bom, sei que isso aqui é basico, mas também sei que vai ajudar muita gente, afinal já vi pessoas usando os css's de forma errada, o que faz com que as tables (caixa de post) de desalinhem e fiquem deformadas. Vamos lá, Há dois modos para se usar o css, dependerá de como o post do seu flogvip está, observem abaixo :

POST SIMPLES : http://i54.tinypic.com/rk09j6.jpg
você só precisa pegar o código do css colocar no post e pronto.

POST COM OPÇÕES : É aquele post que tem a barra de ferramentas, esse é diferente a colocação do css, observem : http://i52.tinypic.com/2uh9s8w.jpg
Pegue seu código de css, clique na caixinha azul onde está escrito HTML e coloque seus códigos todos lá, como no print a seguir :

Entre em post fixo.Clique no HTML.Coloque ali o que você quizer.Clique enviar dados,depois vá lá embaixo da página e clique salvar.Espero que você tenha entendido,boa sorte.

Como fazer css para flogvip

Como fazer css para flogvip

Díficil não é, só precisa de atenção, ok? vou ensinar a fazer um css básico nesse tutorial, com o tempo você irá se aperfeiçoando, acreditem hoje em dia eu faço qualquer css, mas no ano passado eu nem sabia o que era, então vamos lá, por partes, primeiro ensinarei cada função do css e depois como editar uma base (tutorial destinado aos usuários do flogvip) Não tenha preguiça de ler.

FONTE (São as fontes do seu flog, tudo o que estiver escrito, menos os links, claro).

IMAGEM (são as imagens do seu flog, tipo os favoritos, as fotos postadas e as propagandas)

LINK (são os links do seu flog)

ESTILOS (podem ser vários, entre eles : negrito <b>escreve aqui</b>, itálico <i>escreve aqui</i>, e assim por diante, ok? confiram isso na parte de GOODIES >>> CÓDIGOS do nosso site)

SELEÇÃO COLORIDA (quando você seleciona com o mouse alguma coisa, fica dessa cor).

CAIXA DE COMENTARIO (são as caixas de comentários).

TABELA (são as tables, caixas de post,onde você escrreve seus textos).

FORMATAÇÃO DA LINHA DA BARRA (é a linhda do topo do flogvip, onde fica escrito : Nome do flog | postar foto | painel de controle | ajuda | sair).

FOOTER (nem sempre é usado, mas é a parte debaixo da caixa de comentários, digamos que é o rodapé do flogvip, ok?! pode ter imagem, pode ficar sem ou pode ter alguma cor diferente, veremos a seguir).

COISAS QUE TEM QUE LEMBRAR ANTES DE FAZER SEU CSS sempre que estiver escrito color, é a cor da LETRA, não do fundo, atenção nisso.Sempre que estiver escrito font-size, é o tamanho da LETRA, da fonte, ok? (evitem colocar mais de 12, é grande demais).Sempre que estiver escrito font-family, é a fonte, exemplo - font-family:tahomaSempre que estiver escrito border-top, border-left, border-bottom ou border-right significa a borda, de cima, do lado esquerdo, debaixo e do lado direito, ok?) Sempre que estiver escrito background-color ou background, é o fundo, sempre!Sempre que estiver escrito background-image: url('LINK AQUI');, é uma imagem como plano de fundo, pode ser do flog, das tables, da caixa de comentários, da barra de formatação, enfim, de onde for e se sua base não tiver isso, mas você quiser colocar, é só pegar essa parte do código e por, ok? OUTROS LEMBRETES vejam que sempre depois de um número que signifique a espessura ou largura, vem as letras PX, que significa pixel, ou seja, grossura, largura, espessura, enfim, o tamanho de determinada coisa.Reparem também que em muitos lugares vai estar escrito assim :5px solid #777777; (nesse exemplo, temos a espessura que pode ser ao seu gosto, temos a palavra SOLID que significa solido, seria uma linha reta, ou então se quiser as linhas pontilhadas, podemos trocar por DASHED e logo em seguida), temos o código da cor, (nunca tirem o # antes do código e nem o ; depois do código, ok?). FAZENDO SEU CSS Depois de ler as instruções acima, você já pode fazer uma base ou modificar uma, se ainda se sente inseguro, recomendo que pegue uma pronta e apenas modifique ao seu gosto, deixarei uma feita por mim para vocês modificarem e claro COLOCAR OS CRÉDITOS DA BASE A ESSE SITE, SWEETPOISON.TK, OK?! Abra a base do css em seu bloco de notas, e nela, estaram separadas por partes, todos os itens que falei acima, (FONTE, IMAGENS, LINKS e etc...)Sempre que tiver color coloque a cor que você quer, background também e assim por diante, NÚMEROTALpx na espessura que você quer usar, background-image: url('link aqui'); se quiser uma imagem no local, se não, então ignorem essa parte, Dashed para bordas e linhas pontilhadas, solid para bordas e linhas retas. Quando quiser que alguma coisa fique sem cor ou coisa do tipo, pode colocar o seguinte no lugar de color: transparent; (com o ponto e virgula tá).Nessa base que disponibilizei para vocês, na parte das caixas de comentário, é o seguinte :1ª parte é a parte de dentro da caixa, a 2ª é a de fora e a 3ª não é a de comentário, é subtitulo, certo? então, essa parte é onde está escrito no flog : ÚLTIMOS CADASTRADOS, FAVORITOS, ÚLTIMAS FOTOS, sabe? então, é essa parte. Outra coisa importante, as tables (caixa de post), pode fazer quantas você quiser, como essa base que estou disponibilizando é simples, só tem 2, mas você pode fazer mais, ok? repare que antes do codigo das tabelas tem sempre escrito algum desses nomes (Table, table1, table2, table3, table4, caixa, caixa1, caixa2, linha, linha1, linha2 ou qualquer outro nome do tipo, isso é para que você possa colocar as tables depois organizadas no seu flog, exemplo : Eu fiz duas tables, a preta e a branca, a preta é a table1 e a branca table2, a preta quero que fique maior, do lado de fora e a branca menor do lado de dentro, então na hora que o css estiver pronto eu saberei como é cada table e colocarei esses códigos no post :

MEU TEXTO AQUI

, mas foi só um exemplo, ok?) Me matem se eu falar : Ok?! de novo kkk.Bom, acho que é isso né, qualquer dúvida me perguntem pela AKS, ok?! rs espero que consigam usar direitinho, fazer um css legal e tals.. se quiser saber como hospedar, tem 2 tutoriais feitos por mim em TUTORIAIS. SE USAREM A MINHA BASE DEEM CRÉDITOS PLEASE, DÁ TRABALHO, NÃO COPIEM MEU TUTORIAL, NÃO DISPONIBILIZEM MINHA BASE E NEM O TUTORIAL, OK? SÓ ASSIM CONTINUAREI FAZENDO ESSES TUTORIAIS E DISPONIBILIZANDO MINHAS COISAS.

AVISO:Este tutorial pertence ao site:http://sweetpoison.edicy.co/

Não estou repassando,coloquei no meu blog de teste para guardá-lo,pois estou aprendendo a fazer CSS.

Você pode usá-lo,mas não repassá-lo.Entre no site e siga as instrução que estão lá.

OBRIGADA.

Scroll com setinhas/

ESCREVA AQUI SUAS COISINHAS <br>
ESCREVA AQUI SUAS COISINHAS <br>
ESCREVA AQUI SUAS COISINHAS <br>
ESCREVA AQUI SUAS COISINHAS <br>
ESCREVA AQUI SUAS COISINHAS <br>
ESCREVA AQUI SUAS COISINHAS <br>
ESCREVA AQUI SUAS COISINHAS <br>


</layer>
</ilayer>
<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>
<div align="right">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)" title="Subir">
<img src="http://www.drikoti.blogger.com.br/setacima.gif" border="0" width="9" height="7" /></a> <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)" title="Descer">
<img src="http://www.drikoti.blogger.com.br/setabaixo.gif" border="0" width="9" height="7"/></a></div>
<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}
function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}
function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}
</script>
</div>

Base de css p/ flogvip!

/* COPIA IDIOTA */
/* TUDO POR YEAHNICK */

input, textarea {
color:#CC99FF;
font-family:Tahoma;
font-size:12px;
border:1px solid #33CCCC;
background:#020202
}
html {
scrollbar-3dlight-color:#ECE9D8;
scrollbar-arrow-color:#020202;
scrollbar-base-color:#ECE9D8;
scrollbar-darkshadow-color;#020202 ;
scrollbar-face-color:#ECE9D8;
scrollbar-highlight-color:#ECE9D8;
scrollbar-shadow-color:#99CC00; }
#999933, OffX=1, OffY=1, positive=2), chroma (color=#FFFFFF);}
.HeadImage {padding-top:10px}
</style>
<html>
<head>
/* Formatação de Fontes */
p, a, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size:11px;
color:#296A7D;
font-family:verdana;
cursor:crosshair;
        text-align:center;

}
/* Formatação dos Links */
a, a:link{
color:#296A7D;
cursor:help;
TEXT-DECORATION:dotted;
}
a:hover {
color:#FFFFFF;
cursor:help;
TEXT-DECORATION:dotted;
text-align:center;
}
/* Blockquote */
blockquote{
background-color:#296A7D;
-moz-border-radius:8px 8px 8px 8px;
border-left:5px dotted none;
border-right:5px dotted none;
padding:5px 5px 5px 5px;
margin:3px 3px 3px 3px;
color:#FFFFFF;
text-align:center;
}
/* Estillos */
b { cursor:crosshair; color:#296A7D; TEXT-DECORATION:center;
}
s { cursor:crosshair; color:#296A7D; TEXT-DECORATION:center;border-bottom:2px dotted #FFFFFF;
}
u { cursor:crosshair; color:#ffffff ; TEXT-DECORATION:center;
}
i { cursor:crosshair; color:#296A7D; TEXT-DECORATION:center;
}
text-align:center;
}
/* Caixa de Comentários */
input, textarea, select
{font-family: verdana;
font-size:11px;
color:#296A7D;
border-top: 1px SOLID #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
        background-color:#BDE9F6;
        -moz-border-radius:8px 8px 8px 8px;
        text-align:center;
        }

/* Opacidade */
.opacidade
{filter:alpha(opacity=80);
-moz-opacity:0.70;
opacity:0.60;}
.opacidade:hover
{filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.9;}
a img {
filter: alpha(opacity=100);
-moz-opacity: 0.7;}
a:hover img {
filter: alpha(opacity=40);
-moz-opacity: 2.0;}
/* Formatação das Tables/Post */
.table {
font:tahoma;
text-align:center;
color:#FFFFFF;
        border-bottom:5px solid #296A7D
        background-color:#296A7D;
-moz-border-radius:3px 3px 3px 3px;

}
.fundopost {
color:#296A7D;
background-color:#534472;
        border-top:2px:#;
border-left:2px solid ;
border-right:2px solid:;
border-bottom:2px dotted ;
        padding:1px 1px 1px 1px;
text-align:center;
}
text-align:center;