..:: Bottoni top pagina tag e pixel ::..

Bottoni top pagina realizzati in grafica romantica e con personaggi un po' buffi,
nella prima versione, "soft" anche le scrittine sono immagini, sostituiscono il testo per i link,
BACK torna indietro, nella pagina precedente e TOP PAGE vai su, nelle anteprime sembrano tagliati male
ma l'effetto sarà come il bottone che vedete nelle pagine del telaio, il codice è inserito in un div
affinchè si visualizzi attaccato alla base della pagina, modificate se necessario, il parametro "right:20px;"
per aumentare o diminuire lo spazio alla destra della pagina, questi bottoni hanno un codice
più lungo rispetto agli altri che ho realizzato perchè contengono diversi elementi

🌻Questo è un esempio del codice per i bottoni soft

<!-- Bottone TopPage - Penelope -->
<div style="border: 0px; background-image:url('https://url-telaio/nome-immagine.png'); position:fixed; bottom:0px; right:20px; width: 144px; height: 90px;">
<table style="border: 0px; margin-left: auto; margin-right: auto;" width="100%">
<tr>
<td height="58"><img src="https://url-telaio/stellinedorate.gif" width="32" height="32" alt=""></td>
</tr>
<tr>
<td style="text-align: center;"><a href="javascript:history.back()"><img src="https://url-telaio/back_scuro.png" width="53" height="15" alt="Torna indietro"></a>
<a href="#top"><img src="https://url-telaio/top_scuro.png" width="53" height="15" alt="Torna su..."></a></td>
</tr>
</table></div>
<!-- Bottone TopPage - Penelope -->  

🌹Per prelevare il codice posizionate il cursore sui boxini (textarea) sotto le anteprime
e cliccate, sarà copiato automaticamente, incollatelo nella vostra pagina subito prima del tag
</body> (tag di chiusura pagina) così non si crea confusione con il resto dei codici

Nei blog Blogspot basterà incollare il codice in un box "Aggiungi gadget - HTML/JavaScript"

Spero vi siano utili, se prelevate un Top pagina ricordatevi di mettere
un link per il telaio ❣ Link e Banner Grazie... Penelope ♥

Versione soft

Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; background-image:url('https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_bottoncino_top_1.png'); position:fixed; bottom:0px; right:20px; width: 144px; height: 90px;"> <table style="border: 0px; margin-left: auto; margin-right: auto;" width="100%"> <tr> <td height="58"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/stellinedorate.gif" width="32" height="32" alt=""></td> </tr> <tr> <td style="text-align: center;"><a href="javascript:history.back()"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/back_scuro.png" width="53" height="15" alt="Torna indietro"></a> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/top_scuro.png" width="53" height="15" alt="Torna su..."></a></td> </tr> </table></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; background-image:url('https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_bottoncino_top_2.png'); position:fixed; bottom:0px; right:20px; width: 139px; height: 84px;"> <table style="border: 0px; margin-left: auto; margin-right: auto;" width="139"> <tr> <td height="54" width="43"></td> <td height="54" width="86"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/stellinedorate.gif" width="32" height="32" alt="" /></td> </tr> <tr> <td style="text-align: center;" width="133" colspan="2"><a href="javascript:history.back()"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/back_scuro.png" width="53" height="15" alt="Torna indietro" /></a> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/top_scuro.png" width="53" height="15" alt="Torna su..." /></a></td> </tr> </table></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; background-image:url('https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_bottoncino_top_3.png'); position:fixed; bottom:0px; right:20px; width: 139px; height: 82px;"> <table style="border: 0px; margin-left: auto; margin-right: auto;" width="100%"> <tr> <td height="50" width="43"></td> <td height="50" width="86"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/stellinedorate.gif" width="32" height="32" alt="" /></td> </tr> <tr> <td style="text-align: center;" width="133" colspan="2"><a href="javascript:history.back()"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/back_chiaro.png" width="53" height="15" alt="Torna indietro" /></a> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/top_chiaro.png" width="53" height="15" alt="Torna su..." /></a></td> </tr> </table></div> <!-- Bottone TopPage - Penelope -->
Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; background-image:url('https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_bottoncino_top_4.png'); position:fixed; bottom:0px; right:20px; width: 141px; height: 82px;"> <table style="border: 0px; margin-left: auto; margin-right: auto;" width="92%"> <tr> <td height="50" width="34%"></td> <td height="50" width="59%"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/stellinedorate.gif" width="32" height="32" alt="" /></td> </tr> <tr> <td style="text-align: center;" colspan="2"><a href="javascript:history.back()"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/back_scuro.png" width="53" height="15" alt="Torna indietro" /></a> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/top_scuro.png" width="53" height="15" alt="Torna su..." /></a></td> </tr> </table></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; background-image:url('https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_bottoncino_top_5.png'); position:fixed; bottom:0px; right:20px; width: 142px; height: 87px;"> <table style="border: 0px; margin-left: auto; margin-right: auto;" width="92%"> <tr> <td height="56" width="17%"></td> <td height="56" width="76%"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/stellinedorate.gif" width="32" height="32" alt=""></td> </tr> <tr> <td style="text-align: center;" colspan="2"><a href="javascript:history.back()"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/back_scuro.png" width="53" height="15" alt="Torna indietro"></a> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/top_scuro.png" width="53" height="15" alt="Torna su..."></a></td> </tr> </table></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; background-image:url('https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_bottoncino_top_6.png'); position:fixed; bottom:0px; right:20px; width: 139px; height: 68px;"> <table style="border: 0px; margin-left: auto; margin-right: auto;" width="100%"> <tr> <td height="34" width="32%"></td> <td height="34" width="61%"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/stellinedorate.gif" width="32" height="32" alt="" /></td> </tr> <tr> <td style="text-align: center;" colspan="2"><a href="javascript:history.back()"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/back_scuro.png" width="53" height="15" alt="Torna indietro" /></a> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/top_scuro.png" width="53" height="15" alt="Torna su..." /></a></td> </tr> </table></div> <!-- Bottone TopPage - Penelope -->
Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; background-image:url('https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_bottoncino_top_7.png'); position:fixed; bottom:0px; right:20px; width: 139px; height: 73px;"> <table style="border: 0px; margin-left: auto; margin-right: auto;" width="100%"> <tr> <td height="40" width="32%"></td> <td height="40" width="61%"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/stellinedorate.gif" width="32" height="32" alt="" /></td> </tr> <tr> <td style="text-align: center;" colspan="2"><a href="javascript:history.back()"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/back_chiaro.png" width="53" height="15" alt="Torna indietro" /></a> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/top_chiaro.png" width="53" height="15" alt="Torna su..." /></a></td> </tr> </table></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; background-image:url('https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_bottoncino_top_8.png'); position:fixed; bottom:0px; right:20px; width: 141px; height: 75px;"> <table style="border: 0px; margin-left: auto; margin-right: auto;" width="92%"> <tr> <td height="44" width="70%"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/stellinedorate.gif" width="32" height="32" alt="" /></td> <td height="44" width="20%"></td> </tr> <tr> <td style="text-align: center;" colspan="2"><a href="javascript:history.back()"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/back_chiaro.png" width="53" height="15" alt="Torna indietro" /></a> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/top_chiaro.png" width="53" height="15" alt="Torna su..." /></a></td> </tr> </table></div> <!-- Bottone TopPage - Penelope -->

