Hello facebooker, FBML on facebook page really customize your fcaebook page,you can create mini site on facebook page.With code HTML you can create nice multi tab on FBML,here is the code...just copy and paste to FBML static:
<style>
.container {
width:520px;
min-height:1000px;
background:#4b1c0b url(http://urlimage.jpg) no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#fff1e6;
}
.header {
height:304px;
}
.logo {
margin:10px 0 0 20px;
float:left;
}
.logo img {
border:0;
}
.slogan {
padding:20px 0 0 0;
}
.likeButton {
float:right;
padding:12px 20px 0 0;
}
.likeButton img {
border:0;
}
.icons {
float:right;
padding:0 50px 0 0;
}
.icons ul {
margin:0;
padding:0;
}
.icons li {
display:inline;
}
.icons li a img {
border:0;
}
.menu {
padding:95px 0 0 0;
height:36px;
text-align:center;
}
.menu ul {
margin:0;
padding:0;
height:36px;
}
.menu li {
list-style:none;
display:inline;
padding:15px 20px 15px 40px;
text-align:center;
background:url(images/menuP.png) no-repeat left top;
width:103px;
height:36px;
}
.menu img {
border:0;
}
.menu a {
font-size:12px;
color:#ffffff;
text-decoration:none;
font-weight:bold;
}
.homePage, .aboutPage, .housePage, .contactPage {
background: url(images/contentBackground.png) repeat-y left top;
margin:0 30px;
}
.homePage p, .aboutPage p, .housePage p, .contactPage p {
margin:0 30px 30px 30px;
padding:20px 0;
height:470px;
overflow:auto;
}
.programsPage p span {
padding:2px 5px;
font-size:12px;
font-weight:bold;
color:#ffffff;
background:#ff9000;
}
.pageTitle {
text-align:left;
font-size:36px;
color:#fff1e6;
margin:0 30px;
padding-top:20px;
font-weight:bold;
}
.pageTitle span {
color:#c66f39;
}
.pagePic {
float:left;
margin:0 20px 15px 0;
}
.pagePic2 {
float:right;
margin:0 0 15px 20px;
}
.footer {
background: url(images/footerBackground.jpg) repeat-x left top;
height:41px;
text-align:center;
color:#b79b7b;
}
.footer a {
color:#ddb676;
}
.footer p {
text-align:center;
padding-top:15px;
}
.clearer {
clear:both;
}
</style>
<div class="container">
<div class="header">
<div>
<div class="logo">
<a href=""><img src="images/logo.png" alt="" /></a>
</div>
<div class="slogan">
<img src="images/slogan.png" alt="" width="217" height="49" />
</div>
<div class="likeButton">
<a href=""><img src="images/likeButton.png" alt="" /></a> <img src="images/likeText.png" alt="" />
</div>
<div class="clearer"></div>
<div class="icons">
<ul>
<li><a href=""><img src="images/Chrome-Twitter-32.png" alt="" /></a></li>
<li><a href=""><img src="images/Chrome-Youtube-32.png" alt="" /></a></li>
<li><a href=""><img src="images/Chrome-Facebook-32.png" alt="" /></a></li>
<li><a href=""><img src="images/Chrome-Rss-32.png" alt="" /></a></li>
</ul>
</div>
</div>
<div class="clearer"></div>
<div class="menu">
<ul>
<li><a href="index.html" clicktoshow="home" clicktohide="about, house, contact">HOME</a></li>
<li><a href="about.html" clicktoshow="about" clicktohide="home, house, contact">ABOUT</a></li>
<li><a href="house.html" clicktoshow="house" clicktohide="about, home, contact">HOUSE</a></li>
<li><a href="contact.html" clicktoshow="contact" clicktohide="about, house, home">CONTACT</a></li>
</ul>
</div>
</div>
<div id="home" class="homePage">
<div class="pageTitle">Welcome <span>HOME</span></div>
<p>
In tincidunt porta elementum. Sed id ipsum erat, ac auctor est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce libero arcu, malesuada in tincidunt in, venenatis ultrices neque. Sed vel justo dolor, eu pulvinar turpis. Aenean ac quam sed erat malesuada luctus. Aliquam eget diam eu neque condimentum consectetur. Pellentesque a ligula eu dui bibendum luctus sed adipiscing tellus. Cras id bibendum lorem. Nullam<br /><br />
<img src="images/homePic.jpg" alt="" width="121" height="182" class="pagePic" />In tincidunt porta elementum. Sed id ipsum erat, ac auctor est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce libero arcu, malesuada in tincidunt in, venenatis ultrices neque. Sed vel justo dolor, eu pulvinar turpis.<br />Aenean ac quam sed erat malesuada luctus. Aliquam eget diam eu neque condimentum consectetur. Pellentesque a ligula eu dui bibendum luctus sed adipiscing tellus. Cras id bibendum lorem. Nullam tempor vestibuIn tincidunt porta elementum. Sed id ipsum erat, ac auctor est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce libero arcu, malesuada in tincidunt in, venenatis ultrices neque. Sed vel justo dolor, eu pulvinar turpis. Aenean ac quam sed erat malesuada luctus. Aliquam eget diam eu neque condimentum consectetur. Pellentesque a ligula eu dui bibendum luctus sed adipiscing tellus. Cras id bibendum lorem. Nullam
</p>
</div>
<div id="about" class="aboutPage" style="display:none;">
<div class="pageTitle">Welcome <span>ABOUT</span></div>
<p>
<img src="images/aboutPic.jpg" alt="" width="124" height="104" class="pagePic" />In tincidunt porta elementum. Sed id ipsum erat, ac auctor est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce libero arcu, malesuada in tincidunt in, venenatis ultrices neque. Sed vel justo dolor, eu pulvinar turpis. <br /><br />
Aenean ac quam sed erat malesuada luctus. Aliquam eget diam eu neque condimentum consectetur. Pellentesque a ligula eu dui bibendum luctus sed adipiscing tellus. Cras id bibendum lorem. Nullam tempor vestibulum <br /><br /><br /><br />
<img src="images/aboutPic2.jpg" alt="" width="124" height="104" class="pagePic" />In tincidunt porta elementum. Sed id ipsum erat, ac auctor est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce libero arcu, malesuada in tincidunt in, venenatis ultrices neque. Sed vel justo dolor, eu pulvinar turpis. <br /><br />
Aenean ac quam sed erat malesuada luctus. Aliquam eget diam eu neque condimentum consectetur. Pellentesque a ligula eu dui bibendum luctus sed adipiscing tellus. Cras id bibendum lorem. Nullam tempor vestibulum
</p>
</div>
<div id="house" class="housePage" style="display:none;">
<div class="pageTitle">Welcome <span>HOUSE</span></div>
<p>
<img src="images/housePic.jpg" alt="" width="125" height="141" class="pagePic" />In tincidunt porta elementum. Sed id ipsum erat, ac auctor est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. FuscVe libero arcu, malesuada in tincidunt in, venenatis ultrices neque. Sed vel justo dolor, eu pulvinar turpis.<br /><br />Aenean ac quam sed erat malesuada luctus. Aliquam eget diam eu neque condimentum consectetur. Pellentesque a ligula eu dui bibendum luctus sed adipiscing tellus. Cras id bibendum lorem. Nullam tempor vestibulum tortor, id consequat mi gravida a. Etiam tincidunt sagittis purus, sed semper ipsum elementum sit amet.<br /><br /><br />
In tincidunt porta elementum. Sed id ipsum erat, ac auctor est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. FuscVe libero arcu, malesuada in tincidunt in, venenatis ultrices neque. Sed vel justo dolor, eu pulvinar turpis. <br /><br />
Aenean ac quam sed erat malesuada luctus. Aliquam eget diam eu neque condimentum consectetur. Pellentesque a ligula eu dui bibendum luctus sed adipiscing tellus. Cras id bibendum lorem. Nullam tempor vestibulum tortor, id consequat mi gravida a. Etiam tincidunt sagittis purus, sed semper ipsum elementum sit amet.
</p>
</div>
<div id="contact" class="contactPage" style="display:none;">
<div class="pageTitle">Welcome <span>CONTACT</span></div>
<p>
<img src="images/contactPic.jpg" alt="" width="234" height="156" /><br />
<b>9387 - 8282 Mill road,<br />
Cambridge, MG09 33HT</b><br />
Freephone: +1 800 329 3292<br />
Telephone : +1 800 929 2928<br />
Fax: + 1 800 928 2928<br />
E-mail: uda3mau@facebook.com<br /><br /><br />
<b>Our Location</b>
<img src="images/contactPic2.jpg" alt="" width="234" height="142" class="pagePic" />In tincidunt porta elementum. Sed id ipsum erat, ac auctor est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br /><br />
FuscVe libero arcu, malesuada in tincidunt in
</p>
</div>
<div class="clearer"></div>
<div class="footer">
<p>
Copyright ©2011 Tutorial Facebook Page | Design by <a href="http://freecustomizefacebookpage.blogspot.com/" title="Facebook Templates"> Tutorial Facebook Page </a>
</p>
</div>
</div>
Thanks for visting brother and sister,nice to see you on our blog...!
0 Comments
