07/30/2010 by Reina Lyn Ben

http://konektado.com
Ning.com seems to be a hot trend these days. I’ve been receiving messages/questions on facebook on how I configured Konektado.com, especially the Channel Menu section, how I created those links along with images (courtesy of ASH Brand Clothing) to emphasize the Channel Menu buttons. This tutorial assumes you know basic HTML and your way around Ning.com. First part, I will show you “How to create your custom vertical menu side bar on Ning” and second is, “Customizing the appearance”.
How to create your custom vertical menu side bar on Ning
Along with video, forum, blog, etc component, Ning.com also provides a Text Box where you can input customize text and images, it also supports HTML/CSS language, through this, you will be able to create your custom vertical menu.
Using the HTML table tag, this will allow you to format your images and link them to the page you created within Ning.com or link them to an external page/website.
Make sure to upload your button images to another web server (ex. Flickr.com, Google.com, etc) and link them on image source <img src=”"> tag.

text box
Customizing the appearance
For the appearance, this depends on your preference or concept. I can’t really teach you a certain design, but I can provide online material as a foundation, a few walk around Ning.com’s Appearance page and use Konektado.com as an example. A reference I often use is http://www.w3schools.com, I refer to this when I forget an HTML or CSS tag code, it also lets you test their sample code within the Example box.

Ning.com's Appearance page
With Konektado.com, I used a plain design template called HyperMelon since the concept is simple and corporate. Color contrast and banner is also a major element that needs to be studied well when designing a website. By mixing the right hues (for konektado.com, I used red, white, black) and creating a stunning banner (design a banner thats eye-catching), your website can gain tons of viewers. Also, keeping your frontpage with minimal information organized in sections can be easily accessible.
Another trick I did to minimize informations on Ning’s frontpage is by removing the About section located below the Ads. Inserting the code on the image removes the About section.

CSS code to remove About section
So, this is my first tutorial and obviously, its just an overview explanation of how I designed konektado.com. If you have any questions for a detailed instructions, feel free to message me and I’ll post another entry. Thanks!!!
14.583000
121.000000
Recent Comments