Sweet Girl || OFICIAL #: Tutoriais

Oi meus baby's olhá eu nunca vi um tuto pedido como esse viw.

Vá em Design >> Editar HTML >> Pesquise por: .main-inner h2.date-header {

Apague todo código até a primeira } e cole esse no lugar!!

.main-inner h2.date-header {
font: georgia;
color: #ffffff; /* Cor da fonte */
margin-left: -85px; /* Espaço entre data e área do post, altere até ficar do tamanho certo */
background: #483D8B; /* Cor do fundo */
float: right; /* Posicionamento, caso a sua barra lateral seja do lado esquerdo, mude para left */
font-size: 11px; /* Tamanho da fonte */
padding: 4px;
border-radius: 10px; /* Bordas arredondadas */
}
.main-inner h2.date-header:hover {
background: #EED2EE; /* Cor do fundo quando passa o mouse */
}

Menu categorias.

Encontrei esse tutorial num blog maravilhoso la embaixo tem os créditos e o link do blog, gostaram do novo layourt ? eu ameei.
estarei pondo uma serie de tutoriais para blog super uteis . Amo vocês

1. Instale o menu, com esse tutorial aqui.
2. Adicione o widget de 'Marcadores' caso não tenha.
3. Quando for adicionar o widget e colar nele o HTML do menu escolhido, coloque aonde se pede o "Link" o link de uma das tags, e o nome dela, exemplo:

E ir fazendo o mesmo até acabar.

Créditos [Farry Teen]

Visitem esse blog vale a pena.

Blog com cara de Tumblr.

Oi geente voltei com um novo tutorial espero que gostem:

Para começar, decidi trazer um tutorial rápido, e fácil, que deixa uma mistura de blogger com tumblr. Mais, é bom prestar um pouco de atenção, pois tem umas partes complicadinhas.
1. Adicione um Widget HTML/JavaScript e cole nele:

<a style="display:scroll;position:fixed;top:50px;left:75px;" href="http://www.blogger.com/home" title="Dashboard"><img src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?468" /></a><a style="display:scroll;position:fixed;top:50px;left:15px;" href="http://www.blogger.com/follow-blog.g?blogID= SUA ID" title="Follow Blog"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?468" /></a>

Aonde está escrito SUA ID, coloque a ID do seu blog. Não sabe como ? Ok, calma, vou explicar:
1. Vá no painel do seu blog > Design > Pegue sua ID na barra de endereços. Vai estar assim:

Copie sua ID e coloque aonde pede no código. Agora é só salvar, e ver se está tudo ok '-'

~ Créditos: Things 4

Separando as Postagens

Oii flores estão gostando dessa semana especial de tutoriais?eu estou amando tutoriais são muito uteis em vaarias coisaspor isso decidir fazer a enquete e adivinhe os o publico escolheu tutoriais para blog.espero que vocês gostem.

Você vai ter que ir no seu html, procurar por .main-inner .column-center-outer { e apagar o que esta destacado:

E, por este código:

.post-outer {

background: #fff; /* Fundo da postagem */
padding-top: 4px; /* Espaço do topo */
padding-left: 5px; /* Espaço da esquerda */
padding-right: 5px; /* Espaço da direita */
margin: 5px 3px 25px;
}

Visualize antes, por favor! Salve em seguida, e pronto!

Menu Pop-Up

Entre no link e siga o tutorial.

http://www.dicastumblr.com/2011/06/menu-pop-up-no-tumblr.html

Slides de imagem com númeração!

Créditos: Kawaii World

Créditos a esse tutorial!!

Vá em Design >> Editar HTML >> CTRL+F= </head>

Acima da tag cole esse código enorme:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});

</script>

Depois cole esse código antes de ]]></b:skin>

/*--Container geral--*/
.main_view {
float: left;
position: relative;
}
/*--Estilos do container das imagens--*/
.window {
height:200px; /*-- Altura do Slide (as imagens devem ter a mesma altura */
width: 550px; /*-- Largura do Slide (as imagens devem ter a mesma largura)-- */
overflow: hidden;
position: relative;
}.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
display: none;
}
/*--Estilos do link da numeração (Estilo dos numeros)--*/
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #fff;
background: #bad5d9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link ativo da numeração--*/
.paging a.active {
font-weight: bold;
color: #fff;
background: #b97ac9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link hover da numeração--*/
.paging a:hover {
font-weight: bold;
}.feed-links {
display: none; }

Agora adicione um Gadget HTML/JavaScript ( onde você quiser ) e cole esse código:

Paginação numerada -

Então gente resolvi postar um novo tutorial com o código , como vocês podem ver na imagem abaixo:

Para colocar no seu blog uma paginação assim, é só seguir estes simples passos:

Vá no HTML do seu blog, procure pela tag </body> (Aperte Ctrl+F e digite para facilitar a busca)
Cole acima do trecho pesquisado, o seguinte código:

<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Próxima";</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>

Agora procure por ]]></b:skin> e cole logo acima, este código:

