21/04/2014

Tutorial: Mini Updates do Tumblr no Blog

||

Yo amores, como vão? Meu dia vai bem puxado... estou cuidando de onze crianças, mais minha irmã. Estou pensando em participar da peça da comunidade... sei lá. Faz tanto tempo que não faço uma peça, acho que tem uns dois anos. Mas como me convidaram, não sei o que dizer...apesar de quer ahh...  Mas mudando de assunto venho trazer uma postagem rapidinho. Trago um tutorial que já foi beeem usado no blog, mas achei o tutorial e estava para postar mas sempre esquecia, então trouxe hoje. É algo meio antigo, mas sempre tem aqueles que gostam, né? Vou mostrar como colocar um widget que mostra minis updates do Tumblr no Blog. Acho bem charmosinho e uma forma de chamar atenção de seus visitantes a acessar o Tumblr.

Acho ele realmente muito lindo, por isso deixarei um pequeno exemplo aqui na postagem para vocês. Espero quero que gostem, deixei ele exatamente como esta no código baixo:




1. Acesse seu modelo|Design - Editar HTML e cole antes de ]]></b:skin>:
.tumblr-photos{
width: 200px;
background: #fff;
border: 1px solid #fee;
box-shadow: 1px 2px 3px #fee;
}

Esses são os estilos que personaliza o  widget, incremente o código para que fique de seu agrado como: efeitos, sombra, bordas etc... 

2. Agora vá ate Layout e adicione um novo gadget HTML/JavaScript, dentro dele cole o código baixo. E no código substitua onde diz LINKDOSEUTUMBLR, por seu endereço:
<div class="tumblr-photos">
<a id='tumblr-url-widgy-1' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-1' src='' alt='' /></a><a id='tumblr-url-widgy-2' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-2' src='' alt='' /></a><a id='tumblr-url-widgy-3' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-3' src='' alt='' /></a><a id='tumblr-url-widgy-4' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-4' src='' alt='' /></a>
</div>
<script src="http://LINKDOSEUTUMBLR.tumblr.com/api/read/json?number=4&amp;type=photo" type="text/javascript"></script>
<script type="text/javascript">
document.getElementById('tumblr-photo-widgy-1').setAttribute('src', tumblr_api_read.posts[0]['photo-url-75']);
document.getElementById('tumblr-url-widgy-1').setAttribute('href', tumblr_api_read.posts[0]['url-with-slug']);
document.getElementById('tumblr-photo-widgy-2').setAttribute('src', tumblr_api_read.posts[1]['photo-url-75']);
document.getElementById('tumblr-url-widgy-2').setAttribute('href', tumblr_api_read.posts[1]['url-with-slug']);
document.getElementById('tumblr-photo-widgy-3').setAttribute('src', tumblr_api_read.posts[2]['photo-url-75']);
document.getElementById('tumblr-url-widgy-3').setAttribute('href', tumblr_api_read.posts[2]['url-with-slug']);
document.getElementById('tumblr-photo-widgy-4').setAttribute('src', tumblr_api_read.posts[3]['photo-url-75']);
document.getElementById('tumblr-url-widgy-4').setAttribute('href', tumblr_api_read.posts[3]['url-with-slug']);
</script>

O código esta arrumado para aparecer quatro miniaturas, altere os números que estão em vermelho para qual desejar. Assim aparecendo mais ou menos figuras de acordo com sua numeração. Exemplo:

<a id='tumblr-url-widgy-4' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-4' src='' alt='' /></a>

Viu? Bem fácil não é? Os créditos para esses códigos vão para o Reino Kawaii- Jiapps - Guren Coffee. É só isso, beijinhos amores.

37 comentários:

  1. ONZE CRIANÇAS? mds eu nem consigo cuidar uma manhã só do meu irmão...imagine de onze o.o Eu nunca participei de uma peça, tenho vergonha =p
    Que legal este tutorial, eu gostaria de usar, só que tipo, meu tumblr é rororoso, eu não sei mexer com os códigos de lá, eu nem posto imagens direito é uma caca só ^^'
    Ah Wendy eu coloquei o layout lá no blog, só que eu tenho que arrumar a caixa de pesquisa, a porroloca num quer encontrar as coisas :@

    Que pouquinho que eu escrevi hoje...aheuahe
    Bjos || Scarlet Rain

    ResponderExcluir
    Respostas
    1. Hushasu sim onze. Mas esta valendo a pena estou ganhando por isso. Ate que não são tão bagunceiros mas cinco deles são, mas consigo entreter eles. Puxa serio? Eu também tenho, sou muito tímida. Então fiz três anos de teatro para trabalha com isso de timidez, ajuda muito. Mas espero qe um dia possa fazer é muito divertido!

      Ixii somos duas Belly, eu sempre pego free mesmo. Não tenho muita paciência com lá não, então pego free ou faço bem simples. Esse que estou no momento ganhei de presente da minha amiga Roh.

      Serio???????? Irei lá ver, nossa esta dando erro? Tenta usar outro código de pesquisa. Aqui do blog esta direitinho e o mesmo que uso em meus lays. ^^

      Excluir
  2. Crianças? Eu tenho pavor delas ^^" Sério, elas são demónio, você desvia os olhos por um segundo e quando volta a olhar, já tem fogo na casa... Desejo sorte! E não sabia que tinha uma irmã (:
    Quero usar \o/ Aqui a lerda nem sequer sabia que isso existia :3 Vou usar, tá bom, Bunny? Obrigada coração!

    ResponderExcluir
    Respostas
    1. kkkkkkkkkkkk Hotaru eu concordo é minha irmãzinha é assim mesmo. Mas consigo entreter-lhos brinco com eles, faço joguinhos coisas que diverte e chama atenção deles. Assim os pais deles sempre pedem para mim cuidar porque eles gostam da forma que cuido, mas tem uns cinco no meio que são bem pimentinhas rsrs mas vale a pena no final (dinheiro). kkkkkkkkk Mas realmente se agente desvia o olhar já era. Sim eu tenho uma irmã fez sete aninhos mês passado, mas parece ter uns cinco anos por ser pequena rsrs e aprontaaaaaaaaa!!!!! Mas é um doce de criança :3

      Eu também não sabia a algum tempo atrás, mas que bom que agora conhece. Usa sim, fico feliz por isso. Que nada é um prazer ajudar e trazer coisas para vocês.

      Excluir
  3. ótimo tutorial amor, olha eu usei aquele efeito "moldura" que você postou, foi muito útil! Só passei para avisar mesmo hehehe

    ResponderExcluir
    Respostas
    1. Obrigada Kyoto. Serio usou?? Ebaaaaaaaaaaaaaa!!! Irei lá ver, muito obrigada por usar. ^^

      Excluir
    2. Claro que usei, é lindo!!!

      Excluir
  4. Aaah que divo eu amei ... para meu próximo lay vou tentar usar.. super divo♥

    ResponderExcluir
    Respostas
    1. Que booom, fico feliz por isso :3 Ebaaa tomara que use. Thanks por gostar.

      Excluir
  5. Que kawaii isso ><
    Nee senpai, eu tenho uma dúvida e acho que só você pode me ajudar...
    Você sabe como se chama essa caixinha? http://i.imgur.com/mS7CVwc.png
    Eu ficaria muito agradecida se me ajudasse, pq eu já tentei todos os nomes possíveis rs ''-.-

    ResponderExcluir
    Respostas
    1. Ain mesmo? Que bom! :3
      Essa caixinha se chama tooltip e é um efeito nos titles do blog. Titles é o local que aparece o nome onde passar o mouse, e tooltip é o balãozinho que mostro no print. Tem muito tutoriais de como coloca-lo com aparência diferente e com efeito. Eu tenho um tutorial de como personalizado, mas a aparência é bem simples realmente para a pessoa editar: http://www.bunnycrazy.net/2012/09/personalizando-sua-tooltip.html

      E nesse eu mostro como colocar Titles em textos e imagens, mas é necessário fazer a primeira etapa do tutorial acima, se não o balão não vai aparecer com a aparência desejada. A parte de colar o código no <(/)head>: http://www.bunnycrazy.net/2012/09/efeito-tooltip-nos-titles.html

      Como disse tem muitos modelos na web é só digitar Modelos de tooltip, ou Tooltip personalizados. Aparece muitos modelos lindos. <3 Espero que tenha ajudado. ^^

      Excluir
    2. ajudou muito!!! Muito obrigada >///<

      Excluir
    3. A Wendy é tão fofa >///<

      Excluir
    4. Essence Japan: De nada linda

      Excluir
    5. Gaby Misaki: Que isso linda, você que é uma fofura. Mas obrigada >3<

      Excluir
  6. Awwwwn Wendy! Que fofu ♥ é bem útil, assim o seu tumblr ganha mais seguidores haha.
    Hey, Wendy, como eu coloco essas bordinhas aqui no cabeçalho do blog? Eu já tentei de todo jeito mas eu não sei o nome -.- e aqui no BC já tem um tutorial pra ele? http://tinypic.com/r/9iczns/8

    ResponderExcluir
    Respostas
    1. Hihi verdade \o/ Ah sim é bem fácil irei postar o tutorial mais tarde ok? ^^ Promessa de dedinho <3

      Excluir
  7. Por que tudo isso de criança? -q GENTE sakksskkssakaksakask eu sou até preguiçosa pra cuidar de mim -q #parei
    Interessante esse efeitinho <3
    http://paradise-of-bunnies.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hushasu eu moro em um condomínio ai esta tendo uma festa e alguns pais pediram para mim cuidar. Da um trabalhoooo rsrs Obrigada por gostar :3

      Excluir
  8. Gostei disso o>3<o já estou usando ^^ :3

    mutable-design.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada por gostar e por usar. :3

      Excluir
  9. Gente que fofo amei nem sabia que tinha isso >< kkk mdsss 11 Crianças como vc consegue eu aqui mole nem aguento ficar com minha irmã (8 anos) e bastante peste só de olhar na cara dela ja dá raiva crianças me apavoram kkkk
    e eu tenho um primo que é peste eu fico traumatizada kkkkk e quando ele se junta com minha irman foge que ´desastre na certa kkkkkk
    daí vem meu pavor de crianças uma ja é d+ pra mim imagine 11 :O kkk
    amei o tutorial bem fofo mais o meu tumblr é uma desordem e espero que ninguem descruba ele kkk
    bjs

    ResponderExcluir
    Respostas
    1. Hushaushasu dinheiro e eu gosto muito de crianças XD minha irmã e bem agitada e pimentinha! Mas das que estava cuidando eram calmas só cinco eram pimentinhas mas conseguia entreter elas. Ain que fofa ímã de 8 aninhos? Eu tenho uma de 7. Mas muito obrigada por gostar do tutorial Giovanna, eu entendo mas espero que um dia possa usar.

      Excluir
  10. Anônimo24/4/14

    Wendy eu achei esse layout free aqui o link http://www.bunnycrazy.net/2013/08/layout-free-amnesia-ukyo.html um dos mais lindos que eu já vi mais eu não consigo colocar ele,dá erro,eu vou em modelo>editar html>Fazer Backup/Restaurar e escolho o arquivo e fica dando erro :c mesmo eu indo em modelo clássico dá erro,me ajuda Wendy esse layout free é perfeito e eu quero muito usar ele <3 poderia por favor me ajudar??

    ResponderExcluir
    Respostas
    1. Olá você extraiu o arquivo? Ele esta como RAR se não extrair ele dará erro. ^^

      Excluir
  11. *O* Que divo <33 Muito legal, adorei *U*
    Vou usar no meu próximo layout :3
    Kissus ~♥~
    Honey Pie ✩ http://h-oneypie.blogspot.com/

    ResponderExcluir
  12. Eu coloquei no meu blog! Ficou muito divo!!!
    E também, todos os tutoriais (menos dois) foram pegos do seu blog! Valeu mesmo!
    Eu amei a base, também amo coisas simples. Bem, eu usei ela também xD
    Eu nunca amei tanto um layout na minha vida.
    Eu amo seu blog~
    Beijinhos,
    actualnight.blogspot.com

    ResponderExcluir
    Respostas
    1. Que booom *-*
      Ain seriooooooooooo? Que honra, nossa nem sei o que dizer. Obrigada por gostar dos tutoriais da base e do meu blog. Realmente muito obrigada, nem tem noção de como estou aqui. *-* Obrigada Duda. <3

      Excluir
  13. amei o tutorial *00*
    heyoo ~ sou eu outra vez (aquela que há pouco tempo avisou que tinha fechado o blog Asia Looks For You em fevereiro). Só vim avisar que reabri o blog e mudei um pouco as coisas, e queria manter afiliação com o teu blog que é dos únicos que acompanho a sério (tenho de começar a comentar mais vezes .__.).

    Link: http://kyungjong-cafe.blogspot.com/

    Por favor, continua com o teu blog *ww*
    Sayoo ~

    ResponderExcluir
    Respostas
    1. Obrigada Megumi :3
      Ah bem vinda!!! Serio??? Que bom, fico feliz que tenha aberto ele de novo. Aceito sim :3 é um prazer ter seu blog aqui, mas é esse link que deixou aqui no comment?

      Continuarei sim, posso ate demorar mais continuo. ^^ Beijinhos linda

      Excluir
    2. Sim, é esse o link kkk Eu queria chamar Kyungjong a alguma coisa, então pensei em mudar o nome do blog ^^

      Obrigado por aceitar afiliação, fico muito feliz ^^
      Espero que continue o blog, e eu vou acompanhar sempre que possível (:

      Excluir
    3. Entendo ^^ a ainda esta bonito e legal com esse nome.
      Eu que agradeço por querer ser minha afiliada :3
      Vou sim <3

      Excluir
    4. Ah mais continua lindo! :3 Eu já coloquei na lista, eu que agradeço por querer ser minha afiliada. *3*

      Excluir
  14. Interessante tutorial! Parabéns estou amando o site! :)
    Mairu Nii ~

    ResponderExcluir
  15. Obrigada por gostar. :3

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram