Já me perguntaram algumas vezes como eu faço para colocar essa playlist aqui no blog. A maioria consegue personalizar a playlist mas não sabe como colocar as músicas. Hoje eu vou mostrar passo a passo para vocês como colocar essa playlist para animar mais o blog de vocês! Clique nas imagens para ver maior (vai abrir aqui no blog mesmo)


1. O primeiro passo é entrar nesse link . Clique no logo do blogger:

2. Depois role a página até embaixo, onde vão aparecer as opções para você personalizar seu player:

Você pode escolher a cor de fundo, a cor do texto, a mensagem que vai aparecer no player e a cor da barrinha de progresso. Marque as opções que estão circuladas em vermelho também. Em button color você escolhe a aparência dos botões de play, próximo e anterior.

3. Depois de tudo escolhido, suba a página até aparecer o código. Copie ele e cole em gadget de HTML/Javascript em seu blog. Pode por em qualquer lugar que ele irá aparecer na parte de baixo da página.

4. Agora vamos adicionar as músicas. Para isso você vai precisar dos links das músicas em mp3. Para conseguir isso, você pode procurar as músicas que quer em sites como o Dilandau ou hospedar você mesma suas músicas no fileden.

5. Para pegar o link das músicas no Dilandau, primeiro use a busca para encontrar a música que quer. Depois de achá-las, clique no botão "download":

6. Vai abrir uma nova aba com um player. O link que aparecer na barra de endereços é o link da música. Copie ele e deixe guardado no word ou no bloco de notas.

7. Para pegar o link no fileden, você precisa criar uma conta primeiro. Depois faça upload das músicas. Quando terminar, clique na guia "Files" do site. Clique com o botão direito em cima do arquivo da música e clique em download file:

8. Vai abrir uma janela igual no dilandau, aí é só copiar o link. Mas o que fazer com esses links?

9. Você tem que colocá-los em uma postagem do seu blog. Eu já tentei colocar na sidebar e em uma página mas não funcionou. Tem que estar em um post mesmo. Para aparecer o nome da música na playlist, escreva o nome no post, e coloque o link da música no nome.

10. Depois que você publicar o post, as músicas irão aparecer no player.

O Pink Skull design me salvou com esse tutorial! Graças a ele é possível colocar a barra de rolagem colorida, nos navegadores Google Chrome, Safari e Internet Explorer, como eu fiz aqui no blog. É muito fácil, o problema é que não funciona no Firefox e muito menos no Opera. Sua barra de rolagem similar a essa:

Imagem do blog Menina Nerd.

1- Para colocar a barra de rolagem colorida, vá até Design, Editar HTML, aperte CTRL+F e procure por:

]]></b:skin>

E cole ACIMA o seguinte código:

::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
::-webkit-scrollbar-thumb { background: #ff004d; }
*{
scrollbar-face-color:#ff004d;
scrollbar-highlight-color:#ff004d;
scrollbar-3dlight-color:#343434;
scrollbar-darkshadow-color:#343434;
scrollbar-shadow-color:#ff004d;
scrollbar-arrow-color:#343434;
scrollbar-track-color:#343434;
}

Visualize e só salve se tiver dado certo. Lembrando que só irá dar para você visualizar se você estiver utilizando o Internet Explorer na hora de fazer esse tutorial.


2- Comentar dizendo se usou.
Lembrando que você só poderá visualizar se o efeito deu certo se estiver utilizando o Google Chrome, Internet Explorer ou Safari.
Para alterar as cores, mude o código de cores do que está em rosa.
Esse tutorial pra mim foi um achado HAHA, Beijos

Não encontrei muita informação sobre o ilustrador por trás desses desenhos mega fofos. Só sei que o nome verdadeiro dele é Aditya Pranata e ele é da Indonésia. Conheci o trabalho dele por acaso quando eu estava à procura de papéis de parede fofos pro meu desktop no Deviantart :)

Fechar »

 Quem quiser conferir mais ilustrações de Kepala, acesse: Deviantart ;)

