If you are wondering what a Belcher Button is, it’s that ugly button that you see on sale pages usually. The one on the thumbnail. Yes, that BUY IT NOW / ADD TO CART button, that people tend to click in order to purchase what you are selling.

If you still don’t know what it is about, you can take a look at Belcher’s video on facebook about it and see why it works.

And today I’m going to show you how to make one by yourself with simple HTML and CSS.

Live Preview

Let’s see the code now and I will then explain it to you:

HTML

<div class="buttonContainer">
    <h1 class="buttonHeader">"Name of Your Product"</h1>
    <div class="buttonBorder">
        Regular Price <del>$300</del> Today <ins>$99</ins>
        <a href="#" class="addToCart">Add To Cart</a>
        <a href="#">Add to Cart</a>
        <div class="buttonIcons">
            <img src="http://www.railroadforum.com/forum/icon_smile_visa.gif" width="30" />
            <img src="http://www.cruisedeals.co.uk/img/icon_mastercard.gif" width="30" />
        </div>
    </div>
</div>

CSS

.buttonContainer { width: 400px; margin: 0 auto; font-family: tahoma; }
.buttonHeader { text-align: center; color: #C70311; margin-bottom: 10px; }
.buttonBorder { border: dashed 3px #C70311; padding: 10px; text-align: center; font-size: 15px; }
.addToCart { display: block; width: 200px; padding: 5px 10px 2px; margin: 5px auto; font-size: 25px; background: #FCD629; border: solid 2px red; color: navy; text-decoration: none; }
.buttonIcons { margin-top: 5px; }

Now, as you can see I decided to use classes instead of ids for the elements. This is because usually sale pages MUST have more than one of these buttons and ids must not repeat. Marketers say, that it must include AT LEAST three (3) of them, because a lot of people decide to buy only after they see the call to action for the third time.

I must admit the button does not look exactly as his, because I decided to make it entirely in css without using a background image. You could easily reproduce his effect by making a background in photoshop and setting it in the css code.

And for this example I’m just hotlinking the credit card logos, you should download their original logos and use those.

Once again another easy tutorial for ya.

Have swing!

I’m developing my very own mailing list system and need you to help me test it All you have to do is subscribe to it on the right, it is free, quick and doesn’t hurt (you will also get a verification email, which you should check and click the link included).

Since it’s new I need a lot of people to test the mail queuing and other stuff.

If you would like to be a beta tester (:D), test it and create your own campaigns I can give you access for free.

It is something like aweber but since I don’t have access to it I’m developing it on my own, differently.

Features in v0.3

- add and edit campaigns
- subscribe, verify and unsubscribe
- an automatic email is sent on subscription and verification
- possibility to send an email to every subscriber in the campaign
- you can add links so you can track clicks on them
- email scheduling
- email importing (deletes duplicates and incorrect addresses)
- possibility of embedding the subscription form anywhere
- possibility of redirecting the user to your own thank you page on subscription
- possibility of sending attachments
- html support
- you can attach a file to send when the user verifies his email
- teoretically the mail queue should work if you try to send an email to more then 50 users, but it is untested

Wanna test? Drop a comment!

When developing your website, if you want to rank well in search engines it is crucial that you use different titles for every sub-page you’ve got online. This is because these search engines (Google, MSN etc) love your titles and categorize your site based on them. This is good for SEO.

This is a simple thing to accomplish using PHP but it really is very effective. I will put dumb text into them but you should use titles rich with keywords related to your niche.

$title = 'Welcome to our website!';
if (key($_REQUEST) == 'register') { $title = 'Register now'; }
if (key($_REQUEST) == '404') { $title = 'Error 404: The page is unavailable'; }
if (key($_REQUEST) == 'about') { $title = 'Who we are, what we do'; }
if (key($_REQUEST) == 'news') { $title = 'Recent news'; }

This would work if you are using urls like yoursite.com/?register, ?news etc. What it does is set a variable $title which will include the text your define according to the page we are watching. Now we need to display it in our browser.

<head>
    <title><?= $title; ?> - Your Company Name</title>
</head>

Pretty easy, isn’t it?

Oh and today I’ve found a FREE product that helps you make some money with google, all you have to pay is less then $3 for shipping and handling and they mail it to you. The offer is only valid for the US though. Click here if you are interested. It can do no harm if you’re serious about making some money online and $3 really isn’t something you could not afford!

Have swing!

This is what I’m going to show you how to do:

It’s a nice effect that can be used for many things, for a nice gallery or something. You could combine this with some JS, add a hover effect to the picture and have it display the caption.

edit: theodin posted a comment with a link to this kind of effect, check it out at buildinternet.com

This is a pretty simple trick that works in different browsers except for older IE versions I think (because IE seems to hate transparent png’s). Btw, RIP, IE6.

Let me show you the code and then explain how it works:

<div style="width: 300px; height: 224px; position: relative;">
    <div style="position: absolute; bottom: 0px; _bottom: 4px; width: 100%; background: transparent url('http://zurka.us/bg_overlay_black.png') repeat scroll 0 0; font-family: verdana; font-size: 11px;">
        <div style="color: #fff; margin: 10px; text-align: center; position: relative; z-index: 1;">This is Kakashi from the Naruto anime.</div>
    </div>
    <img src="http://www.quizilla.com/user_images/K/KA/KAK/kakashihatake1226/1158375681_resKAKASHI.jpg" width="300" />
</div>

So basically what we are doing is enclose our image in a relatively positioned DIV element. Inside this element we create another DIV element, absolutely positioned. We stick it on the bottom of it’s parents div, so it goes displayed on the bottom (we could position it on the top if wanted). The background of this div is a semi-transparent black PNG image, 1x1px (http://zurka.us/bg_overlay_black.png). This is our black box, the content holder.

Now what we need to do is add our text to the box. Inside the box we create another DIV, give it a 10px margin (this way it has some space around it), style the text and put it over the other layers with z-index.

And that’s it, we have it done. It’s a simple HTML + CSS effect that I tried to get using different methods (like css opacity and stuff) but didn’t manage to replicate.

Original image: Kakashi at Quizilla

So once again, easy peasy!
Have swing, thanks for reading!

I’m going to show you a very simple method for finding out if a number is even or odd in php. You could use this for many things but usually this is mostly used when you have a, let’s say, table and you want to color the background of every second row differently.

The php code looks like this:

if ($number % 2) {
    echo 'The number is even';
} else {
    echo 'The number is odd';
}

In real life we would use something like this:

$i = 0;
while ($something = mysql_fetch_assoc($query)) {
    echo '<div style="padding: 5px; background: #' . ($i % 2 ? 'eee' : 'ddd') . ';">Content</div>';
    $i++;
}

And of course, likewise you could check if a number is divisible by another number using this:

if ($number % 3 == 0) {
    echo 'The number is divisible by 3';
} else {
    echo 'The number is not divisible by 3';
}

Easy peasy, as always!
Have swing!

Did you ever want to do something like this? An ad showing from the bottom of the screen?

Well, today I’m going to show you how to do it, without the need to spend $47 Yay!

We are going to do reproduce this by using mootools and some styling. Again, it’s an easy thing to make.

Let’s start by including mootools in our document and writing a little script that will basically do all the job that need to be done. This goes into the <head> of our html file.

<script src="inc/mootools-1.2.1-core.js" type="text/javascript"></script>

<script>
    window.addEvent('domready', function() {
        slideUp = new Fx.Tween('footerad', { property: 'height', duration: 1000 });
        (function(){ slideUp.start(0, 90) }).delay('1000');
        $('closead').addEvent('click', function() {
            $('footerad').tween('height', 0);
        });
});
</script>

Let’s analyse the script:

1. When the DOM is ready, execute the following function:
2. slideUp is the variable in which we ‘store’ the motion of our sliding div. We give a tween effect to our element with ‘footerad’ as ID
3. Next, we make the function execute after 1 second (1000ms) and make it raise the height from 0px to 90px. This is going to be the height of our slider on the bottom
4. Now, we add a button that will close the ad if clicked. We could do something more complicated here by adding some code that would write a cookie so the ad doesn’t show up again if the user reloads the page but we don’t need it, we want to bug the user, right?

Now that’s it with the script. All we need to do now is create or DIV element (if you go check out the page at the top of this post you will see they use an IFRAME.. I’m not going to use it).

Now, I think that if you don’t understand how DIV’s work you won’t understand a shit here. Feel free to ask for further explanation in the comments. Oh and I will style the divs directly here, without a css file, so we see how it works.

<div id="footerad" style="display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: 0;">
    <div style="position: relative; left: 0; bottom: 0;" id="positioned_relatively">
        <div style="background: #002949; border-top: solid 3px #3b8ccb; position: absolute; top: 15px; left: 0; width: 100%; height: 75px; color: white;" id="background_color">
            <img src="http://server.zurka.us/images/RSS-Blue.png" style="position: absolute; left: 20px; top: -15px;" id="RSS_icon" />
            <div style="margin: 10px 0 5px 105px;" id="text_div">
                <div style="font-size: 15px; margin-bottom: 7px; font-family: 'trebuchet ms', arial, sans-serif;">This is a test, the form is not working!</div>
                <div style="font-size: 12px;">Name: <input type="text" name="name" style="margin-right: 10px;" /> Email: <input type="text" name="email" style="margin-right: 10px;" /> <input type="submit" value="Subscribe!" /></div>
            </div>
        </div>
        <div style="position: absolute; right: 5px; top: 0; font-size: 11px;" id="close_button">
            <a href="#" id="closead">[close]</a>
        </div>
    </div>
</div>

1. We give the first DIV the ID ‘footerad’, since that’s the id we told the script to show when the dom is ready. We style it so it will cover 100% of the width, will be 0px high (the script is going to increase the height with a nice movement) and we make it stay fixed at the bottom of the page. The background of this element is not set, so it will be transparent.
2. The second DIV stays there only because we need a relatively positioned element so we can absolute position other elements inside it.
3. The third div we give a background color and a border on the top, we position absolutely, 0px from the left so it sticks left and 15px from the top so we have some transparent background on top of it (the RSS or whatever icon will look like it’s coming out of the slider)
4. Now it’s time to position our rss icon. We position it absolutely and move it 20px from the left and -15px from the top (this is why we positioned the third div 15px from the top).
5. We make a fifth div with the text and our form. We could position it absolutely but I decided to position it using margins. So we move it 10px from the top and 105px from the left of the screen (because there’s the icon)
6. We close this div and make a new one, positioned absolutely, 5px from the right and 0px from the top, this will be out close button. We make a link and give it the ID ‘closead’
7. We close every div tag. It’s done

Now, as I said, I maybe made a complete confusion writing this. If you don’t understand how this works ask and I will help you out. If you don’t care how this works just copy/paste the code and play a bit with the styling. It’s not hard to understand even if you don’t read my messy writing.

What’s different from this is, that they use a wider image on the left and everything seems more centered. You could do the same by positioning the icon further from the left and then giving your text div a bigger margin on the left.

Have a nice day and go drink some beer with the $47 you just saved!

Live example

As IE does NOT support the use of the CSS position: fixed; property, I found a workaround that works in all browsers but which I didn’t test with other content on the page. The demo is still using the old code, displaying well in all the browsers except IE. This code will work there as well.

<body style="margin: 0; padding: 0;">
    <div style="position: relative; width: 100%; height: 100%;">
        <div id="footerad" style="display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0;">
            <div style="position: relative; left: 0; bottom: 0;">
                <div style="position: absolute; background: #002949; border-top: solid 3px #3b8ccb; top: 15px; left: 0; width: 100%; height: 75px; color: white;">
                    <img src="http://server.zurka.us/images/RSS-Blue.png" style="position: absolute; left: 20px; top: -15px;" />
                    <div style="margin: 10px 0 5px 105px;">
                        <div style="font-size: 15px; margin-bottom: 7px; font-family: 'trebuchet ms', arial, sans-serif;">This is a test, the form is not working!</div>
                        <div style="font-size: 12px;">Name: <input type="text" name="name" style="margin-right: 10px;" /> Email: <input type="text" name="email" style="margin-right: 10px;" /> <input type="submit" value="Subscribe!" /></div>
                    </div>
                </div>
                <div style="position: absolute; right: 5px; top: 0; font-size: 11px;">
                    <a href="#" id="closead">[close]</a>
                </div>
            </div>
        </div>
    </div>
</body>

All that changes is that we create a dummy div with a 100% height and position the ad absolutely on it’s bottom. Should work well with all the content as well, but as I said, I didn’t test it.

However, I suggest you using this with caution and parse it only if the useragent shows up to be an IE. Create two different CSS files and use something like this:

<style type='text/css'>@import 'all.css';</style>
<!--[if IE]>
<link
 href='ie_win.css'
 type='text/css'
 media='screen'>
<![endif]-->

Have swing!

Sorry for not writing recently but my laptop decided to stop working and actually it really did stop working. It has some motherboard problems again I guess, keeps dying and the keys in the last row aren’t working (except for y, b and n). So it sucks, can’t really write anything. Luckily I’ve got a very kind girlfriend who lent me her laptop so I could work. “Work”.

As I wrote in the first “lesson” (Let’s Make A Website Together), this post will be about designing a simple interface using HTML and CSS. I already wrote everything but unfortunately it went lost along with my laptop. Sucks.

So what we’ll be doing is something like the image below. Nothing complicated as you can see.. Let’s keep it simple for the beginning.

As you can see form the image, the page will be composed by 7 elements, having the #container keep our other elements “tight” and centering the page. We will have two #menus (I will make those menus simple, links only, without the use of ordered/unordered lists), a #header with the logo, a #sidebar with the latest news and our favorite links, the #content where we will load our content and the #footer with the copyright notice or our email, whatever we want.

So let’s start at the beginning. We need to open our new document, write some lines in and save it as index.php. I usually write the same lines in every file I start and save it, so it is there in the folder, waiting to be updated. And I save my work after everything I make, even for just a smaller change.. I got used to this because once the electricity went off and I lost like 2 hours of work. After all the CTRL+S combo is not that hard to hit and it can for sure spare a lot of bad mood (or nerves).

Okay so let’s see the first few lines of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>My First Website</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <meta http-equiv="Content-Type" content="text/html;charset=windows-1250" />
            <meta name="keywords" content="this, is, my, first, website" />
            <meta name="description" content="Creating my first website by scratch. It's a simple one but good for learning." />
    </head>
    <body>

    </body>
</html>

As you can see, I start my project like every webpage should start, with the DOCTYPE declaration, so keep the first two lines somewhere you can easily find them and copy/paste them into your new projects. We then open the HEAD part of the site in which we put our page title, charset, styles, meta keywords, the meta description and everything that we have to load before the rest of the page. For the charset I usually use windows-1250 encoding since I’m from Slovenia and I use special charactes like č, Å¡ and ž and I don’t really like UTF-8. The meta keywords and description are used by the search engines which get an idea about what our site will be talking about and rank you higher in the results. The description will be shown in the search result of a search engine. It is the text that you see under the site’s title.

In the head I also load my style.css file which will include the (guess what?) style of the page. It is best to load an external file since it gets stored into the cache of the browser and helps the site load faster.

As you can see I open and close the BODY tag and then close the HTML tag. I save the file and I go make myself a sandwich. It’s time to start working. From now on I will write the code that comes between the body tags.

I will now put down the HTML part, explain it and then go to the CSS part, put it down, explain and confront the results I get. The HTML part is going to be without styles and since the DIV is a block element, all of our site elements will be listed one under the other, in the hierarchy I put them in the code. Let’s start.

<div id="container">

    <div id="top-menu">
        home | contant | sitemap
    </div>

    <div id="header">
        Our big fat logo comes here
    </div>

    <div id="main-menu">
        home | news | members | whatever | link
    </div>

    <div id="main-content">
        Something really nice here, this will be our content soon.
    </div>

    <div id="sidebar">
        My friends:
    </div>

    <div id="footer">
        &copy; 2009 OurSiteName.Domain
    </div>

</div>

I created a file with these lines in it so you can see our result. It’s basically nothing but 6 lines of text written one under the other which we are now going to style using Cascading Style Sheets.

I start by wrapping everything in the #container div, to which I will define a specific width, position on the page and everything else I want to style inside of it. Since the layout will be simple the only thing you need to understand is what will happen to the #content and #sidebar divs. We will float them one next to the other. Floats are a bit hard to understand since they can get pretty tricky and we very often have problems with them because of the incompatibility between web browsers (it’s not an incompability between them but they render the site in a different way), like for example Firefox and Internet Explorer. I have to admit that I lost my nerves lots of times because of IE, mainly because of IE6, but I can see nobody actually cares about IE6 nowadays since it’s being replaced by IE7.. But I still see many users use it so I think we should take it into consideration as well.. But it’s a lot of work, including hacks and so on, we are not gonna do this in this lesson. Maybe when we finish the site, we are going to look into tweaking it some more.

Let’s start with the styling. I will do this step by step, so you can see or results as we keep on going on. We put the following code in the style.css that we put in the same folder as our index.php file.

/* here I style the body, select the font size and family and background color */
body { font-family: arial; font-size: 12px; background: #f8f8f8; }

#container {
width: 800px;
position: relative;
margin: 0 auto;
background: white;
border: solid 1px black;
}

What I do to the container is define the width of 800px, “paint” it in white, give it a simple solid border and position it relatively and center it using the MARGIN property. See the result by yourself. Please note that I’m using html files for now since I didn’t install apache and php on this laptop and can’t use .php files locally. And if you check the source code of that file you will see that I am putting the styling directly into it and not into the style.css file. It works the same but reloads every time so the loading time takes longer but it really doesn’t matter with such small codes. Anyway, you put it into the style.css file and you’ll be fine.

#top-menu {
background: #55bdda;
text-align: right;
padding: 5px 10px;
}

#header {
background: #3a8195;
text-align: center;
font-size: 20px;
color: white;
padding: 40px 0;
}

#main-menu {
background: #244f5c;
color: white;
padding: 5px 10px;
}

With this I’ve styled the top part of the site, including as you can see the top menu, header and main menu. Every property is self explanatory except for the padding, which I’ll try to explain now. The padding is basically the space that you make between the border of the box and the content of the same box. The values of this property are like this: padding: TOP RIGHT BOTTOM LEFT. Why did I write only two values then? Because if we leave them out, they will get the same value as their opposite. So in that statement I say the padding should be 5px 10px 5px 10px.

EXAMPLE

Since I know I explained this in a shitty way, I suggest you read the w3schools article about padding. But the main point is that the padding will push your text to the inside of it’s container. See the result here.

Now that we styled the head we move on to the body and footer. Let’s see the code.

#main-content {
width: 550px;
padding: 10px;
background: #cee1e6;
float: left;
}