/* PageNav --------------------------- */
.showpageArea {
font-family:Verdana, Geneva, sans-serif;
color: #000;
font-size:11px;
margin:10px; }
.showpageArea a { padding: 3px 8px;
margin: 2px;
font-weight: 700;
text-decoration: none;
color:#777; /* COR DA FONTE DO LINK PRÓXIMA */
border:1px solid #ccc; /* BORDA DO LINK PRÓXIMA */
background: #eee; /* COR DE FUNDO DO LINK PRÓXIMA */ }
.showpageNum a { padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999; /* BORDA DA NUMERAÇÃO */
background: #ddd ; /* COR DE FUNDO DA NUMERAÇÃO */ }
.showpageNum a:hover {
border:1px solid #888; /* BORDA DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */
background: #ccc; /* COR DE FUNDO DA NUMERAÇÃO QUANDO O CURSOR ESTÁ EM CIMA DELA */ }
.showpageOf{ margin:0 8px 0 0; }
.showpagePoint {
text-decoration: none;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border:1px solid #999; /* BORDA DA NUMERAÇÃO ATIVA */
background: #666; /* COR DE FUNDO DA NUMERAÇÃO ATIVA */
color:#fff; /* COR DA FOONTE DA NUMERAÇÃO ATIVA */ }

Se não aparecer na hora, não se desespere, as vezes demora um pouco para aparecer no blog. Dentro de alguns dias aparece. A querida Gizaa deu algumas dicas por comentário e achei que seria útil colocar aqui também: Uma coisa que deve ser levada em conta é se os feeds do blog estão certos, as vezes tem algum erro e ai nada funciona, nem posts relacionados,nem paginação e todos widgets que usam jason. Ah e em blog de testes fechado também não funciona. E também o numero de posts por página (configurado no painel) deve ser o mesmo no script -nesse caso é 5-

Feito isso, agora é só personalizar em todas as partes que tem instruções. Para ficar mais bonitinho você pode colocar sombra, e outras coisas. Não esqueça de sempre fazer backup do seu blog antes de começar algum tutorial! Créditos Cherry Bomb e o Super Dicas PFS.

Sombra no texto das postagens!

Oi meus amores hoje eu vou ensinar á vocês como colocar efeito sombra no título das postagens!! Créditos ao Ecleticus

Vá em Design >> Editar HTML >> CTRL+F = post h3

Acrescente um dos códigos abaixo!

1. text-shadow: 1px 1px 0px #000;
2. text-shadow:-1px -1px 2px #ff0;
3. text-shadow:5px 5px 5px 000;
4. text-shadow: 1px 1px 2px #333; color:#ffffff;
5. text-shadow:1px 1px 0px #fff;
6. text-shadow:5px 8px 1px #FFD700, 10px -15px 1px #FF7F00;

Tutorial Fundo de papel nas postagens.

Créditos ao Cherry Bomb

Oi meus amores! tem um bom tempo que eu já não posto né, é que as aulas voltaram e eu to meio sem tempo ainda mais agora que e semana de prova e tal. Mas semana que vem eu prometo que vou dedicar

3 dias da semana ao blog.

Olha só o novo tutorial que estou postando vocês vão amar como eu tbm ameei fica igualzinho ao meu . Ai vaai meus baby's :

Vá em Editar HTML >> CTRL+F=

.main-inner .column-center-outer {

background: $(post.background.color) $(post.background.url) repeat scroll top left;

_background-image: none;

}

Quando achar o código apague todo e substitua por esse:

.main-inner .column-center-outer {

background: url(URL da imagem) repeat-Y;

}

Agora aperte CTRL+F = .column-center-inner {

Substitua esse trecho: padding: $(content.posts.padding) 0;

Por esse trecho: padding: 10px 10px 10px 20px;

Você pode ter que alterar o valor em rosa de acordo com a imagem que você usar.

Abaixo tem duas imagens que você pode usar

Tutorial -Patinha de gato

Oi meus baby's como vão to deixando hoje aqui o tutorial patinha de gato, nossa eu tava atraz desse tutorial a muito tempo. Eu amei e vocês?

Gostaram , quer colocar em seu blog ?

Tutorial :
1 - Vá em Design > Adcione um Gadget JavaScript / HTML .
2 - Selecione na aba HTML , e cole este código la .

Código:

Legal né .

Tutoriais

Slides de imagem com númeração!

Um comentário: