Entradas publicadas en Blogger con slider vertical

8 comentaron


Como ya habras visto, existen muchas alternativas para mostrar las entradas publicadas en Blogger de manera diferente, de hecho yo ya te he explicado varios metodos en este blog. Para que tengas otra opcion mas, he diseñado otro widget nuevo que funciona con JQuery, en el que se ven tus entradas (hasta 999) sin imagen y moviendose con scroll hacia abajo automaticamente.

Para que veas como queda, aqui lo tienes en tamaño grande.


Leyendo....



Para ponerlo en tu blog, tan solo tienes que copiar este codigo y añadirlo a un gadget HTML/Javascript. Tienes que sustituir lo que esta en rojo por la url de tu blog para que muestre tus entradas. Por el tamaño no te preocupes, el widget se adaptara automaticamente a donde lo pongas.



<style type="text/css">
.gfg-root {
  width: auto;
  height: auto;
  position: relative;
  overflow: hidden;
  text-align: center;
  font-family: verdana, sans-serif;color:#ffffff !important;
  font-size: 12px;
  padding:2px;
  background:none;
  border: 0px solid #363636;
}
.gfg-title {
  font-size: 16px;
  font-weight : bold;
  color : #92D2F5 !important;
  background-color: none;
  line-height : 1.4em;
  overflow: hidden;
  white-space : nowrap;
}
.gfg-subtitle {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  background-color: none;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 0px;
}
.gfg-subtitle a {
  color : #ffffff !important;
  display:none !important;
}
.gfg-entry {
  background-color: none;
  width : 100%;
  height : 9.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
}

 .gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color:none;
  width : auto;
  height : 100%;
  padding-left : 5px;
  padding-right : 5px;
}
.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 15px;
  display:none !important;
}
.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 20px;font-family:century gothic;border-bottom:1px solid #a43434;
  display:block;-webkit-text-shadow: 1px 1px 1px #000000;-moz-text-shadow: 1px 1px 1px #000000;text-shadow: 1px 1px 1px #000000;
  color:#a43434 !important;
  font-weight:bold;
  line-height: 1.0em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-top : 4px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
  line-height : 1.3em;
  color: #000000;
  margin-top : 3px;
  font-size: 12px;
}
.clearFloat {
  clear : both;
}
#feedGadget {
  margin-top: 3px;
  margin-left: auto;
  margin-right: auto;
  width: auto;padding:5px;
  font-family:verdana, arial;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiypzBb-fsXkUmsxe8Xst56yXkzwxU_hE4Bk6fdCSFew8A_3nYusgOT-xxqERRH66g3LF3Od1gu3mguayAif31g2FcD0gvqQW6b7ATzLmN8bt4JaQ3wew0cgROQpQeay7MK2dgy0inORGA/s128/Texture_lt_gray_004.jpg) repeat scroll 0 0;
  font-size: 14px;font-weight:bold;
  color: #000000;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;border:4px solid #EAA00A;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;
}

</style>
<script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
  var feeds = [{
    title: 'title',
    url: 'http://nombredetublog.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'
  }, ];
  new GFdynamicFeedControl(feeds, 'feedGadget', {
    numResults: 1000,
    stacked: true,
    title: " "
  });
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget"><center>Leyendo....</center></div>