SPEED ART QUE FIZ RÁPIDA!
ESPERO QUE VOCÊS GOSTEM, SE GOSTOU INSCREVA -SE NO CANAL. VLW
Bolo 10
+(1).png)
Bolo 10
Its been a long time I written a tutorial for Blogger. All these days you can see me intoBlogger templates and WordPress themes, but I love creating tuts more than making themes or templates whatever. Ok, so today I will take to you to a simple feedback form tutorial for Blogger users using the jQuery and CSS. The original source of this tutorial was fromTutorialzine, we made some modification, changed the form method and made it work smoothly for blogger. So lets get started.
Step 1: Open your Blogger Dashboard and navigate to Edit HTML and check on Expand Widget Templates
Step 2: Now search for ]]></b:skin> and paste the below code before ]]></b:skin>
Once you added the paragraph text, click save and select I’m finished! Take me back to the form manager
Step 6: Now you will be in Forum Manager, so click on Default theme drop down box and select New Theme. In theTheme Designer you have to do certain things
1. Go to Backgrounds > Highlight and change the color to transparent
2. Go to Buttons and select the button type as link and enter this link there https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8O0uV4nOTfDt1WFku8i-UvWQu9CkLNtfIzDSMxJDJTtMa0-0sr-4iH8u2Xjg4NQQbmlR1uQpS1qvALLmialpZa3xMot2vpgwPb_whAohVjbHlYhyphenhyphenie_96hsvjXClT-ze7V3hMxPU2HOyU/s1600/submit.png
3. Go to Advanced and paste this URL on the text box – http://sites.google.com/site/bloggermint/feedback.css
Thats it. Now name the theme and save it. After saving the form, click on code of the form from the forum manager page and select Embed form code and copy the javascript from there
Finally paste the copied code in the step 3 by replacing the text “WUFOO FORM SCRIPT GOES HERE” and save the Blogger template.
I know the steps may look hard for the beginners, may be I can try to make a video demo if I get some time. If you have any doubts in the instructions, drop your comments below.
Step 1: Open your Blogger Dashboard and navigate to Edit HTML and check on Expand Widget Templates
Step 2: Now search for ]]></b:skin> and paste the below code before ]]></b:skin>
#feedback{
background-color:#9db09f;
width:310px;
height:330px;
position:fixed;
bottom:0;
right:120px;
margin-bottom:-270px;
z-index:10000;
}
#feedback .section{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMDw6AvW_-Nz6anbzIDQ5ayKav-YcnKu6bfCNmM_Vg8SGUbNTCdc5_oOqSEF2jjwSy63hP5lesl_YkFSvYNOOuxttJv2RYS5lLHc2l8ptGMwsC1UcR0SIQUrP3rMfOIwcrz7k5sl2kPPte/s1600/bg.png') repeat-x top left;
border:1px solid #808f81;
border-bottom:none;
padding:10px 25px 25px;
}
#feedback .color{
float:left;
height:4px;
width:20%;
overflow:hidden;
}
#feedback .color-1{ background-color:#d3b112;}
#feedback .color-2{ background-color:#12b6d3;}
#feedback .color-3{ background-color:#8fd317;}
#feedback .color-4{ background-color:#ca57df;}
#feedback .color-5{ background-color:#8ecbe7;}
#feedback h6{
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw5BHWcD5EGdtVFiazzgITnCbwZkZ3YAjtpTExUdYKFZ-kAoDdIvG0TB992Kzb3m5zyBbD8tDYnly1B2eAsBprbrOn5-_DCZU3wAptHVg_e8mnlXCa1MrChbgrpJZpHkvl9xWhPiDY8Ddp/s1600/feedback.png") no-repeat;
height:38px;
margin:5px 0 12px;
text-indent:-99999px;
cursor:pointer;
}
#feedback .message{
font-family:Corbel,Arial,sans-serif;
color:#5a665b;
text-shadow:1px 1px 0 #b3c2b5;
margin-bottom:20px;
}
#feedback .arrow{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMNsM7Dof1RGACExdAqbuGko2MwTiQ6C4cGvzz5wXBVtCoOIMhxXG_Y_8qanVGD5x1p4HCDxxhdDN4cC4bxb-ZLNBR9GNO9plbVfjdz3y9WRmx6URavjdIaaPIDF7G25N0-intBU-QCs0d/s1600/arrows.png') no-repeat;
float:right;
width:23px;
height:18px;
position:relative;
top:10px;
}
#feedback .arrow.down{ background-position:left top;}
#feedback h6:hover .down{ background-position:left bottom;}
#feedback .arrow.up{ background-position:right top;}
#feedback h6:hover .up{ background-position:right bottom;}
Step 3: Search for <div id='main-wrapper'> and place the below before <div id='main-wrapper'><div id='feedback'> <!-- Five color spans, floated to the left of each other --> <span class='color color-1'/> <span class='color color-2'/> <span class='color color-3'/> <span class='color color-4'/> <span class='color color-5'/> <div class='section'> <!-- The arrow span is floated to the right --> <h6><span class='arrow up'/>Feedback</h6> <p class='message'>Drop in your suggestions about our blog. We appreciate your feedback.</p> WUFOO FORM SCRIPT GOES HERE </div> </div>Step 4: In order to ensure the smoothness when its clicked, we are adding a little script. If jQuery is initialized previously initialized in your blog template, add only the second script after <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/> <script src='http://sites.google.com/site/bloggermint/script.js'/>Step 5: This is the very important step. In order to add a form to the feedback form, I am using Wufoo forms to be integrated in the feedback form. So visit Wufoo website, create a free account. After creating the account, you will be taken to the form creator dashboard, now select paragraph text to insert it in the form
Once you added the paragraph text, click save and select I’m finished! Take me back to the form manager
Step 6: Now you will be in Forum Manager, so click on Default theme drop down box and select New Theme. In theTheme Designer you have to do certain things
1. Go to Backgrounds > Highlight and change the color to transparent
2. Go to Buttons and select the button type as link and enter this link there https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8O0uV4nOTfDt1WFku8i-UvWQu9CkLNtfIzDSMxJDJTtMa0-0sr-4iH8u2Xjg4NQQbmlR1uQpS1qvALLmialpZa3xMot2vpgwPb_whAohVjbHlYhyphenhyphenie_96hsvjXClT-ze7V3hMxPU2HOyU/s1600/submit.png
3. Go to Advanced and paste this URL on the text box – http://sites.google.com/site/bloggermint/feedback.css
Thats it. Now name the theme and save it. After saving the form, click on code of the form from the forum manager page and select Embed form code and copy the javascript from there
Finally paste the copied code in the step 3 by replacing the text “WUFOO FORM SCRIPT GOES HERE” and save the Blogger template.
I know the steps may look hard for the beginners, may be I can try to make a video demo if I get some time. If you have any doubts in the instructions, drop your comments below.
April 16, 2011. This entry was posted in Blogger, CSS, jQuery and tagged feedback form. Bookmark the
Bolo 10
![[B]](http://blogger.globo.com/images-br/logo152a.gif)
O que é Blogger?
O Blogger é uma ferramenta de Internet que ajuda você a publicar e atualizar seu blog a todo instante, de qualquer lugar do planeta, sem complicação ou programação.
O que é um weblog ou blog?
O blog é uma página web atualizada freqüentemente, composta por pequenos parágrafos apresentados de forma cronológica. É como uma página de notícias ou um jornal que segue uma linha de tempo com um fato após o outro. O conteúdo e tema dos blogs abrange uma infinidade de assuntos que vão desde diários, piadas, links, notícias, poesia, idéias, fotografias, enfim, tudo que a imaginação do autor permitir.
Usar um blog é como mandar uma mensagem instantânea para toda a web: você escreve sempre que tiver vontade e todos que visitam seu blog tem acesso ao que você escreveu.
Vários blogs são pessoais, exprimem idéias ou sentimentos do autor. Outros são resultado da colaboração de um grupo de pessoas que se reúnem para atualizar um mesmo blog. Alguns blogs são voltados para diversão, outros para trabalho e há até mesmo os que misturam tudo.
Os blogs também são uma excelente forma de comunicação entre uma família, amigos, grupo de trabalho, ou até mesmo empresas. Ele permite que grupos se comuniquem de forma mais simples e organizada do que através do e-mail ou grupos de discussão, por exemplo. Crie um blog privativo para sua equipe de trabalho discutir projetos e apresentar soluções. Ou crie um blog familiar para que seus parentes troquem notícias e fotos a todos os membros.
A melhor forma de entender o funcionamento de um blog é visitando um. Na home do Blogger.com.br você tem o Blogs of Note, que são os blogs que mais chamaram a nossa atenção - navegue por eles!
O que o Blogger faz?
O Blogger permite que você atualize seus blogs de um jeito fácil e simples, sem se preocupar com instalação de programas, códigos ou scripts. Ele dá total controle sobre o conteúdo e o visual de seus blogs e ainda permite que você faça tudo isso de qualquer lugar do planeta, através da Internet.
Tecnicamente, ao invés de editar manualmente suas páginas web e fazer o upload delas para o local em que estão hospedadas, você utiliza o Blogger em seu navegador e, através de uma interface amigável, atualiza instantaneamente o conteúdo de seu blog.
Como o Blogger funciona?
É simples: você utiliza um formato pronto disponível da biblioteca de estilos ou fornece ao Blogger o formato básico de sua página ou site. Depois, é só inserir e publicar o conteúdo utilizando o Blogger e usando os botões de comando. Pronto, sua página está atualizada! Sempre que você quiser adicionar novidades, notícias ou qualquer outro conteúdo ao seu blog ou site, basta escrever no Blogger e publicar.
Se você é um usuário avançado, poderá utilizar as funcionalidades do Blogger em seu site ao lado de scripts, includes, ferramentas Java e diversas outras possibilidades. É possível utilizá-lo até como um "include" em alguma área de seu site. E se você não entende nada disso, nem se preocupe em saber do que se trata: o Blogger é simples para quem quer simplicidade e extremamente poderoso para quem deseja ir mais fundo.
Como eu começo a utilizar o Blogger?
Fácil: basta clicar aqui. E se você tiver dúvidas, problemas ou sugestões, utilize nosso sistema de ajuda.
Bem-vindo ao mundo dos bloggers!
Bolo 10
Para realizar a tarefa de produzir conteúdo diário no formato de um blog é preciso ter vocação. Não é todo mundo que tem a disciplina e a força de vontade para escrever todos os dias, chova ou faça sol. Além da inspiração e muita personalidade, qualidades fundamentais para se destacar entre milhares de outros blogs, você é preciso uma grande dose de dedicação, muita transpiração.
Muitos dizem que os blogs estão morrendo, por causa da imensa popularidade das redes sociais. Não acredito que seja o caso, não é uma morte, e sim uma transformação. Blogs reconhecidos em seus nichos continuam com seu público, e desempenham um papel fundamental.
Essa e a minha mensagem, parabéns a todos os blogueiros.
Bolo 10
Vamos ao Tutorial:
1º – Acesse o painel do seu blog e clique na guia modelo.
2º – Depois clique no botão Editar HTML.
3º – Segure as teclas CTRL+F e procure por:
</head>
4º – E, acima dele, cole o seguinte código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/73386157/codigos/minipopup/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
5º – Em seguida, segure novamente as teclas CTRL+F e procure por:
]]></b:skin>
6º – E, acima dele, cole o seguinte código:
#fanback{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#fan-exit{width:100%;height:100%}
#fanbox {background: white;width: 420px;height: 270px;position: absolute;top: 58%;left: 63%;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}
#fanclose {float: right;cursor: pointer;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhww3aHEit_fr8AR6-TBXyFc9sNQYVycdPIw19daXkSgguPYNvJ3Y-_F9W6663TKuCCMG0IqgpuMrtY2mZIpyG0Y5mAW8_z9XJ3wAFy5E8EFDusryUISVe5-htJ_T_jQYnYTwGVKuRwDKlz/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;}
.remove-borda {height: 1px;width: 366px;margin: 0 auto;background:#F3F3F3;margin-top: 16px;position: relative;margin-left: 20px;}
7º – E, pela última vez, segure as teclas CTRL+F e procure por:
<body>
8º – E, abaixo dele cole o seguinte código:
<div id='fanback'><div id='fan-exit'/><div id='fanbox'><div id='fanclose'/><div class='remove-borda'/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=ENDEREÇO DA SUA FAN PAGE AQUI&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false&appId=329902783740649" scrolling="no" frameborder="0" style="border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;" allowTransparency="true"></iframe>
</div></div>
8º – E, abaixo dele cole o seguinte código:
Bolo 10
Se gostou comente
Bolo 10
Aee gente como todo mundo sabe o omar ta quase saindoo e o igoogle tbm poq pooq os outros sem citar noome ;D naum dao valorizaçãoo e eu tbm to quase paritndoo eu que ajudei o icaro a crescer com o blog que eu ia compra o dominio ou no final do anoo ou ano qvem mas NAUM VOU MAIS SO PRA AVISAR ICARO pooq ? porcauso desses fdp sem citar nomes ;D entao é isso aee so vim avisar dessa noticia e num sei se voou continuar no DESIGN FURIA pois eu que ajudei ele a crescer ofi bom conheçer o icaroo mas fazer oq neéh o aaa sem sitar nome ;D os outros aee ficam dando mod owner so o icaro poode entao eles daoo ate pra quem num sabe nem fazer um header direiito naum sabe fazer nada dae fica fooda naum fica agente quer corrigir e o icaro vai la e kicka agente tipo alguem vai la e fica flood igual ao aa sem citar nome ;D entao continuando o cara ta flod laa pra quem naum sabe é ficar escrevendo em varias linhas agente vai la e kicka sem flod kicka 5 vezes o 6 é ban por 1 hr o icaro vai la e kicka agente entao para que por regras em ?? então é isso pessoal eu num vou sair por enquanto vou dar mais uma chance naum pra esses fdp aee mas sim para o icaro que eu acho que merece eeu pq considera eu e mtoo e eu tbm considero ele pra pakas entao é isso ;D
Bolo 10
Ai man clica na imagem pra salvar em gif
Ok
Se gostou comente
Bolo 10
Bolo 10
