15 de jul. de 2011

Widget com as últimas postagens clean


Super fácil. Copie o código e cole no HTML/Javascript em seu blog, colocando o endereço de seu blog no local indicado (cor vermelha).


NÃO SE ESQUEÇA DE COLOCAR O ENDEREÇO DE SEU BLOG NO LOCAL INDICADO !

<div id="feed-control">
    <span style="color:#000;font-size:12px;margin:10px;padding:4px;">Carregando...</span>
  </div>

  <script src="http://www.google.com/jsapi?key=notsupplied-wizard"
    type="text/javascript"></script>

  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
    type="text/javascript"></script>




  <style type="text/css">
    .gfg-root {
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  text-align: center;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  border: 1px solid #ccc;
}
.gf-author {font-size: 10px}
.gfg-title {
text-shadow: 1px 1px 1px #fff;
padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  color: #000;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ-NQqA8n_zcw7L3qoXhYhLN03FSA-2brG6-ub0kDrN2KigKSupJly0k1ReTJVscV7MPoDqqWnlbHDm0e0aRjqnWxJcQ_x_UR_sfXMpgfw1mhWkiEH0DxvS-ydzfSMSY3CeP3y9JhX1D8/s1600/featured.png) no-repeat;

  line-height: 1.4em;
  white-space: nowrap;
}

.gfg-title a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Gz54_xS6N8alQBGCv0oUu_a70e1odtqhA0yvRpYyigT8-_3vZwX1e0JumqBtjRDxjtP3AYsYlbICfS9SUxmWWWcUFHln4vkYDHPmfrr6uzo4HzF8HwLhiGwyPYH2mU1B-nKZmkCZQMQ/s1600/upcoming-work.png) no-repeat;
  color: #cc0000;overflow: hidden;
font-size: 14px;
}

.gfg-subtitle {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVGfnYMTt7CWh57crAAgf3vcRm2p8jwzr3Qu0iIT3PzBfP9jGskFG2mkgX0wqvs4p9Txg3NXGCz6JGnHIuYdZpnm46Uky0fuQ5ZPY0_KnTT4jBOrGr8NkzBQPVEaBBW521bJk8C_8xKQ/s1600/future-projects.png) no-repeat left;
padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  background-color: #ccc;
  line-height: 1.4em;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 5px;
}

.gfg-subtitle a {
float: center;
  color: #000;
text-shadow: 1px 1px 1px #fff;
}

.gfg-entry {
  width: 100%;
 
  overflow: hidden;
  text-align: left;
  margin-top: 3px;
}
.gfg-entry a{
width: 100%;
padding: 0px 0 0px 20px;
background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Gz54_xS6N8alQBGCv0oUu_a70e1odtqhA0yvRpYyigT8-_3vZwX1e0JumqBtjRDxjtP3AYsYlbICfS9SUxmWWWcUFHln4vkYDHPmfrr6uzo4HzF8HwLhiGwyPYH2mU1B-nKZmkCZQMQ/s1600/upcoming-work.png) no-repeat;
background-color: #eee;
color: #cc0000;
overflow: hidden;
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position: relative;
  background-color: white;
  width: auto;
  height: 100%;
  padding-left: 20px;
  padding-right: 5px;
}

.gfg-list {
  position: relative;
  overflow: hidden;
  text-align: left;
  margin-bottom: 5px;
}

.gfg-listentry {
  line-height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  padding-left: 15px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.gfg-listentry-odd {
  background-color: #eee;
}
.gfg-listentry-odd a{color: #cc0000;}
.gfg-listentry-even {
}
.gfg-listentry-even a {color: #cc0000;}
.gfg-listentry-highlight {
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmqRGZCTTRBffK9G9dpKNC0DYKpqV-ZdqktLwDTVUmC0epvWcefU6gsMIF4kRExNAVDXi9CQsmulzn3eR35PCMrtdAYFZQPd6_jYzZBhtghTd3TX8OEkf4fxQmqZ9hLsjxmWcbORC13A/s1600/1as18.gif');
  background-repeat: no-repeat;
  background-position: center left;
}

/*
 * FeedControl customizations.
 */

.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 14px;
  line-height: 1.2em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  margin-bottom: 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height: 3.8em;
  color: #000000;
  margin-top: 3px;
}

/*
 * Easy way to get horizontal mode, applicable via js options to gadget.
 */

.gfg-horizontal-container {
  position: relative;
}

.gfg-horizontal-root {
  height: 1.5em;
  _height: 100%;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding: 5px;
  margin-right: 80px;
}

.gfg-horizontal-root .gfg-title {
  font-weight: bold;
  background-color: #FFFFFF;
  line-height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  float: left;
  padding-left: 10px;
  padding-right: 12px;
  border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title li {color: #cc0000; }
.gfg-horizontal-root .gfg-title a {
  color: #ccc;
  text-decoration: none;
}

.gfg-horizontal-root .gfg-entry {
  width: auto;
  height: 1.5em;
  position: relative;
  overflow: hidden;
  text-align: left;
  margin-top: 0px;
  margin-left: 0px;
  padding-left: 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position: relative;
  background-color: white;
  width: 100%;
  height: 100%;
  line-height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
}

.gfg-horizontal-root .gfg-list {
  display: none;
}

/*
 * FeedControl customizations.
 */

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display: none;
}

.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #000;
  margin-right: 3px;
  float: left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float: left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display: block;
  color: #cc0000;
}

.gfg-branding {
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor: pointer;
  float: right;
  width: 17px;
  height: 20px;
}

.gfg-collapse-open {
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFvl51BtVa1AEnmXdIQeZZWRVo8uoEDmQqq16Cin-u84FCIkJzctucPWyBmvtfGjXK7OP6c_6xzAwCS81r9YcYDtFX64Fbvykhrim21RY8ue52ZLph1vF-E5x0cZ7mUnZfDidyHgMhkM/s1600/5.gif');
}

.gfg-collapse-closed {
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFvl51BtVa1AEnmXdIQeZZWRVo8uoEDmQqq16Cin-u84FCIkJzctucPWyBmvtfGjXK7OP6c_6xzAwCS81r9YcYDtFX64Fbvykhrim21RY8ue52ZLph1vF-E5x0cZ7mUnZfDidyHgMhkM/s1600/5.gif');
}

.gfg-collapse-href {
  float: left;
}

.clearFloat {
  clear: both;
}
  </style>
  <script type="text/javascript">
    function LoadDynamicFeedControl() {
      var feeds = [
 {title: 'Últimos posts',
  url: 'AQUI O ENDEREÇO DE SEU BLOG/rss.xml'
 },
 ];
      var options = {
        stacked : true,
        horizontal : false,
        title : "Posts + vistos"
      }

      new GFdynamicFeedControl(feeds, 'feed-control', options);
    }

    google.load('feeds', '1');
    google.setOnLoadCallback(LoadDynamicFeedControl);
  </script>

6 comentários:

  1. Cordiais cumprimentos.
    Linkamos teu site na lista do nosso pois é muito rico nas publicações.

    Gostariamos muito de saber como podemos adcionar um Widget com a lista dos blogs que seguimos, pois a lista é enorme e não temos espaço, na home e gostariamos de deixar visível para os amigos que nos visitam, temos uma fixa pequena mas achamos injusto colocar uns e outros não.
    Então achamos que numa caixnha rolando os nome resolveria o problema.

    Gratos pela atenção.

    Nosso abraço

    ResponderExcluir
  2. Olá, foi muito boa sua intenção neste gadget, mas ele tem um problema...Depois que ele carrega, não aparece nenhum post. do blog.Tentei inseri-lo em meu blog e não funcionou(VEJA: http://muryllodantas.blogspot.com).
    Outra coisa, como eu faço parceria, pois ja entrei em contato mas não recebi nenhuma resposta.Grato

    ResponderExcluir
  3. @muryllo dantasvoc~e colocou o endereço de seu blog no local indicado ? Se não colocou é por isso que não funciona.

    ResponderExcluir
  4. Sim coloquei como no indicado neste post. Ele fica com string Carregando e não aparece mais nada além disso.Tentei modificá-lo mas nada aconteceu.Grato

    ResponderExcluir
  5. Oi Elke
    Achei muito legal os dois modelos
    e funcionaram direitinho
    como personalizo as cores branco e cinza do modelo?

    ResponderExcluir
  6. Gostei muito!! Só que como faço para Adicionar mais Post, Ja que só aparece 4

    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