test imagem
Flash based tag cloud widget
How to install Blogumus in your Blogger layout
Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing. Here are the steps required to install Blogumus in your Blogger layout: Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label' >
<b:includable id='main' >
<b:if cond='data:title' >
<h2 > <data:title/ > </h2 >
</b:if >
<div class='widget-content' >
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/ >
<div id='flashcontent' >Blogumulus by <a href='http://www.roytanck.com/' >Roy Tanck </a > and <a href='http://www.bloggerbuster.com' >Amanda Fazani </a > </div >
<script type='text/javascript' >
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", " <tags> <b:loop values='data:labels' var='label' > <a expr:href='data:label.url' style='12' > <data:label.name/ > </a > </b:loop > </tags >");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script >
<b:include name='quickedit'/ >
</div >
</b:includable >
</b:widget >
Customizing Blogumus
In this default installation, Blogumus includes the following preset variables:
Width is set to 240px
Height is set to 300px;
Background color is white
Test color is grey
Font size is "12"
If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I'll go through these options in the order they appear in the widget code. Editing width and height The variables for width and height are found in this line of the script:
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer. Editing background color You can change the background color from white to any other color by altering the hex value in the same line:
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes. Alter the color of text By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:
so.addVariable("tcolor", "0x333333");
Be aware that "tcolor" is a Flash variable and doesn't include the usual hash symbol of hex color codes. Be sure to only replace the numbers! Adjust the font size The maximum font size of tags is specified in this line:
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing "12" to a larger or smaller number. While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.
Aumentando a Largura das Colunas
Procure no código:
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
#main-wrapper {
margin-left: 5px;
width: 550px;
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 {
margin-right: 0px;
width: 250px;
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 */
}
OBS:
#outer-wrapper é a largura total do blog;
#main-wrapper se refere à coluna do post; e
#sidebar-wrapper se refere a coluna do perfil.
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
#main-wrapper {
margin-left: 5px;
width: 550px;
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 {
margin-right: 0px;
width: 250px;
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 */
}
OBS:
#outer-wrapper é a largura total do blog;
#main-wrapper se refere à coluna do post; e
#sidebar-wrapper se refere a coluna do perfil.
Substituindo os Links de Navegacão
<b:includable id='nextprev'> <div id='blog-pager'> <b:if cond='data:newerPageUrl'><a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'> <img src='http://URL do seu icone ESQUERDA.gif'/> </a> </b:if> <b:if cond='data:olderPageUrl'> <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'> <img src='http://URL do seu icone DIREITAt.gif'/> </a> </b:if> <a title='página inicial' class='home-link' expr:href='data:blog.homepageUrl'> <img src='http://URL do seu icone HOME.gif'/> </a> </div> <div class='clear'/> </b:includable>
Retirar o link : Assinar: Postagens (Atom)
Acrescente o código que está em vermelho.
.feed-links {
clear: both;
line-height: 2.5em;
display: none;
}
.feed-links {
clear: both;
line-height: 2.5em;
display: none;
}
Trocando 0 comentárioS por - Seja o primeiro a Comentar
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'><h4><img src="'http://URL" />
<b:if cond='data:post.numComments==0'>Seja o primeiro a comentar!<b:else/><b:if cond='data:post.numComments==1'>1 Comentário<b:else/><cond='data:post.numComments/>
<b:if cond='data:post.numComments==0'>Seja o primeiro a comentar!<b:else/><b:if cond='data:post.numComments==1'>1 Comentário<b:else/><cond='data:post.numComments/>
<data:commentLabelPlural/>
</b:if></b:if></h4>
Agora procure o seguinte trecho de código:
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
E deixe-a assim:
<b:if cond='data:post.numComments != 0'><h4 id='comment-post-message'><data:postCommentMsg/></h4></b:if>
Mudando o link da página principal
Procure pelo trecho de código abaixo:
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a></b:if></b:if></span>
Substitua o trecho em vermelho acima, pelo azul abaixo:
<span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'> 1 Comentário<b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a> </b:if> </b:if> </span>
HACK "LEIA MAIS..."
Para apresentar apenas uma parte do post na primeira página do blog.
Antes da tag </head>, coloque
Salve o template. Depois clique em Expandir Modelo de Widget e procure este trecho:
e substitua por:
Salve. Agora vá em Configurações->Formatação-> e até Modelo de Postagem. Cole alí o seguinte código:
Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>
OBs. onde se encontra Leia Mais... pode ser usado tb uma imagem ou ícone se quiser, é só substituir por:
img src='http://Sua imagem ou icone.png'/
Antes da tag </head>, coloque
<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
<script type="text/javascript">
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
Salve o template. Depois clique em Expandir Modelo de Widget e procure este trecho:
<div class='post-body'>
<p><data:post.body/></p>
<p><data:post.body/></p>
e substitua por:
<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Leia Mais…</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Leia Mais…</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
Salve. Agora vá em Configurações->Formatação-> e até Modelo de Postagem. Cole alí o seguinte código:
Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>
OBs. onde se encontra Leia Mais... pode ser usado tb uma imagem ou ícone se quiser, é só substituir por:
img src='http://Sua imagem ou icone.png'/
Modificando o ícone do Autor do Blog nos Comentários
Procure por dt class='comment-author' expr:id logo abaixo vc encontra o código:
substitua este código por:
não esqueca de acrescentar mais um </b:if>
após o código </data:comment.author> mais abaixo.
substitua este código por:
<b:if cond='data:comment.author == data:post.author'><img height='16' src='http://URL DO SEU ÍCONE'/> <data:comment.author/><b:else/>
não esqueca de acrescentar mais um </b:if>
após o código </data:comment.author> mais abaixo.
Modificando o ícone do Autor dos Comentários
Entre na edição HTML do template e clique em "Expandir modelos de widgets". Procure pelo código dt class='comment-author' expr:id e inclua o que está em vermelho.
o tamanho 16 pode ser modificado pra 32 se quiser...
<dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a name='data:comment.anchorName'> <?xml:namespace prefix = b /><b:if cond='data:comment.authorUrl'><a href='data:comment.authorUrl' rel='nofollow'><img height='16' src='http://url do seu icone.jpg/' width='16' /><?xml:namespace prefix = data /><data:comment.author></data:comment.author></a> <b:else><img height='16' src='http://url do seu icone usuário anônimo.jpg/' width='16' /></b:else> <data:comment.author></data:comment.author> </b:if> </dt>
o tamanho 16 pode ser modificado pra 32 se quiser...
Bordas no Texto do Post
------------Borda ao redor do texto do Post-------------------
<div style="BORDER-RIGHT: #ffff80 2px solid; PADDING-RIGHT: 4px; BORDER-TOP: #ffff80 2px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #ffff80 2px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #ffff80 6px solid"> Texto do Post </div>
ou simplismente
<div style="border: 2px solid #ff4040;padding:4px;"> Texto do Post </div>
Margem interna (Padding)
Grossura da borda (border-width)
Estilo da borda (border-style)
Cor da borda (border-color)
-------Estilos de bordas---------------
<div style="BORDER-RIGHT: #ffff80 2px solid; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 2px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 2px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 2px solid"> Texto com Borda Solid</div>
<div style="BORDER-RIGHT: #ffff80 3px dotted; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 3px dotted; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 3px dotted; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 3px dotted">Texto com Borda Dotted</div>
<div style="BORDER-RIGHT: #ffff80 4px dashed; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 4px dashed; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 4px dashed; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 4px dashed"> Texto com Borda Dashed </div>
<div style="BORDER-RIGHT: #ffff80 5px double; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 5px double; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 5px double; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 5px double">Texto com Borda Double</div>
<div style="BORDER-RIGHT: #ffff80 5px groove; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 5px groove; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 5px groove; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 5px groove"> Texto com Borda Groove</div>
<div style="BORDER-RIGHT: #ffff80 5px ridge; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 5px ridge; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 5px ridge; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 5px ridge">Texto com Borda Ridge</div>
<div style="BORDER-RIGHT: #ffff80 5px inset; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 5px inset; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 5px inset; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 5px inset"> Texto com Borda Inset</div>
<div style="BORDER-RIGHT: #ffff80 5px outset; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 5px outset; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 5px outset; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 5px outset"> Texto com Borda outset</div>
<div style="BORDER-RIGHT: #ffff80 2px solid; PADDING-RIGHT: 4px; BORDER-TOP: #ffff80 2px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #ffff80 2px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #ffff80 6px solid"> Texto do Post </div>
Texto do Post
ou simplismente
<div style="border: 2px solid #ff4040;padding:4px;"> Texto do Post </div>
Texto do Post
Margem interna (Padding)
Grossura da borda (border-width)
Estilo da borda (border-style)
Cor da borda (border-color)
-------Estilos de bordas---------------
Texto com Borda Solid
<div style="BORDER-RIGHT: #ffff80 2px solid; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 2px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 2px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 2px solid"> Texto com Borda Solid</div>
Texto com Borda Dotted
<div style="BORDER-RIGHT: #ffff80 3px dotted; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 3px dotted; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 3px dotted; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 3px dotted">Texto com Borda Dotted</div>
Texto com Borda Dashed
<div style="BORDER-RIGHT: #ffff80 4px dashed; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 4px dashed; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 4px dashed; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 4px dashed"> Texto com Borda Dashed </div>
Texto com Borda Double
<div style="BORDER-RIGHT: #ffff80 5px double; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 5px double; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 5px double; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 5px double">Texto com Borda Double</div>
Texto com Borda groove
<div style="BORDER-RIGHT: #ffff80 5px groove; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 5px groove; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 5px groove; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 5px groove"> Texto com Borda Groove</div>
Texto com Borda Ridge
<div style="BORDER-RIGHT: #ffff80 5px ridge; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 5px ridge; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 5px ridge; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 5px ridge">Texto com Borda Ridge</div>
Texto com Borda Inset
<div style="BORDER-RIGHT: #ffff80 5px inset; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 5px inset; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 5px inset; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 5px inset"> Texto com Borda Inset</div>
Texto com Borda outset
<div style="BORDER-RIGHT: #ffff80 5px outset; PADDING-RIGHT: 3px; BORDER-TOP: #ffff80 5px outset; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffff80 5px outset; PADDING-TOP: 3px; BORDER-BOTTOM: #ffff80 5px outset"> Texto com Borda outset</div>
