How to Make a Fading Banner on a Yola Website

How to Make a Fading Banner on a Yola Website

Fading Banner With Horizontal Drop Down Menu Code For Yola

Fading Banner With Horizontal Menu Code works on yola free as well.

SEE THE FADING BANNER AND HORIZONTAL MENU CODE ON:

YOLA WEBSITE (Silver) Fading Banner with Horizontal Menu Yola Website.
YOLA WEBSITE (Free) Fading Banner with Horizontal Menu Yola Website.
Open your Yola Site Builder.
Go to style and select change style.
Select free style.
Look for NO FRILLS, select the no frills 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 a drop down menu.

The background I have set to white so if you would like to change the side colour you can the background will remain white, do this in the normal way changing background colour.

Now you can carry on and edit the webpage if you know HTML or if you don't know html thats fine drag the text box under the html box and write your text. When you drag the text box under the code for yola free click on margin and make the top margin 40 this will move the text down. For yola silver make the top margin 220, you can adjust these sizes to what ever suites your site.

The menu can be changed to the name and links of your site, create your home page edit the code replace banner images with the same size 954x180 and menu links with your sites links. When you happy with the home page copy that code and create a new page paste your copied code into the new page and all your banner images and links will be there. Each new page you create you will have to do this, the menu and banner will be on each page. Have Fun

Copy the Below Code:

<link href="http://www.2createawebsites.com/resources/fading-banner.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#sbbm
{ margin: 0;
padding: 0;
z-index: 30}
 #sbbm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px calabri}
 #sbbm li a
{ display: block;
margin: 0 1px 0 0;
padding: 8px 10px;
width: 170px;
background: #333399;
color: #ffffff;
text-align: center;
text-decoration: none}
 #sbbm li a:hover
{ background: #4B91AA}
 #sbbm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #4B91AA;
border: 1px solid #000000}
#sbbm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: 168px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #333399;
color: #FFFFFF;
font: 11px calabri}
#sbbm div a:hover
{ background: #4B91AA;
color: #FFFFFF}
#(<a href="http://www.2createawebsites.com">How To Create a Website</a>)}   
}
</style>

<script type="text/javascript" src="http://www.2createawebsites.com/resources/howtocreateawebsitefadeslide.js"></script> 
<script type="text/javascript">  
var mygallery=new fadeSlideShow({   
 wrapperid: "fadeshow", //ID of blank DIV on page to house Slideshow   
 dimensions: [954, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
      imagearray:  [     
        ["http://www.2createawebsites.com/resources/image_1.jpg", "http://www.2createawebsites.com", "", ""],
        ["http://www.2createawebsites.com/resources/image_2.jpg", "http://www.2createawebsites.com", "", ""],    
        ["http://www.2createawebsites.com/resources/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="banner">
<div id="fadeshow">
<script>

</script>
   
 

<div style="position: absolute; width: 1000px; 
<p style="text-align:>
<ul id="sbbm">
<li><a href="http://www.2createawebsites.com" onmouseover="mopen('m1')" onmouseout="mclosetime()">HOW TO MAKE A WEBSITE</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="http://www.2createawebsites.com">Create a Website</a>
<a href="http://www.2createawebsites.com">Make a Website</a>
</div>
</li>
<li><a href="http://www.2createawebsites.com" onmouseover="mopen('m2')" onmouseout="mclosetime()">HOW TO MAKE A 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 A 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 A WEBSITE</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="http://www.2createawebsites.com">Create a Website</a>
<a href="http://www.2createawebsites.com">Make a Website</a>
</div>
</li>    
<li><a href="http://www.2createawebsites.com" onmouseover="mopen('m5')" onmouseout="mclosetime()">HOW TO MAKE A WEBSITE</a>
<div id="m5"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
 <a href="http://www.2createawebsites.com">Create a Website</a>
<a href="http://www.2createawebsites.com">Make a Website</a>
 </div>
</li>    
</ul>
</div> 
<script type="text/javascript" src="http://www.2createawebsites.com/resources/menu.js"></script>

Fading Banner with Horzontal Drop Down Menu: The way I have designed the code you can still use the drag and drop style, to create your site just drag the widget you would like and place it under the html widget that the code is on the hieight will have to be adjusted, for yola silver make the height 220 and for the free version make the height 40, you can adjust these heights to what you want. For those that know html you can carry on editing in the html widget under the code. Banner images will have to be Width 954 x Height 180. If you don't have yola buy yola silver here, for less than $100.00 a year its one of the best site builders to make a professional website with. Make a Professional Website.

See how the fading banner and menu looks like on a yola website Fading Banner with Horzontal Menu Yola Website.

Make Money Online| Build a Website| Webmaster Tools| Site Analysis| Domain Name| 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

How to Make a Fading Banner on a Yola Website

Fading Banner With Horizontal Drop Down Menu Code For Yola

Visit Our Web Design Shop