Basically, a website is only as good as its content and look!
No matter what functions or services you offer on a website, they only attract visitors and/or members based on the looks and feel of your website! So if you are experienced in HTML, CSS and JS (JavaScript), creating a unique website with Dating Factory should be a piece of cake!
There is a lot of things you can do to customize your website both in visible and “invisible” ways. I have here arranged a list with items I prioritize the most while creating a website (descending of course):
- 1. META-Tags
- 2. Content (text)
- 3. Functionality
- 4. Looks (design)
- 5. Speed (time it takes to load your site)
Why have I prioritized like this? Why META-Tags first?
Well, first of all, META-tags are easy to set-up and are IMPORTANT for all the “robots” to find you! (A robot is a remote machine scanning your website) The META-Tags allow the robots to index your website on Google.com, there is many more, but this one is just an example!
How to set up META-Tags!
Here is the two code strings used by robots and spiders we call META-Tags, BUT, you need to customize what is inside the
content=”” variable!
<meta name=”description” content=”Here you write a basic description about your site”>
<meta name=”keywords” content=”i recommend, about 20, keywords here!”>
The description tag should not be longer than 255 characters as most spiders cannot read further than this!
The keyword tag should consist of keywords that are relative to the content and service you offer!
I recommend a minimum of 10 keywords that you think people will type in their search bar to find you!
The better you “optimize” these two tags, the better quality of your unique visitors you will have!
Now, when you have the META-Tags set up, you need to implement them into your code!
To implement your META-tags to all your pages you need to go to:
Sites – Edit – Settings for all the pages – Meta-tags
in your Dating Factory account!
Next step is Content.
It is VERY important to have a unique text on your website, and just not rip it off someone else!
As the “robots” from all the search providers mark your website as “spam” if they find several sites with the same content!
Then there was Functionality
It’s also important that your website works as it should, for example, a website may seem to work fine while using Google Chrome browser, but when you change to Internet Explorer, everything is a mess!
Therefore it is important to do a “cross-browser” validation.
Personally I recommend using these validators!
It’s also good to implement some scripts or similar that makes your website look professional and refined
I am now going to guide you through some of the codes and scripts I used on http://www.knullchatten.se!
How to create a Photo-Wall
I myself didn’t quite like the looks of the new member’s macro, which we as webmasters do not have much access to modify.
So I created a JavaScript to gather the sources of the images, and the member id’s (so that each picture still can link to the member profile), which I then have customized to create a “photo-wall” that fit my web design perfectly, the code I made is free for all of you to use, and I will give you a short “guide” on how to use it!
var array = document.querySelectorAll(‘.photo’);
for(i=0; i < array.length ; i++) {
document.write(‘<a href=”/members/’+array[i].id+’/”><img src=”‘+array[i].src+'” style=”width:65px;”/></a>’);
}
$(‘.SearchResult’).remove();
As you can see above, it’s less code then one would think! Remember! All JavaScript codes need to be inside tags! The tag for JavaScript is:
<script language=”javascript”> ENTER CODE HERE </script>
You might wonder how this code works? It’s easy!
var array = document.querySelectorAll(‘.photo’);
This short string of code collects ALL the elements (img, div, links and so on..) that have the class style: “photo”, and puts them in an array, which looks something like this:
[<img id=”user id” src=”image source” border=”0″ class=”photo” alt=”user screenname”>,
<img id=”user id” src=”image source” border=”0″ class=”photo” alt=”user screenname”>,
<img id=”user id” src=”image source” border=”0″ class=”photo” alt=”user screenname”>]
Which brings us to the next step, how to create a new img tag with link for each collected img?
for(i=0; i < array.length ; i++) {
In this line we have 3 important aspects, i=0, array.length and i++.
i=0
is as basic as it looks, it defines the variable i as 0.
array.length
is basically the count of arrays inside the variable array.
i++
, combined with the other three entry’s, can also be written mathematically as i+1, in other words,
if the variable array.length is greater than the current value of i, it will add the value of +1 to the variable i, until the values are equal.
Now, if we combine these elements, and add the for() { } function, the script will run the commands inside the { and } symbols until the value of i and array.length are equal.
Which brings us to the next step:
document.write(‘<a href=”/members/’+array[i].id+’/”><img src=”‘+array[i].src+'” style=”width:65px;”/></a>’);
Well, document.write(); is what it sounds like, it will write the text entered inside ( and ) into the document.
that’s where ‘<a href=”/members/’+array[i].id+’/”><img src=”‘+array[i].src+'” style=”width:65px;”/></a>’comes in!
We want the script to create the code:
<a href=”link to member”><img src=”source to image” style=”width:65px;”/></a>
But how do we get all those member image sources and links? They change every time we reload the page?
Well, the array updates EVERYTIME the website reload, and as stated earlier, all arrays start at the value 0
That means we can call attributes of the collected element into our code with one single command!
array[0].id
, BUT this command will only collect the element id of the array number 0, but we need them all, one by one.
That’s where the variable i comes in again, remember how I told you that the variable i will increase one number at a time?
Well, let’s use that! as we already defined i with the value 0, then let’s use array[i].id the first run will equal array[0].id, the second run will equal array[1].id, it’s as easy as that, but we need the source too? Well, just change the.id value to .src
now that we have some way to call EACH source and id, we need to put it at use!
in the link we add to the href=”” attribute href=”/members/’+array[i].id+’/”, what about the + and ‘ ?
It’s also quite basic, the ‘ separates plain text from the scripts, and the + tells the script to add the value of the written variable like /members/123456/
now we just repeat the same for each variable we want added in our code!
The only thing that remains for the code to work, is the end tag, which is: }
all that remain now is that really ugly old new member’s macro. We don’t need it anymore now that we have a photo-wall
Well, let’s remove it then?
$(‘.SearchResult’).remove();
This small piece of code removes the element with the id “SearchResult“, which is the element that is created originally from the Dating Factory platform.
And there you have an easy way to create a photo-wall of your member’s macro!
Also, this script is visible in action at: The front-page of KnullChatten.se
How to create a Online-Counter
Dating Factory has this cool function to enable you as webmaster to show your visitors the online members count right now, but the sad part is that it does not update online members in real-time
To show online members with the Dating Factory way, you insert :
{%ONLINE_MEMBERS_COUNT%} where you want the number to show.
But we want it to look like it updates in real-time, there is no way for us as webmasters to do that
BUT what we can do is create a script that adds a random value between 1 and a chosen max so that it looks like updates in real-time.
If we do this, it is NOT an accurate number of online members.
In JavaScript there is a function called:
Math.round() that functions like a calculator,
No matter what number we insert between
( and
), it calculates the result and stores the value in the variable
randomNumber (which you may change to whatever you want).
But what do we really add between
( and
) to get a random number?
It’s easy,
Math.random() will output a value between
0 and
1
But we want it to output a value between
0 and
100 so we just add the line
*100, which will give us the line:
Math.round(Math.random()*100)
But we need it to be stored inside the variable
randomnumber, therefore we add var
randomNumber = ;
which gives us the line:
var randomNumber = Math.round(Math.random()*100);
only thing missing now is to output the random value + the DF online members value into our website.
which brings us to the
document.write(); function.
To get it to write the Dating Factory value + our random value you need to type it like this:
document.write({%ONLINE_MEMBERS_COUNT%} + randomNumber);
Below is the final code to output what we want
<script language=”javascript”>
function online() {
var randomNumber = Math.round(Math.random()*100);
document.write({%ONLINE_MEMBERS_COUNT%} + randomNumber);
}
</script>
And to call the online members count function where we want it, we need to add this line:
<script language=”javascript”>online();</script>
And below I show you how it can be used in action!
<h3><script language=”javascript”>online();</script> online members right now!</h3>
This should be enough info for you to get started!
How to customize forms
To customize your forms to give it a VERY unique look, I recommend using
JQuery,
There is a lot of different ways to do this, the one I used on http://www.knullchatten.se is called:
JQtransform, and is a FREE to use plugin from the JQuery plugins website!
Link to JQuery transform:
http://archive.plugins.jquery.com/project/jqtransform
You may edit the CSS to fit your needs and looks, it is very simple!
Below I have copied the plugin documentation as it is all you need to know about it!
1- Add javascript inclusion in the header section of your web page
//required
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.jqtransform.min.js”></script>
2- Write your form
<form class=”jqtransform”>
<div class=”rowElem”>
<label for=”name”>Name: </label>
<input type=”text” name=”name”/>
</div>
<div class=”rowElem”><input type=”submit” value=”send”/></div>
</form>
3- Finally use the plugin
After it, select the forms and call the jqTransform plugin. See some examples:
<script type=”text/javascript”>
$(function() {
//find all form with class jqtransform and apply the plugin
$(“form.jqtransform”).jqTransform();
});
</script>
For more info and downloads check the link i included in the top!
How to create a Image slider
Again, I found this script on the JQuery Plugin website.
This one is called:
JCarousellite. Link to the plugin:
http://archive.plugins.jquery.com/project/jCarouselLite
This one is also very customizable and easy to use, the documentation is also very describing.
Below I have again copied the documentation from the plugin website!
Step 1:
Include a reference to the jQuery library and the jCarouselLite plugin. You can download jQuery here and jCarouselLite here
If you like interesting effects, include the Easing plugin as well (Optional).
If you would like to navigate the carousel using mouse wheel, then include the mouse-wheel plugin as well (Optional).
<script type=”text/javascript” src=”path/to/jquery.js”></script>
<script type=”text/javascript” src=”path/to/jcarousellite.js”></script>
<!– Optional –>
<script type=”text/javascript” src=”path/to/easing.js”></script>
<script type=”text/javascript” src=”path/to/mousewheel.js”></script>
Step 2:
In your HTML file, provide the markup required by the carousel (a “div” enclosing an “ul”). You also need the navigation buttons, but these buttons need not be part of the carousel markup itself. An example follows…
<button class=”prev”> << </button>
<button class=”next”> >> </button>
<div class=”anyClass”>
<ul>
<li><img src=”someimage” alt=”” width=”100″ height=”100″ ></li>
<li><img src=”someimage” alt=”” width=”100″ height=”100″ ></li>
<li><img src=”someimage” alt=”” width=”100″ height=”100″ ></li>
<li><img src=”someimage” alt=”” width=”100″ height=”100″ ></li>
</ul>
</div>
Step 3:
Fire a call to the plugin and supply your navigation buttons. You just managed to architect your own carousel.
$(function() {
$(“.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
For more info and downloads check the link i included in the top!
Tips on programs that makes designing and scripting easier?
I strongly recommend using Notepad++, think of it like regular Notepad, only it’s on steroids!
It is a highly advanced text tool, and still it’s easy to use, it highlights all code tags and colors them.
Another advanced tool I regular use is Photoshop.
It’s hard to use in the beginning, but there is ALOT of tutorials online, Google is your friend.
But this program is not free, and if you don’t feel like paying for this software after testing, I also recommend using GIMP, which is free to use!
It’s not as powerful as Photoshop, but the fact that it is free makes GIMP a good choice too!
What’s so important about looks?
Let me put it like this, if your website was a cake, and you were competing against other cakes, ALL the cakes looks exactly the same, except for ONE, this one cake has some sprinkles on top.
Which one would you choose? Most of us would pick the one with sprinkles, as it looks tastier, but the sprinkles add almost nothing. So it is important that you put sprinkles (unique design) on your cake (website)! It’s okay to start off with one of the basic templates offered by Dating Factory. While you work on a new template for your website!
Okay, what do you mean speed is important?
If you could imagine a computer running waaaaaaay slower than the computer you are using now then you would have a small audience of possible customers that would not stay on your site for long because of such a silly thing as: “Waiting 5 more seconds”. But this is easily fixed by minimizing ALL your file-sizes before uploading them, trimming images to the size you need them in and not just resizing. Trying to keep as much of your CSS in one file instead of 10 different ones. Well.. There are a lot of things to do.
And now a final word of advice!
Never give up, it is hard and time consuming in the beginning, feels like it doesn’t pay off and just eats your time. But if you follow these simple “steps” you will soon see the registrations coming in! Also, Google is your friend! Whenever there is something you need or can’t figure out, Google it!
I wish you all luck in creating a unique design!
Have a nice day!
Written by: Daniel Henningsson, Sweden. Owner of: http://www.knullchatten.se
