Wednesday, January 23, 2013

How to Add a TPT Gadget to your Blog

April 2014
TpT has updated their gadget since I originally wrote this tutorial.   Check out the updated version {HERE}

--------------------------------------------------------------------------------------------
Original Post
Thanks so much for all the comments on my last tech post... love it!  I have gotten a few special requests asking me how I got this awesome little graphic on my blog.  WELL, here you go ladies (are there any men out there in teacher blogland?  I don't think so!).  This is my longest tutorial yet, but I think it will help so stick with me!  I am not naturally tech savvy, so everything you see in my tutorials is what I have discovered after hours of experimenting
You can click on the tutorials link at the top of this page to see all of my other tutorials.

First,  let's talk about why this widget (look at me talking like a tech pro!) is awesome.
 Your followers can click the little arrows on the bottom to get from one product to the next without ever leaving your blog.  So easy and fun!

They can click on the picture or description of the product and be brought straight to the corresponding TPT page.

 And they can click SEE ALL to be brought to your main page with all of your products.  So cool, right?


Go to TPT and click on the "My Sales Dashboard" page.  Click on "Link to your store from a blog or other website with readymade badges."

Self explanatory... just click the button :)

Select whichever type of widget you would like: Featured Items, Top 25 Selling Items, Featured + Top 25 or Most Recent 25 Items.  Personally I chose Top 25 Selling.  I didn't want to overwhelm people who might want to browse from my blog.

 Select vertical (it's the only choice!) then next.

 Copy the text in the JavaScript code box.  DO NOT click next but DO NOT close the page!

Okay, this part gets a little tricky.  Open a new tab or webpage.  Go to your Blogger homepage "Design" tab and click Layout.

 In the layout tab, click "Add a Gadget."  You should be adding the gadget wherever you want it to appear on your blog.  Top left, top right, bottom... wherever!
In the window that pops up, scroll down to HTML/JavaScript and click on that.
Paste your code into the box that appears.  You do not need to add a title.
DO NOT CLICK SAVE and DO NOT CLOSE THE WINDOW!

 Click back over to your TPT tab.  Now copy the "Code Snippet" text.

 Click back over to the Blogger pop up window.  Confusing, right?!?
Paste your Code Snippet in the box below the other text you pasted.  I would recommend pushing enter to go down a few lines in case you need to come back to replace anything later.
Now you can click Save!  You can also close down your TPT tab {you don't need to click save here}.

Now check out your snazzy new page!  Isn't it awesome?!?

19 comments:

Brenda said...

Awesome! I followed your directions & my widget is up & running!
THANKS!

Brenda
Primary Inspired

Mary said...

You're welcome! So glad it helped you out :)

Anita said...

Thanks for posting about this! :) I will try it this weekend!
Anita
Mrs. Bremer’s Kindergarten

Danielle said...

Thank you so much for this! Just added mine and your directions were super easy to follow :)

Danielle
Carolina Teacher

Anita said...

Just did it now & it worked great- a million thanks! {Would love to know how you do screen shots...I know, I have too many requests...sorry :) }
Anita
Mrs. Bremer’s Kindergarten

Mrs. D said...

Thank you so much! I really appreciate your help!

Love to Learn said...

Thanks so much! Your instructions were so clear, you were a huge help!

Love to Learn

FabandFunin4th! said...

Your tutorial was SUPER helpful! Thank you, thank you!!

fabandfunin4th.blogspot.com

Sarah Winchell said...

Thanks so much for this super tutorial!

Sarah

I Dream of First Grade

Lesson Plan SOS Teachers said...

Oh my goodness!!!! THANK YOU!!! I kept on seeing this feature on other blogs, had no clue how to do it, let alone know that it was called a "widget!" After asking someone who had it on their blog, they told me what it was called. Your directions came up in Google when I searched for how to do this!
THANK YOU SOOOO much! I greatly appreciate your help! ;) Melissa

Kerry Copple said...

Thank you so much for this easy to follow tutorial! I got my TPT Button up and running yay!

You are a techie genius!

Thanks,

Kerry
http://flipfloppingtoschool.blogspot.com/

Not2crumby said...

Brilliant! You made it super duper Easy! Thanks

Julie Lowery said...

Thanks I am new at blogging and this really helped me!

Kelli said...

This was perfect! Thank you so much! You saved me many agonizing attempts at this :)

Santana Karlos said...

The area that I grew up in Los Angeles, I could honestly say that I was lucky to find such a good school for my daughter. I had quite a head ache when I realized I had to enroll my child in a daycare.
Phoenix preschool

Sharon Hammonds-Richardson said...

Wow! Awesome... thank you so much. You made the impossible, possible for TpTers who are not tech savvy.

Bahareh Abdollahi said...

Thank you so much! Very clear and easy to follow instructions :) you're a life saver!!

LaurelSusanStudio said...

Thank you so much for your very clear and helpful instructions!

chevronandcenters said...

I am so thankful for your tech help!! Trying to customize my blog and this was exactly what I was looking for!! Great simple directions! My TPT widget is up and running!!

Thanks again!
Jill
http://chevronandcenters.blogspot.com/