#sidebar {
background: #007394;
color: white;
padding: 10px;
float: left;
width: 210px;
}

#footer {
clear: both;
background: #163741;
color: white;
text-align: right;
padding: 5px 10px;
}

Since I will be floating the content and sidebar, I have to use a little bit of mathematics now. At least that’s how I do it. What we do now is define the width of the sidebar. Let’s say that we want it 230px wide so we have 570px for our content. Do make the content of the sidebar clearer, we are going to give our box the padding property, so we move the text into the center a little. We are goingo to apply a 10px padding on each side, so we will define the width to 230px – 10px*2 = 210px and float it to the left.
Now we have 570px for our main content. But since we want this box to be clear as well, we apply the same padding as to te sidebar. So here, we again have 570px – 20px = 550px od width. We float this box to the left as well.

Now that we have floated the content and sidebar, we kinda messed up with the layout and it’s “path”. If we now style the footer without taking the floats in consideration, the footer will come out messed up. Lifted a bit or maybe even in a position that it’s not what it should be. To save ourself from this mess we must clear the footer. To clear means telling the box that we don’t want it to be touching other elements according to the value that we clear it with. In this case we clear it with a both value, which means it won’t touch anything on the left and on the right side. This makes it slide down and fix itself like it should.

Check our today’s final result here.

