Bismillah, Alhamdulillah

Skip to Content

Automatic Content Slider for Blogger using Nivo Slider part 2

July 31st, 2011

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

Categories: Content Slider, Widget

Tags: , ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

29 Responses to “Automatic Content Slider for Blogger using Nivo Slider part 2”

  1. RIFT platinum says:
    February 18, 2013 at 4:12 pm

    Wow! The websites you shared are very nice and cool. I never knew of these galleries. I like most of the sites. Thanks for sharing it.

    Reply
  2. Karen says:
    January 1, 2013 at 7:29 am

    I loved this slider but it doesn’t work anymore! I’m not sure what has stopped it but an update would be very appreciated because I can’t even find an alternative.

    Reply
  3. Alex says:
    August 28, 2012 at 2:11 pm

    Very Good! It worked on my blog. How slow the slide? Thank you.

    Reply
  4. Bayu Handono says:
    August 19, 2012 at 12:32 pm

    keren slidernya :DD

    Reply
  5. theano says:
    July 31, 2012 at 4:11 am

    very good.
    How can I reduce the speed alternate images;

    Reply
  6. Mire Tahu Tempe says:
    July 28, 2012 at 11:07 pm

    slidernya mantap pak.

    Reply
  7. vERO says:
    July 2, 2012 at 7:11 am

    hOLA!ME GUSTARIA QUE MUESTRE SOLO LOS POST DE UNA ETIQUETA EN ESPECIAL ¿COMO HAGO? GRACIAS

    Reply
  8. Belajar Program Cplusplus says:
    June 2, 2012 at 7:11 am

    hello man…

    I used to be pondering if you ever thought of changing the layout of your respective blog? Its incredibly effectively published; I really like what youve obtained to say. But possibly you might a little additional inside the means of content material s…

    Reply
  9. unibit says:
    May 26, 2012 at 2:54 am

    at this moment.in the past twelve months…

    google has made numerous adjustments to their algorithms that have hurt blogs that do not contain fresh content. this has made available an enormous opportunity for blog writers to get paid sitting at home and writing blog content.certain blogs article…

    Reply
  10. mobile says:
    May 4, 2012 at 7:36 pm

    get to a much bigger audience then…

    what you have now. each guest post generates traffic, links, and sales.2. social networking or social bookmarking sites – this could mean that stumble upon might pick up your site or your twitter followers might make your post go viral. this…

    Reply
  11. plus size clothing for girls says:
    April 30, 2012 at 2:41 pm

    like inventing a parlor game for an…

    upcoming party; it is as easy as reciting the alphabet, yet as tiring as reciting it backwards. to imagine is the easiest thing in this world, but to put them into reality is always the hardest.choosing a nichewhen we dream and…

    Reply
  12. how to get rid of acne spots says:
    April 29, 2012 at 8:26 pm

    are, or where they are all placed…

    throughout the room. limit your description to just a sentence or two, not pages as the victorians would have preferred. remember, your readers are not victorians. they are twenty-first century, fast-paced people who have limited time.a good way to rem…

    Reply
  13. samsung tvs best prices says:
    October 23, 2011 at 9:07 pm

    Appreciate it protagonist with the portion. Seemed to be impressed through your spot. Ones means of getting rid of the top chunks indicates an authentic centre intended for particular. Ones penning ran rattling very well. With thanks

    Reply
  14. AndyOnline says:
    October 22, 2011 at 10:26 pm

    haduh.. pusing juga nyari slide yang cocok sama template yang saya pake, bikin sendiri gak bisa, mau pake kreasi teman2 gak ada yang cocok, pengen yang naik turun dari atas ke bawah, kaya air terjun :( tapi bisa balik lagi ke atas..
    aduh, rewelnya diriku..

    Reply
  15. MASON says:
    September 23, 2011 at 8:08 pm

    I agree with you on this, really. Haven’t met too many peopel who think the same way!

    Reply
  16. Mohammed says:
    September 21, 2011 at 8:07 am

    please i want to add the height and the width of the slider how can i do it
    thank for your effort abu farhan

    Reply
  17. Will Lima says:
    September 4, 2011 at 3:47 am

    não sei pq mais no meu não deu… rsrs

    Reply
  18. doodeyerick.com says:
    August 4, 2011 at 6:57 pm

    Sepertinya ini bakalan jadi tampilan yang menarik buat blog saya, so.. ijin praktekin mas, semoga aja langsung bisa, thanks!

    Reply
  19. dukun design says:
    August 4, 2011 at 6:31 pm

    naaah ini yang saya cari-cari… ane coba dulu gan… ntar balik lagi, hahaha :D

    Reply
  20. Hompimpa says:
    August 2, 2011 at 2:01 pm

    Saya seorang pemakai slider tipe s3slider. Sesaat Saya pernah melihat urutan angka yang berasal dari atribut alt=”nya yang juga ikut dianimasikan. Dan sekarang angka-angka itu sudah tidak ada. Apakah slider Saya rusak?

    Reply
  21. Beben Koben says:
    August 2, 2011 at 5:55 am

    Kayaknya ada kesalahan dalam menuliskan link demonya?
    Mancap duo master kita ini, lanjutkan berkreasi bos…hehe \m/

    Reply
  22. suharjo says:
    August 2, 2011 at 5:47 am

    assalamualaikum, ,ya akhi,, bisa bantu saya tentang s3slider yang automatic conten by post / label.. saya menggunakan nivo slider gambarnya di perbesar menjadi 990px x 300px slideshownya tidak mulus.. ada beberapa bagian yang terputus..

    Reply
  23. Edd says:
    August 1, 2011 at 7:29 pm

    Hello Abu, please release Bloggertube V2.. eagerly waiting for that…………..

    Reply

Leave a Reply


six − = two

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen