Postagens Recentes

21 de fev. de 2010

Barra com links sociais, recados, Feed e muito mais em seu blog

10 comentários:
É possível colocar uma barra em seu blog personalizável com o que você quiser.
É o siteWibiya.

Faça  o login para a conta do blog do  qual você quer instalar a barra.
Entre agora no site da Wibiya, faça seu cadastro, escolha o que você quer na barra, preencha com os endereços de cada ítem.


Clique então no ícone do Blogger que o site irá instalar a barra automaticamente.






Twitter em tempo real em seu blog

Um comentário:
Quer ver em tempo real seus bate-papos no Twitter, ou de algum assunto determinado ? Copie o código, coloque no HTML/Javascript em seu blog, faça as alterações e aproveite. Eu que sou BBB maníaca, estou seguindo o Boninho e os comentários sobre o BBB10. Veja no código em vermelho, é aí que você fará as modificações para seguir o tema que queira.




<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: 'Boninho',
  interval: 6000,
  title: '',
  subject: 'O que falam para Boninho',
  width: 200,
  height: 200,
  theme: {
    shell: {
      background: '#f4f4f4',
      color: '#034499'
    },
    tweets: {
      background: '#f4f4f4',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: true,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'default'
  }
}).render().start();
</script>

7 de fev. de 2010

Expandir/Contrair a sidebar com efeito delizante

3 comentários:
Fiz alguns testes com o script para expandir elementos no blog que encontrei no blog Vagabundia, acrescentei nova <div  e eis o resultado: Expandir toda a sidebar do blog escondendo assim todos os widgets e de quebra, vc ainda poderá colocar uma cor de fundo. Clique AQUI e veja o resultado. Bom né ?

Pra começar salve o layout de seu blog.



Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.


Vá até o HTML de seu blog e sem clicar em "Expandir modelos de widget" procure pelo seguinte trecho:



<div id='sidebar-wrapper'>

Agora acima dele cole o seguinte código:

<div id='sidebararea-wrapper'>
<div style='text-align:center;'>
      <a href='javascript:sidebararea.slideit()'>EXPANDIR SIDEBAR ▼ | CONTRAIR SIDEBAR ▲</a>
    </div>
    <div id='sidebararea'>
  


Agora encontre o seguinte código:

 <!-- spacer for skins that want sidebar and main to be the same height-->

E acima dele cole o próximo código:


<script type='text/javascript'>var sidebararea=new animatedcollapse(&quot;sidebararea&quot;, 500, false)</script>
</div>
</div>


Pronto, agora salve e procure o seguinte código:

/* Outer-Wrapper

Cole o próximo código antes dele fazendo as modificações necessárias:


/*sidebararea-------------------------------------------------------*/
#sidebararea-wrapper{width: 370px;background: #ccc;padding: 6px 2px 2px 2px; margin: 12px 4px 6px 18px;border: 1px groove $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}


Em amarelo----largura da área da sidebr, veja ele tem que ser maior que o seu sidebar.
Em azul---------cor de fundo da sidebar


Agora procure por: ]]></b:skin>

E abaixo dele cole o código abaixo.


<script src='http://sites.google.com/site/templateseacessorioselke/expande/1expande.js' type='text/javascript'/>


Se preferir, (é altamente recomendado) hospede o código javascript em um servidor e depois cole o endereço no código acima que está na cor verde.

expande.js

2 de fev. de 2010

Colocando efeito "marquee" no BlogList

6 comentários:

Fazendo testes consegui colocar o efeito marquee (deslizante) no widget de Bloglist, mais conhecido como BlogRoll, veja o exemplo AQUI.

A primeira coisa a fazer é configurar seu widget e deixa-lo como no exemplo inclusive o título deverá ser escrito assim. (depois vc poderá modificar)



Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.



Agora vá até o HTML de seu blog, clique em "Expandir modelos de widget", agora procure pelo seguinte código:



<b:widget id='BlogList1' locked='false' title='Amigos que visito' type='BlogList'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <div id='blog-list-title'>
        <h2 class='title'><data:title/></h2>
      </div>
    </b:if>


    <div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>


Abaixo dele cole o seguinte código:



<center><marquee direction='up' height='250' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5'
style='BORDER-RIGHT: #fff 3px ridge; BORDER-TOP: #fff 3px ridge; BORDER-LEFT: #fff 3px ridge; BORDER-BOTTOM: #fff 3px ridge' width='160'>


Os códigos que deixei na cor laranja representam o tamanha da caixinha marquee, o código em roxo é o sentido que vai rolar. (Up---cima / Down ---baixo)

 Agora procure o seguinte trecho:


<b:include name='quickedit'/>
      </div>
    </div>
  </b:includable>
</b:widget>

E cole acima dele o código abaixo


</marquee></center>



Veja se está tudo certinho e depois salve. O código então deverá ficar assim:(partes em preto já devem existir, partes em vermelho foram acrescentadas.





<b:widget id='BlogList1' locked='false' title='AMIGOS QUE VISITO' type='BlogList'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <div id='blog-list-title'>
        <h2 class='title'><data:title/></h2>
      </div>
    </b:if>

    <div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>

<center><marquee direction='up' height='250' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5' 
style='BORDER-RIGHT: #fff 3px ridge; BORDER-TOP: #fff 3px ridge; BORDER-LEFT: #fff 3px ridge; BORDER-BOTTOM: #fff 3px ridge' width='160'>


        <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
          <b:loop values='data:items' var='item'>
            <li expr:style='data:item.displayStyle'>
              <div class='blog-icon'>
                <b:if cond='data:showIcon == &quot;true&quot;'>
                  <input expr:value='data:item.blogIconUrl' type='hidden'/>
                </b:if>
              </div>
              <div class='blog-content'>
                <div class='blog-title'>
                  <a expr:href='data:item.blogUrl' target='_blank'>
                    <data:item.blogTitle/></a>
                </div>
                <div class='item-content'>
                  <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                    <b:if cond='data:item.itemThumbnail'>
                      <div class='item-thumbnail'>
                        <a expr:href='data:item.blogUrl' target='_blank'>
                          <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                        </a>
                      </div>
                    </b:if>
                  </b:if>
                  <b:if cond='data:showItemTitle == &quot;true&quot;'>
                    <span class='item-title'>
                      <b:if cond='data:item.itemUrl != &quot;&quot;'>
                        <a expr:href='data:item.itemUrl' target='_blank'>
                          <data:item.itemTitle/></a>
                      <b:else/>
                        <data:item.itemTitle/>
                      </b:if>
                    </span>
                  </b:if>
                  <b:if cond='data:showItemSnippet == &quot;true&quot;'>
                    <b:if cond='data:showItemTitle == &quot;true&quot;'>
                      -
                    </b:if>
                    <span class='item-snippet'>
                      <data:item.itemSnippet/>
                    </span>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                    <div class='item-time'>
                      <data:item.timePeriodSinceLastUpdate/>
                    </div>
                  </b:if>
                </div>
              </div>
              <div style='clear: both;'/>
            </li>
          </b:loop>
        </ul>

        <b:if cond='data:numItemsToShow != 0'>
          <b:if cond='data:totalItems &gt; data:numItemsToShow'>
            <div class='show-option'>
              <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
              </span>
              <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
              </span>
            </div>
          </b:if>
        </b:if>
</marquee></center>
        <b:include name='quickedit'/>
      </div>
    </div>
  </b:includable>
</b:widget>

28 de jan. de 2010

Novos recursos no Blogger

Nenhum comentário:
O Blogger através do Blogger in Draft está disponibilizando novos recursos. São eles:


  • Mapa mostrando a seus visitantes de onde vc está postando.





  • Upload de imagens do Picasa ou inserir o endereço da imagem na janela de upload, assim, a imagem fica do tamanho natural, sem diminuir o tamanho da imagem. 






  • Tradutor de textos 








Páginas com link em seu blog

2 comentários:
Agora o Blogger está oferecendo a opção de linkar até 10 páginas diretamente na página inicial do blog como menu horizontal ou através de widget. Para isso entre em seu blog através do Blooger in Draft.
Clique então em "Nova Postagem"



 Ao ver o editor de textos, note que acima há u menu horizontal. Clique então na inscrição "Editar página"







Bem, agora clique em"Nova página"
Veja, você voltou ao editor de texto, não é mesmo ? Bom, então escreva aí seu texto, coloque o código de seu interesse e o título. Depois que estiver a seu gosto, publique.







Agora você foi direcionado(a) a ua página como esta abaixo. É aí que vc escolherá onde aparecerá o link da página que vc publicou. É só, e é tudo.


Sim, vc não verá a página que vc publicou mas o link para ela estará em seu blog
Você poderá fazer essa modificação também diretamente em "Elementos de página"

Colocando links de comentários, nome do autor e outros abaixo do título do blog com fundo colorido

9 comentários:
:
Para colocar o link para os comentários, colocar o autor do post e marcadores abaixo do título da postagem com fundo colorido, vá até o HTML de seu blog , clique em "Expandir modelos de widget" e procure pelo seguinte código:
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.


Cole então abaixo dele o código abaixo


<div class='post-header-line-1'/>
<div class='postlinks'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<span class='author' style='background:;Padding-left:0px; font:lucida sans unicode; font-size:11px;'>
<b:if cond='data:top.showAuthor'>
Autor: <span class='fn'><data:post.author/></span>
</b:if>|<data:post.timestamp/> |
<span class='post-labels'>
<b:if cond='data:post.labels'>
Marcador: <span class='fn'><data:postLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</span>
</b:if>|
</span>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<span class='comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</b:if>
</span>
</b:if>
</span>

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</div>


 
Agora procure por:

.post {


E acime dele, cole o código abaixo
 
.postlinks {
background:#372c24;
padding:1px;
color:#fff;
}
.postlinks a {
color:#fff;
}.post-timestamp{ padding: 3px 6px 3px 10px;}


Ah Elke, legal, gostei mas acontece que agora vou ficar com dois links, embaixo e em cima ?

Não meu caro, faça o seguinte, procure pelo código:


<div class='post-footer-line post-footer-line-1'>


E apague tudo que estiver entre ele e:

<span class='reaction-buttons'>

 
Agora procure por este trecho e o apague:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>


 
Agora procure por este trecho e o apague:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

23 de jan. de 2010

Widget do Twitter no Blogger

17 comentários:

Para colocar um widget do seu Twitter no Blogger, copie o código abaixo, clique "Layout" depois clique em "Adicionar um gadget".

Ao abrir a janela clique em "HTML/Javascript" e então cole o código.

Faça a modificação que se pede (onde está na cor vermelha, coloque seu nick no Twitter e pronto)



<center><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b870c7'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('AQUI SEU NICK NO TWITTER').start();
</script></center>

Inserir comentários do pr´prio Blogger

Nenhum comentário:

Para quem ficou na mão com o Haloscan, o sistema de comentários diferentes que foi comprado pelo JS.Kit e agora cobra por seus serviços e quer reinstalar o sistema de comentários do Blogger, aí fica a dica.


Vá até o HTML de seu blog e clique em "Expandir modelos de widget".

Agora salve uma cópia de seu template, não me responsabilizo se der errado, ok ?



Bom, procure pelo seguinte trecho:

<div class='post-footer-line post-footer-line-1'>


E depois dele cole o código abaixo.

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 Comentário<b:else/><data:post.numComments/>Comente</b:if></a>
</b:if>
</b:if>
</span>



Salve e veja como ficou.
Se quiser, onde está na cor azul, troque pela palavra que vc quer que seu visitante leia para comentar.

Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube