PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

10/03/2017

Crie seu próprio widget com o aplicativo Widgetic

Resultado de imagem para widgetic logo

Crie seu próprio Widget com Widgetic

Como vimos no artigo “Widget, o que é e para que serve?”, os widgets são fundamentais no seu blog tanto pelos seus atrativos, funcionalidade e facilidade de utilização, como pela excelente ferramenta de interação entre o seu blog/site e seus leitores…

Para consegui-los, além de você importar widgets de diversos sites especializados na internet, nada melhor do que você mesmo criar os seus próprios, não é? Neste artigo mostraremos como fazer isto através do aplicativo:

Widgetic (free plan)

O Widgetic foi desenvolvido para para tornar mais fácil para qualquer pessoa criar widgets interativos, sem precisar escrever qualquer tipo código de programação. Você poderá ir a um passo adiante e personalizar seu widget para torná-lo exclusivo para a sua marca e para o seu site.

A biblioteca Widgetic tem uma coleção extensa e crescente de widgets que abrangem vários tipos de mídia, como imagens, áudio, vídeo, dados e conteúdo social.

Vamos apresentar para vocês alguns widgets que você poderá criar no plano free (gratuito), e encorajarmos você a encontrar uma combinação perfeita para o seu conteúdo.

Acessando o aplicativo Widgetic

Acesse o site: https://widgetic.com/

Clique no botão [Get starded].

Registre-se colocando seu e-mail e uma senha qualquer. Depois clique no botão [Sign up]. Se preferir, entre com sua conta do Facebook ou Google Plus.

Após registrar-se, faça o Log in. Clique no botão [Show me] para seguir com o tutorial do aplicativo. No nosso exemplo vamos aprender utilizando o tutorial do Widgetic.

Obs.: Caso não deseje seguir com o tutorial, clique em [Skip tutorial].

Criando seu primeiro widget

Escolha algumas imagens, clicando sobre elas. Clique no botão [Next:Customize].

Escolha o estilo de layout para o seu widget. Recomendamos que clique em todos os botões para conhecer as possibilidades de layouts deste widget.

Escolhido o layout, clique no botão [Next: Preview].

Obs.: No nosso exemplo escolhemos o layout  Simple Layout.

Você pode visualizar seu widget em diferentes dispositivos: Desktop, Tablet ou Celular.

Clique em [Go to Dashboard] e vá para o painel de controle para alterar o tamanho do seu widget e incorporá-lo em seu site.

Usando o Dashboard: Editando um Widget pronto

Clique no Widget que você deseja alterar

a) Para DELETAR ou DUPLICAR o seu widget, clique no botão indicado abaixo:

https://1.bp.blogspot.com/-F9JGXLhHpO0/WML4rAKBPOI/AAAAAAAA8tk/88X2cL16pPAcnPTxbs8wrscrOxLr-OEaACLcB/s1600/Screenshot_9.png


b) Para EDITAR seu widget, clique no botão indicado abaixo:

Para alterar as dimensões, clique no ícone indicado abaixo:

https://3.bp.blogspot.com/-yqmWmOWv2jk/WML8MQcN1wI/AAAAAAAA8t8/k3c4uWT1C9sGQiL_a2gvo3wpPJIWv0WEQCLcB/s1600/Screenshot_11.png

Faça as alterações dimensionais desejadas.

https://3.bp.blogspot.com/-nUpKk2T_XCM/WML8hwPFz6I/AAAAAAAA8uA/53SuqAbWQ08TkZt_xUP-plFO14xDkK2CACLcB/s1600/Screenshot_12.png

Através do menu lateral, faça as alterações desejadas e clique em [Next] para novos painéis de edição. Você não terá dificuldades para fazer as alterações pois o menus são bem simples e auto-explicativos.

https://2.bp.blogspot.com/-SojjLf0s7Tc/WML81pQcmdI/AAAAAAAA8uE/y6vQJETgn_IsJhPkQCFbRgr6FrP7v8HCgCLcB/s1600/Screenshot_13.png

Obs.: É necessário passar por todos os painéis de edição para salvar as alterações realizadas.

Clique em [Done] no último painel para salvar as alterações realizadas.

https://1.bp.blogspot.com/-lpln7Hz8-aA/WML9Gq-CaFI/AAAAAAAA8uM/BPPlluZVUboOs-m85vZNex6AqvRlsc1xQCLcB/s1600/Screenshot_14.png

c) Para INSERIR o widget no seu site, clique no botão [Embed widget].

https://3.bp.blogspot.com/-wxHrb2lQoG4/WML9X4o4OTI/AAAAAAAA8uU/bjLI9OiTbLwO8q-NS-UHljHrN3wyJalYgCLcB/s1600/Screenshot_15.png

Copie o código e cole no seu site ou blog.

https://2.bp.blogspot.com/-ForO_jQa-MI/WML9mqu4JXI/AAAAAAAA8uY/nzJbE4SBAEQ4DTOTJ-e_RH89VCalbs3IgCLcB/s1600/Screenshot_16.png

Resultado de imagem para lamp idea vector png
Dica: Experimente antes no Squids Editor: Cole o código no lado esquerdo do editor e clique no botão [Executar] pra visualizar o resultado no lado direito do aplicativo.

https://3.bp.blogspot.com/-LfbJE9uldXs/WML-JZQC0yI/AAAAAAAA8ug/sBrRguRc3v07ZwyFd_6TY4GzgnSjPT_7wCLcB/s1600/Screenshot_17.png

Caso precise alterar dimensões do seu widget, volte para EMBED OPTIONS e faça as alterações necessárias.

https://2.bp.blogspot.com/-ataXpV9l_fc/WML-XJk2StI/AAAAAAAA8uo/Z8kyuRn1eXMyVcbcHA9O8KYYOtiOUlyoACLcB/s1600/Screenshot_18.png

Verifique novamente no Squids Editor. Se tudo estiver da forma desejada, copie e cole o código no seu site ou blog.

Obs.: Se você não sabe como inserir códigos HTML no blog, leia:

Na lateral do blog

Como inserir Widgets no Wordpress sem a instalação de plugins

Como instalar um Widget no seu Blog -(Blogger)

Na postagem

Como inserir códigos HTML nas postagens do Wordpress

Como inserir códigos HTML nas postagens do Blogger

Veja como ficou o nosso Widget:

Audio Playlist

Usando o Dashboard: Criando um novo Widget

Volte para o painel do aplicativo.

https://4.bp.blogspot.com/-LQIcclgv-zE/WML_Ecqs4_I/AAAAAAAA8u0/dT1u431Z_E8e5LYiALD32wZADleNC9juwCLcB/s1600/Screenshot_19.png

Clique em [Create a new widget].

https://2.bp.blogspot.com/-Aok3lECqyck/WML_EXtsyBI/AAAAAAAA8uw/XCmgGv2d4xA0UTYSo4exAC-TXwpoeqm-gCEw/s1600/Screenshot_20.png

Escolha primeiro a categoria de widget que você deseja criar: Fotos, Áudio, Vídeo, Dados ou Rede Social.

https://2.bp.blogspot.com/-z6wC0Ix3FUI/WML_mM-GmiI/AAAAAAAA8u8/2myy2FM-h_IPPcpVzubccoelKuogCEZbgCLcB/s1600/Screenshot_21.png

Depois, você precisa escolher um modelo de layout.

https://3.bp.blogspot.com/-iCGDEcTJosI/WML_qzSVrTI/AAAAAAAA8vA/gN1rjlqyl487DOwJJbmaofNUbbX92K1zgCEw/s1600/Screenshot_22.png

Agora é só preceder da mesma forma que a edição de um widget pronto, como já mostramos anteriormente.

https://2.bp.blogspot.com/-aBaIj0zUnj8/WML_4kZC9bI/AAAAAAAA8vI/IhQmm0mkxA8xJ14PYE4ZXN81EQpnqjW8QCEw/s1600/Screenshot_23.png

Depois de finalizado o widget (precisa passar por todos os painéis de edição), clique em [PUBLISH].

https://3.bp.blogspot.com/-XQDkLoRR1hU/WMMAhtewoXI/AAAAAAAA8vQ/9PUbGgW8MHQPIrru75GETIG_OPhqGqB6QCLcB/s1600/Screenshot_24.png

Coloque um título e clique em [Done].

https://2.bp.blogspot.com/-XdGew_j3kag/WMMAmBriF8I/AAAAAAAA8vU/XozJMbyXGUUaA2uOoVis8KY3EK7WlzQEACLcB/s1600/Screenshot_25.png

Agora é só copiar o código e colar no seu site. Ahhh, não esqueça de verificar antes no Squids Editor.

https://3.bp.blogspot.com/-R8b2a_mPqjY/WMMAtv5eofI/AAAAAAAA8vc/iH5lU3Ea4VENMY-mdvzoyB6IiRUJeuQKwCLcB/s1600/Screenshot_26.png

Planos para utilização do aplicativo Widgetic

Se você deseja criar wigets mais completos, veja os planos para utilização do aplicativo Widgetic: https://widgetic.com/plans/

byALF 

0 comentários:

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics