Atualizações + [Tutorial] Personalizar o gadget seguidores + imagens

"Katniss...I remember the bread."

Bem, vou já começar a falar sobre as atualizações:
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:

créditos:HC

Kissus

4 comentários:

  1. Oh My God amei o tuto *---------* Com certeza irei usar ^_^

    Kissus Bakas Desu >3<

    ResponderEliminar
    Respostas
    1. Ainda bem que gostaste^^

      Felizmente alguem gosta dos meus tutos...

      Kiss~

      Eliminar
  2. Oi Lucy-chan! o/

    Ficou lindérrimo seu layout! Adoro essa cor que me agrada... *--*

    kiss

    ResponderEliminar

Hey, arigato por vires comentar.
Respondo a todos os comentários assim que possível.
Por favor, não uses palavras impróprias nem nada disso.
Não uses o comentários só para divulgar o teu blog, no entanto, se falares sobre o post, podes deixar o url.

Aviso: os comentários maldosos e com insinuações serão publicados, mas eliminarei o seu conteúdo e darei uma breve respostinha.

Sayonara^^


=((•̪●))= ๑(•ิ.•ั)๑ ٩(●̮̮̃•̃)۶ ε(●̮̮̃•̃)з ٩(×̯×)۶̿ ┌∩┐(◣_◢)┌∩┐ ⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙▽⊙ ⊙﹏⊙ ⊙△⊙ ◑▽◐ ◑ω◐ ◑﹏◐ ●︿● ●ω● ●﹏● ≧▂≦ ≧︿≦ ≧ω≦ ≧﹏≦ ≧▽≦ >︿< >ω< >﹏< >▽< ≡(▔﹏▔)≡ (¯▽¯;) <(“”"O”"”)> (-__-)b (;°○° ) \( ̄︶ ̄)> <( ̄︶ ̄)/ (/≧▽≦/) \(≧3≦)/ \(≧ω≦)/ o(≧ω≦)o o(≧o≦)o ㄟ(≧◇≦)ㄏ ╮(╯▽╰)╭ ╮( ̄▽ ̄)╭ (~o ̄▽ ̄)~o ~ 。。。(~ ̄▽ ̄)~[] (╯-╰)/ (*^3^) 'U_U ♪ ♥ ஐ ▲☼゚ ♣ (๏̯͡๏) †