23:41       Radzzy

---

Como colocar Slide no Cabeçalho do Blog

Bem pessoal, posto hoje como Colocar Slide no Cabeçalho do blog. Este tutorial foi um pedido de meu amigo Animandré (pra quem não o conhece, ele é o dono do Blog Animação é coisa séria, mas divertida!, que por sinal, é um ótimo Blog ). Bem, sigam o tutorial abaixo, e boa sorte!

No painel de seu Blog vá em Design//editar Html, procure  utilizando CTRL+F, por </head>. Abaixo da mesma, cole o seguinte código:

 <script src='http://www.yourjavascript.com/12300300114/mootools.v1.11.js' type='text/javascript'/>

 <script src='http://www.yourjavascript.com/10162001424/jd.gallery.js' type='text/javascript'/> <link href='http://api.ning.com:80/files/SN3eeozgUFWu*rJrzfJnsEuXtQuTxjUiS6nF2kD5NjG*p341SM0ecKKlIYZHbbNpw-19mQEl257b2cGsvHx8uVz-IyRDaVdN/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>

Agora, procure por 

]]></b:skin>

 e cole este segundo código, antes dele:

#myGallery{

width: 960px !important;

height: 200px !important;

overflow: hidden;

}

Salve as alterações e click em "Elementos da Página"

Os números em Azul podem ser alterados de acordo com as dimensões de seu cabeçalho, lembrando que as imagens também deverão ter as mesmas dimensões.

Agora Copie este código e adicione-o como um gadget,substituindo o que se pede:

<script type="text/javascript">

function startGallery() {

var myGallery = new gallery($('myGallery'), {

timed: true,

showArrows: true,

showCarousel: false,

});

}

window.addEvent('domready', startGallery);

</script>

<div id="myGallery">

<div class="imageElement">

<a class="open" href="Endereço do Blog"/>

<img src="Url da imagem" class="full" />

<h3>Título do Texto</h3>

<p>Descrição </p>

</a></div>

<div class="imageElement">

<a class="open" href="Endereço do blog"/>

<img src="Url da Imagem" class="full" />

<h3>Título</h3>

<p>Descrição</p>

</a></div>

<div class="imageElement">

<a class="open" href="Endereço do Blog"/>

<img src="Url da imagem" class="full" />

<h3>Título</h3>

<p>Descrição</p>

</a></div>

<div class="imageElement">

<a class="open" href="Endereço do Blog"/>

<img src="Url da imagem" class="full" />

<h3>Título</h3>

<p>Descrição</p>

</a></div>

</div>

Agora exclua o antigo cabeçalho (click aqui se não souber excluir-lo) e mova o Slide para o local que era ocupado pelo cabeçalho.

Pronto! Seu cabeçalho/Slide está Pronto!


Se você deseja algum tutorial, visite este post que deixei exclusivamente para isso, e peça o seu! Farei o máximo para lhe ajudar ;) Ou deixe um comentário aqui mesmo!

Fonte: Qualo . Editado e modificado por DTP ;)

Read More

Hack “Leia mais” automático e com imagens

Hack “Leia mais” automático e com imagens

   12:17       Radzzy

---

Fui procurar este hack, à pedido de uma cliente do DB-produtos e serviços e encontrei no Templates para você, blog da querida e sumida amiga Áurea.

Trata-se de um hack que resume os posts da página inicial (home) automaticamente e ainda mostra uma pequena imagem (thumbnail) do lado esquerdo da postagem.

Antes de mais nada, recomendo que você instale este hack em um blog de testes ou, se quiser instalar diretamente no blog, faça antes um backup do template.

Como colocar o hack Leia Mais com imagens

Entre no painel do Blogger, clique em design e, depois, em editar HTML.

Marque a caixa expandir modelos de widgets e procure por:

<div class='post-body entry-content'>

<data:post.body/>

Substitua a linha <data:post.body/> 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>

ATENÇÃO! Para quem usa os meus templates, que já vêm com um outro hack “leia mais” e/ ou com o jump break do Blogger, o caminho é outro. Procure por:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
<span id='showlink'>
<a expr:href='data:post.url'>Continue lendo &gt;&gt;</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

Substitua tudo 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>

<div style='clear: both;'/> <!-- clear for photos floats -->

Agora vá no CSS do template e antes da tag ]]></b:skin> cole este código:

.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 pela tag </head> e cole este outro código embaixo dela:

Fontes de referência

• Templates para Você - Hack Leia Mais com imagens reduzidas
• Mundo Blogger - Hack Leia mais com imagens na página inicial

Escondendo o rodapé dos post na página inicial

Para esconder a data e o rodapé dos posts na página inicial, procure por:

]]></b:skin>

e cole o seguinte código depois dessa tag:

<b:if cond='data:blog.pageType == "index"'>

<style type='text/css'> .post-footer { display: none; } </style>

</b:if>

<b:if cond='data:blog.pageType == "index"'>

<style type='text/css'> h2.date-header { display: none; } </style>

</b:if>

Para entender melhor as condicionais do Blogger, acesse:

• O Blogger e as Condicionais – BloggerSphera
• Aplicar estilos a página inicial do Blogger – Mundo Blogger

Esta última dica funcionou no Template Mínima e nos meus templates, mas talvez não funcione em outros, já que o nome dos seletores ( .post-footer e h2.date-header ), pode variar de um modelo para outro.

Exibindo apenas o texto

Se você quiser mostrar apenas o texto na home e não as imagens, procure por:

<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;
}

Substitua todo o trecho acima por este:

<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);

display: none:
}
.thumbnailimg {
float:left;
padding:0px 10px 0px 0px;
}

Read More