Versione pucciosa

Questi bottoni sono realizzati completamente in grafica scritta compresa ma
per essere visualizzati ben attaccati alla base della pagina è necessario inserire link
e immagine in un div, ed ecco un esempio del codice

<!-- Bottone TopPage - Penelope -->
<div style="border: 0px; position:fixed; bottom:0px; right:30px; width: xxpx; height: xxpx;">
<a href="#top"><img src="https:url telaio/nome-img.png" width="xx" height="xx" alt=""></a></div>
<!-- Bottone TopPage - Penelope -->  

Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; position:fixed; bottom:0px; right:30px; width: 91px; height: 150px;"> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_toppage_micio.png" width="91" height="150" alt="Torna su"></a></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; position:fixed; bottom:0px; right:30px; width: 162px; height: 138px;"> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_topage_gufottox.png" width="162" height="138" alt="Torna su"></a></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; position:fixed; bottom:0px; right:30px; width: 158px; height: 133px;"> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_topage_fatinax.png" width="158" height="133" alt="Torna su"></a></div> <!-- Bottone TopPage - Penelope -->
Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; position:fixed; bottom:0px; right:30px; width: 138px; height: 128px;"> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_toppage_cuore.png" width="138" height="128" alt="Torna su"></a></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; position:fixed; bottom:0px; right:30px; width: 158px; height: 121px;"> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_toppage_dolly.png" width="158" height="121" alt="Torna su"></a></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; position:fixed; bottom:0px; right:30px; width: 158px; height: 88px;"> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_toppage_cuoriciottox.png" width="158" height="88" alt="Torna su"></a></div> <!-- Bottone TopPage - Penelope -->
Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; position:fixed; bottom:0px; right:30px; width: 158px; height: 87px;"> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_topage_vintagex.png" width="158" height="87" alt="Torna su"></a></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; position:fixed; bottom:0px; right:30px; width: 159px; height: 79px;"> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_toppage_nuvola.png" width="159" height="79" alt="Torna su"></a></div> <!-- Bottone TopPage - Penelope -->	Clicca per copiare <!-- Bottone TopPage - Penelope --> <div style="border: 0px; position:fixed; bottom:0px; right:30px; width: 138px; height: 63px;"> <a href="#top"><img src="https://www.iltelaiodipenelope.it/gadget/top_page/img/penelope_toppage_fiore.png" width="138" height="63" alt="Torna su"></a></div> <!-- Bottone TopPage - Penelope -->

Segui il telaio su Facebook

Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname

Home page

B I U URL

Invia commento

I vostri commenti in questa pagina...

~ Pagina visitata da 800 utenti