Dabbling With CSS

Posted by Neville on May 6, 2012 under Blogging, How To, Resources, Training | Comments are off for this article

Seen the new Sign Up Form?

One of the few good things that I found at the dotcomsecretsX coaching course was the cool ribbon effect at the top of the Sign Up form on the squeeze page that is produced.

By coincidence I found the code for making that ribbon effect in a magazine that I bought several months ago. So I have been experimenting with code, which uses CSS.

The experience was another of those frustrating, but when it all worked out fine, eventually, but rewarding things that I enjoy working on.

The process I followed went something like this:

1: Code a page that has containers to hold the elements that make up the a box to hold the contents, the ribbon to go around the top of the box, the text to write on the ribbon and position to hold the form. For that I used an editor that allows me to write up html code and CSS stylesheets, along with other code not used in this project, such as PHP etc. There are many editors available that can do this from the incredibly expensive Dreamweaver to many free software packages. See below for a part of the html  code.

html code2. Prepare the CSS code for the various containers above. Again I used the editor as described above. A small part of the CSS stylesheet is shown in the image below.

CSS stylesheet3. Test the code. The result is shown below. It took several attempts at loading the page to get the end result as some of the settings needed to be adjusted to get the best result. The page displays well in FireFox and Chrome, but Internet Explorer ignores some of the code and produces a less than optimal result. Please note the form below is not active.

Sign Up Form

4. Combine elements from the html and CSS code with the html code from my AutoResponder to add to a text widget to show in the sidebar. Some tweaking of settings was also necessary to make it fit, and most of that was done on my test WordPress site where I play around with things like this so that I do not destroy this blog. When it is works on the test site, it is simply a matter of copying it to the real site. The result of that step can be seen in the sidebar of this site, and completing the form will subscribe you to my email marketing list and a sequence of messages that will have links to some resources for list-building.

Looking for something like that for your blog? Use the Contact Us page. That page can also be reached from a link  hidden below the About link in the header menu. (I really must tweak the header to makes sure all links show!)

What’s Below The Fold?

Posted by Neville on February 21, 2011 under Blogging, How To | 8 Comments to Read

Below the foldDon’t Look Down!

You never know what might be lurking in the deep dark depths of this page.

Well that seems like it could be an attitude of many people when a new web page appears in their browser. I wonder how many surfers, browsing the web scroll down a page if the top part of the page doesn’t grab their interest?

That would be particularly true of those people surfing multiple Traffic Exchanges at the same time. There’s a good reason to perhaps not waste too much effort just adding a blog to a TE and hoping for the best. Much better to design an eye catching Splash or Squeeze page for that task.

Back to the point of this post: What is the fold?

The fold is that imaginary line on a web page where it cuts off the lower part of the page as that page shows up in a browser.

For different surfers that will be in different places depending on their screen settings and the number of toolbars they have open. So let’s just say it is the top of the page.

What should go at the top of a blog page?

A header seems pretty obvious, but don’t make it too deep, if you can adjust its size. We don’t just want to see a header.

A catchy Blog Post title. How did I go with this one?

Are you using an image in your post? Try to place it near the top of the post, where it can be seen (or at least part of it) above the fold.

Use different fonts and colours in some of the text above the fold, if appropriate.

White space can be useful to help attract attention to what you want people to see.

Don’t forget the sidebar.

Place the most important widgets at the top of the sidebar to try to get them seen above the fold.

That’s where to place your list-building sign-up form.

This is definitely below the fold.

If you got this far, why not add a comment, and perhaps tell what you would make sure goes above the fold.

I haven’t even mentioned using the Read More… feature to get perhaps a second post title above the fold. Oh no! I just mentioned it. Sorry don’t forget to add your ideas.

Save Time: Recycle Widgets

Posted by Neville on January 17, 2011 under Blogging, How To | Read the First Comment

How To Recyle Widgets and Save Time:

This hint came from a chat with a fellow blogger a few days ago.

recycle widgetIf you need to give a widget a bit of a rest, or replace it with something else for a short time, do not delete it. It can be dragged into the Inactive Widget storage area, from where it can be retrieved later if needed. That will man that you do not have to set it up again, but simply drag it back to the sidebar to make it active again.

Special hint: Before you drag to the Inactive Widget store, make sure that the widget has a title so that it can be easily located when you want to reactivate it.

This technique is particularly useful if you want to swap ad blocks, by say, replacing an AdSense skyscraper block with a smaller square block, or even an ad block from another advertising service.

Here’s the process again:

  • Open the Dashboard and select Appearance -> Widgets.
  • Make sure the widget to be removed has a title.
  • Drag it to the Inactive Widgets area of the Widgets page.
  • Done. Simple wasn’t it?
  • To get the widget back:
    • Drag it from the Inactive Widgets area to the sidebar.

This little tip could save you lots of time, especially by not having to do things like set up new ad blocks. Simple but very effective!

Blog Structure: An Overview Part 3

Posted by Neville on January 14, 2011 under Blogging, How To | Comments are off for this article

The SideBar

Basically the sidebar holds widgets that perform a range of different functions.Sidebar

Text Widget

Many of the functions can be placed in a text widget, and the method for doing that is outlined in this earlier post.

Examples of the things that could be added in a text box include:

  • Widgets from other sites, such as the APSense and Networked Blogs widgets on this blog.
  • Advertising such as AdSense, and similar services.
  • Affiliate  and other ads. An image with a link.
  • Photos
  • Links (eg the RSS feed on this blog).

Links and Blogroll

The process for adding links and editing them is discussed in this post.

Other Widgets:

Other widgets that can be added to the sidebar include:

  • Search box, to help readers locate particular search terms in the blog.
  • Categories, to show the different categories for posts and provide links to them.
  • Tag Cloud. Similar to categories, with links to tags used in posts.
  • Comments and Recent Posts. Show excepts from the latest comments and posts.
  • Calendar, with links to posts made on highlighted dates.
  • Plus others.