Cupcakes of Isy : ♥ Chuva de Tutos ♥

Hello Little Cherrys

Eu quis fazer uma chuva de tutos fofos e úteis não quer dar uma olhada?

Tuto 1 - Efeito no "clic"

Perceberam que quando você aperta em alguma coisa aqui no blog sai uns foguinhos desse jeito:

Deiax o blog super fofo é é muito simples vamos ver

Vá em Modelo>>>Editar HTML>>>Ctrl+F

E busque por

</head>

Quando encontrar,acima coloque o seguinte código:

// <![CDATA[

var sparks=75; // how many sparks per clicksplosion

var speed=33; // how fast - smaller is faster

var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)

var colours=new Array('#FFAEB9', '#FF1493', '#D8BFD8');

// aqui as cores

/****************************

* Clicksplosion Effect *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var intensity=new Array();

var Xpos=new Array();

var Ypos=new Array();

var dX=new Array();

var dY=new Array();

var stars=new Array();

var decay=new Array();

var timers=new Array();

var swide=800;

var shigh=600;

var sleft=sdown=0;

var count=0;

function addLoadEvent(funky) {

var oldonload=window.onload;

if (typeof(oldonload)!='function') window.onload=funky;

else window.onload=function() {

if (oldonload) oldonload();

funky();

}

addLoadEvent(clicksplode);

function clicksplode() { if (document.getElementById) {

var i, j;

window.onscroll=set_scroll;

window.onresize=set_width;

document.onclick=eksplode;

set_width();

set_scroll();

for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {

stars[j]=createDiv('*', 13);

document.body.appendChild(stars[j]);

}

}}

function createDiv(char, size) {

var div, sty;

div=document.createElement('div');

sty=div.style;

sty.font=size+'px monospace';

sty.position='absolute';

sty.backgroundColor='transparent';

sty.visibility='hidden';

sty.zIndex='101';

div.appendChild(document.createTextNode(char));

return (div);

}

function bang(N) {

var i, Z, A=0;

for (i=sparks*N; i<sparks*(N+1); i++) {

if (decay[i]) {

Z=stars[i].style;

Xpos[i]+=dX[i];

Ypos[i]+=(dY[i]+=1.25/intensity[N]);

if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1;

else {

Z.left=Xpos[i]+'px';

Z.top=Ypos[i]+'px';

}

if (decay[i]==15) Z.fontSize='7px';

else if (decay[i]==7) Z.fontSize='2px';

else if (decay[i]==1) Z.visibility='hidden';

decay[i]--;

}

else A++;

}

if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);

}

function eksplode(e) {

var x, y, i, M, Z, N;

set_scroll();

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

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

N=++count%bangs;

M=Math.floor(Math.random()*3*colours.length);

intensity[N]=5+Math.random()*4;

for (i=N*sparks; i<(N+1)*sparks; i++) {

Xpos[i]=x;

Ypos[i]=y-5;

dY[i]=(Math.random()-0.5)*intensity[N];

dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;

decay[i]=16+Math.floor(Math.random()*16);

Z=stars[i].style;

if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];

else if (M<2*colours.length) Z.color=colours[count%colours.length];

else Z.color=colours[i%colours.length];

Z.fontSize='13px';

Z.visibility='visible';

}

clearTimeout(timers[N]);

bang(N);

}

function set_width() {

var sw_min=999999;

var sh_min=999999;

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

if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;

if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;

}

if (typeof(self.innerWidth)=='number' && self.innerWidth) {

if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;

if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;

}

if (document.body.clientWidth) {

if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;

if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;

}

if (sw_min==999999 || sh_min==999999) {

sw_min=800;

sh_min=600;

}

swide=sw_min-7;

shigh=sh_min-7;

}

function set_scroll() {

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

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body && (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;

}

// ]]>

</script>

E salve,pronto sue blog ficou ainda mais Kawaii

Tuto 2 - Menu no Topo do Blog

Sabe aquele menusinho no topo do blog onde ficam as pessoas que já encomendaram então eu vim ensinara para vocês ele tambem deixa o blog bem fofo vamos ver?!

Vá em Layout>>>Adicionar Gadgdet>>>HTML/Java Script

Deixe o Gadget sem nome e cole este código nele

#scrollToTop:link,#scrollToTop:visited { color: transparent; background-color: transparent; display: none; position: fixed; top: 15px; right: 15px;}

.icon {display : block; font-size: 8pt; font-family: Calibri; line-height: 15px; border-bottom : 1px solid #f4f4f3; text-indent : 5px; vertical-align : middle; background:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWN-YkSLlfO_SZ49kyn23TT9Bn0cvGWVvtOjSbuKsftTv14IrPqbseaM-qwmIGP6ZaN1gY0CD2_1Nrrq8GFvOPQceL9YN9BwthzcnCm0TAvQDLSyNTQLWR5VJLHv3VrHtX7gz69NAH1HM/s320/icon1.gif') no-repeat left; padding-left :5px;

padding-bottom : 2px;}

.icon:hover {display : block; font-size: 8pt; font-family: Calibri; line-height: 15px; border-bottom : 1px dashed #E0DCD6; text-indent : 5px; vertical-align : middle; background : url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Ix7bSqwXmPzTn7tta12-CXd35oiwJkNe6DxNNxQOzFWt9KNz-1TkEIoVALVHunVZ8YnkiPIBTApTjc4VTEFpdLRyZBGubbyrGAgxK7sIyPzMYj0sD2-8vrSChkyvDGDuoLtJFSYxMPxK/s320/icon2.gif') no-repeat left; padding-left : 10px; padding-bottom : 2px;}

#spinningbox{

-webkit-border-radius: 30px;

-moz-border-radius: 20px;

border-radius: 20px;

moz-box-shadow: 0 0 1px #E799A3;

-webkit-box-shadow: 0 0 8px #C48793;

position:fixed !important;

left:200px;

top: -15px;

padding-bottom:14px;

padding-top:21px;

text-align:left;

height:7px;

width:79px;

overflow:hidden;

border:1px double #D8BFD8 ;

-webkit-transition: opacity 0.6s linear;

-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

-o-transition: all 0.6s ease-in-out;

background: #fff;

z-index:999;

color:#7f5a58;

background : url('http://i111.photobucket.com/albums/n159/docedani/back9.png');

}

#spinningbox:hover{

left:200px;

top:10px;

border:2px dashed #D8BFD8 ;

padding:5px;

height:170px;

width:125px;

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

p {

margin:0px; margin-top:0px;

}

a.dp{

color: #8B8682;

background:#FFF;

text-decoration: none;

-webkit-transition: color 0.3s ease-out;

-moz-transition: color 0.3s ease-out;

transition: color 0.3s ease-out;

font-size:12px;

}

a.dp:hover{

text-decoration: none;

font-style: none;

font-size:12px;

color: #DB7093;

background:#FFFfcc;

}

</style>

<span font="font" style="color: black; font-family:Lucida Sans; font-size: 16;"><span style="background-color: #EED5D2;"> Menu

</span>

</center>

</b>

</div>

Acho qeu você já sabem editar certo?Então você salva e prontinho mais um elemento Kawaii no seu blog!

Tuto 4 - Menu Com Imagem

Você quer um menu com uma imagem bem fofa ou divertida então esse menu é par você ele é assim:

Muito Lindo né?Vamos ver oque fazer para adicionar ele em seu blog!

Vá em Modelo>>>Edita HTML>>>Ctrl+F

Localize ]]></b:skin> e coloque antes desse código

.menu a {
margin-right: 140px;
background:#FFFFF0; /* Cor das caixinhas */

border-top: 2px dotted #FFB6C1; /* Borda */
font-family: Palatino linotype; /* Fonte */
font-style: italic; /* Estilo da fonte */
text-transform:capitalize; /* Estilo da fonte - uppercase: maísculas e lowercase: minúsculas */
display: block; /* Exibir em bloco */
font-size: 10pt; /* Tamanho da fonte */
color:#363636; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-right: 6px solid #FF82AB; /* Borda em hover */
}

Agora copie este código abaixo

Vá em Layout>>>Adicionar Gadgdet>>>HTML/Java Script

E coloque este código: