17/11/2009

    10 Templates para Blogger: 17 Nov 2009

    Lista de 10 templates lançados pelos parceiros


    Nós queremos saber de qual gostou mais?
    Ajude-nos não demora muito.

    Fale também o que gostou no template, para que sejam feitos templates cada vez melhores.

    « Lista anterior
    Próxima lista »

    15/11/2009

    10 Templates para Blogger: 15 Nov 2009

    Lista de 10 templates lançados pelos parceiros


    Nós queremos saber de qual gostou mais?
    Ajude-nos não demora muito.

    Fale também o que gostou no template, para que sejam feitos templates cada vez melhores.

    « Lista anterior
    Próxima lista »

    13/11/2009

    Menu de links sociais no blogger

    Sexy-LovePeço que, para quem já usa o menu e teve problemas com a imagem, ou com o próprio menu, colocar o novo link de imagem (em vermelho logo Abaixo como demostrado no passo 2, poderá clicar para ver onde deverá colar o link:

    http://3.bp.blogspot.com/_5GWoO4Jy-fQ/Sv290hv5YrI/AAAAAAAAAPk/aTVlmceyddA/s1600/sexysprite.PNG

    Clique aqui para ser direcionado para o local de inserção do código!

    Acho que os que me acompanham no blog viram uma implementação no layout anterior, que continha alguns links de redes sociais...

    Quando havia feito as implementações, fiz com o efeito onMouseOver de tecnologia CSS, onde alguns navegadores (morte ao IE), não aceitavam tais formatações, Estava eu visitando um site muito querido por mim, onde o dono auxilia os blogueiros com muitos templates de qualidade superior, em scripts e design, estou falando do bietemplates. Baixei e instalei o template que uso agora pelas configurações que ele trazia, inclusive o menu social, que trato de trazer à vocês neste tutorial, mas já vou perguntando:
    Você sabe ler inglês?

    Se sim leia o artigo original/fonte, no qual especifica todos os procedimentos que aqui estão.

    SexyBookmarks v2 For Blogger | Css Reflex - Design Blog | Web Design | Inspiration and Resources for Designers - Original

    Via Ipietoon - Mod 1

    Vamos lá, caso queira ficar por aqui mesmo...

    Entre em Painel > Layout > Editar HTML e habilite a opção "Expandir Modelos de Widgets"

    Localize a tag de estilos (ou coloque em um arquivo externo e referencie-o no head)

    <style>

    e após esta Tag cole as seguintes poucas linhas de código:

    div.sexy-bookmarks {
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
    position:relative;
    width:540px;
    padding-top:20px;
    }

    div.sexy-bookmarks span.sexy-rightside {
    width:17px;
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
    position:absolute;
    right:-17px;
    }

    div.sexy-bookmarks ul.socials {
    margin:0 !important;
    padding:0 !important;
    position:absolute;
    bottom:0;
    left:10px;
    }

    div.sexy-bookmarks ul.socials li {
    display:inline-block !important;
    float: left !important;
    list-style-type:none !important;
    margin:0 !important;
    height:29px !important;
    width:48px !important;
    cursor:pointer !important;
    padding:0 !important;
    }

    div.sexy-bookmarks ul.socials a {
    display:block !important;
    width:48px !important;
    height:29px !important;
    font-size:0 !important;
    color:transparent !important;

    }

    .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
    background:url('http://3.bp.blogspot.com/_5GWoO4Jy-fQ/Sv290hv5YrI/AAAAAAAAAPk/aTVlmceyddA/s1600/sexysprite.PNG') no-repeat !important;
    }

    .sexy-furl {
    background-position:-300px top !important;
    }
    .sexy-furl:hover {
    background-position:-300px bottom !important;
    }
    .sexy-digg {
    background-position:-500px top !important;
    }
    .sexy-digg:hover {
    background-position:-500px bottom !important;
    }
    .sexy-reddit {
    background-position:-100px top !important;
    }
    .sexy-reddit:hover {
    background-position:-100px bottom !important;
    }
    .sexy-stumble {
    background-position:-50px top !important;
    }
    .sexy-stumble:hover {
    background-position:-50px bottom !important;
    }
    .sexy-delicious {
    background-position: left top !important;
    }
    .sexy-delicious:hover {
    background-position: left bottom !important;
    }
    .sexy-yahoo {
    background-position:-650px top !important;
    }
    .sexy-yahoo:hover {
    background-position:-650px bottom !important;
    }
    .sexy-blinklist {
    background-position:-600px top !important;
    }
    .sexy-blinklist:hover {
    background-position:-600px bottom !important;
    }
    .sexy-technorati {
    background-position:-700px top !important;
    }
    .sexy-technorati:hover {
    background-position:-700px bottom !important;
    }
    .sexy-myspace {
    background-position:-200px top !important;
    }
    .sexy-myspace:hover {
    background-position:-200px bottom !important;
    }
    .sexy-twitter {
    background-position:-350px top !important;
    }
    .sexy-twitter:hover {
    background-position:-350px bottom !important;
    }
    .sexy-facebook {
    background-position:-450px top !important;
    }
    .sexy-facebook:hover {
    background-position:-450px bottom !important;
    }
    .sexy-mixx {
    background-position:-250px top !important;
    }
    .sexy-mixx:hover {
    background-position:-250px bottom !important;
    }
    .sexy-script-style {
    background-position:-400px top !important;
    }
    .sexy-script-style:hover {
    background-position:-400px bottom !important;
    }
    .sexy-designfloat {
    background-position:-550px top !important;
    }
    .sexy-designfloat:hover {
    background-position:-550px bottom !important;
    }
    .sexy-syndicate {
    background-position:-150px top !important;
    }
    .sexy-syndicate:hover {
    background-position:-150px bottom !important;
    }
    .sexy-email {
    background-position:-753px top !important;
    }
    .sexy-email:hover {
    background-position:-753px bottom !important;
    }

    Width = Largura de 540px alterável

    Obs.: Código alterado, por motivo de: imagem do servidor não estava mais disponível.

    Agora localize o seguinte código:

    <data: post.body/>

    e cole antes:

    <div class='sexy-bookmarks'>
    <ul class='socials'>
    <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/indiceblogger' title='Subscribe to RSS'/></li>

    <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    </ul>
    <span class='sexy-rightside'/></div>

    indiceblogger = Seu ID no feedburner

    Visualize seu modelo, caso não tenha funcionado veja abaixo as notas, caso tenha salve.

    Notas:
    Caso não funcione corretamente implemente o 3° passo depois de:
    <div class='post-footer-line post-footer-line-1'>
    Caso seu template possui o mecanismo de resumo de posts automático, tal como este, implemente o 3° passo após:
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data: post.body/>
    o endereço da imagem pode ser trocado com o atriburo de URL alterando o que está em vermelho:
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
    Quer mais? assine o rss feed ou contribua com suas idéias no formulário de comentário abaixo.

    Passe adiante!

    08/11/2009

    10 Templates para Blogger: 08 Nov 2009

    Lista de 10 templates lançados pelos parceiros


    Nós queremos saber de qual gostou mais?
    Ajude-nos não demora muito.

    Fale também o que gostou no template, para que sejam feitos templates cada vez melhores.

    « Lista anterior
    Próxima lista »

    07/11/2009

    10 Templates para Blogger: 07 Nov 2009

    Lista de 10 templates lançados pelos parceiros


    Nós queremos saber de qual gostou mais?
    Ajude-nos não demora muito.

    Fale também o que gostou no template, para que sejam feitos templates cada vez melhores.

    « Lista anterior
    Próxima lista »
     

    TOP 5 Navegadores

    Lista de navegadores e porcentagem mensal utilizada pelos visitantes deste blog.
    1. 53,45%
    2. 26,72%
    3. 14,73%
    4. 03,02%
    5. 01,32%

    Números

    Este blog possui neste momento:

    postagens.
    comentários.
    PageRank     
    Seu blog está seguro?

    Indice Blogger Copyright © 2009 Community is Designed by Bie