byALF | 
sexta-feira, março 10, 2017
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
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
b) Para EDITAR seu widget, clique no botão indicado abaixo:
Para alterar as dimensões, clique no ícone indicado abaixo:
Faça as alterações dimensionais desejadas.
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.
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.
c) Para INSERIR o widget no seu site, clique no botão [Embed widget].
Copie o código e cole no seu site ou blog.
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.
Caso precise alterar dimensões do seu widget, volte para EMBED OPTIONS e faça as alterações necessárias.
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
Na postagem
Veja como ficou o nosso Widget:
Usando o Dashboard: Criando um novo Widget
Volte para o painel do aplicativo.
Clique em [Create a new widget].
Escolha primeiro a categoria de widget que você deseja criar: Fotos, Áudio, Vídeo, Dados ou Rede Social.
Depois, você precisa escolher um modelo de layout.
Agora é só preceder da mesma forma que a edição de um widget pronto, como já mostramos anteriormente.
Depois de finalizado o widget (precisa passar por todos os painéis de edição), clique em [PUBLISH].
Coloque um título e clique em [Done].
Agora é só copiar o código e colar no seu site. Ahhh, não esqueça de verificar antes no Squids Editor.
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/
0 comentários:
Postar um comentário