Automatic Content Slider for Blogger using Nivo Slider part 2

In my previous post, i said to give you a new css styles for this nivo slider.
This time i will give you a new theme for this widget.
the name is Orman theme.

The following is how it looks

Nivo Slider with Orman theme

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this

]]></b:skin>

Then insert the script in front of it

/* START
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/
/*-----START Orman Theme ----------------------------------------*/
.theme-orman.slider-wrapper {
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/Orman/slider.png) no-repeat; width:722px;
 height:337px;
 margin:0 auto;
 padding-top:18px;
 position:relative;
}
.theme-orman .nivoSlider {
 position:relative;
 width:568px;
 height:268px;
 margin-left:77px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/Orman/loading.gif) no-repeat 50% 50%;}
.theme-orman .nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
 width:568px; /* Make sure your images are the same size */
 height:268px; /* Make sure your images are the same size */
}
.theme-orman .nivoSlider a {
 border:0;
 display:block;
}
.theme-orman .nivo-controlNav {
 position:absolute;
 left:50%;
 bottom:-60px;
 margin-left:-30px; /* Tweak this to center bullets */
}
.theme-orman .nivo-controlNav a {
 display:block;
 width:10px;
 height:10px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/Orman/bullets.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:7px;
 float:left;
}
.theme-orman .nivo-controlNav a.active {
 background-position:0 -10px;
}
.theme-orman .nivo-directionNav a {
 display:block;
 width:25px;
 height:200px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/Orman/arrows.png) no-repeat 0% 50%; text-indent:-9999px;
 border:0;
 top:40px;
}
.theme-orman a.nivo-nextNav {
 background-position:100% 50%;
 right:-40px;
 padding-right:20px;
}
.theme-orman a.nivo-prevNav {
 left:-40px;
 padding-left:20px;
}
.theme-orman .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-orman .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-orman .nivo-caption a:hover {
 color:#fff;
}
.theme-orman .ribbon {
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/Orman/ribbon.png) no-repeat; width:111px;
 height:111px;
 position:absolute;
 top:-3px;
 left:56px;
 z-index:300;
}
/*----- END Orman Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;
 padding:0;margin:0;z-index:6;display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
 margin:100px auto 50px auto;
 width:618px; /* Make sure your images are the same size */
 height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}
/* END
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/

Step 2 : Apply Javascript

Find This :

</body>

Then insert the script in front of it

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
 <script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </script>

Step 3 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<div class="slider-wrapper theme-orman">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 270; //image height
 var image_width = 570;  //image width
</script>
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

(if you are already use Nivo Slider that I give you in my previous post.  Just follow Step 1 and Step 3)

Demo

if you have any questions please leave a comment….thx u

Alhamdulillah… by Catur

Another post about the Automatic Content Slider for Blogger :

1. Automatic Content Slider for Blogger using Nivo Slider part 1
2. Awesome Automatic Content Slider for Blogger using jQuery Part 3
3. Awesome Automatic Content Slider for Blogger using jQuery Part 2
4. Awesome Automatic Content Slider for Blogger using jQuery Part 1