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!)

More About Themes: Latest Experiences

Posted by Neville on January 22, 2011 under Blogging, How To | 3 Comments to Read

Changing A Theme Should Be Simple.

The observant reader of this blog will have noticed a change in the way in which it displays the content. That’s a fancy way for saying that I changed the theme.

From that there are a couple of experiences that I should really note, so that you can see that there are several things to consider when changing the theme of your blog.

Before I started searching for a new theme I thought I had stored away things that I did not want to lose if the new theme did not accept them readily. I saved my widgets in the widgets store, so that I could get them back if the new theme did not display them.

I backed up my blog. Just in case something went wrong.

It was all looking good for selecting a new theme, so I went ahead with the process.

When I found that Google Analytics was showing no visits for a about 2 days I wondered if it was such a good idea to change the theme. Had people stopped visiting because they didn’t like the new theme?

But the Who’s Online widget was showing the usual number of visits. So what was happening with GA?

Then the AHA! moment. In the old theme, the GA code was stored in the source code for that theme! Since it was no longer active I had to copy the GA code into the new theme. That fixed it!

At about the same time I decided to take another of my blogs in a new direction, and install a new theme on that one. I remembered the GA code on that one! Lesson learned!

Edit Theme

With the new theme on my other personal blog, I discovered that the theme could have many aspects configured from the dashboard. That makes it much easier to tweak and set up certain features, without having to go into the minefield that can be discovered when manipulating the source code of the theme, as I suggested in an earlier post, to do to tweak your theme.

So, a simple change of theme has provided a couple of useful experiences and things to learn and remember. Blogging is full of these little surprises.

Have you discovered any problems when swapping themes? Add yours in the comments.

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.

Blog Structure: An Overview Part 1

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

How Is A Blog Structured?

This post should have appeared much earlier in the blog, but as they say in the classics: Better Late Than Never.

Just what are all of the parts that go together to make up a blog?

This question will be answered based on the stucture of this blog and many blogs that I have visited. There will be other ways of stucturing a blog, and many of those will be nothing like the description that follows. That is the beauty of WordPress, in that it can be configured in almost innumerable ways.

Enough of words for this post. Let’s look at a typical blog.

blog structure

Yes, I know it’s this one, but it will do as an example.

Please note the labelled parts, which are explained briefly below. Only the top part of the page is shown and the discussion below is about the front or home page of the blog. This page shows the latest posts, in order from latest to earlier post

A: The Header.

This holds the Title of the blog and often a subtitle. The Title is usually linked to the home page of the blog, so you can come back to the front page of the blog by clicking the title from any page or part of the blog.

B: Page Menu.

This has clickable links to other pages of the blog. The names of the pages are used as the links, so click a name to go to that page. This menu usually shows on every page of the blog.

C: The date this post was published.

The way this is displayed depends on the theme used in the blog. Often it is shown just under the post title along with the name of the author of the post.

D: The Post:

The first one is on the page is the most recent. But not always, as some blogs have set a particular post to always be the first.

A post has a heading which is a link to a separate page (the single post page) that displays just one post at a time, where the reader can usually add a comment. Some blog feeds are set to show just an excerpt from each post and to the read the whole article you  click a link that takes to the single post page.

E: The Sidebar

This important part of the blog can hold a vast range of tools, widgets, links, advertising and lots of other things. These are also displayed on every page of the blog so that they can be accessed very easily.

In the picture above you can just see a small sample of the widgets used in this blog. You can actually see the whole range just by scrolling down this page.

F: An example of a widget.

The example shown is for the link to the APSense Guide Pro. Clicking the image of the cover takes the reader to the sales page for that eBook.

G: The beginning of other widgets and plugins.

You can see the top of the Admin widget, which allows the owner and subscribers to login to thei dashboards. Below that are widgets displaying advertising, sites I have joined, a tag cloud and links to other blogs.

The posts on the structure of a blog will continue in the next few posts.

 

Adding A Tag Cloud

Posted by Neville on December 11, 2010 under Blogging, How To | Read the First Comment

How To Add The Tag Cloud

In the side bar of this blog is a Tag Cloud that has the tags used on posts in the blog.tag cloud

The bigger the tag in the cloud the more often that tag has been used. Each word in the tag cloud is linked to posts using that work, and is a useful for tool find posts on a particular topic.

The Tag Cloud widget is available in the version of WordPress used in this blog.

The process for adding the Tag Cloud is as follows:

  • Log in to the Dashboard.
  • Open the Appearance Menu.
  • Select Widgets from that menu.
  • Locate the Tag Cloud widget and drag it to the sidebar where you want to locate it.
  • Choose either Tags or categories to display.
  • Do not forget to Save!

That’s it. Done!

WordPress does the rest for you.