Showing posts with label design. Show all posts
Showing posts with label design. Show all posts

Tuesday, April 26, 2011

Create Comics Online For Free

Love comic strips? Here is a chance to create your own or simply check out what others have created. You can even impress your friends by using the tools to create unique comics. There is a wide choice of characters, props and scenes to choose from. You can also create your own unique characters. These two sites are the best. Both are free with very little limitations. Try both and see which one you like best.

Friday, March 25, 2011

Mini Site On Facebook Fanpage

 This is a screenshot of facebook fanpage minisite. It is placed on a static FBML tab. You can add image gallery, contact forms and many other features to this tab site.
 

To make a mini-site on the static FBML tab of your fanpage page you can use this basic code


<!-- navigation elements -->

<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3,nav4">Home</a>

<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3,nav4">Specials</a>

<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2,nav4">Locations</a>

<a href="#" clicktoshow="nav4" clicktohide="nav1,nav2,nav3">About</a>



<!-- Content to display when user clicks on the Home tab -->

<div id="nav1">

Homepage text

</div>



<!-- Content to display when user clicks on the Specials tab -->

<div id="nav2" style="display: none;">

Specials text

</div>



<!-- Content to display when user clicks on the Locations tab -->

<div id="nav3" style="display: none;">

Locations text

</div>



<!-- Content to display when user clicks on the About tab -->

<div id="nav4" style="display: none;">

About text

</div>


This is just the basic code to make such a site. By adding a style sheet it can be made better.

Here is an example style sheet to make the menu tabs.

<style type="text/css">

#body
{
background-color:yellowGREEN;
}

#coolmenu{
margin: 0;
    padding: 12px 0 12px 0;
  
}

#coolmenu a{
    text-decoration: none;
    font-weight: none;
    background:black;
    color: silver;
    padding:8px 10px;
    margin: 0 1px;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color:brown;
color: white;
}

</style>

Internet explorer doesn't support <style type="text/css"> so you may need to add external stylesheet like this
 <link ref="stylesheet" type="text/css" href="http://yourdomain.com/style.css" />
Some other screenshots


A contact form embedded on fanpage


A popup dialog box


A Like to reveal page


Video Tab


LinkWithin

Related Posts Plugin for WordPress, Blogger...