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!

Some days ago (on Friday, if I remember well) I decided to try using Twitter as a money making machine, since I’ve been reading around that it has become a powerful marketing tool.

I purchased a copy of Twitter Traffic Machine since they have a 60 day money back guarantee, a cool YouTube video that really inspired me, didn’t seem too hard to implement and didn’t take too much time.

When I started using it I had around 200 followers. Today I have more than 2000, and kinda lot of them are targeted for what I wanted. I also made my first sale ever yesterday. So I basically got half of the money I spent back in just 2 days! I feel so great, really!

Since I rarely believe the screenshots people post on their sales pages, I’m giving you the proof that my followers indeed grew a lot: http://twittercounter.com/nasalchy. The stats are a bit slow to update so bare with them. Oh and yeah, for testing reasons I created another account and because I’m sooooo evil, I gave her a female nickname and photo and check her out, she got more then 2200 followers in 4 days

So once again I’m telling you: if you have $30 and want to try earning some money online, buy Twitter Traffic Machine and TRY implementing it! Creating an account on Twitter takes 30 seconds and doing what they explain will take you another 30 minutes of work!

And if it doesn’t work, request your money back.

Twitter Traffic Machine

Edit (05. june 2009): the second sale came in today.. I think it’s only because I set this up last week and only today checked and pimped up things. So this really works. iHappy!

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!