home
how it works
designer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drag into bookmarklets bar</title> <style> * { margin: 0; padding: 0; min-height: 100%; } /* CSS CODE */ .BOOKMARKLET { display: flex; flex-direction: column; } .title { font-family: 'Courier New', Courier, monospace; text-align: center; border-bottom: 1px solid #f3f2f2; } .content { padding: 10px; flex-grow: 1; flex-shrink: 0; } .content p { padding: 5px 0; } .footer { text-align: center; padding: 3%; background-color: #f1f1f1; } </style> </head> <body> <div class="BOOKMARKLET"> <!-- HTML CODE --> <h1 class="title">Bookmarklet Name</h1> <div class="content"> <p>- Press the save icon to update</p> <p>- Drag the bookmarklet button into your bookmars bar (ctrl+shift+b) to install</p> <p>- Works on most pages (other than the default one!)</p> </div> <footer class="footer"> <a href="./advanced.html" target="_parent" rel="noopener noreferrer">Not what you after? try this one!</a> </footer> </div> <script> // JS CODE </script> </body> </html>
Drag into bookmarklets bar