Postagens Recentes

29 de jan de 2013

Slide carousel com as postagens recentes do blog

13 comentários:

Um outro modelo de slide carousel que mostra, automaticamente suas postagnes mais recentes. Pode ficar interessante em seu blog, dar uma toque a mais.



Vá até o modelo de seu blog e clique em Personalizar




 



Cole o código abaixo no local indicado. Salve.

/*Carousel---------------------------------------------------------*/
#carousel{
width:99%;
height:330px;
border: 4px groove #ccc;
position:relative;
display:block;
background:#fff;
margin:40px auto;
padding:0 auto;

}
#carousel .container{
background: #fff;
position:absolute;
left:10px;
width:98%;
height:330px;
overflow:hidden
}
#carousel #previous_button{
position:absolute;
width:35px;
height:330px;
background:url(http://3.bp.blogspot.com/-SFH7pfuPOg4/UAVZimY-OuI/AAAAAAAAHqE/MOKZ4nE0EFM/s1600/prev.png) center;
z-index:100;
cursor:pointer;
}
#carousel #next_button{
position:absolute;
right:0;
width:35px;
height:330px;
background:url(http://4.bp.blogspot.com/-pFR58sZNzCo/UAVZh9I72lI/AAAAAAAAHp8/JTIiHJfsqHA/s1600/next.png) center;z-index:100;
cursor:pointer;
}
#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{
filter:alpha(opacity=80);opacity:.8
}
#carousel ul{
width:100000px;position:relative;margin-top:10px
}
#carousel ul li{
background:#404040 url(http://3.bp.blogspot.com/-isErZdr-e3w/T_7Lgjhr5OI/AAAAAAAAHf0/tjJYvmFYxS8/s1600/sliderbg.png) repeat-x top;
display:inline;
float:left;
text-align:center;
font-weight:700;
line-height:1.2em;
width:200px;
height:300px;
margin:0 1px 20px 12px;padding:6px
}
#carousel ul li a.slider_title{
color:#ccc;
display:block;
margin-top:5px;
text-shadow:0 1px 1px #000
}
#carousel ul li a.slider_title:hover{
color:#f7bc2f
}


Procure agora por: </head>



Acima dele cole o código abaixo:


<!-- Código slide carousel -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v)};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else curr=to}else{if(to<0||to>itemLength-v)return;else curr=to}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight')};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom')}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://4.bp.blogspot.com/-M7zl_IhEy3E/UP7zrjT608I/AAAAAAAABh8/2g76CWg8YRY/s1600/no-image4.png";showRandomImg=true;aBold=true;summaryPost=200;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="200" height="250" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';document.write(trtd);j++}document.write('</ul>')}function showrecentposts5(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var trtd='<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="100" height="69" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';document.write(trtd);j++}}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="maskolis_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;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!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]=''}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h1>'+relatedpoststitle+'</h1>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 10px 10px 0;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>




Agora procure por:  </header>




E  abaixo dele, cole a div para instalar neste local o slide. (se quiser que o slide apareça também nas páginas internas, delete os códigos que estão na cor vermelha.)


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>  
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,  
    visible: 4,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)  
</script>
</b:if></b:if>


25 de jan de 2013

Menu fixo com banner e links para o Blogger

Nenhum comentário:

Mais um modelo de menu, mas este bem diferente. Possui área para links, área para colocar um  banner e setas deslizantes e mais, você pode inserir, se quiser, botões sociais, box do Facebook, chat, o que bem entender.


Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011


Agora procure por:  

</body>  



Acima dele, cole o código abaixo, fazendo as modificações necessárias.



<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
  <b:include data='blog' name='google-analytics'/>

<!-- zFPmenu START -->
<div id='zfpm_div' style='display:none;'>
<div id='zfpm_upperBox'>

<div class='separator' style='clear: both; text-align: center;'>
<a href='http://templateseacessorios.blogspot.com' imageanchor='1' style='margin-left: 1em; margin-right: 1em;'><img border='0' src='http://2.bp.blogspot.com/-RB81K56UGsk/UQLvAf6EexI/AAAAAAAABi8/6IYg-FomoQ4/s1600/banner+templates.png'/></a></div>

