#blog tutorial

The Code

(Copy everything in this box!)

<style> /* --- THE STYLING --- */ #scrollToTopBtn { position: fixed; bottom: 30px; right: 30px; z-index: 999999; /* Sits on top of everything */ border: none; outline: none; background-color: {color:Post Background}; /* Matches your post color */ cursor: pointer; padding: 12px; border-radius: 50%; opacity: 0; /* Hidden by default */ pointer-events: none; transition: opacity 0.4s, transform 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.15); border: 1px solid {color:Borders}; } #scrollToTopBtn.show { opacity: 1; pointer-events: auto; } #scrollToTopBtn:hover { transform: translateY(-5px); /* Cute hop effect */ } /* The Icon Settings */ #scrollToTopBtn img { width: 20px; /* Size of the icon */ height: auto; display: block; /* filter: invert(1); <--- UNCOMMENT THIS LINE if you need a white icon! */ } </style> <div id="scrollToTopBtn" onclick="scrollToTop()"> <img src="https://static.tumblr.com/obptcxj/p59mo0l0s/pin.png" alt="Scroll to Top"> </div> <script> var mybutton = document.getElementById("scrollToTopBtn"); // Show button when scrolling down 100px window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { mybutton.classList.add("show"); } else { mybutton.classList.remove("show"); } } // Smooth scroll to top function function scrollToTop() { window.scrollTo({top: 0, behavior: 'smooth'}); } </script>

How to Customize

Change the Icon: Look for the line that starts with <img src="…. Replace the URL inside the quotes with any image URL you like!

Change the Color: If your icon is black but your theme is dark, find /* filter: invert(1); … / in the CSS section and remove the / and */ to turn the icon white.

Change the Position: In the CSS section, change bottom: 30px; or right: 30px; to move it around.

3. Once you’re there, your main focus should be on the white box that’s called Description. There, you’re going to add all your links and any text you wish to include in your Description/Bio. Certain HTML codes must be included in your description for your links to be added, don’t worry, I’ll provide the codes and you can copy and paste them. If you’re able to zoom into the image, you’ll be able to see how my description was written.

Code for a break between lines: <br> (this is the code to skip lines in your Description as using the Enter key is not accepted)

Code for inserting links: <a href=“Insert your copied link here”>Insert Title of Link</a>

Note that as you are entering your text into the Description box, your words will begin to appear in the Description/Bio on the right-hand side of the screen (highlighted). It’s to show how your text and links will appear to you and others. Consider it your guide.

4. Once you are finished entering all your links and text in your Description, select Save (the blue button), but do not exit the page yet, keep it open. Return to the tab that’s opened to your blog, and click on your profile icon to open your blog in the Tumblr view version where your Description/Bio has been updated.

Do a test run to ensure that the links are correctly working and opening up to the right post/blog, etc. Once they are working, you can return to the previous tab, select Exit and then close off your tab.

Congratulations, you have successfully added links to your Description/Bio!!

Extra Pointers:

As you are on the Edit Theme page, you can also use Fancy Fonts, as seen in my Description, to add fancy text that Tumblr does not provide (optional).

Editing the colour of the text can be done on that page as you are there.

the <S> option would make your text smaller :)). hope that helps!