Web Design Servers

Protecting your Posts from Leechers

webdesi3 — Mon, 09 Mar 2009 12:39:20 +0000

Its not 100% possible to protect your posts from leechers, or content theft, without paying for a service, however, here are some methods that might make it a little harder fro them to copy your content.

Prevent copy and paste of your content:

This code goes into the section of your blog or web-page and will bring up a pop-up alert box instead of letting them copy your content.

Prevent Printing

You can use CSS to prevent printing of the main body of your page by putting the following code in your section:

Then your section should have the usuall

All your content you don’t want printed goes between these

This won’t prevent people from using the print screen function but it will protect your page from the average Joe Soap, and it will make it harder to access your content.

HTML Scrambler:

Another way tp protect your content from leechers is to scramble your source code so they can’t get it that way either. Use this HTML Scrambler Generator to do it:

Blogger Burn-out Bites

webdesi3 — Fri, 06 Mar 2009 15:47:49 +0000

Recently, as most of you may have noticed, I haven’t posted anything new. (Thank you Dennis for showing concern).

This was due to a severe case of Blogger Burn-out or maybe just internet burn out. You see I spend all day on the internet in work, designing sites and maintain 3 blogs for the company I work for. Recently, I’ve had to re-design the whole package and have been eating, breathing and sleeping HTML, CSS, Wordpress, web pages, ect., so that when I come home in the evenings I don’t have the energy to Blog.

On top of the new package, I’ve been Freelancing my skills and have had clients lining up around the block for the past few weeks, I’m also trying to re-design my own Web-Page with all my services and my portfolio, check it out soon J

I do apologise and I hope to start putting up a few posts more regularly again now that my BIG project is finished.

Thank you to all of you that have stuck around, and I hope to see all of you soon in your comments sections.

Happy Blogging!

P.S. I released a Entrecard generator last week, for anyone thats interested visit

CSS Pop-out Verticle Navigation Menu

webdesi3 — Tue, 27 Jan 2009 23:53:58 +0000

I’ve been on a mission all week to find a Pure CSS Drop Down Menu that works in Firefox AND IE.

I even went so far as to attempt to write my own! (it looks great, but only in FireFox, check it out here).

It’s near impossible, and so I’ve settled for one with just a tiny, tinsey bit of Javascript in it.

I’m using the Suckerfish Drop Down Verticle menu, I’ve modified it a little and I’m going to break it down for you here.

Check out the example here.

So, to start off, pop the CSS and Javascript in the element:

The CSS is as follows:

And the Javascript:

Then your HTML goes in the section:

Home

About Us

Services

Blog Design

Web Design

Blog Analysis

Tutorials

HTML

CSS

Javascript

Contact

Email

Twitter

My Blog Log

***********************************************************

Notice where I use a second list, I don’t close off the first list untill the second list is closed? (Highlighted in Red). This gives the pop-out menu and is very important that it stays that way or else it won’t work.

Services

Blog Design

Web Design

Blog Analysis

Check out the Example here.

HTML Tutorial: Page Layout

webdesi3 — Thu, 22 Jan 2009 23:03:42 +0000

Just a quick lesson today to show you how to change the layout of text using HTML.

Web Developers usually use tables for HTML, but escpecially to make a layout like the one below:

This is what the first colum looks like, right here

And this is what the second colum looks like

And this is what the third colum looks like

You could use this to show 3 125×125 ads at the bottom of each post, I know I’ve always had trouble aligning images to be nice and neat, I’ll be using this in future!

Here’s the code, remember, if your using this on a webpage, you’ll need to put it between the tags:

This is what the first colum looks like, right here

And this is what the second colum looks like

And this is what the third colum looks like

And just to let you see what I’m talking about with the ads:

You could always just split the page in 2 (50%), which would look like this:

You could stick a whole load of text into this box…write whatever you like or whatever is coming into my head.

And then you can fill this text with words of wisdom or gobbledegook…the choice is yours.

You could stick a whole load of text into this box…write whatever you like or whatever is coming into my head.

And then you can fill this text with words of wisdom or gobbledegook…the choice is yours.

Thats it till next time!

Any questions? Leave them below and I’ll get back to ya soon!

CSS Font / Text Properties

webdesi3 — Tue, 20 Jan 2009 11:28:14 +0000

CSS is great for changing your sites font properties. It replaces the need to label every single tag like in HTML, instead, you only need to state the nature of the text once, either in the section or in a seperate style.css file linked to from your section eg:

