Adicionar um Gadget. Em seguida clique em HTML/JavaScripit. Uma janela será aberta. Dentro dela, cole o código abaixo:
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
width:1000px;
margin:0px auto 36px;
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item {
margin: 0 12.5px 10px 0;
display: inline-block;
}
.bsrp-gallery .bs-item a {
position: relative;
background: #fff;
float:left;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: #41A6D2;
display: block;
clear: left;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
line-height: 1.3em;
width: 89.5%;
height: 13%;
position: absolute;
bottom: 0%;
text-align: center;
padding: 60px 10px 85px 10px;
color: #FFF;
word-wrap: break-word;
overflow: hidden;
padding-top: 80px;
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
outline-offset: -5px;
outline: 1px solid #fff;
-webkit-transition: All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=76);
-moz-opacity:0.76;
-khtml-opacity:0.76;
opacity:0.76;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.bs-item:last-child {
margin-right:0px;
}
.bsrp-gallery a img {
float: left;
}
.bsrp-gallery a:hover img {
}
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaOZydvRMEPQkzznRqCW3DClkUCO9RcOInGI28NPj27iJtwDuy8q-XqSDbEst5U9ECXUMEgcvD9k4qXR1YYist5To9nfIXcvH_JIoQTT9LLsYy7ejd1bhyphenhyphen6wlGCXnZ1jDmlNWz5ZNAEuIf/s1600/sem.gif';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts = 1; /*--define em qual post começa a exibição --*/
var bsrpg_thumbSize = 190; /*--define o tamanho das miniaturas --*/
var bsrpg_showTitle = true;
document.write("<script src=\"SEU-BLOG-AQUI/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
<div class='clear'></div>
</div>
<div class='clear'></div></center>
Procure por <head>, EMBAIXO cole o seguinte código:
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
Em seguida, salve. Tudo que pode ser alterado no estilo foi sinalizado no próprio código. O número destacado de vermelho se refere a cor do fundo do slide. Creditos
Nenhum comentário:
Postar um comentário