Carl discovers the world

In this video tutorial I show Serendipity users how to install the HTML Nugget plugin and then use it to add a network badge to their blog sidebar. The same technique can be used to place Adsense advertising into a sidebar, or a counter.

This video complements the video I prepared a few days ago on plugin management and is aimed at new users.

I'm still looking for ideas for other s9y screencasts so please add your comment below to give me ideas.

This tutorial demonstrates how to place two background images behind the HTML <blockquote> tag. The first image will be positioned at the top left of our blockquote and will be our opening quote mark, and the other at the bottom right which will be our closing quote mark. The apporach I'm going to demonstrate appears to work in all of the modern browsers, although some of the older browsers might struggle.

The reason for this tutorial is the inability of CSS to allow more than one background on a single page element, so in the case of the blockquote I, like many other template designers, have resorted to creating borders and background colors to separate blockquotes from the surrounding text. We do this because many blog and forum scripts provide a quote button that simply wraps the quote in <blockquote> </blockquote> tags.

Using CSS and the :first-letter pseudo class, we are able to assign two background images to our HTML <blockquote>, and all we need to do is position them so that they work correctly. The image below shows you what I mean.

The opening quote mark and larger first letter are defined by blockquote:first-letter, and the border, background and closing quote mark are defined by the blockquote style.
Read More

Regular visitors to my site will know I often include code snippets in my posts. To refresh your memory on html in your entries be sure to read adding html code to your blog entries

Including html in your posts isn't something you need to do very often, and certainly can't damage your blog, so please feel free to experiment. If you're familiar with HTML basics you would know that the <code> tag is available to be used for code snippets within webpages, and this is equally true of blog posts.

Where it gets interesting is that actually putting any html into your post will automatically be interpreted by your browser. So lets say for example you wanted to include a code snippet that your site visitors could use to link to your website. If you actually place the direct html into your post you'll notice that your browser makes this into a link, and not into a code snippet. Read More

Many new template designers have great ideas, and are often very capable at creating layouts in Photoshop. Unfortunately if they don't know html, the image slice and export to webpage function of Photoshop will simply create a page filled with nested tables that are hard to read and even harder to convert to a blogging engine like Serendipity or Blogger.

In this article I'm going to focus on creating a simple two column css only template which any Serendipity or Blogger template designer can customise for their own template.

Let's start with the assumption that the template will have a header area, and beneath that will be a container holding a content column and a sidebar which could either be on the left or right, and then at the bottom of the page we'll include a footer for the copyright and credits. Read More