"Katniss...I remember the bread."
Modifiquei um pouco a sidebar e o fundo do blog e cursor.
Também personalizei o gadget dos seguidores, que ficou muito kawaii!
E é isso que vou ensinar a fazer...
Cliquem em *Ler Mais*
Primeiro coloca a gadget de seguidores normal no seu blog pois caso contrário dará erro. Abra seu blog no navegador e aperte Ctrl+U. O código fonte do seu blog irá aparecer. Aperte Ctrl+F e pesquise por Followers1-wrapper.
Abaixo disso teremos uma série de códigos, então, devemos copiar desde Followers1-wrapper até </div></div>, que se encontram acima de <div class='clear'></div>.
Copie o código e apague seu gadget de seguidores e adicione um gadget de JavaScript/HTML e cole o código nele.
Para personalizar, devemos mexer com os seguintes códigos:
SKIN['FACE_SIZE'] = '17';
SKIN['HEIGHT'] = "200";
SKIN['TITLE'] = "FOLLOWERS";
SKIN['BORDER_COLOR'] = "#FFCD8B";
SKIN['ENDCAP_BG_COLOR'] = "#F5F5F5";
SKIN['ENDCAP_TEXT_COLOR'] = "#FFC49E";
SKIN['ENDCAP_LINK_COLOR'] = "#FFC49E";
SKIN['ALTERNATE_BG_COLOR'] = "TRANSPARENT";
SKIN['CONTENT_BG_COLOR'] = "TRASNSPARENT";
SKIN['CONTENT_LINK_COLOR'] = "#FFC49E";
SKIN['CONTENT_TEXT_COLOR'] = "#FF7981";
SKIN['CONTENT_SECONDARY_LINK_COLOR'] = "#FFC49E"; SKIN['CONTENT_SECONDARY_TEXT_COLOR'] = "#FFCD8B"; SKIN['CONTENT_HEADLINE_COLOR'] = "#FFCD8B";
SKIN['FONT_FACE'] = "NORMAL NORMAL 13PX \X27TREBUCHET MS\X27,TREBUCHET,SANS-SERIF";
Pegas o código do efeito que mais gostaste e colas acima de ]]><
Efeito Sépia
#Followers1-wrapper {
text-decoration: none !important;
-webkit-filter: sepia(100%);
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-filter: sepia(0%);
transition:All 0.4s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
margin-bottom: 2px;
}
Efeito Opacidade
#Followers1-wrapper {
opacity: 0.2; -webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
Efeito Blur
#Followers1-wrapper {
text-decoration: none !important;
-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
margin-bottom: 25px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-filter: blur(2px);
-webkit-transition-duration: .90s;
margin-bottom: 25px;
}
Efeito preto e branco
#Followers1-wrapper {
text-decoration: none !important;
-webkit-filter: grayscale(100%);
-webkit-transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-filter: grayscale(0%);
-webkit-transition-duration: .90s;
margin-bottom: 2px;
}
-->Agora vou ensinar a mudar a imagem "Participar neste blog"
Vão no painel do blog que vocês querem e aparecerá uma página. Lá na barra de endereço, terá um link com a ID do seu blog, e é esse código que usaremos para as pessoas te seguirem. Vai estar escrito algumas coisas nesse link e depois alguns números que são a ID do seu blog, copie-a.
Agora, no gadget de seguidores, colas o seguinte código, acima de tudo:
<div style="left: 8px;margin-top: 3px;position: absolute;"><a href="" onclick="window.open('https://www.blogger.com/follow-blog.g?blogID=IDDOSEUBLOG','Janela','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=1020,height=650,left=25,top=25'); return false;"><img src='IMAGEM SUBSTITUTA'/></a></div>
Onde está escrito em negrito modificas tudo a teu gosto e caso fique muito para o lado ou pra cima, mexe apenas nos códigos: left: 8px;margin-top: 3px;
Pode parecer que algum código está mal e apagares alguma coisa, mas está tudo direitinho!
Não apagar nada!
Também trouxe algumas imagens:
Oh My God amei o tuto *---------* Com certeza irei usar ^_^
ResponderEliminarKissus Bakas Desu >3<
Ainda bem que gostaste^^
EliminarFelizmente alguem gosta dos meus tutos...
Kiss~
Oi Lucy-chan! o/
ResponderEliminarFicou lindérrimo seu layout! Adoro essa cor que me agrada... *--*
kiss
Olá.
EliminarArigatou Mie!!!
๑(•ิ.•ั)๑
Kiss~