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.

Site Content Analyzer Download

CAOS CASLAS NETWORK - WEBMASTER BLOGGER MARKETING TOOLS SOFTWARE DOWNLOAD - Site Content Analyzer 3.2.25.79 Download

Site Content Analyzer - uma ferramenta profissional para analizar o conteúdo de sites. Ele permite que você olhe conteúdo do site, e depois encontrar maneiras de usar a estratégia de palavras-chave e encontrar chaves que são consideradas fracas e utilizar frases otimizadas que chamam atenção do navegante.

RapidShare Download

Webmaster Free Tools Xinu

CAOS CASLAS NETWORK - FERRAMENTAS WEBMASTER - WEBMASTER SEO BLOG WEBSITE WORDPRESS TOOLS

Nós que trabalhamos na Internet sabemos a importância que tem conhecer os números das nossas páginas nos Motores de busca (Search Engines). Clássicas ferramentas como as Seomoz Webmaster Tools e o website.grader.com ajudam-nos a melhorar os problemas dos nossos sites para permitir que sejam mais acessíveis e mais fáceis de rastrear no Search Engines Crawling.

A ferramenta que lhes recomendo hoje é o Xinu, uma das minhas preferidas, capaz de mostrar vários números numa mesma página, dando uma idéia geral da qualidade e autoridade do site (Page Rank, posicionamento Yahoo, Live - MSN -Moreover - Bing e posicionamento nas Redes Sociais social Network Links: Technorati, Delicious, Digg... e ainda Rank Dmoz e outros

Backtype siga os comentários da Web

CAOS CASLAS NETWORK - BACKTYPE - Webmaster Tools - Internet, Blogs, Blogger, Wordpress, Webs, Web2.0, Marketing Tools

Se quer ficar actualizado sobre todos os comentários que se realizam sobre um tema determinado, pessoa, Blogue ou web expecifíca, esta aplicação é de utilidade e a indicada.

Backtype é um serviço que nos da a possibilidade de seguir os comentários que se façam sempre que estejam associados a uma url determinada.

A ferramenta pode ser utilizada como rede social, permitindo receber os comentários dos nossos contactos. Desta forma podemos estar subscritos a aqueles usuários que fazem comentários inteligentes em diferentes sites ou redes sociais, por exemplo.

O serviço é gratuito, mas é necessário ter feito um cadastro para poder configurar as notificações e subscrições. Durante o cadastro podemos adicionar todas as urls dos sites que seguimos para que fiquem cadastradas no nosso painel de controle.

Backtype Link

b2evolution Blogging Tools Download

CAOS CASLAS NETWORK - WEBMASTER TOOLS - FREEWARE BLOG TOOLS - b2evolution Blogging Tools Download

Que tal criar os seus próprios templates e dar um style mais cool ao seu blogue? O b2evolution funciona em Windows e trata-se de um sistema de gerenciamento de conteúdos web, permite desenvolver diversos modelos e mudar o design do blog quando quiser e tem a vantagem de se Freeware.

Desenvolvido na linguagem PHP, o b2evolution funciona com banco de dados MySQL. Nesta versão do sistema, o ustilizador encontra opções para gerenciamento de vários blogs em simultâneo. Além disso, ainda tem a vantagem de poder usar um validador da linguagem XHTML para os posts.

O sistema é indicado para utilizadores com afinidade com programação web. Contudo, o software ajuda os utilizadores que querem se arriscar: O b2evolution dispõem de um bê-á-bá com dicas que auxiliam a configuração.

b2evolution Download

Webmaster Tools LinkedIn Web2.0

CAOS CASLAS NETWORK Apresenta Webmaster Tools - LinkedIn Web2.0 - CssTypeSet, Corkdump, Scout, BgPaterns, Free Icons Download, FontStruct, Multiply.com

Este artigo, LinkedIn Web2.0, é dedicado a dar a conhecer algumas ferramentas, Tools disponíveis na Internet que poderão auxiliar os Webmasters a desenvolver, melhorar os seus Websites/Blogs ou até somente dar-vos a conhecer alguns serviços da infindável Web 2.0

CSS type set - é um serviço onde o Blogger, Webmaster, pode costumizar a letra á sua vontade enquanto lhe é devolvido o código CSS (Cascading Style Sheets ) necessário para obter os resultados que pretende. É a meu ver um utilitário bastante interessante e útil. CSS type set Linkk

Corkdump - é um serviço onde o Webmaster pode encontrar inumeras fontes de informação para web design. Corkdump é especialmente voltado para a ajuda com o código, HTML, PHP, XHML, CSS, etc… Corkdump Linkk

Skout - é um serviço onde podemos encontrar practicamente tudo para WebDesign, Fonts, cores, icons, sons, etc… É um bom ponto de partida para a começar e onde provavelmente irá encontrar o que procura. Skout Linkk

BgPatterns - é um serviço onde o utilizador pode criar, partilhar e encontrar inúmeros tipo de Background Patterns. BgPatterns Linkk

Free Icons Download - é um serviço onde o utilizador pode encontrar e publicar icons, para que outros utilizadores possam também disfrutar dos mesmos. Free Icons Download Linkk

FontStruct - Trata-se de um serviço onde o utilizador pode criar, partilhar e encontrar inúmeros tipo de Fonts. FontStruct Linkk

Multiply.com - Trata-se de um serviço que permite que o utilizador, e nem é necessário ser Webmaster, crie de uma forma muito simples, Blogs, Websites, e até mesmo a sua própria comunidade (Social Network). Multiply.com, permite publicar: Textos, Imagens, audio e video que até pode ser YouTube Video, e ainda pode se utilizado para gerar Backlinks.

Exemplo de um Site Multitly.com

A nivel de Web2.0, existe um sem nº de serviços e por isso, por ora, ficamos por aqui.

Ver: GoogleWave-Gmail+Picassa+Chat Juntos

COnveyThis-Free-Website-Translation-widget

Top Social Bookmark Tools Addtoanny

ZoundryRaven Freeware Download Tools

Best Statistical Web Markting Data Tool Google Ad Planner

University of People elearning para todos

AJAX (Asynchronous JavaScript and XML) Como começar