Slide que funciona automático no Blogger

     Bom pessoal, uma coisa que muitos vem procurando na blogsfera é como fazer um slide para blogger, aqueles que agora estão criando um blog com estilo revista, sempre fica a procura de um, existe vários tutorias ensinando, mais sempre uma parte que nem todo mundo adora, que é ta trocando direto as imagens do slide, então você já viram o slide do Ecleticus, ele funciona automátcamente, eu não preciso tá direto trocando as imagens, assim que faço algum post novo, ele vai aumáticamente por slide, maior barato isso  né? Então, decidi mostrar esse tutorial aqui pra vocês, espero que gostem e que agradem a todos. E é claro, só não esqueçam de comentar e é claro creditar. Então, let's go.
   Vá em Designer > Editar HTML e procure pela seguinte tag ]]></b:skin>.
Acima dela coloque o seguinte código.


/*----- INÍCIO DO SLIDE  ----------------------------------------*/
.theme-default .nivoSlider {
 position:relative;
 background:#fff url(http://i1043.photobucket.com/albums/b436/JBollton/loading.gif) no-repeat 50% 50%;
 -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
 -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:50%;bottom:-42px;
 margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;
 padding:0;margin:0;z-index:6;display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
 margin:100px auto 50px auto;
 width:618px; /* Make sure your images are the same size */
 height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}
  Depois procure por </body> e acima dele coloque o código abaixo.


<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
 <script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </script>

   4º  Em seguida salve.
   5º  Agora vá em Designer e adiciona um novo HTML/Javascript e cole o seguinte código.


<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 246; //image height
 var image_width = 618;  //image width
</script>
<script src="http://www.ecleticus.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

  6º  O código destacado de vermelho se refere a quantidade post que você deseja mostrar no slide, o meu eu coloquei 6.
  7º O código destacado de azul, se refere a largura(width) e altura(height) do slide, caso não esteja ao seu gosto, só mudar os número para o tamanho desejado.
  O código destacado de laranja se refere ao endereço do seu blog. 
      Atenção, só troque a parte destacada de laranja, nada de passar dai.
 Então gostaram do tutorial? Espero que sim, agora é só comentar, e se usar só creditar.

Postado por: Jeff Bolton
bolton Capricorniano, 17 anos, garoto divertido e engraçado, gosta muito de blogar e assistir TV, odeia falsidade e adora curtir a vida do jeito que ela é, e é claro, não perde um cineminha. @ecletiicus
8 Comentários

Menu horizontal com abas(sub-menu)

     Bom pessoal, anteriormente tinha feito um tutorial AQUI de como fazer um menu horizontal com efeito hover, caso você não viu ainda só clickar nesse Link. Então viram?
        E hoje vou ensinar a fazer outro menu horizontal mais o efeito dele é diferente, ele terá um efeito com abas como mostra o exemplo abaixo. Então vamos lá.

     1º Vá em "Designer"->"Editar HTML"
     2º  Procure pelo seguinte código </head> utilize "Ctrl + F", e antes dele insira o código abaixo.

<!--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; /*COR DO MENU*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
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; /*COR DO SUBMENU*/
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>
     3º  Em seguida Salve as alterações.
    4º  Vá agora em "Designer"->"Elementos da página"->"Adicionar um Gadget"-> Selecione "HTML/JavaScript" e adicione o código abaixo.

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">NOME</a>
<ul>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
</ul>
</li>
<li><a href="#">NOME</a>
<ul>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
</ul>
</li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
<li><a href="#">NOME</a></li>
</ul>
     O símbolo "#" reference aos links, em Vermelho são os títulos dos links que serão exibidos no menu horizontal.
   Salve as alterações e visualize. 


Então, espero que todos tenham gostado, e até a próxima postagem, caso alguém queira um tutorial só deixar aqui como comentário que farei o máximo possível para ajudar.

Postado por: Jeff Bolton
bolton Capricorniano, 17 anos, garoto divertido e engraçado, gosta muito de blogar e assistir TV, odeia falsidade e adora curtir a vida do jeito que ela é, e é claro, não perde um cineminha. @ecletiicus
1 Comentários

