domingo, 2 de agosto de 2015

Slider post Metro UI style para Blogger


slider-post-metro-UI-style-para-blogger


Hoje vamos aprender como colocar esse lindo post slider, para que serve um post slider? Bem isso vai dar uma apresentação melhorada no seu blogger, com o intuito de ajudar as pessoas a localizar os conteúdos do blogger, se você realmente quer embelezar seu blogger aqui esta esse tutorial para melhorar a experiência com o usuário.


1 Primeiro faça login no blogger e no menu escolha modelo>> editar Html >> pressione CTRL+F  e procure se seu template já tem esse código 

 <Script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type = "text / javascript" />

se não possuir esse código copiar e colar acima de </head> 

Agora Copie o código abaixo e cole antes de </head>

<!-- Featured Random Posts Slider Start -->
<style type='text/css'>
#slides{overflow:hidden}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{display:none;background-color:white;padding:4px;margin-top:0;position:absolute}
#slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4){display:block}
#slides li:nth-child(1){width:49.5%;height:100%}
#slides li:nth-child(2){left:50.3%;width:24.5%;height:49.5%}
#slides li:nth-child(3){left:75.5%;width:24.5%;height:49.5%}
#slides li:nth-child(4){left:50.3%;top:51%;height:49%;width:49.7%}
#slides img{width:100%;height:100%}
#slides h4{position:absolute;bottom:20px;width:96%;padding:0 10px;margin:0 -5px;font-size:16px;z-index:3;color:white;text-shadow:0 1px 2px #918F8F}
#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:14px}
#slides .label_text{display:none;position:absolute;z-index:3;bottom:10px;width:100%;padding:0 10px;margin:0 -5px;font-size:9px;color:white}
.randomnya .overlayx{position:absolute;top:0;left:0;border:4px solid white;width:97%;height:97%;z-index:2;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
#slides li:nth-child(1) .overlayx{background-position:0 0}
#slides .label_text span{margin-right:2px}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .cmnum{position:absolute;background-color:#7C7C7C;padding:2px 3px;display:block;top:-5px;right:10px}
#slides .cmnum::after{content:&quot;&quot;;width:0;height:0;border-width:1px 4px;border-style:solid;border-color:#7C7C7C #7C7C7C transparent transparent;position:absolute;top:100%;right:0}
ul.randomnya li:hover .overlayx{-ms-filter:&quot;progid:DXImageTransform.Microsoft. Alpha(Opacity=10)&quot;;filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides {font-family:Arial,sans-serif}
#top-main{position:relative}
#top-main .widget{border:none;padding:1px}
#top-main h2{position:absolute;left:-9999px}
#buttons{position:absolute;bottom:0;right:0;display:none}
#buttons a{display:inline-block;text-indent:-9999px;background-color:white;width:25px;height:17px;margin:0 0 0 7px;border:1px solid #CECECE;position:relative}
#prev::before,#next::before{content:&quot;&quot;;width:0;height:0;border-width:5px 9px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-5px;margin-left:-15px;left:50%}
#next::before{border-color:transparent transparent transparent #535353;margin-right:-15px;right:50%;margin-left:auto;left:auto}

@media only screen and (min-width:768px) and (max-width:999px){
  #slides ul{height:200px}
  #slides h4{font-size:15px}
  #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
  }
@media only screen and (max-width:767px){
  #slides ul{height:200px}
  #slides h4{font-size:15px}
  #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
}
@media only screen and (max-width:479px){
  #slides ul{height:450px}
  #slides li:nth-child(1){width:100%;height:49.5%}
  #slides li:nth-child(2){left:0;top:50%;width:49.5%;height:24.5%}
  #slides li:nth-child(3){left:50.5%;top:50%;width:49.5%;height:24.5%}
  #slides li:nth-child(4){left:0;top:75%;height:24.5%;width:100%}
}
</style>
<script type='text/javascript'>
//<![CDATA[
function RandomPost(a){(function(e){var i={blogURL:"",MaxPost:4,RandompostActive:true,idcontaint:"#randompost",ImageSize:100,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};i=e.extend({},i,a);var h=e(i.idcontaint);var b=i.blogURL;var d=i.MaxPost*600;if(i.blogURL===""){b=window.location.protocol+"//"+window.location.host}h.html('<div id="buttons"><a href="#" id="prev">prev</a><a href="#" id="next">next</a></div><div id="slides"><ul class="randomnya"></ul></div>').addClass(i.loadingClass);var g=function(z){var t,k,r,o,x,A,s,w,y,u,n="",v=z.feed.entry;for(var q=0;q<v.length;q++){for(var p=0;p<v[q].link.length;p++){if(v[q].link[p].rel=="alternate"){t=v[q].link[p].href;break}}for(var m=0;m<v[q].link.length;m++){if(v[q].link[m].rel=="replies"&&v[q].link[m].type=="text/html"){r=v[q].link[m].title.split(" ")[0];break}}if("media$thumbnail"in v[q]){x=v[q].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+i.ImageSize+"-c")}else{x=i.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+i.ImageSize+"$1")}k=v[q].title.$t;u=v[q].published.$t.substring(0,10);o=v[q].author[0].name.$t;A=u.substring(0,4);s=u.substring(5,7);w=u.substring(8,10);y=i.MonthNames[parseInt(s,10)-1];n+='<li><a target="_blank" href="'+t+'"><div class="overlayx"></div><img class="random" src="'+x+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+w+'</span><span class="dm">'+y+'</span><span class="dy">'+A+'</span></span><span class="autname">'+o+'</span><span class="cmnum">'+r+"</span></div></li>"}e("ul",h).append(n)};var c=function(o){Total_Posts_Number=o.feed.openSearch$totalResults.$t;if(Total_Posts_Number<=i.MaxPost){i.MaxPost=Total_Posts_Number}var j=[];while(j.length<i.MaxPost){var q=Math.ceil(Math.random()*Total_Posts_Number);var p=false;for(var n=0;n<j.length;n++){if(j[n]==q){p=true;break}}if(!p){j[j.length]=q}}var m="/-/"+i.tagName;if(i.tagName===false){m=""}if(i.RandompostActive===true){for(var l=0;l<i.MaxPost;l++){e.ajax({url:b+"/feeds/posts/default"+m+"?start-index="+j[l]+"&max-results=1&orderby=published&alt=json-in-script",success:g,dataType:"jsonp",cache:true})}}else{e.ajax({url:b+"/feeds/posts/default"+m+"?max-results="+i.MaxPost+"&orderby=published&alt=json-in-script",success:g,dataType:"jsonp",cache:true})}};var f=function(){if(i.tagName===false){e.ajax({url:b+"/feeds/posts/default?max-results=0&alt=json-in-script",success:c,dataType:"jsonp",cache:true})}else{e.ajax({url:b+"/feeds/posts/default/-/"+i.tagName+"?max-results=0&alt=json-in-script",success:c,dataType:"jsonp",cache:true})}e(window).bind("load",function(){setTimeout(function(){var k=5000;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#prev").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#next").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#next").click()}h.removeClass(i.loadingClass)},d)})};e(document).ready(f)})(jQuery)};
//]]>
</script>
<!-- Featured Random Posts Slider End -->



Agora procure por <div class='main-wrapper'> 

 Logo apos copie e cole o codígo abaixo
<!-- Featured Random Post Slider Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='top-main'>
 <b:section class='main' id='top-main1' preferred='yes'/>
</div>
</b:if></b:if>
<!-- Featured Random Post Slider End -->

Clique em Salvar  agora procure no menu do blogger por layout  encima do blog post adicionar gadget link procure por adicionar html/javascript  copie e cole o seguinte código.

<div id="randompostxx"></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
RandomPost({
MaxPost:4,
RandompostActive:false,
idcontaint:"#randompostxx",
ImageSize:200,
tagName:"Label"
});
});
//]]>
</script>



Considerações Finais
mybloggerseo sempre trazendo as melhores dicas para que seu blogger cada vez fique melhor estamos gratos por sua visita.





NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner