Menu para tags Neko

Acabei de criar esse menu para tags, o resultado foi bom agora so resta saber se vai funcionar no seu blog!Esse eo problema: eu não testei esse menu, eu o chamo de neko.Aperta ai em ler mais para ver todo o tutorial.

Botões de seguir o blog "follow"

 Yo! (ﾉ ◕ヮ◕)ノ Como vão os meus cupcakes? Eu estou bem.♥. Bom, vamos ao post agora? C'mon! ~

 Você pode colocar em qualquer gadget, não precisa ser independente, mas ok! Adicione um gadget HTML/JavaScript e cole o seguinte código:

<a href="http://www.blogger.com/follow-blog.g?blogID=SEUID" style="display: scroll; left: 1195px; position: fixed; top: 45px;" title="♥ Siga o blog!"><img src="SEUBOTÃO" /></a>

 Onde está ali SEUID você tem que colocar o número do seu blog. O ID é aquele número que aparece quando você está fazendo uma nova postagem, ou gerenciando seu blog pelo blogger, na barra de navegação. Exemplo:

  

 Onde tem 1195px e 45px é a parte chatinha de arrumar a posição do botão no blog, mas é só ter um pouquinho de paciência.   E por fim, em SEUBOTÃO você põe a imagem que você quer para seguir o seu blog.

  

  

  

 

  

Gadget flutuante com efeito deslizante

Primeiramente vá ate seu Modelo/Design, Editar Html. Procure por </head> e acima disso cole este código:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

Agora procure por ]]></b:skin> e acima disso cole:

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(URL DA SUA IMAGEM) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

Nesse código as partes destacadas em vermelho e rosa são:

Width e heigth - tamanho da sua imagem de fundo.
URL da Imagem - endereço da sua imagem de fundo.| Imagem para o fundo:  www

rigth | (-250px) - posição da imagem; o número negativo faz com que a imagem fique mais para a direita, só mostrando uma partezinha dela; se vc retirar o sinal de menos, por exemplo, a imagem ficará bem ao centro do seu blog. Aí é só ir modificando o número ate ficar ao seu agrado.
top | (130px) -  posicionamento da imagem, mas para cima ou para baixo. É só ir modificando também, assim como o de cima.

Width e heigth = se referem ao tamanho do fundo do gadget.
Background-color = a cor de fundo do gadget.

Agora salve e vá ate o Layout/Design, adicione um novo Gadget, Html/Javascript, e dentro dele cole esse código:

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnome-de-sua-pagina-de-facebook&amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Isso para adicionar uma  Fanbox, agora se quiser adicionar outro código HTML use esse aqui:

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'>CÓDIGO HTML &amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></div></span></div></div>

Se não souber como pegar o código dos seguidores, acesse esse tutorial e faça ate o terceiro passo: www Agora cole o código na parte que indicada em vermelho. Prontinho seus gadget flutuante e deslizante esta pronto. 

Todos os créditos do tutorial vão para: Bunny crazy

Modelo de post

 

Procure por: h3.post-title a {

h3.post-title {
}
h3.post-title a {
}

Cole abaixo de h3.post-title { e antes de }

Esses códigos:

margin-top: -5px;
  background: #fff;

Essa parte é a cor do fundo do título.

margin-top: é a “altura” do título do post, tipo de você diminuir ele sobe e se você aumentar ele desce.

background: é a cor do fundo do título do post, mas se quiserem uma imagem no lugar da cor coloque:

background: url(LINK DA IMAGEM)repeat;

Recomendo que deixem a cor por causa das letras, mas se quiserem usar, use uma imagem sem muitos detalhes.

E quiserem colocar uma borda ao redor do título da postagem é só colocar o seguinte código:

border: 1px solid #000;

Mude o que for necessário.

Se quiser uma bordinha abaixo do texto cole isso.

border-bottom: 1px solid #000;

Explicado a primeira parte vamos para a segunda.

Cole abaixo de h3.post-title a { e antes de }

Esses códigos:

font-family: Verdana;
font-size: 16px;
color: #fff;

Essa parte é onde você irá definir a fonte

font-family: é a fonte obvio do título do post

font-size: é o tamanho da fonte

color: é a cor da fonte

Se você quiser colocar uma sombra na fonte coloque esse trecho:

text-shadow: 0px 1px 1px #eee;

Esses trechos abaixo serve como transição, então se quiser colocar:

-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;

 Fonte da pesquisa: desconhecida

Modelos para sidebar

 

 

Enfim, por hoje trouxe quatro modelinhos para sidebar, na verdade são apenas um, o que muda neles são as cores do título.  Fiz os títulos nas cores rosa, azul, roxo e verde, as mais comuns  e  as  que  eu  acho  mais  fofinhas, não  é? Espero  que  gostem.!*u*

 

 

(Modelo 01): Troque o código do .sidebar .widget { pelo do quote abaixo.

.sidebar .widget{
background-color: #fff;
border: 1px solid #eaeaea;
border-bottom: 3px solid #e4e4e4;
padding: 4px 4px;
color: #c4c2c2;
text-align: justify;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
margin-bottom: -26px;
}
.sidebar .widget h2{
padding: 2px 5px 2px 4px;
letter-spacing: .1em;
margin-bottom: 4px;
font: normal normal 11px 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: lowercase;
color: #fff;
text-shadow: 1px 1px 0 #ffdbe3;
border: #ffd6de 1px solid;
box-shadow: inset 1px 1px 0 #fff5f7;
background: #ffe2e8;
background: -moz-linear-gradient(top,  #ffe2e8 0%, #fff2f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe2e8), color-stop(100%,#fff2f4));
background: -webkit-linear-gradient(top,  #ffe2e8 0%,#fff2f4 100%);
background: -o-linear-gradient(top,  #ffe2e8 0%,#fff2f4 100%);
background: -ms-linear-gradient(top,  #ffe2e8 0%,#fff2f4 100%);
background: linear-gradient(to bottom,  #ffe2e8 0%,#fff2f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe2e8', endColorstr='#fff2f4',GradientType=0 );
}

 

 

(Modelo 02): Troque o código do .sidebar .widget { pelo do quote abaixo.

.sidebar .widget{
background-color: #fff;
border: 1px solid #eaeaea;
border-bottom: 3px solid #e4e4e4;
padding: 4px 4px;
color: #c4c2c2;
text-align: justify;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
margin-bottom: -26px;
}
.sidebar .widget h2{
padding: 2px 5px 2px 4px;
letter-spacing: .1em;
margin-bottom: 4px;
font: normal normal 11px 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: lowercase;
color: #fff;
text-shadow: 1px 1px 0 #bfcdd9;
border: #c7d4df 1px solid;
box-shadow: inset 1px 1px 0 #f2f5f7;
background: #d0dbe4;
background: -moz-linear-gradient(top,  #d0dbe4 0%, #e8edf2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0dbe4), color-stop(100%,#e8edf2));
background: -webkit-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: -o-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: -ms-linear-gradient(top,  #d0dbe4 0%,#e8edf2 100%);
background: linear-gradient(to bottom,  #d0dbe4 0%,#e8edf2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dbe4', endColorstr='#e8edf2',GradientType=0 );
}

 

 

(Modelo 03): Troque o código do .sidebar .widget { pelo do quote abaixo.

.sidebar .widget{
background-color: #fff;
border: 1px solid #eaeaea;
border-bottom: 3px solid #e4e4e4;
padding: 4px 4px;
color: #c4c2c2;
text-align: justify;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
margin-bottom: -26px;
}
.sidebar .widget h2{
padding: 2px 5px 2px 4px;
letter-spacing: .1em;
margin-bottom: 4px;
font: normal normal 11px 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: lowercase;
color: #fff;
text-shadow: 1px 1px 0 #d8cbd6;
border: #ded6dd 1px solid;
box-shadow: inset 1px 1px 0 #f7f4f6;
background: #e8e1e7;
background: -moz-linear-gradient(top,  #e8e1e7 0%, #f4eff3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e1e7), color-stop(100%,#f4eff3));
background: -webkit-linear-gradient(top,  #e8e1e7 0%,#f4eff3 100%);
background: -o-linear-gradient(top,  #e8e1e7 0%,#f4eff3 100%);
background: -ms-linear-gradient(top,  #e8e1e7 0%,#f4eff3 100%);
background: linear-gradient(to bottom,  #e8e1e7 0%,#f4eff3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e1e7', endColorstr='#f4eff3',GradientType=0 );
}

 

 

(Modelo 04): Troque o código do .sidebar .widget { pelo do quote abaixo.

.sidebar .widget{
background-color: #fff;
border: 1px solid #eaeaea;
border-bottom: 3px solid #e4e4e4;
padding: 4px 4px;
color: #c4c2c2;
text-align: justify;
font: normal normal 11px 'Trebuchet MS', Trebuchet, sans-serif;
margin-bottom: -26px;
}
.sidebar .widget h2{
padding: 2px 5px 2px 4px;
letter-spacing: .1em;
margin-bottom: 4px;
font: normal normal 11px 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: lowercase;
color: #fff;
text-shadow: 1px 1px 0 #d6e5ac;
border: #d6e5ac 1px solid;
box-shadow: inset 1px 1px 0 #f9ffe8;
background: #e6f1c6;
background: -moz-linear-gradient(top,  #e6f1c6 0%, #f3fcd9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f1c6), color-stop(100%,#f3fcd9));
background: -webkit-linear-gradient(top,  #e6f1c6 0%,#f3fcd9 100%);
background: -o-linear-gradient(top,  #e6f1c6 0%,#f3fcd9 100%);
background: -ms-linear-gradient(top,  #e6f1c6 0%,#f3fcd9 100%);
background: linear-gradient(to bottom,  #e6f1c6 0%,#f3fcd9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f1c6', endColorstr='#f3fcd9',GradientType=0 );
}