domingo, 9 de maio de 2010

Barra de Navegação CBlogger

Eaee o pessoal! Agora nosso site tem uma barra de navegação para seu navegador Firefox \o/ .Eu criei essa barra em um site ae muito rox =D.Estava eu, visitando os sites dos meus parceiro, então foi no Kaytros que achei isso.HAHA pensa que eu te deixarei na mão visitante? nada disso, em breve estarei fazendo um tutorial bacana de como adquirir sua barra!Adicione nossa barra de navegação pro firefox e fique mais próximo da gente! Apenas clique nesse enorme botão a cima FREE DOWNLOAD!
toolbar powered by Conduit

Marcadores: , , ,

Mini Barra de Navegação no Blogger

http://www.clker.com/cliparts/3/b/0/d/12065698671516857163pitr_red_menu_icon_set_2.svg.med.pngVocê ja deve ter visto aquele botão  TOPO DA PAGINA com imagem em alguns blog não? então estou disponibilizando o código aqui pra vocês.A imagem dos botões são pequenas, mas você poderá substituir por outra à sua escolha,procurando ícones .png no google images ou criando seu próprio e hospedar na interner, alguns sites recomendados são imageshack.us ou tinypic.com. =)



 


em Layout - Editar HTML

Procure (ctrl + f) por </body>

Cole o codigo abaixo logo ACIMA dele


<style type='text/css'>
<!--
#mininavbar
{
display:scroll;
position:fixed;
bottom:1px;
right:1px;
z-index:99;
}
#mininavbar a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mininavbar img
{
border:0;
}
#mininavbar a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
-->
</style>
<div id='mininavbar'><a href='#'
onClick='window.location.reload()' title='Atualizar
página'><img
src='http://soulouko.googlepages.com/refresh.png'/>
</a><a href='http://URL_do_seu_blog.blogspot.com/'title='Página principal'><img
src='http://soulouko.googlepages.com/house.png'/></a><a
href='#' title='Ir para o topo da página'><img
src='http://soulouko.googlepages.com/topopg.png'/></a><a
href='#finalpg' title='Ir para o final da
página'><img
src='http://soulouko.googlepages.com/down.png'/></a></div>
<a name='finalpg'/>

Notas

Na parte destacada de
Vermelho coloque a URL do seu blog 
Azul escuro - imagem do botão Atualizar, você pode trocar por outra substituindo a URL
Roxo - imagem do botão Inicio , pode substituir tambem
Verde - imagem do botão Topo da página , pode substituir tambem
Rosa -  imagem do botão Fim da pagina , pode substituir tambem
  

Depois visualize e se estiver tudo bem, salve!




Marcadores: , , , ,

Navegação em Páginas Numeradas

Page Navigation 
Menu Widget

Quetal um desses na sua página? Esse é um ótimo navegador de páginas numeradas
para seu blog (blogger)!


1: Entrar na sua conta Blogger e vá para seção de Layout - Elementos da página.

2: Na janela que abriu, escolha HTML / JavaScript.
 
3: Agora adicione  esse Javascript nessa janela.



<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>
<script type=”text/javascript”>
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;
var isLablePage = thisUrl.indexOf(“/search/label/”)!=-1;
var isPage = thisUrl.indexOf(“/search?updated”)!=-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 pageCount=5;
var displayPageNum=3;
var firstPageWord = ‘First’;
var endPageWord = ‘Last’;
var upPageWord =’Previous’;
var downPageWord =’Next’;
var labelHtml = ‘<span class=”showpageNum”><a href=”/search/label/’+thisLable+’?&max-results=’+pageCount+’”>’;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=”){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = ‘/search/label/’+thisLable+’?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
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+’T00%3A00%3A00%2B08%3A00&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){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +’</a></span>’;
}else{
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 += ‘&nbsp;<span class=”showpagePoint”><u>’+thisNum+’</u></span>’;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+’1</a></span>’;
}else{
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++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ‘<span class=”showpage”><a href=”/”>’+ firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+labelHtml + firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}
}
html = ‘<div class=”showpageArea”><span style=”padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-” class=”showpage”>Page ‘+thisNum+’ of ‘+(postNum-1)+’: </span>’+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += ‘<span class=”showpage”><a href=”‘+htmlMap[htmlMap.length-1]+’”> ‘+endPageWord+’</a></span>’;
}
if(postNum==1) postNum++;
html += ‘</div>’;
if(isPage isFirstPage isLablePage){
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;
}
}
}
</script>
<script src=”/feeds/posts/summary?alt=jso
n-in-script&callback=showpageCount&max-results=99999″ type=”text/javascript”></script>
<div style=”text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;”> <a href=”http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html”>Grab this Widget ~ Blogger Accessories</a></div>

Após adicionar este Javascript você precisa arrastar e soltar o widget abaixo dos posts do Blog .Veja esta captura de tela

Page Navigation Menu Widget


Notas

No código acima você pode editar as linhas em vermelho.

PageCount var = 5;

O dígito em vermelho representa o número de postos de trabalho para ser mostrado em uma única página.
Altere o dígito para mostrar quantas páginas você quiser.

 
displayPageNum var = 3;

 
Esse representa o número de páginas a serem listados.

 
Depois salve o seu modelo e pronto! =D


© http://www.bloggerdummies.com/

Marcadores: , , ,