tutorial

A little introduction to what bookmarklets are...

Bookmarklets are bits of javascript code that run directly in your browser. They are similar to bookmarks, but instead of a link, there's a bit of javascript code that starts with "javascript:". They usually are interactive and fun (javascript makes things interactive, css is colors, position, and other styling, while HTML is sort of the backbone, or skeleton of your webpage). Bookmarklets use only javascript, but can be coded in such a way that embeds CSS and HTML code into your bookmarklet. This is unsurprising, since all three languages need to work together somehow. Prior knowledge of all three languages is recommended, but not necessary! You can easily search up how to do javascript, html, or css. w3schools.com is a good website to find how to's. Below, I'll show you how you can create your own bookmarklet, with absolutely no prior knowledge required.

1. The first thing you want to do is open a code editor like jsfiddle.net

2. then, you want to create a variable that creates with an element

the way to create a variable in javascript is to type "var x = something;"

you do need a semicolon at the end of each statement, but modern day javascript has an auto feature that appends one automatically

lets create a variable x.

3. choose the type of element (e.g. video, img, div)

for img and video, you need to have a source (shown next next step)

lets create an img element.

4. style the element (css knowledge recommended)

change the color (useless for videos and img elements), set position

height and width change, well, the height and width of the element

for now we only use absolute for the position, because it allows us to define a set position that the element will appear at

left means how many px away from the left side of the screen, and right means vice versa

top means how many px from the top of the screen, bottoms means vice versa

**also, you might want to check the image presets, which means the original dimensions. using those will allow you to create a flawless image like the original (you can also resize it accordingly to the aspect ratio)

lets have our image be 300px by 300px and 250px away from the left and top of the screen.

5. adding a source (img and video elements)

you need to have a source for img and video elements. the link should end in some img format, like how the link below ends with ".jpg"

lets have this link be the barack obama img.

6. append it to the webpage

almost done! now, you need to add one line of code that creates, or appends it to the webpage.

add the bottom line in the screenshot below to your code.

7. create a bookmarklet out of it

go to bookmarklet.org/maker and paste your code in the javascript section.

dont fiddle with the check boxes, leave them untouched.

8. Get the bookmarklet

at the bottom, click the my bookmarklet link to test it out!

drag the link to the bookmarks bar then to have it on the go, anywhere.

9. CELEBRATE!!!

cheers! you made your first bookmarklet.

whenever you want to use the bookmarklet, you can click on the bookmark that you have made by dragging it there.

you can also search up more javascript tutorials so you can learn it. Then, you'll be a master at bookmarklets in no time!