Template Scrap Ilhoes

Template em 3 colunas, posts resumidos, data costumizada.

Veja o template instalado

Donwload/Pegar código

»»Leia mais...

Template Estrelas Douradas

Template com 3 colunas, 'Leia mais' já incorporado e sistema de comentários e datas nas postagens costumizados.



Agora sim, ele está reformulado e certinho para o Explorer e o Mozilla.

Ver o template instalado

Download/Pegar código

»»Leia mais...

Template Rosa Scrap

Template feito no Paint Shop 3. Possui 3 colunas., o sistema de comentários já está decorado e já vai com o "Leia mais..." instalado.

Lindinho, para pessoas que gostam de blogs com um layout "romântico".

Visualizar blog
Download/Pegar código

»»Leia mais...

Formulário para email hospedado no Blogger

Esse eu testei e é bom demais ! Chega quentinho, é escrever, enviar e chegar.

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.

Para colocar um formulário de email vá até o HTML de seu blog e procure pelo código:

< /head >

Antes dele cole o seguinte código:

<script type='text/javascript'>
//<![CDATA[
function valid(form) {
var field = form.email;
var str = field.value;
if (window.RegExp) {
var reg1str = "(@.*@)(\.\.)(@\.)(\.@)(^\.)";
var reg2str = "^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3}[0-9]{1,3})(\]?)$";
var reg1 = new RegExp(reg1str);
var reg2 = new RegExp(reg2str);
if (!reg1.test(str) && reg2.test(str)) {
return true;
}
field.focus();
field.select();
return false;
} else {
if(str.indexOf("@") >= 0)
return true;
field.focus();
field.select();
return false;
}
}
//]]>
</script>

Agora vá no seu editor de textos (local onde você escreve as postagens) e cole o seguinte código:

<form action="http://girlyblogger.site90.net/email.php" method="post" name="myform" onsubmit="return valid(this)"><input type="hidden" name="recipient" value="AQUISEUEMAIL@gmail.com"><input type="hidden" name="subject" value="Contato vía e-mail"><input type="hidden" name="redirect" value="http://NOME DO SEU BLOG AQUI.blogspot.com">
Nome (obrigatorio):<br><input type="text" size="30" name="realname"><br>
E-mail: (obrigatorio, no será mostrado)<br><input type="text" size="30" name="email"><br>
Sitio Web:<br><input type="text" size="30" name="website" id="website"><br>
Sua mensagem:<br>
<textarea cols=40 rows=6 name="Comments" wrap="soft"></textarea>
<input type="submit" value="Enviar"> <input type="reset" value="Limpar">
</form>

*Se preferir cole o segundo código no HTML/Javascript

Créditos: Zona Cerebral

»»Leia mais...

Colocando efeito de "arco-íris em movimento" nos links

Ontem me pediram esta dica, então aí está.

Veja AQUI como fica o efeito clicando nos títulos do slide.

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.

Para ter esses efeitos em seus link, vá até o HTML de seu blog e procure pelo código:

]]></b:skin>

E depois dele cole este código abaixo e salve.

<!-- INÍCIO DO SCRIPT LINKS COLORIDOS-->

<script type='text/javascript'>
// <![CDATA[
var rate = 20; // Increase amount(The degree of the transmutation)


////////////////////////////////////////////////////////////////////
// Main routine

if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID


if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}


//=============================================================================
// doRainbow
// This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}


//=============================================================================
// stopRainbow
// This function stops to change a color.
//=============================================================================
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}


//=============================================================================
// doRainbowAnchor
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


//=============================================================================
// stopRainbowAnchor
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


//=============================================================================
// Change Color
// This function changes a color actually.
//=============================================================================
function ChangeColor()
{
objActive.style.color = makeColor();
}


//=============================================================================
// makeColor
// This function makes rainbow colors.
//=============================================================================
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}
// ]]>

</script>

»»Leia mais...

Imagem, chats, menus e o que quiser fixo no template

Com este código é possivel colocar uma imagem em seu blog que com a rolagem do blog, esta fique parada em um só local.

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.

Vá até o HTML do seu blog e procure pelo código:

]]></b:skin>


Agora cole o código abaixo.

#float_corner {
position:fixed;
_position:absolute;
bottom:0px;
left:0px;
clip: inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);
}

Agora procure pelo código:

<div id='outer-wrapper'><div id='wrap2'>

Depois dele cole o código abaixo colocando no local indicado o endereço de sua imagem.

<div id='float_corner'>
COLOQUE AQUI O QUE QUISER QUE FIQUE FIXO
</div>

»»Leia mais...

Como hospedar vídeos no Blogger

Se você quer hospedar seus vídeos no Blogger é fácil, mas demoooooooooooora !!!!!!

Abra o editor de textos (local onde você escreve suas postagens)

Clique então neste pequeno ícone   na barra de ferramentas. Abrirá uma janela como essa abaixo. Clique em "Escolher um vídeo para enviar" abrirá uma janela. Procure então o vídeo que vc quer colocar.

Quando vc clicou abriu o browser do seu pc. Escolha então o vídeo que vc quer subir e de dois cliques com o botão esquerdo do mouse.

Perceba que apareceu uma inscrição. Clique então em "Fazer upload" e deixe carregando.

Agora espere...espere...Z ZZ Z ZZ ZZZ...

»»Leia mais...

Template Scrap Listras

Template em 3 colunas, todas dentro do scroller. Para ficar mais apresentável, fiz um menu que se expande em imagens para a coluna a esquerda.

Ver o template instalado

Pegar código/Download

Depois que tiver instalado o template, copie este código e cole no HTML/Javascript e deixe o widget na coluna a esquerda.

<script type="text/javascript">
function showDiv(objectID) {
var theElementStyle = document.getElementById(objectID);
if(theElementStyle.style.display == "block"){
theElementStyle.style.display = "none";
}else{
theElementStyle.style.display = "block";}
}
</script>
<style type="text/css">
#TW-feed, #TW-feed ul {list-style:none; margin:0px; padding:0px}
#TW-feed li ul {display:none;position:absolute;background-color:transparent;padding:3px;}
#TW-feed li {font-weight:bold; color:#EC8132;}
#TW-feed ul li {padding-bottom:3px;}
</style>
<div onmouseover="showDiv('TW-Pop');return false;" onmouseout="showDiv('TW-Pop');return false;">
<ul id="TW-feed">
<li> <img border="0" src="http://img507.imageshack.us/img507/3705/menu.gif"/>
<ul id="TW-Pop">

<li><a href="AQUI O ENDEREÇO DO SEU BLOG" rel="alternate" title="Página principal"><img alt="Início do meu blog" src="http://img527.imageshack.us/img527/527/homej.gif"/></a>
</li>

<li><a href="AQUI O ENDEREÇO DO LINK PARA PARCERIA" rel="alternate" title="Parceiros deste blog"><img alt="Clique e conheça meus parceiros" src="http://img527.imageshack.us/img527/4715/parceriap.gif"/></a>
</li>


<li><a href="AQUI O ENDEREÇO DO LINK PARA ETC" rel="alternate" title="Coisinhas"><img alt="Clique-me e veja..." src="http://img151.imageshack.us/img151/9369/etc.gif"/></a>
</li>

<li><a href="AQUI O ENDEREÇO DO FEED" rel="alternate" title="Clique e se inscreva no meu Feed"><img alt="Clique e se inscreva no meu Feed" src="http://img151.imageshack.us/img151/6200/feed.gif"/></a>
</li>


</ul></li></ul></div>

»»Leia mais...

Adicionando marcadores em seu Blogger

Postagem refeita para o novo Blogger



AQUI


Para colocar os marcadores em seu blog há duas coisas a fazer.

1-Adicionar o widget em seu blog.

2-Sempre que postar algo já selecione ou escreva uma palavra para o marcador.









Então faça assim:

1-Clique em "Layout"
2-Clique em "Elementos de página"
3-Clique em "Adicionar um Gadget"
3-Clique em "Marcadores"
4-Agora clique em "Salvar"
Bom, o widget vc já tem. Agora vamos colocar os marcadores em seus posts.


Depois que você fez a sua postagem, note que há um espacinho em branco ao pé de onde vc escreve. É aí que vc escreverá as palavras para "demarcar" suas postagens.

Prontinho, agora é só separar seus posts por assunto.

»»Leia mais...

Colocando outra coluna no Blogger

Para a pequena do MSN que sempre me pergunta, dedico essa tutorial e espero que você entenda. Para você florzinha.:-)

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.

*Que fique claro que esta tuto se aplica ao modelo "MINIMA" do Blogger.


A primeira coisa a fazer é ir até o HTML do seu blog.

A segunda coisa a fazer é salvar uma cópia de seu template, caso não dê certo, reinstale o template e inicie o processo.

Agora procure pelo código:
*Pode ser que esteja um pouquinho diferente em seu blog, mas se atente aos comandos que aqui coloquei em negrito.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background: #ffffff;
width: 950px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}
#main-wrapper {
width: 640px;
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 */
}
#sidebar-wrapper {
width: 300px;
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 */
}
/* Headings
----------------------------------------------- */


Agora substitua tudo por:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 980px;
margin:0 auto;
padding:10px;
text-align:left;
background: #ffffff;
font: normal normal 100% Georgia, Serif;
}
#main-wrapper {
width: 500px;
margin: 2px;
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 */
}
#sidebar-wrapper {
width: 220px;
margin: 2px;
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 */
}
#newsidebar-wrapper {
width: 220px;
margin: 2px;
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 */
}

/* Headings
----------------------------------------------- */

SALVE !
*se não quiser o fundo branco, apague o código que está na cor vermelha.



Agora copie este código:

<div id='newsidebar-wrapper'>

<b:section class='sidebar' id='newsidebar' preferred='yes'/>

</div>

Se vc quer as colunas ao lado uma da outra cole o código acima (ANTES) de:

<div id='sidebar-wrapper'>





Se quer as colunas em lados opostos cole o código acima (ANTES) de :

<div id='main-wrapper'>


Agora salve.

Sua header (cabeçalho) ficou pequena ?
Substitua:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Por:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

O footer ficou pequeno ?
Substitua :
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Por:

/* Footer
----------------------------------------------- */
#footer {
width:980px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

»»Leia mais...

Menu em abas com o script hospedado no Blogger

Sei que você já viu esse menu no Plugins Dicas e Templates, mais dei uma complementada e eis o que deu. Um menu em abas para o seu Blogger com o script hospedado em seu próprio Blogger. Sem essa de hospedar aqui ou ali. Sabem como é, esses serviços gratuitos saem da rede de uma hora para a outra e deixam os clientes chupando o dedo. Então vamos lá:

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.

Vá até o HTML do seu blog e procure pelo código:

]]></b:skin>




Agora cole o código abaixo dele.

<script type='text/javascript'>
//<![CDATA[

/*==================================================
$Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
tabber.js by Patrick Fitzgerald pat@barelyfitz.com

Documentation can be found at the following URL:
http://www.barelyfitz.com/projects/tabber/

License (http://www.opensource.org/licenses/mit-license.php)
Copyright (c) 2006 Patrick Fitzgerald

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

==================================================*/

function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}
tabberObj.prototype.init = function(e)
{
var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;
if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
for (i=0; i < this.tabs.length; i++) {
t = this.tabs[i];
t.headingText = t.div.title;
if (this.removeTitle) { t.div.title = ''; }
if (!t.headingText) {
for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {
t.headingText = i + 1;
}
DOM_li = document.createElement("li");
t.li = DOM_li;
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
DOM_a.tabber = this;
DOM_a.tabberIndex = i;
if (this.addLinkId && this.linkIdFormat) {
aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
DOM_a.id = aId;
}
DOM_li.appendChild(DOM_a);
DOM_ul.appendChild(DOM_li);
}
e.insertBefore(DOM_ul, e.firstChild);
e.className = e.className.replace(this.REclassMain, this.classMainLive);
this.tabShow(defaultTab);
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}
return this;
};
tabberObj.prototype.navClick = function(event)
{
var
rVal,
a,
self,
tabberIndex,
onClickArgs;
a = this;
if (!a.tabber) { return false; }
self = a.tabber;
tabberIndex = a.tabberIndex;
a.blur();
if (typeof self.onClick == 'function') {
onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
if (!event) { onClickArgs.event = window.event; }
rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}
self.tabShow(tabberIndex);
return false;
};
tabberObj.prototype.tabHideAll = function()
{
var i;
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
div = this.tabs[tabberIndex].div;
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);
return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, '');
this.navSetActive(tabberIndex);
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = this.classNavActive;
return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = '';
return this;
};
function tabberAutomatic(tabberArgs)
{
var
tempObj,
divs,
i;
if (!tabberArgs) { tabberArgs = {}; }
tempObj = new tabberObj(tabberArgs);
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;
if (!tabberArgs) { tabberArgs = {}; }
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}

if (typeof tabberOptions == 'undefined') {
tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
}

//]]>
</script>

Agora copie este código, que é o código que dará estilo ao seu menu é cole acima de:



]]></b:skin>

/*Tabber ---------------------------------*/
#tabsidebar-wrapper{
width: 300px;
float: right;
border: 1px none #CCC;
margin-bottom: 15px;
}
.tabberlive .tabbertabhide {
display:none;
}
.tabber {
display:none;
}
.tabberlive {
margin-top:1em;}
.tabber h2 {
border-bottom:2px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}
.tabber .widget {
margin-bottom: 1em;
}
.tabber .widget-content {margin: 0 5px;
}
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid #CCC;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em;
margin-right:2px;
border: 1px solid #CCC;
border-bottom: none;
background: #EEE;
text-decoration: none;
}
ul.tabbernav li a:link {
color:#369;
}
ul.tabbernav li a:visited {
color: #369;
}
ul.tabbernav li a:hover{
color:#00F;
background: #CCC;
border-color: #CCC;}
ul.tabbernav li.tabberactive a{
background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{
color: #369;background: #FFF;
border-bottom: 1px solid #FFF;
}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;
}
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}

Agora, copie o próximo código, este que será onde vc colocará os links para o seu menu em abas, vá até o HTML/Javascript e cole o código fazendo as alterações. Onde está na cor vermelha coloque o conteúdo do que vc quer que vá dentro.

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Populares' type='PopularPosts'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'>
<b:widget id='Gadget1' locked='false' title='Comentários' type='Gadget'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab4' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML555' locked='false' title='Etc' type='HTML'/>
</b:section>
</div>

</div></div>

»»Leia mais...

Saudação a seus visitantes conforme o horário

Coloque uma saudação para seus visitantes conforme o horário. Ele fica como um papagaio de pirata, rs.
Dá bom dia, boa tarde e boa noite.

Copie o código e cole no HTML/Javascript.

<Script Language="JavaScript">
<!--
today = new Date()
if(today.getMinutes() < 10){
pad = "0"}
else
pad = "";
document.write ;if((today.getHours() >=6) && (today.getHours() <=9)){
document.write("Bom dia!")
}
if((today.getHours() >=10) && (today.getHours() <=11)){
document.write("Bom dia!")
}
if((today.getHours() >=12) && (today.getHours() <=17)){
document.write("Boa tarde!")
}
if((today.getHours() >=18) && (today.getHours() <=23)){
document.write("Boa noite!")
}
if((today.getHours() >=0) && (today.getHours() <=3)){
document.write("Boa noite!")
}
if((today.getHours() >=4) && (today.getHours() <=5)){
document.write("Boa noite!")
}
// -->
</script></b></font>

»»Leia mais...

Gerador de janela poupup

Este gerador é bem interessante, serve para você fazer segunda página sem mostrar barra de endereço, e no tamanho a sua escolha, como nesse exemplo.

Clique aqui e leia o blog inteiro

Depois é só colar o código no HTML/Javascript em seu blog

Coloque embaixo o endereço da sua pagina: Escreva algo para que a pessoa clique para abrir a página: Opções Atributos Visualizar barra de ferramentas? Sim Não Mostrar barra de endereços? Sim Não Mostrar lista de diretórios? Sim Não Mostrar Barra de status? Sim Não Mostrar barra de botões? Sim Não Incluir barras de rolagem? Sim Não Pode ser maximizada? Sim Não Largura da janela (em pixels): Altura da janela(em pixels): Distância da esquerda da tela: Distância da parte superior: Pegue o código: Templates e Acessórios - 1º Selecione as opções

»»Leia mais...

Colocando últimos comentarios na coluna

Se você tem muitas postagens em seu blog, como é o meu caso, poderá ficar perdida (como fico) com os comentários feitos em seu blog. Geralmente não repondo pois não consigo encontrar. ois é, mas agora esse problema acabou.

Preencha o formulário abaixo e instale em seu blog automaticamente (e de graça que é o melhor) essa forma simples e prática.

Dica refeita AQUI

»»Leia mais...

Instalando o menu horizontal no Blogger, acima ou abaixo do cabeçalho

Esta dica se aplica ao antigo Blogger, anterior a julho de 2010. Se o seu Blogger é o novo, veja a dica nova AQUI


Para instalar um menu horizontal em seu Blogger, no painel clique em "Design"

Agora clique em "Editar HTML"

Agora procure por:



]]></b:skin>

Agora cole este código acima dele

#navcontainer
{
background: #808080;
margin: 0 auto;
padding:4px 0;
font-family: georgia, serif;
text-transform: lowercase;
}

/* to stretch the container div to contain floated list */
#navcontainer:after{
content: ".";
display: block;
line-height: 10px;
font-size: 12px;
clear: both;
}

ul#navlist{
height: 20px;
list-style: none;
padding: 10px;
margin: 0 auto;
width: 90%;
font-size: 0.8em;
}

ul#navlist li{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 2x;
}

ul#navlist li a{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ccc #cccc #ccc #fff;
border-style: solid;
color: #000;
text-decoration: none;
background: #eee;
}

#navcontainer>ul#navlist li a { font-size: 12px;width: auto; padding: 14px 3px; }

ul#navlist li#active a{
background: #ccc;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover{
color: #800000;
background: transparent;
border-color: #000 #fff #fff #ccc;
}

*CÓDIGO NA COR VERMELHA ACIMA SÃO AS CORES DO MENU, TROQUE-AS SE QUISER.

Se você quer o menu acima da header (cabeçalho)

Agora procure pelo seguinte código:  

<div id='header-wrapper'>

E cole este código abaixo depois (abaixo) dele.

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 7</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item8</a></li> </ul>
</div>

Se você quer o menu abaixo da header (cabeçalho)

Procure por:


<div id='content-wrapper'>

e cole o código abaixo dele.

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 7</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item8</a></li> </ul>
</div>

Salve e depois faça as modificações como cores, inserir links salvando novamente.


Se você quer saber como instalar o menu na nova plataforma do Blogger, clique AQUI

»»Leia mais...

Colocando imagens diferentes para cada título dos widgets da sidebar

Coloque cada título de suas widgets com uma imagem diferente. Para isso vá até o HTML do seu blog e clique em "Expandir modelos de widget".

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.

Agora clique na tecla F3 de seu teclado e procure pelo título de seu widget. Encontrando, veja que mais abaixo você encontrará um código como este abaixo:

<h2><data:title/></h2>

Então substitua por este e cole no local indicado o endereço de sua imagem.

<h2><img src="AQUI O ENDEREÇO DE SUA IMAGEM"/><data:title/></h2>

Dependendo, o código poderá ser esse também:

<h2 class='title'><data:title/></h2>

substitua então por:

<h2 class='title'><img src='ENDEREÇO DA IMAGEM'/><data:title/></h2>

Vá repetindo a operação para cada widget e colocando imagens diferentes.

»»Leia mais...

Código para não sair da página ao clicar no autor dos comentários

Se você não quer sair de sua página ao clicar no autor dos comentários em seu blog vá até o HTML do seu blog, clique em "Expandir modelos de widget".

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.

Clique na tecla "F3" do seu computador. Agora cole no espaço o seguinte código:

<a expr:href='data:comment.authorUrl' rel='nofollow'> <data:comment.author/></a>


Agora que o encontrou, substitua por este:

<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>

»»Leia mais...

Colocando o blog em estilo revista

Para quem gosta do blog em estilo revista é bem facinho fazer. Entenda que neste caso eu considerei as medidas do template Minima original, portanto se for necessário, aumente a largura. (onde está na cor verde)

Vá até o HTML do seu blog, procure pelo código:
]]></b:skin>

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.

Agora cole depois dele o código abaixo.

<!-- Estilo revista-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.post {
width:188px;
height:330px;
margin: 8px 4px 3px 4px;
padding:2px 1px 2px 1px;
background: #fff;
border: 3px groove #ccc;
overflow:hidden;
float: left;
}
.post h3 {
font-size: 12px;
background: #ccc;
text-shadow: #ccc 1px 1px 1px;
font-weight:bold;
padding:10px 0;
height: 60px;
}
.post-body {
height: 190px;
overflow:hidden;
}
.post-body img {
width:100px;
height: 80px;
float: left;
overflow:hidden;
margin: 3px;
padding: 2px;
border: 1px solid;
}
.post-footer {
overflow:hidden;
margin: 10px 0 -1px 0;
padding: 10px 0 -2px 0;
background: #ccc;
}
.post-footer-line-2 {display: none;}
.post-footer-line-3 {display: none;}
.date-header {display: none;}
</style>
</b:if>
</b:if>
<!-- fim Estilo revista-->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{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);} }
strx = s.join(""); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...'; }
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;}
//]]>
</script>

Salve. Agora clique em "Expandir modelos de widget"

Procure por:

<b:includable id='nextprev'>

Depois dele cole o seguinte código:

<div style='clear: both;'/>

Agora vamos colocar o código "Leia mais" para que fique certinho...



Agora procure por:

<div class='post-body entry-content'>
<data:post.body/>
 <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

e substitua por este abaixo:

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Procure pelo seguinte código:

<div class='post-footer'>

Abaixo dele cole:

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if></b:if>

Se o template que você usa for o Simple, aberto depois de julho de 2010, veja AQUI como implementar o hack

»»Leia mais...