Pages

Jazzing Up Your TpT Quote Box



Today I'm sharing a post for my fellow TpT teacher-authors. 

If you're a TpT seller, then you know all about the area on each of our stores' pages for a quote.  Sometimes people include links to their blogs or other promotional messages in that space.  Well, last night I gave my quote the boot!  That's right, after I saw some sellers with updated quote boxes, I knew that I wanted to jazz up my store as well.


So, I read a few tutorials.  I tried.  I failed.  I tried.  I failed.  Then, I called my friend for help.  She pointed me in the right direction....and with her help, my TpT store now looks like this:

As an interesting side note, my old store quote was from Leonardo Da Vinci and it said, "The knowledge of all things is possible."  So, last night as I was growling at my computer when I couldn't get my new jazzy quote box to format correctly on TpT, I tried to remind myself of Da Vinci's words.  Do you think he was imagining transparent backgrounds and hyperlinks when he first shared his wisdom?

So...are you ready to jazz up your own quote box?  

1.  Open PowerPoint, click on the 'Design' tab, select 'Slide Size', choose 'Custom Size' and resize the slide to 3 in. wide by 1 in. high.


2.  Design your quote box.  You'll be making this quote box "clickable" so you might want to add a message that corresponds with one of your custom categories.  For instance, if you have a Test Prep category, you might design a quote box with a "Don't Forget to Check Out These Test Prep Resources" message.  Also, make sure that all the text boxes you add stay within the 3 x 1in slide.


3.  Make a transparent background.  Click the 'Insert' tab.  Select 'Shapes.'  Select the square shape option and draw a square/rectangle over the top of your entire slide.  


Then "right click" your mouse while hovering over the rectangle shape you just inserted.  Select 'Format Shape.'  You'll see design options for the shape's fill to the right of your slide.  


Select 'Solid Fill'  Then, slide the transparency over to 100%.  (You'll see your design again.)  See that outline of your shape?  You'll want to get rid of that by selecting 'No Line' under the format shape options.  

Finally, right click on your quote box again, and select 'Send to the back.'  Now you have a transparent background.


4.  Save your quote box design as a picture.  Press CTRL A to highlight every element of your quote box.  Then, "right click" your mouse and select 'Save as a picture.'  Save this picture to your desktop and give it a File name before clicking 'Save.'

(Here's a tip from Ainsley Karl when you 'Save as a picture' click on 'options' and enter in - 452.)

5.  Host your quote box picture somewhere.  I used Photobucket.  I just dragged the quote box image that I saved on my desktop to upload it to Photobucket.  Then, I copied the direct link that Photobucket created.


6.  Prepare your links for the TpT quote box.  Remember, the TpT quote box will have an image and a clickable link.  Therefore, you need two links.  One is for the quote box image you designed.  You know, the link you just copied from Photobucket (or other hosting spot).  Open a blank document and paste that link under the title 'Photo Link.'  Then, figure out where you will be sending buyers when they click on your quote box (perhaps to a custom category, or to your blog, or to your freebies).  Open that page and copy the link.  Paste that link under the title 'TpT Link' on your opened document.


7.  Shorten your links.  In order to not exceed TpT's quote character limitations, both links need to be shortened.  Go to bitly.com.  Paste the photobucket link into the upper right-hand box on the webpage and click 'Shorten'.  Copy this new short link and paste it on your document under 'Shortened Photo Link.'  Repeat this process with the TpT page link.

8.  Prepare the code for your TpT quote.  Copy this code on your document (where you've been copying and pasting the long and shortened links).

<a href="CLICKABLE LINK"><img src="LINK TO THE QUOTE BOX IMAGE"></a>

Now, insert your shortened TpT page link where it says "clickable link" (delete the words - clickable link).  Then, insert your shortened Photobucket link where it says "link to the quote box image" (delete the words - "link to the quote box image").  Select and copy the code.


9.  Update your quote box on TpT.  Sign into your TpT account and go to your Dashboard.  Right next to the "profile 100% complete," you'll see a green 'Edit Profile' link.  Click that.  Then, where it says personal quote, paste the code.  Scroll down and click 'Save.'



10.  Revel in your awesomeness!  Go check out your store and see your new look.  Awesome, right?



Thanks to Literary Sherri, Crayonbox Learning and What I Have Learned for inspiring and teaching me!


Thanks for stopping by,

12 comments:

  1. Love your new quote banner! :)

    Literary Sherri
    Literary Sherri

    ReplyDelete
  2. Thank you for this detailed explanation! You're the BEST!
    :)

    ReplyDelete
  3. Hi! I followed this great tutorial and it worked, however my box is all misshapen.. I'm not sure how TPT allows it but its outside the "lines" (not sure how else to put it). I love my new banner but it looks a little silly, I would really appreciate your help.

    I double checked that it was 1" by 3" and that was even wider so I changed it and it is currently 1" by 2"
    https://www.teacherspayteachers.com/Store/Ainsley-Karl

    ReplyDelete
  4. So out of frustration I remade the whole file and this time did 1x3 with the transparent background. Saved it in photobucked just like you did. I even logged out of my tpt and searched myself that way- still no luck. Its there and looks awesome just looks about 200% too big!

    Thank you for your assistance :)

    ReplyDelete
  5. This finally got me to understand how to do this! Thank you!

    ReplyDelete
  6. This was SOOO helpful!! Thank you so much!

    ReplyDelete
  7. This is the best tutorial about this that I've read by far. I finally have a transparent background! Thank you!

    ReplyDelete
  8. Thank you so much for the shout out. This is a great tutorial. If you don't mind, I'd like to link it on my Blog. -Danielle -
    Crayonbox Learning

    ReplyDelete
  9. This is the best! I wanted to update with a new photo for back to school and was having the hardest time figuring it out this time. Once I found your tutorial, I got it on the first try! Thanks so much!

    ReplyDelete
  10. Wow! These directions were PERFECT! Thank you so much!!!
    Courtney
    Ramona Recommends
    Ramona Recommends

    ReplyDelete