Tutorial: Agrega un Gadget para mostrar últimas publicaciones

Decidí dejar este Pequeño pero llamativo aporte, Normamel algunos Buscan poner algo donde se puedan ver los ultimos Post de Nuestro Blog. Pues Hace un Tiempo me encontré este Fácil Gadget para eso:

Simplemente Van a Diseño→Añadir un Gadget→ HTML/Javascript y ponen el siguiente Codigo y Ponen su Edicion de lo que va En Negrita y algo mas que ustedes vean :encouragement:

<div id="headerbox">Titulo del Cintillo verde</div>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"URL Del Blog o Pagina",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
/*
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider * {
-moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
ul.abt-sidebar-slider {
height: 500px;
width: 100%;
}
ul.abt-sidebar-slider li {
display: none;
float: left;
height: 24.5%;
overflow: hidden;
padding: 0;
position: absolute;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
left: 0;
top: 50%;
}
ul.abt-sidebar-slider img {
border: 0 none;
height: 100%;
width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
left: 0;
top: 75%;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
left: 0;
top: 25%;
}
ul.abt-sidebar-slider .overlayx {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
border: 4px solid #2E8DCE;
border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
color: white;
font-family: Oswald;
font-size: 25px;
font-weight: 100;
line-height: 1.5em;
margin: 0;
padding: 0 10px;
position: absolute;
top: 25px;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .label_text {
bottom: 10px;
color: white;
font-size: 90%;
left: 10px;
position: absolute;
z-index: 2;
}
ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
display: none;
}
.buttons {
margin: 5px 0 0;
}
.buttons a {
display: inline-block;
height: 25px;
position: relative;
text-indent: -9999px;
width: 15px;
}
.buttons a:before {
border-color: transparent #535353 transparent transparent;
border-style: solid;
border-width: 8px 7px;
content: "";
height: 0;
left: 50%;
margin-left: -10px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 0;
}
.buttons a.nextx:before {
border-color: transparent transparent transparent #535353;
margin-left: -3px;
}
.date {
background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
bottom: 93px;
padding: 8px;
position: relative;
right: 6px;
}
#headerbox {
background: #8FB93D;
font-family: Oswald;
padding: 4px;
}
</style>

Muy bueno, gracias :encouragement:

Te recomiendo ponerlo entre etiquetas [ c o d e ][ / c o d e ]

Pensé que era más atractivo

[MENTION=112534]NSFTG[/MENTION]

Hola amigo, por favor si me podrias facilitar el Script que estaba alojado en Dropbox seria de gran ayuda, ya que a mi me sale que fue eliminado, bueno me sale exactamente esto:


En español:

Enlaces públicos de esta cuenta están generando mucho tráfico y se han desactivado temporalmente!

Jajajaja mucho trafico y te la desactivaron por eso, porfa si me facilitarias el script te lo agradeceria muchisimo, saludos!

A probar haber no parece muy atractivo pero se agradece el aporte :encouragement:

xTeran dijo:

A probar haber no parece muy atractivo pero se agradece el aporte :encouragement:

Hacer clic para expandir...

Hola wey, una pregunta te funciono?? A mi no me funciono esto ya que me sale que es script esta temporalmente desabilitado y por eso no se me carga este gadget 😕 :fatigue:

me lo llevo!!!

Dejarías demo 😛anda

Gracias igual bro

no me gusta su diseño

muy útil el aporte de verdad el gaget esta bien a mi gusto :encouragement:

yondryrafael dijo:

no me gusta su diseño

Hacer clic para expandir...

Tienes un empujón, el usuario regaló eso... tu puedes mejorarlo 😀

muy util lo guardare por si lo utilizo ya que uso blogger gracias :encouragement: