2 de fev de 2010

Colocando efeito "marquee" no BlogList


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>

6 comentários:

  1. Sensacional.. meu blog alé de ser um dos seus que eu custozei, ainda faço tudo que manda.. rsrs 100% dá certo..
    parabens, vc é a melhor mesmo.
    bjs
    aguardo mais dicas.

    ResponderExcluir
  2. Obaaaaaaaaa novidadesssss, beijos

    ResponderExcluir
  3. Elkeeeeeee socorrooo, o vacas não está abrindo, do nada, so aparece o tempklate, os icones abaixo e o titulo do primeiro post, entrei pra ver se tinha algo errado mas está tudo como antes, se puder da uma olhar, acho que ninguem está conseguindo entrar, não abre. beijos e sorry novamente de te amolar.bjks

    ResponderExcluir
  4. O editor não aceitou o modelo, só apareceu uma imagem com o link daqui.

    Uma pena

    Mas gratos pela dedicação de nos orientar.

    ResponderExcluir
  5. Olha deu certinho, se depois der conflito volto aqui e retiro os códigos certo?
    Mas a princípio ficou maravilhoso o efeito.
    Muito obrigada mais uma vez
    Beijos

    ResponderExcluir
  6. Vc poderia me dizer quantos blogs pode ser adicionado na bloglist??? tenho 309 blogs mas toda vez que tento salvar ele fica com mensagem"salvando" por algum tempo ai eu acabo cancelando pq não salva...http://gieronicolly.blogspot.com/

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


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