Home | Profile | My Blog
PolyRaptor/Byte🛸👾

Last Login:
February 6th, 2024

View All Posts


Gender: Male
Age: 18
Sign: Leo
Country: Spain

Signup Date:
December 17, 2020

Subscriptions

03/17/2021 01:03 PM 

Pop-up layout pic tutorial
Category: Resources




Hewo hoomans! Today I'm teaching y'all how to make these "pop-up" images I have on my profile :D

All you need is this code! I'll explain where to put everything just in a moment


<img src="(insert image link here)" style="position:absolute;top:(insert coordinate)px;left:(insert coordinate)px;" width="(insert image width)" height="(insert image height)" border=0 alt="(a word)">

So, let's get started!

1.Image link: Search some picture you like and copy its link. If the picture you want to use in on your pc and not on the internet upload the picture to a webpage and copy the link (I recommend using imgur).
The code would look like this:

<img src="https://i.imgur.com/kEYLjNr.gif" style="position:absolute;top:(insert coordinate)px;left:(insert coordinate)px;" width="(insert image width)" height="(insert image height)" border=0 alt="(a word)">

2.Coordinates: This one is a bit tricky.
Next to top: write a number according how far from the top you want your image to be (For example, if you want it near to the top write something like 1px and if you want it far write 800px). Don't forget to write "px" after the number.
Next to left: The same as with top, but this time the position will change according to the left (For example, if you want the image to be near the left write 1px and if you want it far write 800px).
The code looks like this now:

<img src="https://i.imgur.com/kEYLjNr.gif" style="position:absolute;top:10px;left:20px;" width="(insert image width)" height="(insert image height)" border=0 alt="(a word)">

3.Width and height: For this you will need to know the dimensions of the picture you are using, you can look at them by downloading the picture(in case you don't have it on your computer already), pressing right click on the file, clicking properties and clicking the details tab. Then write the width and height on the picture on the code. In case that it is too big, you can make the picture smaller by dividing the dimension by some number (for example, if you divide the dimension by 2, the will one half smaller than before).
The code now looks like this:

<img src="https://i.imgur.com/kEYLjNr.gif" style="position:absolute;top:10px;left:20px;" width="220" height="165" border=0 alt="(a word)">

4. Key word: This step isn't really necessary, but I really recommend to do it. Just insert a key word for your picture there. This is really useful in case your layout has lots of this images. You can press Ctrl+F to make a search bar appear when you are editing your layout to find a specific image code easier.
The final code looks like this:

<img src="https://i.imgur.com/kEYLjNr.gif" style="position:absolute;top:10px;left:20px;" width="220" height="165" border=0 alt="cute picture">

The last step is to copy the code and paste it somewhere on your profile!

0 Comments  

View All Posts

View All Posts



Mobile | Terms Of Use | Privacy | Cookies | Copyright | FAQ | Support

© 2024. FriendProject.net All Rights Reserved.