Rebeckah's Treasures
  • Home
  • About
    • Who Am I?
    • My Crochet Story
    • Mission
    • Disclosure Policy
    • Skill Levels
  • Store
    • Crochet Patterns
      • Special Offers
      • New Releases
      • Accessory Crochet Patterns
      • Afghan Square Crochet Patterns
      • Amigurumi Crochet Patterns
      • Applique Crochet Patterns
      • Baby Crochet Patterns
      • Dolly Crochet Patterns
      • Fashion Doll Crochet Patterns
      • Free Downloads
      • Holiday Crochet Patterns
      • Tapestry Crochet Patterns
      • Under the Sea Crochet Patterns
      • Wedding Crochet Patterns
    • Loyalty Program
      • List of Loyalty Program Patterns
    • Disclaimer and FAQs
  • Blog
    • Blog Archive
    • Crochet Resources
    • Crochet Stitches
    • Get Your Crochet Patterns Featured!
  • Free
    • Free Crochet Patterns
    • New Free Releases
    • Free Accessory Crochet Patterns
    • Free Afghan Square Crochet Patterns
    • Free Amigurumi Crochet Patterns
    • Free Applique Crochet Patterns
    • Free Baby Crochet Patterns
    • Free Dolly Crochet Patterns
    • Free Fashion Doll Crochet Patterns
    • Free Guest Crochet Patterns
    • Free Holiday Crochet Patterns
    • Free Tapestry Crochet Patterns
    • Free Under the Sea Crochet Patterns
    • Free Wedding Crochet Patterns
    • Free Crochet Patterns Coming Soon
  • Contact
    • Newsletter
    • Suggest a Crochet Pattern
    • Testing Opportunities
  • Home
  • About
    • Who Am I?
    • My Crochet Story
    • Mission
    • Disclosure Policy
    • Skill Levels
  • Store
    • Crochet Patterns
      • Special Offers
      • New Releases
      • Accessory Crochet Patterns
      • Afghan Square Crochet Patterns
      • Amigurumi Crochet Patterns
      • Applique Crochet Patterns
      • Baby Crochet Patterns
      • Dolly Crochet Patterns
      • Fashion Doll Crochet Patterns
      • Free Downloads
      • Holiday Crochet Patterns
      • Tapestry Crochet Patterns
      • Under the Sea Crochet Patterns
      • Wedding Crochet Patterns
    • Loyalty Program
      • List of Loyalty Program Patterns
    • Disclaimer and FAQs
  • Blog
    • Blog Archive
    • Crochet Resources
    • Crochet Stitches
    • Get Your Crochet Patterns Featured!
  • Free
    • Free Crochet Patterns
    • New Free Releases
    • Free Accessory Crochet Patterns
    • Free Afghan Square Crochet Patterns
    • Free Amigurumi Crochet Patterns
    • Free Applique Crochet Patterns
    • Free Baby Crochet Patterns
    • Free Dolly Crochet Patterns
    • Free Fashion Doll Crochet Patterns
    • Free Guest Crochet Patterns
    • Free Holiday Crochet Patterns
    • Free Tapestry Crochet Patterns
    • Free Under the Sea Crochet Patterns
    • Free Wedding Crochet Patterns
    • Free Crochet Patterns Coming Soon
  • Contact
    • Newsletter
    • Suggest a Crochet Pattern
    • Testing Opportunities
Welcome Visitor! I hope you enjoy my treasures.

Disclaimer: This website makes use of sponsored and/or affiliate links. Please see this page for more information.

Website Shop 101 - How to Make a Return Button

25/2/2016

Comments

 
Creating Return Buttons - part six of the Website Shop 101 tutorial series for crafters with @beckastreasures
Welcome to lesson six of the Website Shop 101 tutorial series for crafters. You know those really cool buttons that some websites have that allow you to return to the previous page you were on? This part will show you how to make them.

This lesson assumes that you've already designed and created your shop buttons from lesson 2. If you haven't made a return or go back button, you should make one now. Otherwise, proceed with this lesson below...

Creating Your Return Button Code:

Here's what the return button code looks like, when you use an image as your button...

<FORM><onClick="history.go(-1);return true;"><img src="DownloadButtonImageURL" alt="Return" border="0" width="161" style="float:left"/></FORM>

Here's the download code breakdown:
  • <FORM><onClick="history.go(-1);return true;"></FORM> is the action that causes the user to go back one page.
  • <img src="" /> – you'll want to change DownloadButtonImageURL to the URL link address for your download button image.
  • alt="" – this is the alternate text shown in place of the button if it doesn't load properly. Plus, it serves as SEO. Change Download to whatever description you'd like. It is optional.
  • border="" – the standard is to leave it at 0 but you can adjust the number.
  • width="" – this is helps you adjust the width of the image in question. The number is the pixel size of said image. Simply change 144 to whatever pixel size you would like to use.
  • style="float:left" – is a tool I use that helps my return button to hover over the HR or line at the top of my pages. It hovering over the line was a happy accident that came to be when I was trying to make it stay to the left side of the page. I do not fully understand how I made that happen, but it works on my Weebly site. I can't guarantee that this effect will work on any website. So, this is an optional feature that you can remove completely from the code if you so choose. However, if you decide you want to keep it, simply change float:left to float:right to adjust it's position. For more info on alignment see www.3school.com's HTML <img> align attributes or www.3school.com's HTML Images.

Note: Make sure you use the full address of the URL in question.

Now let's see some examples of this code!

Example #1:

<FORM><onClick="history.go(-1);return true;"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/9555721_orig.png" alt="Return" border="0" width="161" style="float:left"/></FORM>

Return
Example #2:

<FORM><onClick="history.go(-1);return true;"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/9555721_orig.png" alt="Return" border="0" width="161" style="float:right"/></FORM>

Return

Now all you have to do is add this code wherever you'd like it to appear on your page.

Creating a Classical Return Button Code:

Here's the original return code for those of you looking for a classical look. You don't even need to change any part of it if you don't want too. Simply copy and paste it where you want it!

Here's what the code looks like...

<FORM>
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">
</FORM>


Although it is not necessary to change this code in any way, you might like to change the VALUE, so that it says whatever you'd like it to say instead.

Here are some examples...

Example #1:

<FORM>
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">
</FORM>

Example #2:

<FORM>
<INPUT TYPE="button" VALUE="Return" onClick="history.back()">
</FORM>

Example #3:

<FORM>
<INPUT TYPE="button" VALUE="Go Back to the Previous Page" onClick="history.back()">
</FORM>


Notice how changing the text between the double quotation marks "" changes what the finished button says? Simply change it to what you would like it to be, or copy and paste on of these examples onto your site!

Resources used in this tutorial:
  • Computer Hope - Creating a HTML back button
  • www.3school.com - HTML <img> align attributes
  • www.3school.com - HTML Images

Thanks so much for visiting today! Tell me what you thought about the sixth lesson of the series by commenting below or giving this a rating...
Additionally, please let me know if you have any questions or concerns. I will be happy to help in any way I can. Comment below, or visit my Website Shop 101 facebook support group...

Be sure to check out the intro to this series for upcoming lessons or lessons you may have missed!

Wishing you a terrific day. See you again soon for lesson 7, where we'll learn how to add a Custom Google Search Engine onto your website...



Hello Visitor and Welcome to Rebeckah's Treasures...

I am a Norwegian/Canadian currently studying Midwifery in the UK. I love to crochet!

At Rebeckah's Treasures, I share my crochet patterns and treasures. I hope they inspire you to crochet your own little treasures too...

Comments
comments powered by Disqus
    Rebeckah's Treasures' Logo

    Shop Crochet Patterns!


    Rebeckah of Rebeckah's Treasures
    Hello, my name is Rebeckah. 
    I hope my crochet inspires you to create your very own treasures!
    Learn more about me...


    Connect with Us!




    Tweets by beckastreasures
    All Free Crochet


    Categories

    All
    Accessory
    Afghan Squares
    Amigurumi
    Apparel
    Applique
    Articles & Resources
    Baby Apparel
    Bags & Wallets
    Barbie
    Barbie Furniture
    Barbie's Friends
    Bookbinding
    Cakes & Baked Goods
    CAL Crochet A Longs
    Chess
    Christmas
    Contest
    Craft
    Crochet
    Crochet Stitches
    Crochet With Beads
    Crochet With Wire
    Disney Inspired
    Doll
    Easter
    Flower
    Free Pattern
    Friday Features
    Get Stuffed Magazine
    Giveaways & Special Offers
    Greybriar's Travels Magazine
    Guest Post
    Halloween
    Holiday
    Home
    How To Tutorials
    Interviews
    Midwifery
    Pay Patterns
    Photo Tips
    Recipes
    Reviews
    Round Ups
    Saturday Link Party
    Sewing
    Shop Updates
    Social
    Survey
    Tapestry Crochet
    Toys
    Tuesday Treasures
    Tutorial Video
    Tyc-magazine
    Under The Sea
    Updates
    Valentines
    Website Shop 101
    Wedding
    Wip


    Archives

    October 2021
    August 2021
    August 2017
    June 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015
    September 2015
    August 2015
    July 2015
    June 2015
    May 2015
    April 2015
    March 2015
    February 2015
    December 2014
    November 2014
    October 2014
    September 2014
    August 2014
    July 2014
    June 2014
    May 2014
    April 2014
    March 2014
    February 2014
    January 2014
    December 2013
    November 2013
    October 2013
    September 2013
    August 2013
    July 2013
    June 2013
    May 2013
    April 2013
    March 2013
    December 2012


    RSS Feed


    © 2012-2021 Rebeckah Ferger
    All rights reserved. 

    Disclaimer: This website makes use of sponsored and/or affiliate links. Please see this page for more information.
Powered by Create your own unique website with customizable templates.
  • Home
  • About
    • Who Am I?
    • My Crochet Story
    • Mission
    • Disclosure Policy
    • Skill Levels
  • Store
    • Crochet Patterns
      • Special Offers
      • New Releases
      • Accessory Crochet Patterns
      • Afghan Square Crochet Patterns
      • Amigurumi Crochet Patterns
      • Applique Crochet Patterns
      • Baby Crochet Patterns
      • Dolly Crochet Patterns
      • Fashion Doll Crochet Patterns
      • Free Downloads
      • Holiday Crochet Patterns
      • Tapestry Crochet Patterns
      • Under the Sea Crochet Patterns
      • Wedding Crochet Patterns
    • Loyalty Program
      • List of Loyalty Program Patterns
    • Disclaimer and FAQs
  • Blog
    • Blog Archive
    • Crochet Resources
    • Crochet Stitches
    • Get Your Crochet Patterns Featured!
  • Free
    • Free Crochet Patterns
    • New Free Releases
    • Free Accessory Crochet Patterns
    • Free Afghan Square Crochet Patterns
    • Free Amigurumi Crochet Patterns
    • Free Applique Crochet Patterns
    • Free Baby Crochet Patterns
    • Free Dolly Crochet Patterns
    • Free Fashion Doll Crochet Patterns
    • Free Guest Crochet Patterns
    • Free Holiday Crochet Patterns
    • Free Tapestry Crochet Patterns
    • Free Under the Sea Crochet Patterns
    • Free Wedding Crochet Patterns
    • Free Crochet Patterns Coming Soon
  • Contact
    • Newsletter
    • Suggest a Crochet Pattern
    • Testing Opportunities