</div>
<ul id='zfpm_ul'>
<!-- Your menus start -->
<li><a href=''>Início</a></li>
<li class='dir'><a href=''>Templates</a>
   <ul>
      <li class='dir'><a href=''>Mais links</a>
         <ul>
            <li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.1.1</a></li>
            <li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.1.2</a></li>
         </ul>
      </li>
      <li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.2</a></li>
      <li><a href='AQUI O ENDEREÇO DO LINK'>LINK 2.3</a></li>
   </ul>
</li>
<!-- Your menus end -->
</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = &#39;light&#39;
var zfpm_shareBox = &#39;no&#39;;
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js' type='text/javascript'/>
<!-- zFPmenu END -->



Efeito deslizante nos marcadores do Blogger

3 comentários:



Coloque um pequeno efeito deslizante em seus marcadores com um código simples e leve.  Só mesmo para dar uma bossa a seu blog, quando o leitor passar o mouse por cima do link.


Vá até o modelo de seu blog e clique em Editar HTML










Procure por </head>






E acima dele, cole o código abaixo:




<!-- Codigo marcadores -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$(&#39;a.linknudge, .Label ul li a&#39;).hover(function() {
$(this).animate({
paddingLeft: &#39;20px&#39;
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>


Menu social com efeito para seu blog

Um comentário:

Um blog pode sim sobreviver sem páginas sociais mas que é melhor tê-las para uma melhor divulgação não resta dúvidas. E são tantas redes socias, para compartilhar fotos, opinião, compartilhar postagens, vídeos e por aí vai. Que tal então este modelo de widget enxuto, com um efeito bonito para seu blog, e ainda por cima fácil de instalar ?


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.



<div id="GIB-social-hover">



<div id="links"><a href="AQUI O ENDEREÇO DE SEU TWITER" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-GVPx4HMrNDY/UK9uv3rA0iI/AAAAAAAAIO4/yfuiRGXLeVU/s1600/twitter.png" /></div></a>

<a href="AQUI O ENDEREÇO DE SEU FACEBOOK" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-DX-Bx5WR6zE/UK9whE-OCzI/AAAAAAAAIPg/9k_zjlDPF8s/s1600/FB.png"  /></div></a>

<a href="AQUI O ENDEREÇO DE SEU GOOGLE PLUS" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-eP0U9g8fm0Q/UK9wYNQ4CmI/AAAAAAAAIPY/UWYbc7e9-go/s1600/google.png" /></div></a>

<a href="AQUI O ENDEREÇO DE SEU PINTEREST" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-nEZw_TpzSoU/UK-TOH8OEEI/AAAAAAAAISg/bDcBgt2yEe4/s1600/pin.png" /></div></a>

<a href="AQUI O ENDEREÇO DE SEU FEEDBURNER" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-yOEZQT7it74/UK9wClCPwpI/AAAAAAAAIPQ/EK4CB92xQ98/s1600/rss.png" /></div></a>
</div></div>

<style>/*Menu social---------------------------------------------------------------------------*/
.tota { margin:10px auto; }
#GIB-social-hover{position:relative;width:100%;height:215px;
background:#404040 url("http://4.bp.blogspot.com/-CNgQWNU8Sg4/UK91PeHlvjI/AAAAAAAAIRM/56SruW6DBQ0/s1600/vintage.png");}
#GIB-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
#GIB-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}
#GIB-social-hover #links{position:absolute;bottom:0;width:100%;}
#GIB-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);
-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;
}
#GIB-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}
#GIB-social-hover a.twitter:hover{background:#79dbff;}
#GIB-social-hover a.facebook:hover{background:#6e9bee;}
#GIB-social-hover a.google:hover{background:#cccccc;}
#GIB-social-hover a.pinterest:hover{background:#cb2027;}
#GIB-social-hover a.rss:hover{background:#ffae42;}
#GIB-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}
#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}
#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}
.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}
.home-highlight p{margin:0;}
.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}
.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}
.home-highlight:hover .home-highlight-title{color:#3a3534;}
#home-featured{min-height:400px;margin-bottom:37px;}
#home-featured .home-divider{margin-top:0;}
#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}
#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}
.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}
.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}
.featured-theme-entry-content .button{margin-top:15px;}
.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}
.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}
#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}
#featured-theme-slider .flex-direction-nav{margin:0;}
#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}
#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}
#featured-theme-slider{}

