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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn9XqbKBKBDDyYE_-12gP_epqAjsq_Nwxe3jy5956vU9ZksASwA4zqVIG2OrhczLP3ofPgz-gU_Y3XoDVO9aNbbajzbGIAsgdMUfHxIWwHuhE-4ytPLHraob74MNMWEpvCummGqspcF_Q/s1600/prev.png) center;
z-index:100;
cursor:pointer;
}
#carousel #next_button{
position:absolute;
right:0;
width:35px;
height:330px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwX4TkxCigeNQK6699EKQRRgupnkKsWBJ4op-YarithGON1vwTvZwP9aJZrnK790qJdzsQ4aDGeMJwWD4-bIgvwsjjJuYgpyaa_jJzsn4Tki1WKPvQbRLuy9UdRvbdJnjkm5QZaoGMKw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQsqYpx8TWvq-O8sCI_3LeRmuEaCbSe5R1NkJgiXCNY3qAgy4Sh1ofl1-vDFpDa_vDDeH6LMicPIZ-0S1VMR20bbIxy-1y2IP0TgkNHgh1Zr_HmyUsa-sSpkJLyLzzqS3vr4WPXOjSICY/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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVZMQWJj_ljVzRtj67dNslIGtOkS9w_hv675FddBcASa4d1G6Qi_KzhFRyWaabqF1EUYuQxe_YME0iaktKf2csyBoO8BzbnD_Gsx4BXsrjxsw-JKOpNz8IMQjwinauRryY454D_Rin8QE/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnE6V3elLsZ6Z7n2B87CeeJqmlWime5DbKhj7idclMtAa70QAFvJ7s15O33naG31-o4CNqgb5bdo2IQKjxCpPS39fToHj1Mo2BaBB9_sxrLKvi_M87piN32jayWt6P89y6irYAugp0gbI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuqVxBf5xJDNWZMBfQGDOgNVTlaqIR8AHA6xU-iWBUIUAfjMo99nfu8Vh8aBWjlrTB524mdphFcugDZl4Bku4yltpiKzcffdIPO8xQMeU7BWUqBYFZxO3007l0IEwVpNR9dvpQHJBSyo/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtk47tScUdxImSngDQVCn03GZ5HdhwLyXkd2isUS4MpNP8rfWcBLtPaAqF6qm_ziuKWmaTwsgQHRdC4BguTTyKb0gkITEKg9zQArhKJP6otIRNTRfTo-U912OsZjswl2kBTC7PFVof47Y/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkU_Oi3xlliNmT2oubbFcL_DpadgnRRo1J1IOP2wEA6_NxhClR04CuvvOlUtmzEbZet7vaMLe5j2jwGs6tM-EijOO8WaOjsHvXmYPe1FzIn69EcEG8gZC9OmB9bTn5E_UhmHEYyPJ7vSI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEj-fPKlAziPPXqn_fdVBZx-qLPcnbWXP09dFUXz9S3G2UPJ2Gy1ii5EuR_yCXBNzB4ciXIKxbfPbdOe4pudGsfAf2omMVqRnSTiGUTtiEQRgK9wfZnYg0We75nUYNcedRLVYmIx3R70/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHVLNTtQVSnUdC2ysmn8vhtkJu6gCiRcJa4IqiDnVK_TaY4jqHXzmwJdZuF9wYdv_adpQxeDsfFXo3Cayh9UqzdDlz1DU-9lMh5ou-221S5JMGFflgwXbQtCq7GfCrJO-FAh1FKmycmM/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7O6zG-ctacFBZOuSLrl4l5apr9_MtQe-GZ7iOqvQYJvjcDheKt-Lx3GwtOnYKCe8AKR89zc9erLLuV4Tdawy6tjPCIhyeKprhE1UuhvkVgkYlxpuYsZDrUz41OJfXYDnMKVL0nm4bDhc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_yi02ckKqOtsxGSJCSwDI2MClaziQ9L5Pi6PBeAP4DTcwXiuMPYqRnMdighYUnTx5q9GGV_ThK-vqjcYHH_qkefFV96u3J1toSrwtxbqhHd-rKKcpCuQXIe2nFL3r7mEbUDlwYn_8MII/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
border:1px solid #808080;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDANyFFX784OLVKJjwflII4xGqvTdaybR4HRwN_3gnvngR2yw4_99NJO5x8CyfCApI4DiNWi9rXLtaL6k9tVizsULnU60oh0yMZpcsKSK_MOfCI-AaTb6VsNOJly_Blp72evOYEu9rCNM/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.

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