Roox Blogger: Tutorial

Mostrando postagens com marcador Tutorial. Mostrar todas as postagens

domingo, 11 de março de 2012

Efeito em imagem: Trocar a Imagem Quando Passa o Mouse

sábado, 25 de fevereiro de 2012

sexta-feira, 13 de maio de 2011

Criando uma radio com player personalizado!

Primeiro Baixe:

baixe o Shout Cast:
4shared.com /file/43008987/78809ad9/SHOUTCAST_SERVER.html?s=1

depois baixe ou shout cast ou c prefirir o simple cast:
http://www.escolhagratis.com/2008/09/sam-broadcaster-422-crack-serial.html

Sam tem o cd key dele ja é so abri e coloka
Passo

1º Instale todos os programas

2º Abra o arquivo sc_server não consegue acha-lo va em meu computador, disco local ou removivel,arquivos de programas SHOUT cast e abra o arquivo!

3º Apos abrir clike em edit config e aperte ctrl + f e digite MaxUser procure o 32 coloke o numero de usuarios que irão escutar sua rádio no meu eu coloquei 50. procure tbm password=Changename coloque sua senha por exemplo:password=123456. fexe e salve e aperte kill server. para fexar e salvar as config.

4º Abra o SAM tera varias abas acima clika na desktop B,onde estiver estiver escrito encoders clik num sinal de + abrira uma janelinha para selecione o mp3PRO

6º Apos abra a aba details,essa parte é muito importante:no server type coloke shout cast, no server ip coloke seu ip caso vc tenha uma conta no no ip coloke la,server port deixe como esta 8000, password coloke akele q vc coloko no shoutcast
password=changename no meu caso colokei 123456 ,Station name vc coloka o nome de sua programação ex:O Melhor Começa aki DJ ERICK,genre deixe various, web site url deixa como esta mas se prefirir coloque http://seuip:8000
O resto deixa como está e de OK.

7º Abra o sv_server e volte no SAM desktop B, Encordes clika o botão direito no baratinho que apareceu e de start

se aparecer encode e mais uns negocio pq esta no ar sua Rádio

Para testar a sua Rádio ponha uma musica pra toca no SAM Broadcaster espere um pokim tipo uns 10 segundos.

depois abra o media player a perta ctrl + u e digitehttp://seuip:8000

não eskece de dar ok

prontu!!!!!!!!!

Agora coloke player Personalizado

Código:

PLAYER 2

Código:

PLAYER 3

Código:: <object classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="ActiveX1" width="280" height="266"> <param name="status" value=""> <param name="openState" value="6"> <param name="versionInfo" value="9.0.0.3250"> <param name="uiMode" value="mini"> <param name="stretchToFit" value="False"> <param name="isOnline" value="True"> <param name="isRemote" value="False"> <param name="playState" value="0"> <param name="windowlessVideo" value="False"> <param name="URL" value="http://SEUIP:8000"> <param name="fullScreen" value="False"> <param name="enabled" value="True"> <param name="enableContextMenu" value="True"> </object>

Creditos By: ILIICHI D!

www.tutoriais.bcreate.net

Leia mais »»

Efeito nos Parceiros com HTML

O Tutorial de hoje vai ensinar e ajudar vocês a colocar efeito nos afiliados, com Borda, sombra e Destaque quando passa o mouse. Tudo com HTML, estou avisando logo...

1. Faça a imagem do Blog Afiliado (pode ser no Photo Scape, Photo Shop...) e copie a imagem, ou seja, faça outra imagem do mesmo tamanho, porque pode ser usado para outros Blogs...

Veja um exemplo :

O Tamanho da minha imagem é 180 x 40, você pode mudar o tamanho pra 50 x 50, 30 x 30, 20 x 20 ....

2. A sua imagem precisa estar na internet. Você pode hospedá-lo no seu próprio blog, basta clicar na ferramenta de enviar imagens ou upload de arquivos e selecionar a sua imagem ou se preferir hospede suas imagens no ImageShack ou Photobucket. Você vai prescisar da URL das imagens.

3. Vá em "Design" → "Elementos da página" → "HTML/JavaScript" e adicione a imagem em HTML.

<img src="URL_DA_IMAGEM" />

Para deixar as imagens alinhadas use "   " para dar espaço e " <br /> " para pular a linha .

4. Depois adicione o Link do Blog na imagem, fazendo isso:

