Facebook Fan Page Tutorials With All Latest Codes: Multi Tabs For facebook page Slideshow

demo Video:

screenshot:

<!-- FanPageTutorials.blogspot.com/ --> <script> var content = document.getElementById("content"); var activeTab = document.getElementById("firstTab"); function moveContent(tab, i) { if (activeTab) activeTab.removeClassName("activeTab"); tab.setClassName("activeTab"); activeTab = tab; Animation(content).to("left", (-i * 521)+"px").duration(600).ease(Animation.ease.end).go(); } </script><br /> <br /> <style> a { color: #d8dfea; display: block; width: 103px; height: 14px; background-color: #d8dfea; padding: 4px 2px; } li { list-style-type: none; } .activeTab { background-color: #627aad !important; color: #ffffff !important; font-weight: bold; } .tabbar { height: 28px; } .tabbar li { float: left; text-align: center; margin-right: 1px; cursor: pointer; font-size: 12px; height: 14px; } .tabbar li a { font-weight: bold; display: block; width: 73px; height: 16px; text-decoration: none; color: #3b5998; padding: 4px 0px; } .tabbar li a:hover { color: white; font-weight: bold; background-color: #627aad; textdecoration:none; } #wrapper { clear: left; width: 520px; height: 420px; overflow: hidden; position: relative; } #content { width: 5292px; position: relative; } #content li { width: 520px; height: 420px; background-color: #edeff4; float: left; border-right: solid 1px black; } </style><br /> <br /> <ul class="tabbar"><li><a id="firstTab" class="activeTab" href="Optional Link 1" onclick="moveContent(this,0);">1.Fan<br /> </a></li> <li><a href="Optional Link 2" onclick="moveContent(this, 1);">2.Page<br /> </a></li> <li><a href="Optional Link 3" onclick="moveContent (this, 2);">3.Tutorials<br /> </a></li> <li><a href="Optional Link 4" onclick="moveContent (this, 3);">4.Any<br /> </a></li> <li><a href="Optional Link 5" onclick="moveContent (this, 4);">5.Any<br /> </a></li> <li><a href="Optional Link 6" onclick="moveContent (this, 5);">6.Any<br /> </a></li> <li><a href="Optional Link 7" onclick="moveContent (this, 6);">7.Any<br /> </a></li> </ul><div id="wrapper"><ul id="content"><li><center><br /> 1.Fan Page Tutorials <br /> <img src="IMAGE LINK 1"/><br /> </br></center></li> <li><center><br /> 2.Fan Page Tutorials <br /> <img src="IMAGE LINK 2"/><br /> </br></center></li> <li><center><br /> 3.Fan Page Tutorials <br /> <img src="IMAGE LINK 3"/><br /> </br></center></li> <li><center><br /> 4.Fan Page Tutorials <br /> <img src="IMAGE LINK 4"/><br /> </br></center></li> <li><center><br /> 5.Fan Page Tutorials <br /> <img src="IMAGE LINK 5"/><br /> </br></center></li> <li><center><br /> 6.Fan Page Tutorials <br /> <img src="IMAGE LINK 6"/><br /> </br></center></li> <li><center><br /> 7.Fan Page Tutorials <br /> <img src="IMAGE LINK 7"/><br /> </br></center></li> </ul></div><!-- FanPageTutorials.blogspot.com/ -->

Note:
1...For Changing Images
Replace these Codes
IMAGE LINK 1, IMAGE LINK 2, IMAGE LINK 3, IMAGE LINK 4, IMAGE LINK 5,  IMAGE LINK 6, IMAGE LINK 7
Into your image Link

2...for Changing tab Names replace this text into your tab name
1.Any ,2.Any,3.Any,4.Any,5.Any,6.Any,7.Any

3...For changing tab link
replace these code
Optional Link 6,Optional Link 2,Optional Link 3,Optional Link 4,Optional Link 5,Optional Link 6,Optional Link 7