How to Make a Website Fading Banner on a Yola Website

Yola Website Tutorials

How to Make a Fading Banner on a Yola Website

• Fading Banner for a Yola Website With a Horizontal Menu.
• See The - Fading Banner and Horizontal Menu on a Yola Websiteite
• Open your Yola Site Builder.
• Go to style and select change style.
• Select free style.
• Look for FLOWER SHOP, select the FLOWER SHOP style and save.
• Copy the code below and paste the code into one HTML BOX then
publish the site, you will see a page with the fading banner and
horizontal menu.

The fading banner code will replace the header image on the flower shop template, you can add your own images to the banner, and change the menu titles, menu links, menu background colour and menu text colour to suite your site. Once you have done this you can add text, images etc in the normal, using the drag and drop way, drag the widget you want and place it under the html box. I have placed tutorials on the code to help explane to you how to change the menu colours, banner images etc. Those that know html can build there site that way. Images that you use for the banner will have to be Width 900 x Height 160. Have fun designing your site.

If you want to build a website then use yola, build a professional website with their site builder, easy to use no experience needed also loads of templates to choose from we recommend the Yola Silver Package its just what you need. Get it for less than $100.00 a year and make your business stand out with a yola website, look out for promotion codes. Yola Silver

Copy the Below Code:

<style type="text/css">
div#fadeshow2 {
left:20;
position:absolute;
top:0px;
width:900px;
margin-left: -20px;
  }
div#menutop {
left:20;
position:absolute;
top:160px;
width:900px;
margin-left: -20px;
  }
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: normal 17px Arial}
#sddm li a
{ display: block;
margin: 0 0px 0 0;
padding: 4px 4px;
width: 142px;
/* Horizontal Menu edit the menu colour below */
background: #C00000; /* Background Colour change here */
color: #FFFFFF;      /*Text Colour change here */ 
text-align: center;
text-decoration: none}
#sddm li  a:hover {
/*  Applies  to  links  under  the  pointer  */
text-decoration:none;
font-weight: none;
background-color: #EA9400; /* Background Colour on hover change here */
color: #ffffff; /* Text Colour on hover change here */
}
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.2createawebsites.com/resources/fadeslide.js"></script>  
<script type="text/javascript">  

  var mygallery=new fadeSlideShow({   
 wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow   
 dimensions: [900, 160], //width/height of gallery in pixels. Should reflect dimensions of largest image
      imagearray:  [     
        ["http://www.2createawebsites.com/resources/fading-banner-on-yola-website-900x160-image-1.png", "http://www.2createawebsites.com", "", ""],    
        ["http://www.2createawebsites.com/resources/fading-banner-on-yola-website-900x160-image-2.jpg", "http://www.2createawebsites.com", "", ""], 
        ["http://www.2createawebsites.com/resources/fading-banner-on-yola-website-900x160-image-3.jpg", "http://www.2createawebsites.com", "", ""]// <--no trailing comma after very last image element!   
      ],
      displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false},   
  persist: false, //remember last viewed slide and recall within same session?   
  fadeduration: 2000, //transition duration (milliseconds)  
  descreveal: "ondemand",
  togglerid: ""
  })
  </script>
  <div id="fadeshow2">
  <div id="fadeshow1">
<script>

</script>
</div></div>


<div id="menutop"><ul id="sddm">
<li><a href="http://www.2createawebsites.com" onmouseover="mopen('m1')" onmouseout="mclosetime()">How To Make Website</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
</div>
    </li>
<li><a href="free-websites-online-with-free-websitebuilder/create-a-website-with-yola" onmouseover="mopen('m2')" onmouseout="mclosetime()">How To Make Website</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
  </div>
   </li>  
<li><a href="http://www.2createawebsites.com" onmouseover="mopen('m3')" onmouseout="mclosetime()">How To Make Website</a>

<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
 </div>
    </li>    
<li><a href="http://www.2createawebsites.com" onmouseover="mopen('m4')" onmouseout="mclosetime()">How To Make Website</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
  </div>
  </li>    
<li><a href="http://www.2createawebsites.com" onmouseover="mopen('m5')" onmouseout="mclosetime()">How To Make Website</a>
<div id="m5"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
</div>
</li>
<li><a href="http://www.2createawebsites.com" onmouseover="mopen('m6')" onmouseout="mclosetime()">How To Make Website</a>
<div id="m6"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
</div>
</li>
</ul>
</div>
<div class="ys_attr">
<script>

</script>
</div>

Fading Banner| Build a Website| Webmaster Tools| Site Analysis| Make a Website| Site Builder| Google Adsense| Yola Website Design
Create a Website| Website Design| Free Website| Yola| To Create a Website| SEO| HTML Tutorials| Affiliate Programs| Site Build it

© 2011 How To Create a Website - Web Design Tutorials