Instruction: Easy Slider or Banner Rotate for Ning Creators.

Note:Only this instruction video is for free to view, there is a charge for the custom code and the charge will be based on your custom job.

This method can be used for both the versions, Old Editor and New Design Studio.

For Old Editor: Follow the complete instruction.
For New Design Studio Version:
New Design Studio (3 Columns) : Follow the complete instruction.
For New Design Studio ( 2 columns) : Use only code No 2 and Code No. 4.
Easy Slider or Banner Rotate for Ning Creators. Here is an example http://www.ksonline.org/

Favorite

18 members favorited this

Get Embed Code

Tags: Banner, Creators., Easy, Ning, Rotate, More…Slider, for, or

Related Videos

Comment by Fabiola Leon on December 6, 2011 at 2:48am: Hello everyone...I would like to know if I can make any changes als Admin? I would like to use this Slider or Banner, but I dont know if I can make the changes

thanks

NC for Hire Comment by Bernard Lama on December 7, 2011 at 2:10am: Dear Tiffany,

In case of New design studio and 3 columns, you have to follow the complete video instruction. I'm sure It will not disturb the rest of your design because this slider code target only the slider design.

Comment by maximo guzman on December 22, 2011 at 12:49pm: hello barnard Where can i find the html code for the sliders banner thank you

God bless you

Comment by MeeFee Adams on January 19, 2012 at 10:20am: There is a charge for the code.

Comment by Senthil on March 14, 2012 at 9:51pm: Cool. Thanks for the info.

Comment by DTM on March 20, 2012 at 3:16pm: This is sort of underhanded business practice. I think any charges should be mentioned right up front.

NC for Hire Comment by Bernard Lama on March 21, 2012 at 12:24am: Hi DTM,

I don't force any NC to buy my service and I can't mention any charges because the charges will depend on the custom job. Some people want just the code and some people want code+banners. And some people want code+banners+service. That means I have to do everything. FYI, this is just the instruction video. Read my note above,

Comment by João Castro on May 14, 2012 at 5:48pm: Where is the file with the routines?

Comment by HELP SEEKER on June 8, 2012 at 10:38am: where is the code for this? it was here before

Comment by HELP SEEKER on June 8, 2012 at 10:42am: ok, so 1. you put this in text box, where you want a slider :

<div id="profile_slider">
<div id="profile_slider_inner">
<div class="item"><br />
<a href="http://www.google.com"><img src="http://static.ning.com/design/images/building.jpg" width="653" /></a>
<div class="overlay">
<h3>Slide 1 Headline</h3>
<p>Sample text for slide 1 <a href="http://www.google.com">Link 1</a></p>
</div>
</div>
<div class="item"><br />
<a target="slide2" href="http://www.ning.com"><img src="http://static.ning.com/design/images/post_box.jpg" width="653" /></a>
<div class="overlay">
<h3>Slide 2 Headline</h3>
<p>Sample text for slide 2 <a href="http://www.ning.com">Link 2</a></p>
</div>
</div>
<div class="item"><br />
<a target="slide3" href="http://www.flickr.com/"><img src="http://static.ning.com/design/images/bridge.jpg" width="653" /></a>
<div class="overlay">
<h3>Slide 3 Headline</h3>
<p>Sample text for slide 3 <a href="http://www.flickr.com/">Link 3</a></p>
</div>
</div>
<div id="slider_nav"><br />
<a name="slider_back" class="btn" id="slider_back"></a><a name="slider_fwd" class="btn" id="slider_fwd"></a></div>
</div>
</div>

2. you put this in advanced css:

/*Slider */
#profile_slider {
height:310px;
overflow:hidden;
margin-left: -5px;
margin-top: -5px;
background:#000;
}

#profile_slider_inner {
width:100000px;
float:left;
}

#profile_slider .item {
float:left;
width:653px;
margin:0;
position:relative;
}

#profile_slider .item img {
margin:0;
width:653px !important;
max-width:653px !important;
}

/* Slider Overlay Styles */

#profile_slider .item .overlay {
margin-top:-50px;
padding:18px 18px 12px;
background:url(http://static.ning.com/design/images/60alpha.png) repeat scroll 0 0;
position:absolute;
bottom:87px;
width:653px;
}

#profile_slider .item .overlay h3 {
font-size:24px;
line-height:24px;
float:left;
text-transform:capitalize;
color:#fff;
width:520px;
}
#profile_slider .item .overlay p {
float:left;
color:#fff;
width:520px;
}
#profile_slider .item .overlay a {
color:#fff;
font-weight:bold;
text-decoration:underline;
}

/* Slider Navigation Buttons */

#slider_nav {
position:absolute;
bottom:30px;
right:20px;
}

#slider_nav .btn {
height:24px;
width:29px;
float:left;
background-color:#000;
margin-right:5px;
background-position:1px 2px;
background-repeat:no-repeat;
cursor:pointer;
-moz-border-radius: 4px; /* FF1+ */
-webkit-border-radius: 4px; /* Saf3+, Chrome */
border-radius: 4px; /* Opera 10.5, IE 9 */
border:1px solid #000000;
}

#slider_nav .btn:hover {
border:1px solid #3C78A7;
}

#slider_back {
background-image:url(http://static.ning.com/design/images/slider_back_btn.png);
}

#slider_fwd {
background-image:url(http://static.ning.com/design/images/slider_fwd_btn.png);
}