</style>


22 de jan de 2013

Substituir Postagens mais antigas por menu no Blogger

Um comentário:


Eis aí, mais alguns modelos de menu de navegação no Blogger para dar aquele estilo a seu template.


Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011




Procure por </body>




E acima dele cole o código abaixo:

<!-- MENU DE NAVEGAÇÃO -->

<script type='text/javascript'>
var pageCount=7;
var displayPageNum=3;
var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script src='https://sites.google.com/site/paginblogger/numeradas/pagenav.js'/>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="" class="showpageOf"> Paginas '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="" class="showpageOf"> Páginas ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

<!-- MENU NAVEGAÇÃO FIM-->





Salve !



Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"





Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 




Copie o código abaixo e cole no local indicado o modelo escolhido.







Modelo 1


/* Navegação
----------------------------------------------- */
.showpageNum a,.showpage a {
background: #F39C1F; border: 3px 0 3px 0 solid#DB850B;
-webkit-box-shadow: 0px 2px 2px #000;
-moz-box-shadow: 0px 2px 2px #000;
-o-box-shadow: 0px 2px 2px #000;
-ms-box-shadow: 0px 2px 2px #000;
goog-ms-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #000;
font: bold 23px  Arial, Tahoma, Helvetica, FreeSans, sans-serif;
text-decoration: none;
padding:16px 14px;
white-space: nowrap;
color: #fff;
margin: 5px;

}
.showpageNum a:active {
color: #fff;
padding:15px 14px;
margin: 5px;
position: relative; top: 0px;
}
.showpageNum a:hover,.showpage a:hover {
background: #808080;
color: #000;
text-decoration:none;
}
.showpageOf{
display:none;
}
.showpagePoint {
background: #F39C1F; border: 3px 0 3px 0 solid#DB850B;
margin: 5px;
color:#ffffff;
text-decoration:none;
width:36px;
height:16px;
font-size:18px;
padding: 16px 14px;
font: bold 23px  Arial, Tahoma, Helvetica, FreeSans, sans-serif;]
-webkit-box-shadow: 0px 2px 2px #000;
-moz-box-shadow: 0px 2px 2px #000;
-o-box-shadow: 0px 2px 2px #000;
-ms-box-shadow: 0px 2px 2px #000;
goog-ms-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #000;
}

Modelo 2


 /* Menu de Navegação
-------------------------------------------- */
showpageArea {
font-family:"Oswald", Lucida Sans Unicode, Helvetica, Arial, sans-serif;
color: #8B008B;
font-size:18px;
margin:20px;
}
.showpageNum a,
.showpage a{
padding:0px 8px;
margin:0 3px;
text-decoration:none;
background:#fff;
border:1px solid #000;
font-size:19px;
color:#000000;
-webkit-border-radius:5px;-moz-border-radius:8px;
}
.showpageNum a:hover{
background:#F35B1F;
color:#000;
}
.showpagePoint{
color:#000;
font-size:20px;
padding:0 8px;
margin:2px;
-webkit-border-radius:5px;-moz-border-radius:8px;
border:1px solid #000;
background:#F35B1F;
text-decoration:none;
}
.showpageOf{
display:none !important;
visibility:hidden !important
}


Salve. Agora clique em Layout


Modelo 3


/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
margin:10px 0;
color: #000;
font:16px Arial,Verdana;
text-shadow: black 0.1em 0.1em 0.2em;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 12px 2px;
}

.showpageOf{
display: none;
}
.showpageNum a{
padding:8px 12px;
color: #000
margin:0 4px;
text-decoration:none;
background:#548054;
border: 1px solid #000;
-moz-border-radius: 35px;
border-radius: 35px;
}

.showpagePoint{
padding:8px 12px;
margin:4px;
border: 1px solid #000;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage{
margin:4px 6px;
background:transparent;
border: 1px solid #000;
-moz-border-radius: 35px;
border-radius: 35px;
padding:8px 12px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
background:#548054;
}

.showpage a:hover{
text-decoration:none;
}
.showpageNum a:hover{
background:#548054;
}





Mais modelos de menu de páginas, ou guias

Nenhum comentário:



Mais alguns modelinhos de menu de páginas para quem uso o template Simples.

Clique para ampliar


Vá até o Modelo de seu blog, clique em Editar modelo
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Procure então por todo este trecho abaixo e substitua pelo modelo mais adequado a seu blog.


/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}


 
Modelo 1




Substitua então pelo código abaixo:



/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
 margin: -20px 4px 0 4px;
}

.tabs-inner .section:first-child ul {
color: white; text-shadow: black 0.1em 0.1em 0.2em;
  margin-top: -$(header.border.size);
  border-top: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;
  margin: 0 1px 0 0;
  padding: 25px 19px 25px 21px;
  font: $(tabs.font);
  color: $(tabs.text.color);
  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}


Modelo 2






/* Tabs----------------------------------------------- */
.tabs-inner .section:first-child {
width: 100%;
}

.tabs-inner .section:first-child ul {
  border-top: 6px solid #cc0000;/*cor da borda grande*/
}

.tabs-inner .widget ul {
  background: transparent;
  _background-image: none;
}

.tabs-inner .widget li a {
    text-align: center;
    background: #ccc;/*cor de fundo*/
   width: 90px;
   -webkit-border-bottom-left-radius: 9px;
   -webkit-border-bottom-right-radius: 9px;
   -moz-border-radius-bottomleft: 9px;
   -moz-border-radius-bottomright: 9px;
  border-top:6px solid #e6ab07;
  text-shadow: 0.1em 0.1em 0.2em black; margin: 2px 2px;
  display: inline-block;
  padding: 6px 8px 6px 8px;
  font: $(tabs.font);
  color: $(tabs.text.color);
}

.tabs-inner .widget li:first-child a, .tabs-inner .widget li a  {
margin: 0 1px 0 1px;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    background-color:#e6ab07;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}


Agora...


conteudo.


Depois, querendo modificar cores, tipo de fonte e tamanho, basta ir até o editor e personalizar a vontade.



Outros modelos aqui ou aqui

Menu de navegação por página, alguns modelos

Nenhum comentário:


Vamos modernizando, vamos modificando, vamos melhorando, vamos colocar um menu de navegção de página e substituir "Postagens antigas" no Blogger.




Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011





Procure por </body>






Acima dele cole o seguinte código:


<!-- MENU DE NAVEGAÇÃO -->

<script type='text/javascript'>
var pageCount=7;
var displayPageNum=3;
var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script src='https://sites.google.com/site/paginblogger/numeradas/pagenav.js'/>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="" class="showpageOf"> Paginas '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="" class="showpageOf"> Páginas ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

<!-- MENU NAVEGAÇÃO FIM-->










Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"





Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 




Copie o código do modelo de sua preferência e cole no local indicado, como nas imagens acima.




Modelo 1


/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
background: #000;
padding: 12px 2px;
}
.showpageOf{
background:#0282dd;
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 8px 0 0;
color:#222;
}
.showpageNum a{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#6f6f6f;
color:#fff;
border:1px solid #39312e
}
.showpageNum a:hover{
padding:8px 8px;
font:16px Arial,Verdana;
color:#fff;
background:#0282dd;
border:1px solid #00558f
}
.showpageArea{
margin:10px 0;
font:16px Arial,
}
.showpagePoint{
color:#fff;
padding:8px 8px;
font:16px Arial,Verdana;
margin:2px;
border:1px solid #00558f;
background:#0282dd;
text-decoration:none
}
.showpage{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#6f6f6f;
color:#fff;
border:1px solid #39312e;
}
.showpage a{
padding:8px 8px;
font:16px Arial,Verdana;
text-decoration:none;
color:#fff;
}
.showpage:hover{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#0282dd;
color:#fff;
border:1px solid #00558f;

}
.showpage a:hover{
padding:8px 8px;
font:16px Arial,Verdana;
text-decoration:none;
background:#0282dd;
color:#cc0000;
}