<a href="LINK_DO_BLOG" target="_blank"><img src="URL_DA_IMAGEM" /></a>

5. Depois, para colocar a Borda noas imagens dos afiliados, veja o seguinte Tutorial ensinando como faz :http://maariihsouza.blogspot.com/2011/03/como-colocar-borda-nas-imagens.html

6. Depois para dar efeito "destaque" quando passa o mouse, adicione o seguinte código
depois de " <img " :

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;"

O Código da imagem com o link e os efeitos deverá ficar assim :

<a href="LINK_DO_BLOG" target="_blank"><imgonmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;"src="URL_DA_IMAGEM" class="borderimage"/></a>

Lembrando que class="borderimage" é o código referente á Borda que está no Tutorial !!

7. E Por último adicione title="NOME_DO_BLOG_AQUI", Depois de target="_blank". Esse código é da Mensagem que aparece quando passa o Mouse, ou seja, o Nome do Blog que aparece quando passa o Mouse.

O Código da imagem com o link e os efeitos deverá ficar assim :

<a href="LINK_DO_BLOG" target="_blank" title="NOME_DO_BLOG_AQUI"><imgonmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;"src="URL_DA_IMAGEM" class="borderimage"/></a>

Para colocar outra imagem de outro Blog afiliado com o Link, vai fazendo a mesma coisa da Primeira imagem.
Para deixar as imagens alinhadas use "   " para dar espaço e " <br /> " para pular a linha .

Leia mais »»

Tutorial: Como colocar Borda no Gadget de Seguidores

Leia mais »»

terça-feira, 10 de maio de 2011

Slide com menu em formas de numeros

Bom hoje eu estarei postando o tutorial de como fazer o slide com menu em formas de números, me pediram para fazer isso e hoje eu estarei mostrando.

Bom, Vamos Começar:

Faça o Login -> Editar Html -> Procure Por ]]></b:skin>

Antes de ]]></b:skin> Cole o Código Abaixo:

/* Slide
----------------------------------------------- */
.main_view {
float: left;
position: relative;
}
.window {
height:300px; /*ALTURA DAS IMAGENS-- */
width: 980px; /*LARGURA DAS IMAGENS-- */
border:1px solid #04272D;
overflow: hidden;
position: relative;
margin: 0 0 20px 0;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
.paging {
position: absolute;
bottom: 30px;
right: -1px;
width: 400px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0CXBmCWtIn5C9LJu8YOpzVMqZckyQLEXCK4rB0k113y7cSN3MO9S7TkuMF9t3I3RV9dAgSdSuDatkx1w6ZoanGEPsjTTSM1OA6JmxqN0frpx1aP0I4dQJ9qU6zhJEUZetKu-FL-YUE2ip/s0/transparencia.png);
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-topleft: 25px;
border:1px solid #000;
display: none;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #188696;/*COR DE FUNDO DOS NUMEROS ATIVOS*/
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a:hover {
font-weight: bold;
}

Os Numeros que Estão em Vermelho Define o Tamanho do Slide
Os números em azul representam a barra com os números.
O número em rosa representa a cor selecionada no menu em números.

Agora Logo depois de ]]></b:skin> Cole o Seguinte Código:

<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>

Agora Procure Por <div id='content-wrapper'>
E cole o próximo código abaixo dele, fazendo as modificações necessárias.

<div id='slide'>
<div class='folio_block'>

<div class='main_view'>
<div class='window'>
<div class='image_reel'>

<a href='AQUI O ENDEREÇO DO LINK 1'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 1' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 2'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 2' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 3'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 3' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 4'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 4' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 5'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 5' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 6'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 6' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 7'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 7'/></a>
<a href='AQUI O ENDEREÇO DO LINK 8'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 8' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 9'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 9' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 10'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 10' heigth="300px" /></a>

</div></div>
<div class='paging'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
<a href='#' rel='5'>5</a>
<a href='#' rel='6'>6</a>
<a href='#' rel='7'>7</a>
<a href='#' rel='8'>8</a>
<a href='#' rel='9'>9</a>
<a href='#' rel='10'>10</a>
</div>
</div>

</div></div>

Os Números em Vermelho São o Tamanho Das Imagens.

Você Também Pode Adicionar o último código no gadget "Html/Javascript".

Vlw Galera e Até a Próxima.