Revolution Downloads

Como colocar um contador de visitas dentro de outra imagem, essa foi uma pergunta que recebemos por e-mail e achei bem interessante a idéia. No site que enviaram como exemplo ele colocou o contador de visitantes online dentro de outro banner e o efeito visual ficou muito bom como podem ver na imagem mais abaixo.

Fazer isso não é tão difícil apenas precisa de um código CSS simples para posicionar a imagem de fundo e o contador no lugar certo. O primeiro passo é criar e hospedar uma imagem, depois pegue o endereço da imagem (....). E também criar ou copiar o código do contador que deseja incluir nesta imagem, isso pode ser feito com qualquer contador ou imagem.

Imagem do site GeraLigado
Agora veja esse código e substitua o endereço da imagem pela aquela que hospedou e o código do contador:

Primeiro Codigo coloque antes de ]]></b:skin>

Código ---------------------------------------

#JANIO__QUADROS-RENUNCIA{        background:url(http://bcreate-utilys.webs.com/Images/JANIO_-_Quadros-Renuncia.png) no-repeat;               position: relative;        width:600px;     height:300px;        float:right;            margin:-120px 90px 0px 0px;        padding:0px 0 0 0px;}
#JANIO__QUADROS{        background:url(http://bcreate-utilys.webs.com/Images/JANIO_-_Quadros.png) no-repeat;        width:600px;     height:300px;        float:right;            margin:-300px 58px 0 0px;        padding:24px 0 0 32px;}
#JANIO_-_QUADROS{        width:551px;     height:263px;    }
#JANIO_-_QUADROS img{         width:551px;     height:263px;}
#JANIO_-_QUADROS ul, #JANIO_-_QUADROS li{    margin:0;    padding:0;    list-style:none;    }
#JANIO_-_QUADROS li{         width:551px;     height:263px;    overflow:hidden;     }

Segundo Codigo coloque Depois de de ]]></b:skin>

Código ---------------------------------------

<link href='http://bcreate-utilys.webs.com/favicon.png' rel='icon' type='image/vnd.microsoft.icon'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://bcreate-utilys.webs.com/JS/cufon-yui.js' type='text/javascript'></script>
<script src='http://bcreate-utilys.webs.com/JS/cufon-replace.js' type='text/javascript'></script>
<script src='http://bcreate-utilys.webs.com/JS/Myriad_Pro_700_BC.font.js' type='text/javascript'></script>
<script src='http://bcreate-utilys.webs.com/Slider/js/jquery.js' type='text/javascript'></script>
<script src='http://bcreate-utilys.webs.com/Slider/js/easySlider1.5.js' type='text/javascript'></script>
<script src='http://bcreate-utilys.webs.com/JS/friend-connect.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
    $("#JANIO_-_QUADROS").easySlider({
        auto: true,
        continuous: true
    });
});
    </script>
<script src='http://bcreate-utilys.webs.com/IMG/jquery.easing.1.3.js' type='text/javascript'></script>
<script src='http://bcreate-utilys.webs.com/IMG/jquery.imgslide.min.js' type='text/javascript'></script>
<script type='text/javascript'>
        $(function(){

            $('.DILMA_ROUSSEFF img').imgslide({
                top: '-130px',
                duration: 400
            });

        });
                $(function(){

            $('.JUCELINO_KUBITSCHEK img').imgslide({
                top: '-130px',
                duration: 400
            });

        });
                $(function(){

            $('.JOAO_FIGUEREDO img').imgslide({
                top: '-130px',
                duration: 400
            });

        });
                $(function(){

            $('.CASTELO_-BRANCO img').imgslide({
                top: '-130px',
                duration: 400
            });

        });
$(function(){

            $('.MARECHAL_-DEODORO img').imgslide({
                top: '-130px',
                duration: 400
            });

        });
$(function(){

            $('.JOAO_-GOULART img').imgslide({
                top: '-130px',
                duration: 400
            });

        });
$(function(){

            $('.CAFE_-FILHO img').imgslide({
                top: '-130px',
                duration: 400
            });

        });
$(function(){

            $('.CAMPOS_-SALES img').imgslide({
                top: '-130px',
                duration: 400
            });

        });
$(function(){

            $('.JULIO_-PRESTES img').imgslide({
                top: '-130px',
                duration: 400
            });

        });
$(function(){

            $('.WASHIGNTON_-LUIZ img').imgslide({
                top: '-130px',
                duration: 400
            });

        });
    </script>

Ultimo Código coloque Depois de de   <body>

Código ---------------------------------------

<div id='JANIO__QUADROS-RENUNCIA'>
</div>
<div id='JANIO__QUADROS'>
<div id='JANIO_-_QUADROS'>
<ul>
<li>
<img alt='SoS templates- O Maior site De Designer Do Brasil' src='http://bcreate-utilys.webs.com/01.jpg'/>
</li>
<li>
<img alt='SoS templates -Comprar? Usar? Criar!!' src='http://bcreate-utilys.webs.com/02.jpg'/>
</li>
<li>
<img alt='SoS Templates - Css Template Preview' src='http://bcreate-utilys.webs.com/03.jpg'/>
</li>
<li>
<img alt='SoS Templates - Css Template Preview' src='http://bcreate-utilys.webs.com/04.jpg'/>
</li>
</ul>
</div>
</div>