Erik van de Ven Webdesign & Development

SEO Linkbuilding

admin — Tue, 01 Nov 2011 20:21:55 +0000

Ok, let’s focus some more on SEO (Search Engine Optimization). The last weeks I try to focus more on online marketing, just because it’s a lot of fun! Let’s be honest, what looks better then a graph with increasing traffic? Ok, maybe your girlfriend (or boyfriend, for the girls), but that’s it! And having traffic is an important thing if you want to make money with your blog or website. But I’m not gonna talk about the basics of SEO, because there already are millions of articles on the internet about the basics. So we skip that. What I’m gonna talk about in this article, is linkbuilding! Maybe the most effective way to get high rankings in search engines like google.

I guess you already know what linkbuilding is, don’t you? If you don’t: linkbuilding is a way to spread links to your website all over the internet. Normally, if you post very usefull or amusing content, the people who read your blog will spread the links for you. They’ll write articles about your website or spread links to your blog over social media and stuff. But it’s always good to use linkbuilding to rank on keywords, where you not score so well. So for example: You have a website about cars and you write articles about BMW, Mercedes, Opel, Mitsubishi and Chrysler. When you search in google on “info BMW”, your website will be the second hit. But when you search in google on “info Mercedes”, your website will not be the first hit or the second… but it shows up on the third page! Then it’s good to build links for “info Mercedes”. This is just an example, but it’s good to know how you can use linkbuilding to increase the ranking of your website.

Linkbuilding is also good to get traffic. Let’s say if you write articles on guest blogs, and you will post a link to your own website, people who found your article interesting might visit your own website by clicking on that link. So linkbuilding is good to get traffic and to get high rankings. But in this articles I’m gonna talk about some nice techniques which you can use for linkbuilding.

Post comments on weblogs

A way to get “linkjuice“. Post comments on other weblogs, which are relevant for your website. The weblogs are relevant when they contain articles about the same subject(s) as your own website or weblog. Links from relevant webpages are more valuable than other links. Why? Because Google wants to show the most natural results, which means Google wants to show only websites which users found most useful. But be sure the links in the comments link don’t get a rel=”nofollow”, you can check this by using the firebug add-on in Firefox. With this add-on you can check the a tags in the comment links or they contain a rel=”nofollow”. If it contains a nofollow you will not get any linkjuice from that page, only some traffic if people click on your link. So it’s not the best way to get linkjuice, but only to get some traffic.

Post your link on link directories.

You can post your link on link directories, that are websites which only contains links to other websites. It’s a good way to get linkjuice. But if they ask to place a link back, it’s not a quite good idea to post your link on that directory. Simple because link exchange is much less valuable than one-way links. That’s logical off course, because Google wants to be natural. And if you exchange links with other websites, that’s not quite natural.

Write articles on guest blogs.

This really is a good way to get a lot of linkjuice! Those links don’t contain a nofollow and you are not required to place a link to those blogs on your own website. Be sure you write an article for a blog with a high pagerank and a lot of traffic. And be sure you do your best for the article! The better the article, the more traffic you will receive. And links which are not easy to get are the most valuable, keep that in your mind!

Ofcourse there are a lot more techniques to get backlinks, but maybe you know also some nice techniques? And you want to share those techniques with us? Then please leave a comment below

Under construction page designs

admin — Mon, 31 Oct 2011 20:26:39 +0000

You might have a website or weblog that’s sometimes offline for maintenance or just under construction. Did you ever thought it would be a nice idea to tell your visitors how long it takes until you’re online again? Or just tell your unique visitors on which social media they can follow you to stay up-to-date? It might be very helpfull.

People who visit your website for the first time and get an empty webpage might never come back. It is always good to tell your visitors how long it takes until the website gets online again. So I found a nice few under construction or maintenance web templates, which only costs a few dollars!

Show Flickr photos in Awkward Showcase slideshow

admin — Fri, 16 Sep 2011 13:09:15 +0000

Always wanted to show your Flickr photos in a slideshow? Without requesting a Flickr API code? In this tutorial I will show you how to do that, by making use of the Awkward Showcase jQuery slideshow plugin and some jQuery code. Click on the demo button to watch the demo. If you don’t want to create your own slideshow by following this tutorial, you can also download the source files by clicking on the download button.

Demo Download

The first thing you have to do is downloading the jQuery library an dthe Awkward Showcase plugin. If you’re using WordPress, there’s a big chance you don’t have to include jQuery. You can just try it without including the jQuery library. If the slideshow isn’t working, you can always include the jQuery library anyway.

