Mas antes de começar a incorporá-lo no seu blog, faça um backup do template, caso não saiba como proceder acesse o artigo Como Fazer um Backup do Blog.
Agora Vamos Aprender Como Colocar o Slide Com Postagens Aleatórias no Blogger
Acesse seu Blogger, vá em "Tema" e depois "Editar Html".
Clique na caixa de código do template, pressione "CTRL+F" e depois que a barra de busca aparecer pesquise por ]]></b:skin>
/* Slide Random Blogger-----------------------*/
ul.featpost,
ul.featpost li {
padding:0;
margin:0;
overflow:hidden;
position:relative;
}
ul.featpost li {
height:280px;
display:none;
float:left;
}
ul.featpost li:first-child {
display:block;
}
ul.featpost,
.featuredpost {
height:280px;
}
.featuredpost {
overflow:hidden;
}
ul.featpost img {
width:100%;
height:100%;
}
#main-top .widget-content {
padding:5px;
}
ul.featpost .labeltext {
position:absolute;
bottom:35px;
left:0;
width:85%;
z-index:9;
background-color:#fff;
padding:7px 10px;
color:#000;
}
ul.featpost strong.titlex {
position:absolute;
bottom:95px;
display:block;
left:10px;
z-index:10;
background-color:#fff;
padding:5px 8px;
max-height:22px;
overflow:hidden;
}
ul.featpost strong.titlex a {
font:;
color:#000;
text-decoration:none;
width:100%;
font-weight:bold;
text-transform:capitalize;
display:inline-block;
}
ul.featpost .labeltext .infolabel {
font-size:90%;text-align:right;
}
ul.featpost .labeltext .infolabel a {
color:#F9F619;
}
ul.featpost .labeltext .date {
margin-right:5px;
}
ul.featpost .labeltext p {
margin:5px 0 0;
font-style:italic;
}
#main-top .flex-control-nav.flex-control-paging, #manualslidenya .flex-control-nav.flex-control-paging {
position:absolute;
width:100%;
bottom:15px;
z-index: 2;
}
#main-top .flex-viewport, #main-top-manualslide .flex-viewport {
max-width:800px;
}
.featuredpost .flex-direction-nav a {
top:50%;
margin-top:-20px;
}
a.feathumb {
width:100%;
height:280px;
display:block;
}
#mainmtop-manualslide .widget > h2 {
display: none;
}
#mainmtop-manualslide .Image .widget-content {
padding: 0;
border: 0;
max-height: 280px;
overflow: hidden;
}
#mainmtop-manualslide .widget {
padding: 0;
margin-bottom: 40px;
}
#mainmtop-manualslide {
overflow: hidden;
max-height: 310px;
position: relative;
z-index: 0;
}
#manualslidenya {
padding: 5px;
max-height: 280px;
}
#main-top-manualslide .bungkus {
padding: 0 10px 15px;
}
#main-top-manualslide .Image img {
max-height: 280px;
}
.flex-direction-nav a {
position:absolute;
display:block;
top:90px;
width:25px;
height:40px;
background-color:transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
outline:0;
text-indent:-9999px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FaaykIBAyZzUNAPH8xWX9Da_2XQ3vftVzz6Ae0Go6POJ4bdRbnDIEF1FtT0f1gdZnmiQaXn2_Y_qEGrmWZpNUurnB4xqbjYNtqkuabL9_eFiW1jB5AoQ2aN1Tuz3WEs6qViwcKY3FsM/s1600/glyphicons-halflings-white.png);
background-repeat:no-repeat;
z-index: 2;
}
.widget-content:hover .flex-direction-nav a, #manualslidenya:hover .flex-direction-nav a {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
.flex-direction-nav a:hover {
background-color:#fff;
}
.flex-direction-nav a.flex-prev {
right:0;
-moz-border-radius:3px 0 0 3px;
-webkit-border-radius:3px 0 0 3px;
border-radius:3px 0 0 3px;
background-position:-18px 7px;
}
.flex-direction-nav a.flex-next {
left:0;
-moz-border-radius:0 3px 3px 0;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
background-position:7px 7px;
}
.flex-control-nav.flex-control-paging,
.flex-control-nav.flex-control-paging li {
list-style:none;
padding:0;
text-align:center;
margin:0;
}
.flex-control-nav.flex-control-paging li {
display:inline-block;
}
.flex-control-nav.flex-control-paging a {
display:inline-block;
text-indent:-9999px;
margin:0 3px;
width:10px;
height:10px;
background-color:#fff;
cursor:pointer;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}
.flex-control-nav.flex-control-paging a.flex-active {
background-color:#fff;
}
.flex-viewport,
.rcbytag {
max-width:612px;
margin:0 auto;
}
ul.featpost strong.titlex {
padding: 10px 15px;background: rgba(67,113,207,0.8);
z-index: 99;
font-size: 20px;
bottom: 100px;
margin-bottom: 35px;
}
ul.featpost strong.titlex a{
color: #f5f5f5;
font-family: 'Oswald',serif;
}
ul.featpost .labeltext {
background: rgba(0,0,0,0.7);
padding: 7px 14px;
width: 385px;
color: #fff;
font-size: 13px;
line-height: 17px;
z-index: 99;
}
Pesquise agora por </head> e logo ACIMA da tag encontrada cole o código abaixo:
NOTA: O numero 8 representa o numero de posts a ser exibido. Mude se precisar.
Clique em "Salvar", arraste o gadget para acima da área de postagens ou outro lugar de sua preferência e clique em"Salva" novamente.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/> <script type="text/javascript" src="http://yourjavascript.com/20381546315/slide-recent-posts.js"></script>
Depois Clique em "Salvar Modelo". Agora, no menu lateral de seu Blogger vá em "Layout", "Adicionar um gadget" e escolha do tipo "HTML/Javascript". e dentro do gadget, cole o código abaixo:
<div id="featpost"></div>
<script type='text/javascript'>
jQuery("#featpost").AutofeaturedPost({
MaxPost:8});
</script>
NOTA: O numero 8 representa o numero de posts a ser exibido. Mude se precisar.
Clique em "Salvar", arraste o gadget para acima da área de postagens ou outro lugar de sua preferência e clique em"Salva" novamente.
0 Comentários