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>


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