Pink Design: Tutorial/Blog

Mostrando postagens com marcador Tutorial/Blog. Mostrar todas as postagens

5 Personalizando menu páginas do blogger

Olá gatinhas, tudo bom hoje eu trouxe um tutorial super fácil lembrando que não foi eu que criei o código!
O código original e da Anny do Go Imagine modificado pelo Bloguinho Cute os créditos vão pra elas!
Vamos ao tutorial!

CLIQUEM LEIA MAIS...

7 Como mudar a cor do facebook (sem vírus)

Olá gatas tudo bem ? hoje trouxe pra vocês um tutorial muito bom, e muito procurado que é como mudar a cor do face, só que aqui no meu blog não tem vírus como naqueles links que o povo coloca lá no face, o que eu trouxe hoje é só uma extensão do google chrome que é muito legal da a aparência colorida do jeito que a gente quer é claro que a pessoa que visita nosso perfil num vê o nosso face assim , somente nós vemos e é também só da pra vê-lo no computador que foi instalado a extensão!
Mas é legal a ideia.
Vamos ao tutorial primeiro vá até este LINK CLIQUE AQUI ;
Depois clique ADD TO CRHOME como mostra na foto abaixo;

Depois de feito isso feche o google crhome e abra-o novamente

quando você abri seu facebook novamente no canto do link

vai ter la um F colorido como mostra na foto abaixo

clicando lá vai aparecer uma tabela de cores é só escolher a sua !

O resultado final será esse como no meu face na foto abaixo;

6 Cursores para você ♡

Olá meninas tudo bem? comigo sim depois de passar a semana toda doente hoje melhorei um pouco e preparei um post bem legal pra vocês que adoram enfeitar seu blog!

Trouxe cursores pra vocês!
'Ps: as imagens não são da minha autoria mas eu editei algumas então não reblogue as imagens se for sua a imagem só falar comigo que darei os créditos!

Créditos do código

Para usar o cursor basta ir em painel do blogger => layout=>adicionar um gadget procure por => html java script e copie o código abaixo do cursor escolhido e cole no seu gadget ;

Espero que gostem gente pode usar a vontade , mas não rebloguem a minha postagem os cursores são só para uso pessoal levei horas fazendo eles então sejam criativos criem os seus e não pegue os meus e digam que vocês fizeram!
Bju

12 Tutorial como personalizar a área dos comentários

Olá meninas trouxe mas um tutorial pra vocês de como tirar o fundo cinza da área dos comentários !
Vamos ao tutorial vá em modelo editar HTML clique em prosseguir dê crtl F ou F3 e procure por =>#comments {
Você vai achar algo assim
#comments {
background:$(comments.background);
padding: 15px;

Apague o que está sublinhado e substitua pelo código abaixo

background: url("URL DA SUA IMAGEM AQUI") repeat;
border-radius: 20px 20px 20px 20px;
border: 2px solid #FF1493;

Onde está escrito em vermelho substitua pelo url de uma imagem que você queira no fundo dos comentários;
sendo que ...

border-radius Arredonda a área dos comentários ;

border é a borda da área dos comentarios você pode alterar largura da sua borda se não quiser borda e só apagar essa parte pode também personalizar a cor da borda !

Então e isso meninas espero que gostem!

Créditos

beijão

13 Tutorial estrelinhas e corações saindo do mouse

Ola meninas , hoje trouxe um tutorial super fácil e fica fofo estrelinhas ou coraçõezinhos caindo
do mouse !
Escolha um dos códigos abaixo você pode está mudando a cor das estrelinhas ou do coraçõezinhos Escolha sua cor aqui depois de escolher o estilo que você quer e só ir em layout =>adicionar um gadget=>html javascript cole o código selecionado e salve!

#Coraçoes saindo do mouse está na cor vermelha

// <![CDATA[
var colour=" #FF0000 ";

var sparkles=40;

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(5, 5);

var rdow=createDiv(5, 5);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*5;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"49px";

div.style.width=width+"50px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>
</script>

#Estrelinhas caindo do mouse está na cor roxa

#Estrelinhas com efeito Arco iris ;

var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
var sparkles = 35;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}

function changeNav(id) {
document.getElementById('content').innerHTML=document.getElementById(id).innerHTML;
document.getElementById('main').innerHTML=document.getElementById('home').innerHTML;
document.getElementById('rabbit').style.top="275px"
document.getElementById('penguin').style.top="532px"
}

function hidestatus(){
window.status=""
return true
}
// ]]>
</script>

<div class='navbar section' id='navbar'>
<div class='widget navbar' id='navbar1'>
<script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
function showRelatedContent(args) {
var el = document.getElementById('related-iframe');
if (el.parentNode.style.display != 'none') {
el.parentNode.style.display = 'none';
document.onclick = showRelatedContent.prevOnClick;
return;
}

var match = /(?:^[?]|&)c=([0-9]+)(?:&|(?!.))/.exec(args);
if (match !== null) {
document.getElementById('related-loading').style.left = match[1] + 'px';
el.style.left = Math.max(0, match[1] - parseInt(el.width) / 2) + 'px';
}
el.src = "http://www.blogger.com"
+ '/related-content.g?q='
+ window.location.href
+ '&id=' + "7792698363959436653";
el.parentNode.style.display = 'block';
showRelatedContent.prevOnClick = document.onclick;

// Hide related-content dropdown when clicking anywhere but on it.
document.onclick = function() {
var el = document.getElementById('related-iframe');
if (el.parentNode.style.display != 'none') {
el.parentNode.style.display = 'none';
}
document.onclick = showRelatedContent.prevOnClick;
};
}
</script></div>
</div>

Espero que gostem
beijos

18 Como personalizar o titulo dos gadgets

Olá meninas, tudo bem?
Então como eu já tinha falado antes agora aqui no blog vai ter vários tutoriais pra personalizar seu layout e hoje eu trouxe mas um super fácil , pra vocês que usam o modelo do blogger então vamos lá aprender a enfeitar o titulo dos gadgets !
Escolha sua imagem e cole em gadget html java script o código abaixo da imagem escolhida;

<style>

/*Inicio Titulo dos gadgets*/

.sidebar h2 {

font-family: 'Sofia', cursive; /*Tipo de fonte*/

font-size: 20px; /*Tamanho da fonte*/

color: #000000; /*Cor da fonte*/

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh8Tz-egyCng7lYodsY48IeseXJn9kFJrpnukn3BS7ubygA8WCLscg_5bDs62MZMyuBnj9CwkQKb2BXnXSs4LufJFMh0xuisp2zNYl74TZ8MGuO1PHQT2YoRfiJc9A-hFkRMOjt7M0k5AK/s1600/cabe%C3%A7alhoemenu12.png) no-repeat center;

height: 36px;/*Altura da imagem*/

width: 287px; /*Largura da imagem*/

text-align: center; /*Alinhamento do texto*/

</style>

<style>

/*Inicio Titulo dos gadgets*/

.sidebar h2 {

font-family: 'Sofia', cursive; /*Tipo de fonte*/

font-size: 20px; /*Tamanho da fonte*/

color: #000000; /*Cor da fonte*/

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzxgUM2rnFzQimMkm90UOhio0NWOO36il1Gz266M3P2owpgk4P6VAl_nXcDiPP1cZVQPkVOxMhKRfwKDLTokkN0dzmCPnTxv869N8T5nMENqD9FC37eLiz5jtpUgTzzqUvES7sr0KXPv8N/s1600/gadgets2.png) no-repeat center;

height: 36px;/*Altura da imagem*/

width: 287px; /*Largura da imagem*/

text-align: center; /*Alinhamento do texto*/

</style>

<style>

/*Inicio Titulo dos gadgets*/

.sidebar h2 {

font-family: 'Sofia', cursive; /*Tipo de fonte*/

font-size: 20px; /*Tamanho da fonte*/

color: #000000; /*Cor da fonte*/

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVXt2Ldd6xGr8L7csnUH0eEoN3CjymDYpCXFE8MPK14kVwM8dC6Vdmru4oTN0QOexLZjZRUVuwxLcEd3dHDgw1E5eB0_sjipW5iSfl8sqaj4LFiKPp8x7lZ_2cKB57iAbBfl4FhOK-TIr/s1600/minhabase+transparentee.png) no-repeat center;

height: 36px;/*Altura da imagem*/

width: 287px; /*Largura da imagem*/

text-align: center; /*Alinhamento do texto*/

</style>

Os códigos são da Jackie, modificados por mim !

Então é isso gente escolha a que quiserem e em breve trago mas imagens pra vocês

vocês podem criar a sua própria imagem hospedar num blog teste e mudar a url dos códigos acima!

beijoos

4 Tutorial Imagem Voltar ao topo da página ATUALIZADA

Olá gente !

Tudo bem com vocês? comigo tudo ótimo...
Bom como agora aprendi a mexer no modelo do blogger e abri minha lojinha que anda mas devagar que tartaruga kkk de agora por diante vou postar alguns tutoriais aqui pra vocês !
Então vamos ao meu primeiro tutorial que é de colocar setas para voltar ao topo do blog !
É muito chato ter que voltar a pagina toda rolando sem falar que há blogs que tem muitas postagens na pagina principal ai a pagina fica longa demais ! Então venha aprender como economizar o dedo do seu leitor kkkk

Vá no painel do seu blog => layout => adicionar um gadget procure por html java script e cole lá o código preferido;
abaixo algumas imagens editadas por mim !

As imagens não são da minha criação mas eu editei todas então não reblogue elas
se for da sua autoria é só falar darei os créditos!
então gente espero que gostem até mas

Páginas