If you are putting these codes into your section, they will need to go between

tags.

How do you set the Font of Text?

There are a few different ways you can set the font of your text. You can specify the font as an individual:

body {

font: Arial

}

This will set the font as Arial for the whole page. However if you only want the font in your paragraphs to be arial then you just specify the paragraph using the following code:

p {
font-family: courier
}

You can of course, and I recommend, setting the font to a style you like first, and then setting another 2-3 fonts in-case your readers browser doesn’t support your first choice of fonts.

body {
font: “Veranda”, Trebuchet MS, Arial, sans-serif
}

How do you set the size of the font?

You can set the font size in a variety of manners, percentages or em’s.

body {

font: 80%

}

The font on this site is set to 80%, roughly 10 point. 100% is normal for web browsers.

h3 { font-size: 1.3em; }

The smaller headings on this post are 1.3em size, meaning they differ on each screen size. Play around with the sizes untill you know what you like and what looks good with your sites style.

How do you change the weight of the font?

The weight of the font is how heavy it looks. Bold text has a weight of 900 in most cases, but you can change the weight depending on how much you want certain things to stand out.

p.normal {font-weight: normal}
p.thick {font-weight: 900}

Different weights for fonts:

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

You could also put your text into pixels, eg. 10px or 12px, but em’s are better and replacing px.

Does it all have to go seperatly?

No! In fact it’s much easier to put all your styles into 1 declaration. For example you want all the main text in your document to be black, size 100%, normal weight (i.e. NOT bold), and arial, then use the following code:

body {
color: black;
font: 100% “Arial”, Veranda, Tahoma, sans-serif;
font-weight: normal;
}

Thats it! Any Questions? Leave them in the comments section and I’ll get back to you!

CSS Backgrounds

webdesi3 — Thu, 15 Jan 2009 13:59:59 +0000

I haven’t actually covered backgrounds in depth yet so lets get to it:

If you want to change your background, be it on a blog or webpage you need to know how, right?

But do you?

Note: Every code on this page should go between tags in your section or on a seperate style.css file linked to in your section.

How do you change your Background color?

body

{

background-color:blue

}

body {background-color: #ffffff}

How do you set an image as the background?

{
background-image:
url(’images/background.jpg’)
}

How do I make the background image fit the whole page?

body
{
background-image:
url(’images/background.jpg’);
background-repeat: repeat
}

What if the background image doesn’t load?

Ah ha! Now your thinking!!!

As a fail-safe you should also give a color property to your background in case the image doesn’t load. You do that by using the following code:

body
{
background:
url(’images/background.jpg’) #ffffff;
background-repeat: repeat
}

Thats it! Nice and Simple! If you have any questions, leave them below!

Create a Vertical CSS Navigation Menu

webdesi3 — Mon, 12 Jan 2009 21:31:24 +0000

I was trying out a new feature on one of my blogs the other day, and decided to share it with you.

Instead of having your navigation on the top of your blog, you can remove it and have a vertical navigation menu in your sidebar, leading to whatever pages you specify, kinda like a website, but with a blog design.

How do you do it?

Simple, a navigation menu is simply a html unordered list

item. You simply add a css style to the list to create whatever effect you want, then pop it into a text box on your sidebar and your good to go.

The HTML Part:
The CSS Part

Which Looks Like:

If you can see this your Browser does not support Iframes!
See the non-frame content.

What else can you do?

You can try it out with images as the background. You’ll need 2 images of various colors, just add them in instead of a color. Play with it till you get a good look.

Just change substitute in the following code in the appropriate places:

.navbar li a{
background: white url(images/image.gif) repeat-x bottom left;

and

.navbar li a:hover{
background-image: url(images/image2.gif);
}

Have some fun with different colors and styles, play with the code a bit and see what happens.
If you discover something great, pop it in the comments box for others to see!

Do Free E-Books really build lists?

webdesi3 — Thu, 08 Jan 2009 12:22:44 +0000

The question that I pose to you today is as above:

Do Free E-Books really help build email lists?

I have been offering a free e-book to anyone who subscribes to my blog via email for the last 3 months. The offer has been in pride of place in the top right hand corner, big enough that no one could miss it.

The Result after 3 months?

12 Subscribers!

A big thank you to those subscribers, however most of them weren’t interested in the e-book and emailed be back saying that they had actually forgotten about the book.

This experiment leads to my question for you:

Have you found giving free e-books away as an incentive for people to subscribe to your blog?

P.S. Seeing as the incentive didn’t work I’m just giving the book away for free. You can download your copy below:

Free E-Book: Blogging Behind the Curtains: What you’ve been told about Blogging is dead wrong.

Tutorial: Change your Blog’s Header

webdesi3 — Tue, 06 Jan 2009 12:00:52 +0000

Changing your Blogs Header Image is a great way to personalise your Blog, even if you are using the basic wordpress theme, you can totally change the style and perception of your blog by changing the header image.

First off you should create a logo image or personalised image that suits your blog. You can hire someone to do this if you have some extra cash, some designers will even offer to design your logo for free in exchange for a text link placement on your blog.

Or you can design it yourself. Do a search on google for free logos, and use one of the many free, but slightly limited, services available.

I used logoease.com for my new logo, as you can see above. I found it to be the best of the free services, and it gives you your logo in a variety of sizes and formats, a bonus.

When you have your logo designed, your ready to place it in your header.

How do I put my Logo in the Header?

Head on over to your word press dashboard, and click on Design, and then on Theme Editor. You need to make your stylesheet.css writable if you haven’t already.

To make your Stylesheet.css writable:

Go to your FTP manager
Log into your domain
Go into wp-content/themes/ whatever theme you are using
Right click on stylesheet.css or style.css
Click File-Attributes, this will bring up the box you see here
Check all the boxes and then exist.

Now, go to your stylesheet.css in your Theme Editor and find the section refering to your header, usually looks something along the lines of this:

Now you just need to replace the background url with your image title, after you have uploaded the image of course. Or you could just replace the header.jpg in your themes image folder with your new header that is called header.jpg.

For Wordpress Default Theme:

The Header code in wordpress default theme looks like so:

#header {
background: #73a0c5 url(’images/kubrickheader.jpg’) no-repeat bottom center;
}

#headerimg {
margin: 7px 9px 0;
height: 192px;
width: 740px;
}

So basically, you need an image that is 192 x 740 px unless you want to change the whole layout, another days work I’m afraid. An then you just need to change the .jpg file and hit update.

Voila, instant and easy personalisation of your Blog!

If your having trouble, please leave a comment below and I’ll get back to you with help asap.

The Second High Traffic method, Twitter

webdesi3 — Fri, 02 Jan 2009 12:36:30 +0000

Following on from yesterdays post, New year New traffic, I want to show you my second most favourite way of bringing traffic to my Blog.

The second traffic method is Twitter. My other site Spotlight Blogger gets 90% of its traffic from Twitter. I use my Twitter account for Socialising and post a tweet every time I put up a new Post on either of my Blogs.

I also have a landing page for my twitter followers, so when they click on the link on my twitter account it brings them to a page thanking them for stopping by and telling them a little about what I do on both Blogs.

I use Socialtoo.com to automatically DM everyone who follows me, thanking them and directing them to my Twitter landing page.

Now if your thinking “I only have 20 followers on Twitter, hows that going to increase my traffic”, here is where I’d like to introduce to you my Twitter secret weapon!

A fabulous FireFox Script from Greasemonkey.com that makes following more people much much easier.

I first heard about this script from David Brown, with his post “How I became a Twitter Rock star - sort of“. He has had huge success on Twitter with his method, and so have I. I went from having 30 followers to over 500 in less than a month, and my traffic on both my blogs has gone up up up!

Read Davids post for full details on how the Scripts work but you can grab the Greasemonkey Script here, and then you need to download and install the Greasemonkey script for Twitter.

Then go to Twellow.com, the Twitter yellow pages and do a search for someone with the same interests as yourself, example do a search for “Web Design”, pick the person at the top of the list, if they have similar interests to you, follow them and click on the list of people that they follow.

The Greasemonkey script will automatically start to follow everyone that they follow. Now, hopefully they will follow you, if they don’t you can press un-follow non-mutual’s after a few days or a week. Voila! Lots of new Twitter followers, with mutual interests as yourself, to see your tweets, and therefore you have a higher chance of gaining traffic from Twitter.

Don’t forget its fun. I’ve met lots of new people this way! Not to mention the fact that my Traffic is huge, take a look at last weeks traffic referals for Web Design Servers:

Leave your Twitter name below and a little bit about you, what you tweet about and what you blog about, lets try an increase your traffic and make you some new friends

Happy New Year! Good Luck in 2009!