Back to top icon

Loes Knetsch ©

The default Back Top Top button is so boring. But hey, we can do something about that! You can change the Back to Top button into any icon you want.

Rocket Icon 80

You can use any icon for your Back To Top button, I give you a couple you can use right away, but you can also create one yourself if you like. You can find great icons on Icon8.com

Icon Rocket-100 icon paper-plane-100 icon firework-100 icon dirigible-100 icon cupcake-with-a-berry-100 icon balloons-100 icons glyder 100

How To Create A Back To Top Icon?

  1. Go to Icons8.com and find a great icon
  2. Choose for a size of 96 – 128
  3. Upload the image to Pixlr.com/editor
  4. Resize the image to 100px
  5. Go to edit & free transformation, shift the image if needed
  6. Add text
  7. Save

When the text needs to be added to an angle, then you can create the text on a transparent background, that goes as follow

  1. Create new image on Pixlr.com/editor Size 70px by 50px, choose transparent
  2. Write your text
  3. Save
  4. Open your icon image from your computer
  5. Add the text as a layer
  6. Shift it into position by using free transformation
  7. Save image

You may use these 2

UP TOP

When you have created your smashing Back to the Top icon, you can upload this icon to your website media library and fill in the alt text. If you don’t fill in the alt text, the HTML widget will give an error, that the alt text is missing.

It's not rocket science to get to the top (of your blog) 🙂 Click To Tweet

Time for the Back to Top code

The code is added into a custom HTML widget

  1. Paste below code on a test post
  2. Select the part paste here your image URL
  3. Add media, choose your icon (with alt text)
  4. Copy the code
  5. Paste it into the sidebar or full-width footer widget area
  6. Save
  7. You now have an awesome Go to Top button

Back to Top Code

<a style=”display: scroll; position: fixed; bottom: 5px; right: 5px;” href=”#”><img src=”paste here your image URL” /></a>

Custom HTML widget code back to top button

 

You had already a Back to Top default button?

So, now there are 2 buttons displayed? Your awesome new icon and the boring Back to Top text button. Here is how you deactivate this boring button on your WordPress dashboard.

You can easily disable your Back to the Top default button in your CCsettings.

  1. Go to dashboard
  2. Appearance
  3. CC settings
  4. Advanced settings
  5. Un-check the box “enable scroll to top button”

Best website education online

Learn all you need to know about website development, design, affiliate marketing, SEO (Search Engine Optimization) and more…

Best coaches Kyle and Carson

 

Other interesting posts

 

 

(Visited 22 times, 1 visits today)

Hey, nice to meet you. I am Loes and I love to work, create and make money on the internet. My vision for the future is promising because the activities and sales go to triple over the next few years. You can take advantage of it too. Step into the world of affiliate marketing today, and work towards financial freedom for you and for your family. If you would like to learn how to build your own Wordpress website, click here to open your free account today!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>