Views:
20
CÓDIGO JAVASCRIPT
(colar abaixo de </body>)
<!-- Início Easy slide -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/uoel5vg/p51nl0jk4/easyslider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<!-- Final Easy Slide -->
CÓDIGO CSS
(colar acima de ]]></b:skin>)
#slide-container {
position: relative;
height: 350px; /*ALTURA DEL SLIDE, MANTENGA IGUAL EN TODAS LAS MARCAS */
width: 750px; /*ANCHO DEL SLIDE, MANTENGA IGUAL EN TODAS LAS MARCADAS */
top:0px;
padding:0px;
background:transparent;
}
#slide-container img{
width:100%;
height:auto;
}
#slider {
width: 750px; /*ANCHO DEL SLIDE, MANTENGA COMO DEFINIU ARRIBA */
height: 350px;/*ALTURA DEL SLIDE, MANTENGA COMO DEFINIU ARRIBA */
left: -12px; /*LEVA EL SLIDE PARA LA IZQUIERDA, CAMBIO DE ACUERDO CON SU TEMPLATE */
margin-top: -5px;/*LEVA EL SLIDE PARA EL TOP, ALTERE DE ACUERDO CON SU TEMPLATE */
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
a.slider-category {
color: #bf9f79; /*COLOR DE LA FUENTE DE LOS MARCADORES */
text-align: center;
margin-bottom: 20px;
margin-top: 13px;
display: block;
font: 22px 'Shadows Into Light Two'; /*TAMAÑO Y TIPO DE LA FUENTE DE LOS MARCADORES */
}
span.readmore {
background: #444; /*COLOR DE FONDO DEL BOTÓN LEA MÁS */
padding: 12px 22px;
margin-top: 9px;
margin-left: 40%;
display: inline-block;
font-family: Arial, sans serif; /*FUENTE DEL BOTÓN LEA MÁS*/
text-transform: uppercase; /*COLOCA LA FUENTE EN CAPSLOCK, APAGUE SE PREFERIR */
letter-spacing: 1px;
font-size: 11px; /*TAMAÑO DE LA FUENTE LEA MÁS */
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
span.readmore:hover{
background: #bf9f79; /*COLOR DE FONDO DEL BOTÓN LEA MÁS HOVER */
}
span.readmore a{
color:#fff; /*COLOR DE LA FUENTE LEA MÁS */
}
.slide-desc h2 {
display: block !important;
margin: -10px auto 10px !important;
font-family: century gothic, 'source sans pro', sans serif; /* FUENTE DEL TÍTULO DEL POST */
font-weight: normal !important;
text-align: center;
text-transform: none;
letter-spacing: 2px;
font-size: 25px;
width: 400px; /*ANCHO OCUPADO POR EL TÍTULO, ALTERE SE PREFERIR*/
}
.slide-desc {
background: rgba(255, 255, 255, 0.85); /*COLOR DE FONDO DE LA CAJA DE TÍTULO */
color: #231f20; /*COLOR DE LA FUENTE DEL TÍTULO DEL POST */
padding: 10px;
position: absolute;
top: 24%;
padding: 11px 0px 24px;
width: 500px; /*TAMAÑO DEL ÁREA DEL TÍTULO / LEA MÁS Y MARCADORES */
left: 50%;
margin-left: -250px;
z-index: 99999;
}
#slider ul {
padding: 0;
margin: 0;
width: 750px; /*ANCHO DEL SLIDE, MANTENGA IGUAL EN TODAS LAS MARCADAS */
height: 350px; /*ALTURA DEL SLIDE, MANTENGA IGUAL EN TODAS LAS MARCAS */
}
#slider li {
width: 750px; /*ANCHO DEL SLIDE, MANTENGA IGUAL EN TODAS LAS MARCADAS */
height: 350px; /*ALTURA DEL SLIDE, MANTENGA IGUAL EN TODAS LAS MARCAS */
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
#prevBtn, #nextBtn {
display: none;
width: 30px;
height: 77px;
position: relative;
text-indent: -9999px;
top: -200px;
left: 5px;
}
#nextBtn {
left: 612px !important;
top: -280px;
}
#prevBtn a, #nextBtn a {
display: block;
position: relative;
width: 30px;
height: 77px;
background: none;
}
#nextBtn a {
background: none;
}
/* Final Easy Slide */
CÓDIGO HTML
(colar como gadget HTML/JAVASCRIPT)
<div id="slider">
<script style="text/javascript">
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul>');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry = json.feed.entry[i];
var post_category = entry.category[0].term;
var category = '<a class="slider-category" href="/search/label/'+ post_category +'?max-results=10">'+ post_category +'</a>';
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9wEVVPyCdSS6kARcNwMFLNPMSQ7PoMl2YvuijGLlg9RhsQou8kkM8kAwTyTOgDrvvTDjQYEb6kJrxIH5d0NsAioAVGdXMzNGE_zciQeVzy50fQvTWtWzznS7NXtgqvClRPM6J_QZ5cR7/s1600/SEM-IMAGEM.png';
document.write('<li><div id="slide-container"><span class="slide-desc">');
document.write(category + '<h2 style="margin:10px 0px;">' + posttitle_gal + '</h2>');
document.write('<span class="readmore"><a href="' + posturl_gal + '">Leia Mais </a></span>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="px" height=""/></a></div>');
document.write('</li>');
}
document.write('</ul>');
}
</script>
<script style="text/javascript">
var numposts_gal = 20;
var numchars_gal = 0;
var random_posts = false; // random posts
</script>
<script src="AQUI COLOQUE O ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
No hay comentarios:
Publicar un comentario