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

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

  1. Onitsuka Tiger Mexico 66 Maschi

    Automatic Content Slider for Blogger using Nivo Slider part 2 | Blogger Templates and Tricks by Abu Farhan

  2. Appreciating the time and energy you put into your site and in depth
    information you present. It’s awesome to come across a blog every once in a while that isn’t the same outdated
    rehashed material. Great read! I’ve bookmarked your site and
    I’m adding your RSS feeds to my Google account.

    Feel free to surf to my web site – Apprenti Gigolo telecharger le film

  3. Hello there! This post could not be written any better!
    Reading through this post reminds me of my old room mate!

    He always kept chatting about this. I will forward this page
    to him. Pretty sure he will have a good read. Many thanks for
    sharing!

    Here is my site :: fl studio producer edition 11 crack

  4. Have you ever thought about including a little bit
    more than just your articles? I mean, what you say is fundamental and all.
    Nevertheless think of if you added some great visuals or video clips to give your posts more,
    “pop”! Your content is excellent but with pics and clips, this website could certainly
    be one of the greatest in its field. Great blog!

  5. Malik Hamza says:

    Thanks for sharing such an informative posts so keep it up man!!

  6. 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.

  7. Karen says:

    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.

  8. Alex says:

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

  9. theano says:

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

  10. slidernya mantap pak.

  11. vERO says:

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

  12. 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…

  13. unibit says:

    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…

  14. mobile says:

    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…

  15. 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…

  16. 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…

  17. 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

  18. AndyOnline says:

    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..

  19. MASON says:

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

  20. Mohammed says:

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

  21. Will Lima says:

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

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

  23. dukun design says:

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

  24. Hompimpa says:

    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?

  25. Beben Koben says:

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

  26. suharjo says:

    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..

  27. Edd says:

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

Leave a Reply


+ six = eight

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen