[TUTORIAL] Salvamento automático de texto em Widget do fórum

Por varias vezes em nossos fóruns, nós temos que sair e assim um trabalho como um texto, um lembrete pode ser perdido. Neste tutorial iremos mostrar como colocar a função Notepad em teu fórum e assim salvar qualquer texto no Widget.




1º - Noção básica da função:
Antes, teremos que criar um Widget personalizado para que o código possa ser executado. Abaixo mostramos algumas etapas na hora de criar o Widget que recebera o código.

Nome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle.

Utilizar um table type: - Nesta opção, deverá ser marcado o "Não".

Título do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente.

Fonte do widget: - Neste campo, Devemos inserir o seguinte código: Código: <style>     .notepad {     text-shadow: 0 1px 0 white;     font: bold 11px Helvetica, Arial, sans-serif;     color: rgb(68, 68, 68);     line-height: 17px;     }     .notepad {     text-decoration: none;     text-shadow: 0 1px 0 white;     font: bold 11px Helvetica, Arial, sans-serif;     color: rgb(68, 68, 68);     line-height: 17px;     height: 18px;     display: inline-block;     margin: 5px;     padding: 5px 6px 4px 6px;     background: rgb(243, 243, 243);     border: solid 1px rgb(217, 217, 217);     border-radius: 2px;     -webkit-border-radius: 2px;     -moz-border-radius: 2px;     -webkit-transition: border-color .20s;     -moz-transition: border-color .20s;     -o-transition: border-color .20s;     transition: border-color .20s;     position: absolute;         z-index: 99999!important;     }     .notepad span.icon {     background-image: url('http://code.brucegalpin.com/google-plus-ui-buttons/images/google+-ui-sprite-gray.png');     display: inline-block;     margin: 0 7px;     float: left;     line-height: 18px;     height: 18px;     width: 18px;     max-width: 18px;     overflow: hidden;     text-indent: -9999px;     background-repeat: no-repeat;     -webkit-transition: background-image 0.20s linear;     -moz-transition: background-image 0.20s linear;     -o-transition: background-image 0.20s linear;     transition: background-image 0.20s linear;     }     span.icon137 {     background-position: -288px -108px;     }     .notepad:hover span.icon {     background-image: url(http://code.brucegalpin.com/google-plus-ui-buttons/images/google+-ui-sprite-colour.png);     }     .contnotepad {         position: absolute;         z-index: 9999!important;         background: white;         border: 2px solid rgb(38, 114, 200);         margin-left: 49px;         margin-top: 5px;         min-height: 100px;         padding: 10px;     }     .notepad.ativo {                border: 2px solid rgb(38, 114, 200);         border-right: none;         border-radius: 0px;     }     .wrapnotepad {         height: 50px;     }     #notepadval {         display: block;         margin: 10px;         height: 150px;         width: 300px;     }     span.icon67 {     background-position: -108px -54px;     }     </style><script>     jQuery(document).ready(function () {         if (localStorage.getItem('notepad') != null && localStorage.getItem('notepad') != '') {             jQuery('#notepadval').val(localStorage.getItem('notepad'));         }         jQuery('a.notepad').click(function () {             if (jQuery(this).attr('class').indexOf('ativo') != -1) {                 jQuery(this).removeClass('ativo');             } else {                 jQuery(this).addClass('ativo');             }             jQuery('.contnotepad').fadeToggle(100);             if (jQuery('#notepadval').val() != null && jQuery('#notepadval').val() != '') {                 localStorage.setItem('notepad', jQuery('#notepadval').val());             }             return false         });     });     </script>     <div class="wrapnotepad">         <a href="#" class="notepad"><span class="icon icon67"></span></a>       <div class="contnotepad" style="display:none;">           Escreva aqui o conteúdo a ser salvo:<textarea id="notepadval"></textarea>       </div>            </div>

Salvar: - Para que o widget apareça corretamente, este box deve ser acionado, após as devidas modificações.

Resultado:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Salvamento automático de texto em Widget do fórum