Links do blogger com fundo colorido

     Bom gente, o que muitos vem me perguntando e como deixar os links dos blog com um fundo colorido e quando passado o mouse ele muda de cor, você podem ver o exemplo aqui no blog, pelo menos eu, nunca vi um tutorial ensinando de como fazer, e depois de vários pedidos decidi fazer para vocês, sei que deve parecer muito fácil, mais para alguns não. Dai eu fui visitando os blogs que me perguntava de como deixar os links assim, fui vendo os códigos fonte desses blog e realmente não tem o código de como deixar os link dessa forma, então irei mostra agora como faz, caso alguém use, por favor credite, esse tutoria é de minha autoria. Esse tutorial é baseado no Modelo Travel do blogger. Então mãos a obra. 
   Vá em Designer > Editar HTML e procure pelo seguinte código .post-footer {,quando encontrar você vai encontrar como na imagem abaixo.
   Abaixo desse código cima na imagem acima você coloca este:

.post-footer a{
color:#FF1493;
background: #FFFF00;
text-decoration:none;
}
.post-footer a:hover{
background: #FF1493;
color: #FFFF00;
text-decoration:none;
}
 Obs(1).:  O Código destacado de Vermelho se refere a cor do marcador.
 Obs(2).:  O Código destacado de Laranja se refere a cor do fundo do marcador
 Obs(3).:  O Código destacado de Azul se refere a cor do link quando passado o mouse.
 Obs(4).:  O Código destacado de Rosa de refere a cor do fundo quando passado o mouse.
    Em seguida é só visualizar se estiver tudo certo, Salve.
     
    Então espero que todos tenha gostado, e não esqueça de comentar.

Postado por: Jeff Bolton
bolton Capricorniano, 17 anos, garoto divertido e engraçado, gosta muito de blogar e assistir TV, odeia falsidade e adora curtir a vida do jeito que ela é, e é claro, não perde um cineminha. @ecletiicus
1 Comentários

Como colocar Biografia do Autor no final do post

     Bom pessoal, tenho uma Notícia Boa e outra Ruim, qual quer saber primeiro? Boa ou Ruim? Vamos pra boa primeiro, a boa é que estarei mostrando aqui pra você o primeiro tutorial do Portfólio Extras, e a Ruim é que como eu tinha dito, caso não houvesse muitos comentários no Post anterior, não irei fazer Layout Gratuitos, mais calma, se um dia eu tiver um tempinho e posto um Template espetacular para vocês. 
    Então vamos deixar de Bla Bla Bla e vamos ao tutorial. Hoje irei mostrar para você coloca Biografia do Autor no final do post.
OBS.: Antes de começar faça um Backup do seu Template
    1. Faça login no Blogger, clique em Designer >> Editar HTML.
    2. Procure pela a Tag ]]></b:skin> e cole o seguinte código logo ACIMA dela
.bio-autor{
margin:10px 2px 20px 2px;
padding:5px 0 15px;
border-top: 1px dotted #000; ---/* edite cor da borda */
border-bottom: 1px dotted #000;  ---/* edite cor da borda */
}
.autor-avatar{>
float:left;
margin:5px; 
}
.autor-text{
color:#494949;   ---/* edite cor da fonte */
font-style:none;
font-size:12px;   ---/* tamanho da fonte do texto */
text-transform:none;
padding:5px;margin-left:5px;
}.autor-text p{
padding:0 auto;
margin: 0 auto;
text-align: justify;
}
.autor-text h3{
text-transform:none;
font-size:17px;  ---/* Tamanho da fonte do título */
color:#777;     ---/* edite cor da fonte */
font-weight:bold;
margin-top:-5px;
}
.autor-text a:link, .autor-text a:visited{
font-size:12px;
text-transform:none;
}

Em seguida Visualize, se estiver tudo certo, SALVE! 
    3. Volte na aba "design, entre na edição HTML do seu template, clique em "expandir modelos de widgets" e procure pela Tag.
<div class='post-footer'>
    4. Cole logo ABAIXO dela: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;NOME-DO-AUTOR&quot;'>
<div class='bio-autor'>
<div class='autor-avatar'>
<img alt='Nome do Autor' height='75' src='ENDEREÇO-DA-IMAGEM' width='75'/>
</div>
<div class='autor-text'>
<h3>Sobre o autor</h3><p><b>Nome do Autor</b> Coloque aqui o texto que você deseja usar para descrever o autor. Recomendo que não tenha mais que 3 linhas. Se quiser coloque um link para a página do blog que fala mais sobre o autor.
<a href='LINK'>Leia Mais sobre o autor...</a>
</p>
</div>
</div>
</b:if>
</b:if>
Edite os campos destacados de VERMELHO. 
               
 ATENÇÃO.:
     No código acima, no campo para incluir o nome do autor, deve ser escrito de forma exata. Deve estar exatamente igual a que aparece nos post. Se for incluido de forma diferente, o html não reconhecerá o nome do autor e o código não vai funcionar, portanto, se você usa algum caracter na sua assinatura, deverá inclui-lo, não esqueça.
      Se o seu blog possuem vários autores, basta copiar e colar o código acima quantas vezes quiser.
     Use este código para cada autor no seu blog, colando-o pela quantidade de vezes referentes a quantidade de autores que seu blog possui, mas não esqueça que você deve editar o nome do autor, imagem e texto, para que cada autor tenha sua biografia no final dos artigos que ele publicar. 

CRÉDITOS: MUNDO BLOGGER
6 Comentários

For You Portfólio

OBS.: Só terá Layout's gratuitos nesse Blog, se houver muitos comentários. Agradeço pela Compreensão.
 
   Bom pessoal, depois de tanta demora, está aberto o novo Blog de Layout Free, Tutoriais, Dicas e etc. Mais por que decidi fazer esse blog? Bom, no começo desse mês, coloquei uma enquete no Ecleticu's, do que vocês achavam de um Blog com Dicas, Tutoriais e Layout Free, e o mais votado foi:  com 57.3% dos votos, dai então decidi fazer. 
    E para a alegria de vocês quero que comentem nesse post, qual estilo de Layout devo fazer para vocês gratuitamente, isso mesmo agora irei coloca Templates gratuitos para vocês. Mais só farei se estiver muitos comentário dando a opinião de qual estilo de Layout devo fazer e postar. Agora fica por conta de vocês, são vocês que vão decidi se faço ou não o LAYOUT! Espero que tenha gostado também do visual.




15 Comentários