Como colocar um slide automático e com postagens aleatórias na Blogger

Você andou procurando um slide que combinasse com seu estilo e fosse mais profissional e nunca encontrou? Pois, agora sim  este é "Ô" slide! Bom, ele escolher as postagens aleatoriamente, ele também exibe todas as publicações alternando a medida que que novas páginas forem visitadas, além do beleza que ele trará a seu blog. Veja o exemplo abaixo↓

                                                      

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>

Logo ACIMA da tag encontrada, cole o código abaixo:

/* 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:

<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.