Include the jQuery library, the Awkward plugin and the slideshow css between the tags:

After you have included the files which are necessary for the operation of the slideshow, you can include the code below, which creates the slideshow and loads the Flickr photos into the Awkward Showcase slideshow.

And last but not least, you have to decide where you want to place the slideshow. On that page you should place the code as shown below.

Let’s rip the code into pieces

I’ll start explaining the code by ripping it into pieces. Let’s start with the JavaScript code between the head tags. The code below creates the Awkward Showcase slideshow. We put these code in a callback function, because it should not be executed before the Flickr photos are loaded. Else you may get trouble with loading the slideshow.

     function callback() {
         $("#showcase").awShowcase({
             width:                 500,
             height:                312,
             auto:                  true,
             interval:              5000,
             continuous:            true,
             loading:               true,
             tooltip_width:         200,
             tooltip_icon_width:    32,
             tooltip_icon_height:   32,
             tooltip_offsetx:       18,
             tooltip_offsety:       0,
             arrows:                true,
             buttons:               false,
             btn_numbers:           false,
             keybord_keys:          false,
             mousetrace:            false,
             pauseonover:           false,
             transition:            'hslide', /* vslide/hslide/fade */
             transition_speed:      500,
             show_caption:          'onload', /* onload/onhover/show */
             thumbnails:            true,
             thumbnails_position:   'outside-first', /* outside-last/outside-first/inside-last/inside-first */
             thumbnails_direction:  'vertical', /* vertical/horizontal */
             thumbnails_slidex:     0 /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
         });
     }

As you can see in the code below, we have to replace the 66790267@N03 ID with your own ID. If you do that, the slideshow will show the flickr photos from your own Flickr account.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=66790267@N03&lang=en-us&format=json&jsoncallback=?", displayImages);