One last thing, make you have a good host, not some terrible fly by night operation. You can find the best cheap web hosting plans and if you’re a super serious person, a dedicated server.

I’m sorry if anything wasn’t clear, I’m sleepy and my head will explode but I had to write it. I will go through it again today and correct the mistakes and make things clearer.

If there’s any question on your mind don’t hesitate to ask it, I will be happy to reply you.

I thought about a nice and simple project.. I will write a step by step tutorial on how to create a simple website. Why? Because I’m bored and don’t know what to do in my free time.

I will show you how to design a simple layout with CSS and how to use PHP and a MySQL database to make a simple website with news, users and comments.

I will do this in different posts, so be sure to subscribe to my RSS feed or check back often. Posts will be coming daily I guess.. And we will start with a simple design.

I am going to show you the code and explain it step by step so you will understand it clearly (I hope). I will also provide you with examples of course. All you need is a web server with php and mysql installed on it.. You can set this up on your machine using software like xampp (apache, php, mysql and more in one pack, install and your done) or find a web hosting service that will give you the space. I would suggest you Globat since they offer a very cheap and stable service. You will pay about $8 per month for their hosting. As for the domain, you can buy one on Go Daddy (domains for a low price) or sign up for a free account on afraid.org and get yourself a free subdomain.

Edit: I forgot to tell you how I will structure it.. well, no one read the post so it’s no problem )

1. This post is the introduction <-- we are here
2. Designing a simple interface in HTML and CSS
3. Use PHP to display page content
4. Setting up the database and connecting the site with it
5. We will add the register, login and logout features
6. We will add the add news, delete news and edit news features
7. Commenting the news
8. Adding features that you suggest (but if I guess right there won’t be many of them).

Hope you will enjoy this project. I will try to make it interesting

PS. Ideas are more than welcome. Feel free to add a comment if you have any!

I actually got the idea on Antonio’s excellent blog (Woork) and used his code in some of my sites but it didn’t work well for me, so I wrote something mine that works (I am not saying his doesn’t work, it just didn’t work for me).

One of the main differences is that he calls the css via the id of the list and I do it via the class of the list. The difference is that if you show the list more than once (on the top and on the bottom of the page) my version will validate and his will not.

The result of a copy/paste of my code gives you this:

• The « prev button is unclickable (we are on the first page)
• The first page is selected
• The second and third pages are normal page links and
• The next » is the a link when we pass our mouse over it (:hover)

The HTML code looks like this:

<ul class="pages">
	<li class="prev-off">&laquo; prev</li>
	<li class="active">1</li>
	<li><a href="?page=2">2</a></li>
	<li><a href="?page=3">3</a></li>
	<li><a href="?page=' . ($_GET['page']+1) . '">next &raquo;</a></li>
</ul>

The ul class is “pages“, to turn the buttons prev and next off we use the class “prev-off” and “next-off“. We give the class “active” to the <li> element, not to the <a> element! Notice that the link is not present in the active <li> element.

This is the CSS:

.pages {
	list-style: none;
	padding: 0; margin: 0;
	overflow: auto;
}
.pages li {
	float: left;
	margin-right: 2px;
}
.pages li a {
	display: block;
	padding: 1px 5px;
	border: solid 1px #c0002d;
	color: #c0002d;
}
.pages li a:hover {
	background: #c0002d;
	color: white;
	text-decoration: none;
}
.pages .prev-off, .pages .next-off {
	border: solid 1px black;
	padding: 1px 5px;
}
.pages .active {
	padding: 2px 5px 1px 5px;
	font-weight: bold;
}

You can customize this in any way you want just by changing some lines in the CSS. Try playing around with the colors (background, border and color attributes).