Lucila (aka: Luli Bunny) é uma ilustradora freelancer de Buenos Aires, Argentina.
Suas ilustrações e criações incluem coelhos, gatinhos, cachorrinhos, ursos e outras criaturas fofas e coloridas.

Fechar »

Quem quiser ver mais do trabalho de Lucila, acesse: Site, Blog, Twitter, Flickr.

Como por efeito arco-íris Nos links

Vá em Layout >> Editar HTML >> Expandir modelos de widgets
Dê Ctrl + F e procure por: </head> e depois cole o seguinte código ANTES da tag...

<script type='text/javascript'>

//<![CDATA[

var rate = 20;

if undefineddocument.getElementById)
window.onerror=new Functionundefined"return true")

var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID

if undefineddocument.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if undefineddocument.getElementById) {
document.captureEventsundefinedEvent.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbowundefinedobj)
{
if undefinedact == 0) {
act = 1;
if undefinedobj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}


function stopRainbowundefined)
{
if undefinedact) {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}


function doRainbowAnchorundefined)
{
if undefinedact == 0) {
var obj = event.srcElement;
while undefinedobj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if undefinedobj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if undefinedobj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}
}


function stopRainbowAnchorundefined)
{
if undefinedact) {
if undefinedobjActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}
}


function Mozilla_doRainbowAnchorundefinede)
{
if undefinedact == 0) {
obj = e.target;
while undefinedobj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if undefinedobj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if undefinedobj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}
}


function Mozilla_stopRainbowAnchorundefinede)
{
if undefinedact) {
if undefinedobjActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}
}


function ChangeColorundefined)
{
objActive.style.color = makeColorundefined);
}


function makeColorundefined)
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if undefinedelmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = undefined255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = undefinedt1 - t2) * t3 / 60;

if undefinedelmH < 60) {
elmR = t1;  elmB = t2;  elmG = t2 + t3;
}
else if undefinedelmH < 120) {
elmG = t1;  elmB = t2;  elmR = t1 - t3;
}
else if undefinedelmH < 180) {
elmG = t1;  elmR = t2;  elmB = t2 + t3;
}
else if undefinedelmH < 240) {
elmB = t1;  elmR = t2;  elmG = t1 - t3;
}
else if undefinedelmH < 300) {
elmB = t1;  elmG = t2;  elmR = t2 + t3;
}
else if undefinedelmH < 360) {
elmR = t1;  elmG = t2;  elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}

elmR = Math.floorundefinedelmR).toStringundefined16);
elmG = Math.floorundefinedelmG).toStringundefined16);
elmB = Math.floorundefinedelmB).toStringundefined16);
if undefinedelmR.length == 1)    elmR = "0" + elmR;
if undefinedelmG.length == 1)    elmG = "0" + elmG;
if undefinedelmB.length == 1)    elmB = "0" + elmB;

elmH = elmH + rate;
if undefinedelmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}

//]]>

</script>

Visualize e se estiver tudo certo, é só salvar...

Se quiser aumentar ou diminuir a velocidade na transformação das cores, basta editar o valor emvar = 20;
Lembrando que, quanto maior o valor, maior a velocidade.

Tuto de como trocar o cursor

  Como trocar a setinha:

Vá em Design Adicionar um Gadget HTML/JavaScript

E depois cole o seguinte código:

<style type="text/css">body, a, a:hover {cursor: url(URL DA IMAGEM), progress;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/29/cute-poka-dotted-pink-bow-tie-ribbon.html" target="_blank" title="Cute Polka Dotted Pink Bow Tie Ribbon"></a>

Depois é só colocar a URL da imagem do cursor que desejar, onde está grifada de roxo. E pronto!! Você mesmo pode fazer o cursor ou escolher um dos que eu trouxe: OBS: O código e Nenhum desses cursores são de minha autoria... Se foi você que fez, me diga por comentário para que eu possa dar os devidos créditos...