Greekgeek's Online Odyssey - Hubpages and Online Article Writing Tips

conversions

A New All-CSS Amazon / Zazzle Button

Feb 11th, 2013
by Ellen.
3 comments

I hadn’t posted this until now, because I’m still getting the kinks out. But I thought I’d share some CSS wizardry.

Problem:

My old Amazon “Buy” Buttons look a little fuzzy at modern screen resolutions, and they don’t resize well.
Amazon Associates

Also, that’s just for Amazon. Sometimes I want a Zazzle button!

I believe in the marketing research that shows a “Big Orange Button” helps convert sales.

So how can I make a BOB that will scale to different screen sizes?

Solution:

Create a rounded-corners button with CSS:

Buy on Amazon

 

 

blizzard of '78 t-shirt
Buy T-shirt on Zazzle

I’m still fine-tuning this, but people who know code can play with it.

Here’s an example from my spruced-up “Blizzard of ’78” lens.

Here’s a template for the button. You MUST change the width (11em) to fit the width of whatever words you use. For example,  in”Buy on Amazon” button, I used 8.5em.  An em is simply the width of the letter m, so this means that the dimensions listed in ems will scale up and down to match the text.
<a style=”display: block; margin: 5px auto; width: 11em; color: #fff; text-decoration: none; font-family: Arial; font-size: 90%; font-weight: bold; text-align: center; border-radius: .5em; padding: .2em; background-color: #f90; box-shadow: 1px 1px 2px #888888; background-image: linear-gradient(to top, #FF9900 60%, #FFBB44 100%);” href=”LINKgoesHERE”>Buy T-shirt on Zazzle</a></p>
I was a bit haphazard in which dimensions I specified in pixels, which in ems. I think this looks good at different screen resolutions, as I’ve checked with my iPad and this Responsive Design Tester, but… I can’t promise.
Breaking it down:
  • display: block; turns the span into a block-shaped area with specific dimensions.
  • the margin is whitespace around the outside of the button. Use margin: 5px; if you do NOT want the button centered horizontally (auto)!
  • the width is the width of the orange button, which I defined in terms of the width of the letters inside. This way the button grows or shrinks with the font and screen size.
  • color: #fff makes white letters; after this comes a bunch of optional text-tweaking.
  • border-radius: makes rounded corners on most modern browsers. On older browsers, you get rectangular corners, which isn’t too bad.
  • padding puts space between the borders of the orange rectangle and the words inside.
  •  background-color #f90 makes Squidoo Orange.
  • box-shadow: is a new CSS3 property, supported by IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. On older browsers, no shadow. The values are: horizontal offset, vertical offset, blur distance, color.
  • linear-gradient: In theory, this will add a bit of shading, with darker orange at the bottom and lighter orange at the top. It’s part of CSS3, but not all browsers support it… yet. They will. In the meantime, I could go with all sorts of complicated code to make it work. But I’m not gonna. There’s nothing wrong with buttons that look good now, and will look better down the road.

Here’s a demo of how this button looks on browsers that DON’T support the linear gradient, and those that DO. (Modern editions of all browsers support rounded corners and drop shadow; older IE will just show an orange rectangle with no shadow.)

Maximize Traffic from the Front Page of Squidoo

May 12th, 2012
by Ellen.
1 comment

We’ve had a SquidU discussion about the recent SquidCademy quest, whose prize was getting your lens featured as one of the rotating selections on the front page of Squidoo.

I’ve been pondering how to squeeze the most traffic out of the two to four week window when your lens is part of the rotation.

Here’s some things to remember.

  • If Squidoo HQ issues a challenge or quest with a Squidoo front page feature, go for it. It’ll mean extra traffic for two to four weeks if you get accepted.
  • They favor lenses with strong, visually appealing graphics. Once I entered one of these challenges and got the points and purple star, but did not get a front-page feature, probably because the graphic wasn’t as good.
  • The number one way to maximize traffic from the front page of Squidoo is through the lens graphic. People arriving on the front page of Squidoo didn’t arrive via a search of a topic, so they’re not targeted traffic. Instead, they’re liable to click the picture that stands out from the rest with its visual appear.
  •  So use a crisp, clear, compelling graphic with a strong silhouette, possibly a white background (See my “Hook Visitors with Key Art Designs” tutorial for tips).
  • Check to see how it looks on Squidoo’s front page (especially if your graphic’s not square; Squidoo will crop it to a square). You can safely tweak, adjust, upload the graphic, and republish until it looks good (thanks to KathyMcGraw for asking if changing the graphic would cause any problems — it doesn’t. The graphic changed on the front page immediately after republishing).
  • While a front page feature will bring visitors because of all the people landing on the Squidoo.com gateway, it’s useless for SEO purposes. I Googled cache:http://www.squidoo.com/ and double-checked with Webconf’s Search Engine Spider Simulator, and both of them show that the current featured lenses are not crawled or indexed. The lens gallery is generated only when you’re viewing Squidoo.com live, so Google doesn’t see those links.
  •  Oddly, the testimonials are stored, so a random few lucky lensmasters get extra backlink juice if their testamonial is showing when Google’s spider comes by (which happens often). If Squidoo ever solicits us to write more blurbs, do it.
  • Also, of course, Squidoo Categories are featured in the sidebar, and those links are hard-coded, so getting your lens on any of the category or subcategory pages will get some trickle-down pagerank from the top level of Squidoo.com.

Lens Updating Tip: A Google Spot Check

Apr 8th, 2012
by Ellen.
4 comments

Keeping 400 lenses reasonably updated is serious business. We can do a quick scan for broken images, links and videos, but here’s a meaningful update you can do in five minutes: a quick tweak that can improve traffic to a lens.

  1. Click “Stats” under the lens name.
  2. Click the “Traffic” tab.
  3. Change the “Date Range” pulldown menu to 90 days.
  4. Look at the “Keywords” chart that shows what searches have brought people to the lens. Figure out which is the top keyword phrase (often combining a couple different variants from the list). For instance, here I tried “wooden rack oven puller,” whose words include a few of the other top searches:
     





  5.  Do a Google search for that phrase and turn OFF personalized search results (which are tailored to your own web browsing habits) by clicking the globe button at upper right:





  6. Look closely at the blurb / description. This is what the majority of people searching for your lens will see. Is it as good as it could be? Or is there something you could do to add a Call to Action, encourage people to click on the link (see How to Get More Clicks, Sales)?

    In this example, it’s a “how to make your own X” page, which is very obvious from the lens title and link. In fact, the page is also a “where to buy X because you’re too lazy to make it” article! But the blurb gives no indication that I’ve included “where to buy” as well as “how to make” information. Therefore, I improve that sentence very slightly, taking care not to disturb the keyword search phrase (or popular variants):

    It’s a clumsy tweak, but now the blurb should attract buyers as well as DIYers.

  7. Ping it with the ping tool added to the lens workshop’s sidebar by SquidUtil’s workshop add-on.

The wording of your blurb depends on (a) your goals for the article (sell something, inform people of something, get them to click on a free download button, get them to visit your website — to name a few) and (b) what your audience is looking for. Make sure your page has what they’re looking for, then make sure your blurb tells them you have what they’re looking for!

The above steps can be done fairly quickly: (1) check traffic stats (2) search the top phrase(s) and see what the blurb looks like (3) edit your lens in that spot to make sure the wording is as good as possible.

Over time, this may be a simple but effective way to boost traffic to the lens.