The code below places the photos from the getJSON data into the showcase div. First it puts the small and big images from the JSON data into variables and then into the htmlString variable. Once all Flickr data is in the htmlString variable, the contents of the variable will be putted into the Awkward Showcase div.

     function displayImages(data){

         // Start putting together the HTML string
         var htmlString = "";

         // Now start cycling through our array of Flickr photo details
         $.each(data.items, function(i,item){

             // Puts the thumbnail and big image into variables
             var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
             var bigImage = (item.media.m).replace("_m.jpg", "_b.jpg");

             // Here's where we piece together the HTML
             htmlString += '' + item.title + '';
             htmlString += '';
             htmlString += '';
             htmlString += '';
             htmlString += '';
             htmlString += '';

         });

And finally the code below runs the callback function, after the Flickr photos are loaded.

// Pop our HTML in the #images DIV
$('#showcase').html(htmlString);
// Close down the JSON function call
// now we are calling our own callback function
if(typeof(callback)==='function'){
    callback.call(this);
}

So now we’re finally done. If this post didn’t help you out or you still have problems with the Awkward Slideshow plugin, don’t hesitate to put your question in a comment below, then I’ll try to help you out.

Bottom page jQuery slide box

admin — Mon, 12 Sep 2011 13:12:55 +0000

Curious how to create such awesome slide box as on mashable.com? In this tutorial I will explain to you how to create such awesome slide-box, to improve the page views on your website. The slide box will trigger people to read another article, recommended by you! Read the article below to create the slide box by yourself. Or watch how it works, by pushing the demo button in the sidebar on the right side of this website. You can also download the source, by pushing the download button on the right side.

Demo Download

So earlier this week I was searching for a solution to get such a lovely slide box as mashable.com shows on their website, on every article page. It slides in from the right when you read the last part of the article. You can see the slide box if you open an article page on mashable.com and scroll to the comment part of the page. Then the slide box will slide-in at the bottom right position of the page.

After a lot of searching and “googling” I came on this website, where Mary Lou shows how it’s possible to make such awesome slide box. So, thanks Mary Lou!

First we need to decide from which part of the page we want the slide box to slide-in. At the end of the article? At the end of the comment-list? If you want to show the box when the visitor is at the end of the article, you can give the last paragraph (

) an id like “last”. See the code below:

Page where you want to show the slidebox (I use single.php in WordPress)

Some paragraph text

But when you use WordPress it’s kind annoying to give every last paragraph an id. And you need the id, to tell jQuery after which paragraph the slide box has to show up. So what I did, was identifying the last paragraph by putting p:last-child in the jQuery code. And that works fine with the latest browsers, which is most important, don’t you think? If you don’t know what I mean, just read further. It will be obvious after I showed the jQuery code.

The next thing we have to do is creating the html code of the slide box. So how the slide box has to look like and which information it has to contain. See the code below for an example.

Page where you want to show the slidebox (I use single.php in WordPress)


    Read next
    close

So, now we’ve created the html for the slide box and we “marked” a point from which height the slide box has to appear (from the p with id “last”). The next thing we have to do is announcing the JavaScript files. For the slide box we’re using jQuery of course, so we have to include the jQuery library. Also we include the effects.js, which we gonna create later. You can place the code below between the head tags in your index file. Or if you are using WordPress, you can place the code in the header.php file. If you are using WordPress, there’s a great chance you don’t have to include the jQuery library, because it’s already included. So first try without the library and if it doesn’t work, then you can include the jQuery library.

index.php (or header.php in WordPress)

The last thing you have to do, to get the slide box working, is creating the jQuery code. As you can see in the code below, the code just checks or you already are at the paragraph with id “last”. If so, it slides in the slide box. You can copy and paste the code below in the effects.js file.

effects.js

$(document).ready(function () {
    $(function() {
        $(window).scroll(function(){
            var distanceTop = $('p#last').offset().top - $(window).height();

            if  ($(window).scrollTop() > distanceTop)
                $('#slidebox').animate({'right':'0px'},300);
            else
                $('#slidebox').stop(true).animate({'right':'-430px'},100);
        });
        $('#slidebox .close').bind('click',function(){
            $('#slidebox').stop(true).animate({'right':'-430px'},100, function(){
                $('#slidebox').remove();
            });
            return false;
        });
    });
});

And last but not least, you can add some styles to the slidebox. See the stylesheet below.

stylesheet (style.css in WordPress)

#slidebox{
    width:350px;
    height:125px;
    padding:10px;
    background-color:#ffffff;
    position:fixed;
    bottom:0px;
    right:-380px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow: 0 4px 10px #555555;
}
#slidebox span{
    font-size: 0.9em;
    padding-bottom: 5px;
    text-transform: uppercase;
}
#slidebox h2{
    font-size: 1.0em;
}
#slidebox .next-article{
    margin-top: 5px;
}
#slidebox .next-article a{
    display: inline-block;
}
#slidebox .close{
    background: url(close-card.png) no-repeat;
    display: block;
    height: 15px;
    margin: 3px;
    float: right;
    width: 16px;
    text-indent: -99999px;
}
#slidebox .close:hover{
    background:transparent url(close-card.png) -16px 0px no-repeat;
}
#slidebox strong{
    display: inline-block;
    color: #000000;
    font-family:"Verdana";
    font-size:1.2em;
    margin-left: 10px;
    vertical-align: top;
    max-width: 240px;
}

So, now everything should be working fine. I hope everything is clear now and it helps you to create a nice slide box. I’m sorry for my bad English but I try the best I can to share my jQuery experience with you all.

If you have any questions, just post a comment below and I’ll try to respond as soon as possible.

Get HTML5 working in Internet Explorer

admin — Tue, 03 May 2011 14:20:07 +0000

Are you using HTML5 already? And it does not work in Internet Explorer 7 and 8? That’s because Internet Explorer 7 and 8 don’t support HTMl5. But there’s a workaround with Javascript, I will explain that to you.

There’s a workaround to get HTML5 working in Internet Explorer 7 and 8. Communitymx has posted a solution online

Paste the following code between the head tags

The code creates an element of every html5 tag (which is indicated at the “html5elements” variable). From now on you can style those tags also with CSS, IE7 and IE8 will recognize those.

IMPORTANT: Because IE7 and IE8 don’t recognize those HTML5 tags officially, they do not know or a tag is a block or inline-element. So you have to give them those styles with CSS.

Floating social media buttons

admin — Thu, 08 Jul 2010 08:25:18 +0000

Lots of people ask how to get a floating menu of social media buttons like on mashable.com (or as you can see on the left side of this page), I will explain that to you in this tutorial.

The first thing you need to do is including the jQuery library on your WordPress website. If you have installed WP-Cycle or Lightbox (or another plugin that contains jQuery) you already have jQuery included on your WordPress website. If you do not have any plugin that contains the jQuery library and you don’t know how to include the jQuery library on your webpage, then go to this page.

The next thing you have to do is implementing the menu, you want to get floating on your web page (in our case those are the widget buttons). See the code below for an example.

The wrapper in the code above is necessary! This prevents the menu from going to the absolute left of the web page (when it gets the class fixed). The content div is where I put my text (like this tutorial) in. The position relative of the content div is very important, this prevents the buttons from moving. This means that the buttons just stay where the are, no matter what resolution you have. The next thing you have to do is putting the following css code in your stylesheet:

/* Important! Give the content div a position relative */
#content{
 position: relative;
}
#share_buttons_single_page img{
 background: none;
 border: none;
 padding: 0;
 margin: 0;
}
#share_buttons_wrapper {
 left:-120px;
 position: absolute;
 margin-left: 35px;
 width: 280px;
}
#share_buttons_single_page{
 position:absolute;
 text-align: left;
 margin: 0 0 10px 15px;
}
#share_buttons_single_page.fixed {
 position: fixed;
 top:20px;
}
#share_buttons_single_page .wdt_button{
 float:left;
 clear:left;
 margin-bottom: 10px;
}

On my website the css style above works fine, but in your case it could be you have to change some values like left and such. The last thing you have to do is putting the code below between the head tags in header.php (this is the header.php file in your theme folder). But watch out! You have to put it AFTER the wp_head which includes the other head elements of WordPress. Don’t you know what I mean? I mean AFTER the code as you can see below:

If you put the following code (see the code below) below the wp_head (as you can see above) than everything will be working fine. So the last thing you have to do is adding the following code:

So, now everything should be working fine. As you can see in the code above, I used msie6 to check or the browser which the visitor is using, is not Internet Explorer 6. I did this because Internet Explorer 6 does not support position:fixed.

I hope everything is clear now and it helps you to create a floating menu like on this web page. I’m sorry for my bad English but I try the best I can to share my jQuery experience with you all. I could explain everything in Dutch, but I guess the most of you will not understand anything of that.

If you have any questions, just post a comment below and I’ll try to respond as soon as possible.

Bigger avatar picture in your Comment list

admin — Thu, 03 Jun 2010 07:58:02 +0000

Dear visitors,
In this short tutorial I explain to you how to make your avatar pictures (in you comment lists), bigger without getting blurry. Sometimes you change the size of the images, by using CSS. That will do the job, if you don’t want to use avatar pictures, larger then 32×32 pixels. If you do want to use larger pictures then 32×32 pixels and you will resize them using css to, let’s say to 50×50 pixels, you will get a blurry effect (see the below image).

Ok, the only thing you have to do is opening comment-template.php (which you can find in the folder wp-includes), and change row 1422. On this row you will find the folliwing code:


$defaults = array('walker' => null, 'max_depth' => '', 'style' => 'ul', 'callback' => null, 'end-callback' => null, 'type' => 'all',
 'page' => '', 'per_page' => '', 'avatar_size' => 60, 'reverse_top_level' => null, 'reverse_children' => '');

The only thing you have to do is changing the avatar_size, to a size which you want to use for your avatars. So if you want to use an avatar of 60×60 pixels, just change 32 to 60. It’s not possible to use pictures like 32×60 pixels. Well, that is possible, but only if you use also CSS, but that will not give a very nice effect.

If you do want to use css to change some values or something of the avatar image, you have to use the following class:

.commentlist li img.avatar{
border: 3px solid #FFFFFF;
position:relative;
left:-45px;
top: 40px;
}

As you can see in the code above, I gave my avatars a nice white border and a relative position. I thought the white border would be nice. Anyway, good luck with this tutorial. If you have any questions, just post a comment below and I’ll try to respond as soon as possible.

Create an Archive Page in WordPress

admin — Fri, 16 Apr 2010 09:02:20 +0000

In this tutorial I explain to you how to make an archive page for your wordpress blog. An archive page allows readers to quickly browse your blog and find what they’re looking for. There are many plug-ins which allows you to create an archive page for your wordpress blog, very easily. A disadvantage of this solution is that you could have problems with the version of wordpress you have and such. So why should we use a plug-in to create an archive page for us, when it’s so easy to create an archive page by our selfs? In this tutorial I explain to you how to create an archive page by yourself.

Templates

WordPress allows you to create a template page, so it’s possible to create a PHP or HTML page by yourself and show it on one of your wordpress pages, so this is what we’re going to do. If you want to create a template, the only thing you have to do, is putting the following code in the top of your PHP document:

Let’s get started

Ok, the first thing we’re going to do is creating a new .php page in your theme folder (wp-content/themes/your-theme). The next thing you have to do is putting the following code in the top of that document:

So now we’ve created a template, the next thing we are going to do is putting the rest of the code in that document.
Copy the code as shown below and paste it in your new document.

As you see I made two paragraphs, one with News and one with Projects, this is because I needed an archive page with only the news and project articles, apart. So if you want, you can skip one of those.

The last thing you have to do, is log in the admin panel of you wordpress website. Then you create a new page and you choose for a template, as you see there’s a new template in that list, called Archive page, select that template and save the page. Now you’re done. If you don’t know how to choose a template in a new page, then look at the image below:

If you did it right, you will get a archive page something like this
if you have any questions, just post a comment below and I’ll try to respond as soon as possible.

Using the More Tag on WordPress Pages

admin — Wed, 14 Apr 2010 09:03:02 +0000

If you try to use the “more” tag on any page other than your blog’s homepage, you’ve probably noticed that it doesn’t work. In this tutorial, I show you a really simple way to enable the use of the “more” tag on other pages in your WordPress blog.

You may have noticed that if you have more than one page on your blog that shows posts, the more tag only works on one of those pages. Well I’ve got the solution, if you are interested then you can go to meetingpoint.erikvandeven.com for a small demonstration. If you look at the Nieuws page of that website and the Projecten page, then you’ll see that both pages have the Read more link.

It appears that WordPress uses a variable called $more that says or you are already using the more tag on a webpage. The solution to this problem is incredibly simple, just add the written below code on the page where you want to use the more tag again.

To use the more tag correctly in the content you place on a page, you have to it above the_content, and then you will get this:

If this post was helpfull to you,or if you still have problems with the more tag, please let me know by posting a comment below.

How to use WP-Cycle

admin — Fri, 09 Apr 2010 13:44:41 +0000

The WP-Cycle plugin allows you to upload images from your computer, which will then be used to generate a jQuery Cycle Plugin slideshow of the images.

Each image can also be given a URL which, when the image is active in the slideshow, will be used as an anchor wrapper around the image, turning the image into a link to the URL you specified.

In this tutorial I’m going to explain you how to use the WP-Cycle plugin in WordPress.

The first thing you have to do is download and installing the WP-Cycle Plugin, from this page. Now be sure you’re logged in the wordpress admin panel of your website and go to Plugins, and open the settings page of the WP-Cycle plugin (as shown below).

Now just upload 2 images like I did in the image above and don’t forget to fill in the Rotator DIV ID setting, just enter a name like slideshow. Now click on Save Settings and close the window.

The next thing you have to do is opening a PHP file where you want to put your slideshow, let’s say in the header. So open the header.php in your content folder (/wp-content/themes/YOUR-THEME/header.php) and put this code on a place where you want to put your slideshow:

NOW REMEMBER!! If you want to put a div around the wp-cycle, do not use a div with the same ID as you filled in the settings of the WP-Cycle Plugin (in our case that’s slideshow). Because the plugin puts a div with that name around the slideshow by itself. So if you want to put another div around it, give it an id like header or something.

So, we’re almost done… But if you look good, the slideshow doesn’t look that good in Internet Explorer if you use a background image like me (see my header on this page), to fix that you have to do the following, open up your httpdocs folder, surf to this path: /wp-content/plugins/wp-cycle/ and open wp-cycle.php.

In wp-cycle.php, change these lines (row 438 till 446 in wp-cycle.php):

jQuery(document).ready(function($) {
$("#").cycle({
fx: '',
timeout: ,
speed: ,
pause: 1,
fit: 1
});
});

To this:


jQuery(document).ready(function($) {
$("#").cycle({
fx: '',
timeout: ,
speed: ,
cleartypeNoBg: true
});
});

As you see we added cleartypeNoBg: true, this is for Internet Explorer, if you don’t add this line you’ll see an ugly background in your slideshow (it’s a bug from Internet Explorer).
Also we deleted the pause: 1 and fit: 1, because in my opinion they don’t do anything good to the slideshow, my slideshow stuttered but deleting those lines it fixed the problem.

So, now we’re done and everything is working fine… But if you still have some problems with styling your slideshow like I did, then you have to read further because I’ve got the solution. The wp-cycle plugin adds styles in the index.php, as you all know the styles in the index.php overrides the stylesheet styles. So what you have to do: Go to the wp-cycle folder in the plugins folder of your wordpress blog and open wp-cycle.php. Now scroll to the bottom of that file and delete the following code

margin: 0; padding: 0;
overflow: hidden;

So now we’re finally done. If this post didn’t help you out or you still have problems with the WP-Cycle plugin, don’t hesitate to put your question in a comment below, then I’ll try to help you out.