Adicionando LeftSideBar Ao Template Do Blogger Minima Template

Webmaster Tools Ajuda Blogger Help Dicas Tips & Trics Tutorial Ensinando Como Colocar coluna à Esquerda no Template Minima do Blogger


Antes de fazer alterações ao Template do Blogger, faça um backup do template.
Vá a Template -> Edit HTML. Click the “Download Full Template” e salve uma copia do template.

Procure pelo código HTML: ( use CTRL F) clique em PRÓXIMO ou LOCALIZAR)

#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Copie o código abaixo e cole logo abaixo do código acima:

#left-sidebar-wrapper { width: 200px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Procure este código abaixo:

#main-wrapper {   width: 410px;   margin-left: 25px;   float: $startSide;   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */   }

Adicione o trecho em vermelho.

Agora, vamos ajustar os valores que definem o template, para o ajustar ao nosso novo modelo. Troque os valores atuais pelos valores destacados a azul:

#outer-wrapper {   width:980px;   margin:0 auto;   padding:10px;   text-align:$startSide;   font: $bodyfont;   } #main-wrapper {   width:525px; margin-left: 25px;   float: $startSide;   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */   } #sidebar-wrapper {   width: 200px;   float: $endSide;   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */   overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */ } #left-sidebar-wrapper { width: 200px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Procure pelo código <div id='main-wrapper'> e  cole o código abaixo, imediatamente acima.

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

Para retirar a borda do cabeçalho, procure pelo código abaixo e modifique o que está o trecho de forma a ficar como selecionado a azul:

#header-wrapper {   width:980px;   margin:0 auto 10px;   border:0px solid $bordercolor;   } #header-inner {   background-position: center;   margin-left: auto;   margin-right: auto; } #header {   margin: 5px;   border: 0px solid $bordercolor;   text-align: center;   color:$pagetitlecolor;

Agora convém ajustar os valores do footer do template do Blogger.

Procure pelo código abaixo e altere

#footer {   width:980px;   clear:both;   margin:0 auto;   padding-top:15px;   line-height: 1.6em;   text-transform:uppercase;   letter-spacing:.1em;   text-align: center; } #footer-column-container { border: .3px dotted #cccccc;}

Clique em Salvar modelo.

Agora clique em "Layout". Agora já pode adicionar elementos de página (widgets) na nova barra lateral esquerda.

Ajuda Blogger Swap Títle Position Increase PageRank

DICAS WEBMASTER BLOG BLOGGER BLOGSPOT TOOLS
Ajuda do Blogger - Swap Títle Position Increase Google PageRank - Mude a Posição do Titulo do seu blog e aumente o Google PageRank

Troque a posição do Endereço do Blog com a posição do título do post, como explicado abaixo:
 
Antes:

caos caslas network: Ajuda Blogger - Swap Títle Position Increase PageRank


Depois:

Ajuda Blogger-Swap Títle Position Increase PageRank | caos caslas network

Como efectuar este Hack?

Siga estes simples passos:


1. Entre na sua conta do Blogger.

2. Selecione a opção de Layout (Esquema) do seu blog, blogspot Blogger.

3. Vá a Editar HTML.

4. Sob o modelo de caixa de edição, encontrar este código abaixo a vermelho:
(Importante: Antes de efecuar quaisquer alterações faça um Backup do seu Blog)

<title><data:blog.pageTitle/></title>

Substitua por este código Abaixo a azul

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Grave as alterações efectuadas no template do seu blog, abra uma pagina do seu blog e veja a magia acontecer. (Importante: Antes de efecuar quaisquer alterações faça um Backup do seu Blog)

Como Criar Blogger NavBar Horizontal Menu?

DICAS WEBMASTER BLOG BLOGGER BLOGSPOT TOOLS

Como Criar um Menú Horizontal Para o Seu Blogspot / Website


O menu é uma lista de links que organiza e agrupa os principais links do blog de forma a melhorar a navegabilidade de um blog website e ajudar o leitor a encontrar facilmente o que procura.

Neste excelente menu concentrarmos os links da homepage, contacto, conteúdo mais discutidos ou vistos entre outros links. Além destes benefícios, o nosso blog fica mais atractivo, profissional, elegante e convidativo. Atraindo assim, novas visitas.

Como Instalar a NavBar no Blogger?

1)Aceda ao painel do Blogger

2)Vá em "Layout"->"Editar HTML"

3)Procure pelo seguinte código utilize "Ctrl e F": 

</head>

Antes do código acima insira o próximo (pode alterar o tamanho da letra mudando o cod abaixo a vermelho e o tipo de letra, mudando o cod a azul): 

<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 100px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->
4)Salve as alterações

Instalando o Gadget

1)Vá agora a "Layout"->"Elementos da página"->"Adicionar um Gadget"->Selecione "HTML/JavaScript"

Como conteúdo insira o seguinte código alterando de acordo com as notas abaixo: 
<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://onomedoseublog.blogspot.com/">Seu Blog Title</a></li>
</ul>

Importante: No lugar do "#" deve colocar a url dos links do seu blog, o texto a vermelho deve ser substituido pelo titulo das páginas dos links que adicionar ao menu horizontal do seu blog. Altere de acordo com a url dos links escolhidos.

2)Salve as alterações e visualize. Veja o nosso blog exemplo: Free World Tech

Submeta 2Sitemaps Do Blogger Nas Google Webmaster Tools

CAOS CASLAS NETWORK WEBMASTER TOOLS DICAS JUDA BLOGGER HELP Search Engine Optimization (SEO), aprenda a criar Submeter sitemap pra o seu blogger e a submeter nas Google Webmaster Tools.

O que é Sitemap?

Sitemap é um arquivo tipo XML com metadados como (a última atualização, frequência de altualizações, relevância a outras URLS etc). de um Website ou blog que são relevantes para motores de busca, optimizando os resultados nas buscas, melhorando a a forma como os crawl robots rastreiam o seu Blogger Website.

Criando seu Sitemap

1- Passo: Registe o seu blog Website no Google Webmaster Tools.

2- Passo: Clique em "Verificar" e escolha a opção "Adicionar uma meta tag".

3- Passo: Copie o código fornecido e entre no Blogger > "Layout/Editar HTML" do blog e cole o código logo apos a tag .
<Head>

4- Passo: Volte às Google Webmaster Tools e finalize o processo de verificação, feito isto clique em "adicionar um sitemap" no menu lateral.

5- Passo: Escolha a opção "Incluir Sitemap" No campo onde pede a URL coloque (este é o Sitemap que vái dar a frequência de actualizações do seu Website):

feeds/posts/default?orderby=updated

Este é o meu Sitemap:
http://caos-caslas-network.blogspot.com/feeds/posts/default?orderby=updated

6- Passo: Clique em "enviar" e tem o sitemap submetido nas Ferramentas para Webmasters do Google (Google Webmaster Tools)

Agora vamos submeter o sitemap das páginas do seu Blogger Website nas Ferramentas para Webmasters do Google (Google Webmaster Tools)

Proceda exactamente da mesma forma e insira na caixa
atom.xml?redirect=false&start-index=1&max-results=100

Este é o meu Sitemap:
http://caos-caslas-network.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=100

Para inserir mais de 100 posts, você terá que que trocar o start-index para 101, quando publicar mais de 100 postagens ai você terá que criar um terceiro sitemap com start-index de 201 e assim sucessivamente.