That's a really nice, straight-forward tute for getting started. I'd like to add my own two recommendations to it:
1) Forget about using Notepad. Or any other simple text editor intended for plain text. You will drive yourself batty & get eye strain staring at code in it. Instead, do yourself a favor and download Notepad++ which is a TOTALLY FREE editor that despite the name has nothing to do with Microsoft's Notepad.
With Notepad++ you can have two tabs open side by side which is unbelievably handy when you are copying & pasting code from one doc to another and is ideal for comparing two docs line by line, such as say a template you are using that you don't want to muck with, to a new page you're creating with that same code that you'll be editing. It has a ton of bells & whistles, more than the average Joe including self would ever need, but the #1 thing for me is how visually easy it makes editing code. You pick the language you want it displayed in (HTML or CSS for example) and each language has a default style applied to it to make it easy to read. But there's a very easy to use style configurer to set your own font style & colors and/or highlight colors for the different parts of a code in whatever way is easiest for you to read.
This screenshot shows the same piece of example code (copied from the Nifty bookmarklet tool) in two tabs. I have HTML set as the language and my own custom style applied. Below that is what the same piece of code looks like in Notepad. Ughh! Look how hard that would be to work with. Even if just dabbling starting out, having a decent editor meant for code and not just plain text will make the learning experience less frustrating.
2) You can quickly test snippets of code here: TryIt Editor
Delete the default sample content in the left pane, paste in your own code, and click the green Run button to see the results rendered in the right pane. Here's the sample code from the above screenshot in the TryIt editor:
It may seem really difficult & time consuming at first, but once you get the hang of the basics it's very satisfying to know you can control the look of your content without having to completely rely on code that was auto-generated for you somewhere.
I wish 😉
...and thanks for the generous feedback 💐
Thanks for those kind words, CrazyMermaid 🌹
To add other designer's products to my blog (and to use other product view options for any product).... I'm now taking manual screen shots of the product/view with the "Snipping Tool", saving that image to my computer, and inserting the image in my blog, with the link (from the new top left share arrow). Then I add a manual title (also with the link). It's a pain and takes double the amount of time. I hope Zazzle restores the HTML tool on the individual product pages soon.
As promised @Windy , I've now made a couple of bookmarklets that replace the (temporarily??) missing functionality.
Which one you use depends on whether you're
- in the Promoter Program and promoting your own products (clean links)
- in the Promoter Program and promoting someone else's products (affiliate links)
- not in the promoter program (affiliate links)
Here's a screenshot of the one for those not in the Promoter Program being used:
Get the bookmarklets and the instructions for adding them to your browser's toolbar here:
https://niftytoolz.com/zazzle-product-html-generator-bookmarklet
Tomorrow, I'll post this information in the tools forum for future reference.
Enjoy 😎
![[Fun with Stripes] Pattern #6c Rainbow Hearts Leggings](https://rlv.zcache.com/fun_with_stripes_pattern_6c_rainbow_hearts_leggings-r0254685418c548af83789140b0d11ff8_623dv_436.webp?rlvnet=1)
Looks good, ColsCreations! And if you reduce the width of the window, you'll see the responsiveness kick in with the image shrinking in size.
For the image, the Nifty Bookmarklet generates this:
<img src="https://rlv.zcache.com/fun_with_stripes_pattern_6c_rainbow_hearts_leggings-r0254685418c548af83789140b0d11ff8_623dv_736.webp?rlvnet=1" alt="[Fun with Stripes] Pattern #6c Rainbow Hearts Leggings" style="border:0;max-width:736px;width:100%;height:auto" />After pasting the HTML and hitting preview, the same thing happens as before - we get the error warning that 'something is wrong with the highlighted code, please fix it', but just hitting Preview a second time auto-changes it to what the forum software wants, and then you can post just fine.
The above image part gets changed to:
<img src="https://rlv.zcache.com/fun_with_stripes_pattern_6c_rainbow_hearts_leggings-r0254685418c548af83789140b0d11ff8_623dv_736.webp?rlvnet=1" border="0" alt="[Fun with Stripes] Pattern #6c Rainbow Hearts Leggings" />So note: If you want to change the image size before posting, change this number in the code:
_736.webp?rlvnet=1"
@HightonRidley, you made a real good thing here. 😉 I did use the HTML share code on the occasion I post to the Show Me, and I love that you made this a "bookmarklet" so you don't have to go back and forth between the NPCP and Z, and you don't have to click the Share icon then the chain link .... the code to copy is literally one-click to get.
Good to know and I'm so glad that you like the ease of use 😊
So the responsiveness here is due to the forum software. I know that because it takes out the styling I put in that makes the image responsive and it still stays responsive (nice one, Zazzle!)
But if you paste the code anywhere else (blog, website), my styling will stay and so the image will still be responsive.
You don't need to buy anything, Susang6. Just visit follow the link below to get the bookmarklet - it's totally free and will do just what you want.
Link: https://niftytoolz.com/zazzle-product-html-generator-bookmarklet
The 50/50 referral share applies to the tools available via the Nifty Promo Control Panel when you don't have a Nifty subscription. The HTML genererator bookmarklets I've provided and linked here aren't part of that and they will always use your referral id - ie no 50/50 referral share and you'll always get any referrals that arise.
If you use the Promoter Program one the links won't use any referral id - they'll be the clean links that the Promoter Program requires.
No, you don't need the subscription to use the HTML generator bookmarklet, it's totally free as I mentioned before.
On the other hand, I have a complete suite of tools all bound up in, and accessed via the Nifty Promo Control panel. If you pay a subscription, all those promoting tools will use your referral id all the time, meaning you get 100% of any referrals generated.
The tools range from an html generator for creating a complete, paged grid of products, vertical and horizontal scrollers, speed sharers for the forum, facebook, twitter and pinterest, automated pinning, product slideshows, animation makers and a good few more.
You have the option of using the Nifty Promo Control Panel without a subscription and that's when the 50/50 referral sharing scheme comes into play. The way it works is your computer tosses a "virtual coin" and if it comes up heads, your referral id is used in links. If it comes up tails, mine gets used. The coin gets tossed every time a link is generated, so on average it works out 50/50.
I hope that's clear now 😊
If you have any more questions, why not send me a message and we can take it from there.
When you're creating your post here you have to use the ... icon in the little tools list at the top of the box and the choose HTML. That's where you paste the code.
When you try to post it, the forum software will tell you it's removing some dis-allowed code. When you hit "ok" (or maybe it's "reply") to acknowledge it, then you'll get ther post you want.
The last time I checked the code generated wasn't responsive so not great for people on mobile devices. With visitors on mobile often representing more than 50% of visits, it's something worth considering.
That's a really nice, straight-forward tute for getting started. I'd like to add my own two recommendations to it:
1) Forget about using Notepad. Or any other simple text editor intended for plain text. You will drive yourself batty & get eye strain staring at code in it. Instead, do yourself a favor and download Notepad++ which is a TOTALLY FREE editor that despite the name has nothing to do with Microsoft's Notepad.
With Notepad++ you can have two tabs open side by side which is unbelievably handy when you are copying & pasting code from one doc to another and is ideal for comparing two docs line by line, such as say a template you are using that you don't want to muck with, to a new page you're creating with that same code that you'll be editing. It has a ton of bells & whistles, more than the average Joe including self would ever need, but the #1 thing for me is how visually easy it makes editing code. You pick the language you want it displayed in (HTML or CSS for example) and each language has a default style applied to it to make it easy to read. But there's a very easy to use style configurer to set your own font style & colors and/or highlight colors for the different parts of a code in whatever way is easiest for you to read.
This screenshot shows the same piece of example code (copied from the Nifty bookmarklet tool) in two tabs. I have HTML set as the language and my own custom style applied. Below that is what the same piece of code looks like in Notepad. Ughh! Look how hard that would be to work with. Even if just dabbling starting out, having a decent editor meant for code and not just plain text will make the learning experience less frustrating.
2) You can quickly test snippets of code here: TryIt Editor
Delete the default sample content in the left pane, paste in your own code, and click the green Run button to see the results rendered in the right pane. Here's the sample code from the above screenshot in the TryIt editor:
It may seem really difficult & time consuming at first, but once you get the hang of the basics it's very satisfying to know you can control the look of your content without having to completely rely on code that was auto-generated for you somewhere.
Thank you!
