How to make slideshow menu in blog

Slideshow menu tabs are always used in magazin templates at the head of blog .Slideshow tab menu is a widget that provides you a multiple tab of menu in one simple page. By adding this Slideshow tab menu , will attract your visitors easily to view your blog . Look at the method below "How to make slideshow menu in blog":

1. Log in your account to Dashboard ;
2. Go to Edit HTML by clicking on Design .At this time you have to download your old template first by selecting on "Download full template to keep in your folder computer (recommeded on your desktop , it is to find to upload your old template , if something wrong in your new template).
3. Find the code ]]></b:skin> . The easy way to find this code in your template , you have to press Ctrl and F on your computer keyboard .
4. Copy the code below to place before ]]></b:skin> .
Please Select on Highlight All and then Click on Copy to Clipboard
.indentmenu{font: bold 11px Arial; width: 100%; /*leave this value as is in most cases*/} .indentmenu ul{margin: 2px;padding: 0;float: left; /* width: 80%; width of menu*/ background: transparent; } .indentmenu ul li{ display: inline; } .indentmenu ul li a{ float: left; margin: 2px; color: #000; /*text color*/ padding: 5px 11px; text-decoration: none; border: 1px solid #ccc; } .indentmenu ul li a:hover{ background:#ddd; } .indentmenu ul li a:visited{ color: white; } .indentmenu ul li a.selected{ color: white !important; padding-top: 6px; /*shift text down 1px*/ padding-bottom: 4px; border: 1px solid #000000; background:#000000; } .tabcontentstyle{ /*style of tab content container*/ border: 1px solid gray; width: 450px; margin-bottom: 1em; padding: 10px; } .tabcontent{ display:none; } @media print { .tabcontent { display:block !important; } }
5. Find the code </head> and copy the the script below to put before it (</head> ).
Please Select on Highlight All and then Click on Copy to Clipboard
<script type='text/javascript'> //<![CDATA[ //** Tab Content script v2.0- ? Dynamic Drive DHTML code library (http://www.dynamicdrive.com) //** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements: // -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected // -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted // -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st) // -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container //** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically //** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0) ////NO NEED TO EDIT BELOW//////////////////////// function ddtabcontent(tabinterfaceid){ this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container this.enabletabpersistence=true this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values) this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values) this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link") } ddtabcontent.getCookie=function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return "" } ddtabcontent.setCookie=function(name, value){ document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/) } ddtabcontent.prototype={ expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers this.cancelautorun() //stop auto cycling of tabs (if running) var tabref="" try{ if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr tabref=document.getElementById(tabid_or_position) else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr tabref=this.tabs[tabid_or_position] } catch(err){alert("Invalid Tab ID or position entered!")} if (tabref!="") //if a valid tab is found based on function parameter this.expandtab(tabref) //expand this tab }, cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') ) if (dir=="next"){ var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0 } else if (dir=="prev"){ var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1 } if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function this.cancelautorun() //stop auto cycling of tabs (if running) this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]]) }, setpersist:function(bool){ //PUBLIC function to toggle persistence feature this.enabletabpersistence=bool }, setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link") this.selectedClassTarget=objstr || "link" }, getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref }, urlparamselect:function(tabinterfaceid){ var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index }, expandtab:function(tabref){ var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : "" this.expandsubcontent(subcontentid) this.expandrevcontent(associatedrevids) for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected" this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : "" } if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition) this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array }, expandsubcontent:function(subcontentid){ for (var i=0; i<this.subcontentids.length; i++){ var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop) subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value } }, expandrevcontent:function(associatedrevids){ var allrevids=this.revcontentids for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none" } }, setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array) for (var i=0; i<this.hottabspositions.length; i++){ if (tabposition==this.hottabspositions[i]){ this.currentTabIndex=i break } } }, autorun:function(){ //function to auto cycle through and select tabs based on a set interval this.cycleit('next', true) }, cancelautorun:function(){ if (typeof this.autoruntimer!="undefined") clearInterval(this.autoruntimer) }, init:function(automodeperiod){ var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled) var selectedtab=-1 //Currently selected tab index (-1 meaning none) var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index this.automodeperiod=automodeperiod || 0 for (var i=0; i<this.tabs.length; i++){ this.tabs[i].tabposition=i //remember position of tab relative to its peers if (this.tabs[i].getAttribute("rel")){ var tabinstance=this this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value) this.tabs[i].onclick=function(){ tabinstance.expandtab(this) tabinstance.cancelautorun() //stop auto cycling of tabs (if running) return false } if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/)) } if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){ selectedtab=i //Selected tab index, if found } } } //END for loop if (selectedtab!=-1) //if a valid default selected tab index is found this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class) else //if no valid default selected index found this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){ this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod) } } //END int() function } //END Prototype assignment //]]> </script>
6. Save your template
7. Now it is time to find the place for your slideshow tab menu. You can place your slideshow tab menu in anywhere you like as in your new post , your left or right sidebar , top ..  , or you want to place in any blog's Gadget of your template blog. Please copy the html code below to place in anywhere you prefer.
Please Select on Highlight All and then Click on Copy to Clipboard
<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;"><div id="pettabs" class="indentmenu"><ul><li><a href="#" class="selected" rel="tab1">1</a></li> <li><a href="#" rel="tab2">2</a></li> <li><a href="#" rel="tab3">3</a></li> <li><a href="#" rel="tab4">4</a></li> </ul><br style="clear: left"/> </div><div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em"><div id="tab1" class="tabcontent"><a href="http://withoutit-learnblog.blogspot.com/2010/12/how-to-upload-some-documents-to-your.html"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHsjUQgL86K97IQ4Nk6CJ6U6KVCmUHAvMAHgu4NlD86L3qwRaQHiBYgIPPDOYuFKWHC1BKPUr4lbxF5L1S7X0kXtW5JX_fAiAx7WE4NXcNF4BJZRmzPy4O5aQmUixH29FtgE6a8uOS2jr/s400/Save+As_2010-12-25_15-38-30.png?imgmax=800" height="152"/></a> <p><h3><a href="http://withoutit-learnblog.blogspot.com/2010/12/how-to-upload-some-documents-to-your.html">how to upload some documents to your blog</a></h3></p>You can make your free blog and you don't want to pay any charge to file hosting websites and you want to keep some documents as from word , excel , PDF files in your free blog. [...] </div><div id="tab2" class="tabcontent"><a href="http://withoutit-learnblog.blogspot.com/2010/12/how-to-upload-files-to-file-hosting-web.html"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD5K2gm-dqhnTlSUI9vF0zkICOecfSw2S36lUqOwHpyzLQQEeBcDuzSC2gEOjfouggvuxXkTUoENvmus40LZLjK3XyxVnYhQ55gsn4jL6oziLsEF3Ibf_w-YbrBSDWU-gZ_ABpcBjnF-vV/s400/4shared.png?imgmax=800" height="152"/></a> <p><h3><a href="http://withoutit-learnblog.blogspot.com/2010/12/how-to-upload-files-to-file-hosting-web.html">How to upload files to file hosting web</a></h3></p>Now you want to upload files to file hosting webpages. You can upload any file to file hosting webs with free . [...] </div><div id="tab3" class="tabcontent"><a href="http://withoutit-learnblog.blogspot.com/2010/12/how-to-log-in-and-upload-files-at.html"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnVaxayK2PjP_kkDies-TmT5B46szLWb5at-8v_Bih2x3n5JN3c3TK1VoJr9WeA6eEyHw7TVq3u4ESWxDo93eRArIZZtoKA3iwAMPKD-uV4czNYSCE7_m3bGwiLPF447kFYu75cNGwv2hP/s320/4shared+log+in+account.png?imgmax=800" height="152"/></a> <p><h3><a href="http://withoutit-learnblog.blogspot.com/2010/12/how-to-log-in-and-upload-files-at.html">How to Log in and upload files at 4sharded.com</a></h3></p>At the previous tutorial , I suppose you had made the 4shared account successfully . In this tutorial method .[...] </div><div id="tab4" class="tabcontent"><a href="http://withoutit-learnblog.blogspot.com/2010/12/how-to-get-url-html-code-and-forum-code.html"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdQu9eCcIwD8-OmsHsoIMbn60JdJl6bnnBVCg4x7D7BHq3zqDNCRdjOEi53S206yjASpbOkitoUL0blV3p9Sc8sasqorZQ9CoBlSfp1Y5iN_mnKXWHRe9VJhyphenhyphenPhCluIT5yskz6ZqQ0oUmB/s320/image-test.jpg+-+4shared.png?imgmax=800" height="152"/></a> <p><h3><a href="http://withoutit-learnblog.blogspot.com/2010/12/how-to-get-url-html-code-and-forum-code.html">How to get the URL , HTML code and Forum code to link to your blog </a></h3></p>At the previous step you have known about uploading the files to 4shared.com , now you want to get the URL , . [...] </div></div><script type="text/javascript"> var mypets=new ddtabcontent("pettabs") mypets.setpersist(true) mypets.setselectedClassTarget("link") mypets.init(2000) </script></div>
8. Click save your template and view your blog.

  Note: If you want to edit or change anything of your slideshow tab menue , you can edit or change something as width , name , Link .... in the html code at step 7 .

Look at my example below :

• 1
• 2
• 3
• 4

how to upload some documents to your blog

You can make your free blog and you don't want to pay any charge to file hosting websites and you want to keep some documents as from word , excel , PDF files in your free blog. [...]

How to upload files to file hosting web

Now you want to upload files to file hosting webpages. You can upload any file to file hosting webs with free . [...]

How to Log in and upload files at 4sharded.com

At the previous tutorial , I suppose you had made the 4shared account successfully . In this tutorial method .[...]

How to get the URL , HTML code and Forum code to link to your blog

At the previous step you have known about uploading the files to 4shared.com , now you want to get the URL , . [...]