Modelo 2


/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
margin:10px 0;
color: #000;
font:16px Arial,Verdana;
text-shadow: black 0.1em 0.1em 0.2em;
background: url(http://3.bp.blogspot.com/--wQj1Tqp9Vk/UP4AFU10b5I/AAAAAAAABhI/GRw8IuJP6rA/s1600/background-brushed2.jpg) repeat;
padding: 12px 2px;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

.showpageOf{
background: url(http://4.bp.blogspot.com/-g3XYf26aB-8/UP3bO6t7wAI/AAAAAAAABgY/ihnpEJ5ngBs/s1600/metal.png) repeat;
padding:8px 8px;
margin:0 8px 0 0;
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
.showpageNum a{
padding:8px 8px;
margin:0 4px;
text-decoration:none;
background: url(http://4.bp.blogspot.com/-g3XYf26aB-8/UP3bO6t7wAI/AAAAAAAABgY/ihnpEJ5ngBs/s1600/metal.png) repeat;
border:1px solid #808080
-moz-box-shadow: inset 0 0 2px 2px #888;
-webkit-box-shadow: inset 0 0 2px 2px#888;
box-shadow: inset 0 0 2px 2px #888;
}

.showpagePoint{
padding:8px 8px;
margin:2px;
border:1px solid #808080;
background: url(http://4.bp.blogspot.com/-g3XYf26aB-8/UP3bO6t7wAI/AAAAAAAABgY/ihnpEJ5ngBs/s1600/metal.png) repeat;
text-decoration:none
-moz-box-shadow: inset 0 0 2px 2px #888;
-webkit-box-shadow: inset 0 0 2px 2px#888;
box-shadow: inset 0 0 2px 2px #888;
}
.showpage{
padding:8px 8px;
text-decoration:none;
border:1px solid #808080;
background: url(http://4.bp.blogspot.com/-g3XYf26aB-8/UP3bO6t7wAI/AAAAAAAABgY/ihnpEJ5ngBs/s1600/metal.png) repeat;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
border:1px solid #808080;
background: url(http://4.bp.blogspot.com/-g3XYf26aB-8/UP3bO6t7wAI/AAAAAAAABgY/ihnpEJ5ngBs/s1600/metal.png) repeat;
}

.showpage a:hover{
text-decoration:none;
border:1px solid #808080;
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
.showpageNum a:hover{
background: url(background: url(http://2.bp.blogspot.com/-Jdp2hFOrq0M/UP3cDYLrQII/AAAAAAAABgo/AT2wYsxdnzw/s1600/metal2.png) repeat;) repeat;
border:1px solid #808080;
}

Modelo 3 


/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
margin:10px 0;
color: #fff;
font:16px Arial,Verdana;
text-shadow: black 0.1em 0.1em 0.2em;
background: #000;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 12px 2px;
-moz-box-shadow: 0 0 2px 2px #888;
-webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
}

.showpageOf{
background:#cc0000;
-moz-border-radius: 35px;
border-radius: 35px;
padding:8px 12px;
margin:0 8px 0 0;
}
.showpageNum a{
padding:8px 12px;
color: #000
margin:0 4px;
text-decoration:none;
background:#F9C527;
-moz-border-radius: 35px;
border-radius: 35px;
}

.showpagePoint{
padding:8px 12px;
margin:4px;
background:#1F60F3;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage{
padding:8px 5px;
margin:4px;
background:#ffffff;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
background: #ccc;
}

.showpage a:hover{
text-decoration:none;
}
.showpageNum a:hover{
background: #fff;
}




Mais modelos aqui

21 de jan de 2013

Como descobrir a senha do roteador

Um comentário:


Para descobrir a senha de seu roteador para conectar seu celular, tablet, notbook ou outro aparelho é necessário primeiro entrar no computador ligado ao roteador, o computador central. Uma vez conectado, clique no ícone de acesso a internet, geralmente está na barra, no lado direito do monitor de seu computador.











Abrirá uma janela. Clique então com o botão esquerdo do mouse.





 Abriu então uma outra janela, como essa abaixo. Clique em "Propriedades"


Ao abrir, clique em "Segurança" depois clique em "Mostrar caracteres" . Eis a sua senha.


O meu computador é um HP Pavillon e meu roteador um DLink. Espero que a solução que encontrei para mim sirva para você. Forte abraço.

20 de jan de 2013

Desafixar o cabeçalho do template dinâmico

Nenhum comentário:



Eu até acho legal e tals, o template ter o cabeçalho (header) fixa no blog mas também acho que toma espaço quando o leitor começa a ler o blog e sabem o que penso: o leitor é um cliente de seu empreendimento na internet, por isso, ele vem em primeiro lugar entre um layout lindo e o seu conforto (não estou dizendo que o layout tem que ser deixado de lado).
Para resolver este probleminhja nos templates dinâmicos, eis a solução:




Vá até o "Modelo de seu blog", clique em "Personalizar"
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011




Ao abrir essa janela, vá em Avançar -------> Adicionar CSS 



Cole no local indicado o código abaixo:
/*Desafixar cabeçalho--------------------------------------------*/
#header .header-drawer.sticky, #header .header-bar, #header .header-drawer{
top: 0px !important;
margin-top: 0px !important;
position: relative !important;
}
body.sidebar #main.hfeed #sidebar{
position: absolute !important;
}

#header{
position: relative !important;
}
#header #views{
position: absolute;
}
#header #pages{
left: 110px
}

Instalar hack para postagens expandidas ou em grade

6 comentários:



Coisinhas diferentes no blog, inovações, surpresas para nossos leitores, facilidades...É sempre bom, não é mesmo ? E sair pelo blog clicando em botões, abrindo postes é gostoso, vai dizer que não é ? E que tal se eu te disser que tem como instalar um hack que, ao entrar em seu blog o leitor verá uma grade com seus posts e com um simples clique, abrirá seus posts e o lerá sem precisar ir para outra página. Bom, né ? Legal a bessa. Já estou usando em meu blog de decoração, festas e receitas, o Festa, Sabor e Decoração. Vá lá dar uma olhadinha pra ver como funciona a bagaça, depois, volte aqui e se gostou, instale-o em seu template. :-)

Para que o hack fique completo, a primeira coisa a fazer é implementar este código, caso queira que apareça também os posts em forma de lista. Então primeiro, implemente este hack depois, volte aqui e dê continuidade com essa dica.

Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011









Agora procure por: ]]></b:skin>  



Substitua então pelo código abaixo:


]]></b:skin>
<style>
.date-header span {display:none}.post-header-line-1{display:none;}
</style>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
/*FONT PT Sans Narrow*/
@font-face {
    font-family:&#39;PT Sans Narrow&#39;;
    font-style:normal;
    font-weight:400;
    src:local(&#39;PT Sans Narrow&#39;),local(&#39;PTSans-Narrow&#39;),
url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format(&#39;woff&#39;);
}
/* CSS Switch*/
.switch {
 border-bottom: 6px solid #CC0000;
 height:35px;
 color:#444;
 margin:0 10px;
 padding:5px 9px;
 text-transform:uppercase;
}
.switch-left {
 width:360px;
 float:left;
 margin:0 auto;
 padding-top:5px;
 font:20px PT Sans Narrow;
 text-shadow:1px 1px 0 #000;
 color:$(link.color);
}
.switch-right {
 width:135px;
 float:right;
 margin:0 auto;
 padding-top:10px;
}
.switch a {
 border:1px solid #999;
 font:11px Arial;
 padding:3px 8px 3px 25px;
 text-transform:none;
 color:#aaa;
}
a.bar_view {
 background:url(http://2.bp.blogspot.com/-7BeF7FZiHo0/T6vZzVSzTzI/AAAAAAAABJs/FlrWN7ZRxmk/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(http://1.bp.blogspot.com/-43EW3Gjakwc/T6vZz6K4N_I/AAAAAAAABJ0/hi2LK0zc4JQ/s1600/listed.gif) no-repeat 3px center;
}
.switch a.active {
 background-color:#aaa;
 border:1px solid #999;
 color:#111;
 cursor:default;
}
/* CSS Bar untuk bagian grid */
.bar {
    width:30%;
    height:240px;
    float:left;
    border:1px solid #000;
    display:inline;
    list-style:none;
    margin:5px 0 0 5px;
    overflow:hidden;
    padding: 2px;
    position:relative;  
}
.bar img{
    width:98%;
    float:left;
    height:175px;
    margin:3px  3px;
    }
.bar iframe {
    width:98%;
    float:left;
    height:183px;
    margin:3px 3px;
    }
.bar h3 {
    height:30px;
    border:0 none;
    line-height:8px;
    margin:0 5px 5px;
    padding:2px;
    text-shadow:1px 1px 0 #000;
}
.bar h3 a {
    font:14px PT Sans Narrow;
    text-align:center;
    line-height:16px;
}
.bar h3 a:hover {
    color:#c1541a;
}
.bar .post-body {
   width:98%;
    background:none;
    height:245px;
    overflow:hidden;
    padding:0;
    margin:0 0 .3cm;
}
</style>
</b:if></b:if>




Procure por:

  </head>


Acima dele, cole todo este próximo código e depois salve.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

/*jslint browser: true */ /*global jQuery: true */

/**
 * jQuery Cookie plugin
 *
 * Copyright (c) 2010 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

// TODO JsDoc

/**
 * Create a cookie with the given key and value and other optional parameters.
 *
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Set the value of a cookie.
 * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
 * @desc Create a cookie with all available options.
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Create a session cookie.
 * @example $.cookie('the_cookie', null);
 * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
 *       used when the cookie was set.
 *
 * @param String key The key of the cookie.
 * @param String value The value of the cookie.
 * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
 * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
 *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
 *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
 *                             when the the browser exits.
 * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
 * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
 * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
 *                        require a secure protocol (like HTTPS).
 * @type undefined
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */

/**
 * Get the value of a cookie with the given key.
 *
 * @example $.cookie('the_cookie');
 * @desc Get the value of a cookie.
 *
 * @param String key The key of the cookie.
 * @return The value of the cookie.
 * @type String
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */
jQuery.cookie = function (key, value, options) {
   
    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);

        if (value === null || value === undefined) {
            options.expires = -1;
        }

        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }
       
        value = String(value);
       
        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }

    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/**
 * jQuery switch
 *
 */
jQuery(document).ready(function () {
    var $box=jQuery(".post"),
        $bar=jQuery("a.bar_view");
    $dat=jQuery("a.dat_view");
    $dat.click(function () {
        $box.removeClass("bar");
        jQuery(this).addClass("active");
        $bar.removeClass("active");
        jQuery.cookie("dat_style", 0);
        return false
    });
    $bar.click(function () {
        $box.addClass("bar");
        jQuery(this).addClass("active");
        $dat.removeClass("active");
        jQuery.cookie("dat_style", 1);
        return false
    });
    if(jQuery.cookie("dat_style")==0) {
        $box.removeClass( "bar");
        $dat.addClass("active")
    } else {
        $box.addClass("bar");
        $bar.addClass("active")
    }
});
//]]>
</script>



Depois de ter salvado as modificações acima, agora clique em "Expandir modelos de widgets"





Procure agora por:

<b:section class='main' id='main' showaddelement='no'>

Acima dele, cole o próximo código:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='switch'>
  <div class='switch-left'>
    <span style='color: #CC0000;'>Postagens</span> Recentes
  </div>
  <div class='switch-right'>
    <a class='bar_view' href='#'>Grade</a>
    <a class='dat_view' href='#'>Lista</a>
  </div>
</div>
</b:if></b:if>




Procure por:

<b:includable id='nextprev'>

Abaixo dele cole o seguinte código:


<div class='clear'/>


Procure então por

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

 Ou por

 <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

E troque-o por:

  <div class='post bar  hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>




Salve as modificações e veja como ficou.

Crédito: http://fobbleup.blogspot.com.br/

Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube