publicidade
publicidade
publicidade
publicidade
publicidade
publicidade
publicidade
Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
teste do eddy

Danbobi Designer

Como coloca aviso no blog

Danbobi Designer
Coloque o Codigo Abaixo , Antes de ]]></b:skin>

}
#avisos {
background:url(http://img713.imageshack.us/img713/5001/imagensavisos.png) no-repeat;
margin: auto;
float:right;
margin-top:20px;
width:500px;
height:156px;
}
#avisos h2{
width:0px !important;;
height:0px !important;;
overflow:hidden !important;;
}
#avisos marquee{
width:285px;
heigth:685px;
color:#FFF;
margin:105px 0 0 110px;
}

Coloque o Codigo Abaixo , Antes de <div class='leftsidebar-wrapper'>

<div id='avisos'>
<marquee behavior='SCROLL' direction='Left'>
<span style='font-weight:bold;'>Aviso</span>seu nome<span style='font-weight:bold;'>G Criation</span>seu nome</marquee>
</div>
0 comentários
Danbobi Designer

Como coloca menu de imagens no blog

Danbobi Designer
 
Entre no painel do Blogger, clique em design e, depois, em editar HTML.
Marque a caixa expandir modelos de widgets e procure por: <data:post.body/>
Substitua por:


<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</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>

Agora procure por ]]></b:skin> cole este código antes dela:


.rmlink {
font-size: 100%;
float: right;
margin-right: 30px;
margin-top: 10px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps;
font-family: Arial,Sans-Serif;
color: #24618e; /*Cor do Link*/}
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/

Procure então por </head> e cole este código embaixo dela:


<!-- JavaScript Posts Resumidos-->
<!--
/*****************************************************
Auto-readmore link script, version 4.0 (for blogspot)
(C)2009 by Anhvo
Homepage: http://vietwebguide.com 
Please dont remove this copyright or change it into your own
******************************************************/
-->

<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);

}
.thumbnailimg {
float:left; 
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ; 
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}

function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi

post = post.replace(re4,'')
post = post.replace(re3,'<br /> ').split(re2)

for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

}


var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
s = post2.join(indentBlank +' <br/>');
} else {
var i = 0;
while(s.split(' ').length < max){
s += indentBlank + ' ' + post2[i]+'<br/>';
i++;
}
} 
return s;
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";
} 
else {

var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) { 
if(thumbnail_mode == "float") {
imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
summ = summary_img;
} else {
imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}

var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';

div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script><!-- Fim JavaScript Posts Resumidos-->

Para Trocar o leia mais por uma imagem procure por leia mais e subistitua por:

<img border='0' src=' Link da Imagem Aqui '/>
0 comentários
Danbobi Designer

Efeito neon nos marcadores

Danbobi Designer
EM color: #FF0000 coloque a numeração da cor
qui vc quer

a:hover{ color: #FF0000;text-shadow:0 0 .3em #FF0000;
}

COLOCA EM CIMA 

]]></b:skin>
0 comentários

Danbobi Designer

Como coloca slide no blog

Danbobi Designer
Atenção: Antes de começar recomendo que faça um backup do seu template.


1.Entre em Design> Editar HTML

Adicione o código abaixo antes de </HEAD>:

<script src="http://dl.getdropbox.com/u/1815091/Slider/mootools.v1.11.js" type="text/javascript"></script>
<script src="http://dl.getdropbox.com/u/1815091/Slider/jd.gallery.js" type="text/javascript"></script>

2. E esta parte acima de ]]></b:skin> Clique para ver o Codigo!

3. Agora vá até Design> Elementos da pagina:
Crie um novo elemento HTML / JavaScript com o seguinte codigo:

<style type="text/css">
#myGallery
{
width: 100% !important;
height: 250px !important;
}
</style>

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>

<div id="myGallery">
<div class="imageElement">
<h3>Titulo da Imagem</h3>
<p>Descrição da imagem</p>
<a href="URL do Post" class="open" title="Read More"></a>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

<div class="imageElement">
<h3>Titulo da Imagem</h3>
<p>Descrição da imagem</p>
<a href="URL do Post" class="open" title="Read More"></a>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

</div>4. Agora adicione as URLS de suas imagens e os titulos nos locais indicados em vermelho no codigo,

5. Salve e veja o resultado

Se quiser adicionar mais imagens copie o código abaixo e cole entre: <div id="myGallery"> & </div>

<div class="imageElement">
<h3>Titulo da Imagem</h3>
<p>Descrição da imagem</p>
<a href="URL do Post" class="open" title="Read More"></a>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>
0 comentários
Assinar: Postagens