Bismillah, Alhamdulillah

Skip to Content

Automatic Content Slider for Blogger using Nivo Slider part 1

July 21st, 2011

In this post is still on “Automatic Content Slider”. the difference is only in the css styles and javascript.
With little modification to be used for blogger.
How it works is still the same as the content slider before.
This article was inspired by a request from Dante Araujo.
he said if Nivo Slider is the best free content slider, it has some awesome transition effects, and very customizable, really superior.

The following is how it looks

Nivo Slider


Automatic in blogger Only for CSS 3 (Firefox 4 and above, chrome)
Not Work for IE

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 Default Theme ----------------------------------------*/
.theme-default .nivoSlider {
 position:relative;
 background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%;
 -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
 -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:50%;bottom:-42px;
 margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default 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-default">
<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 = 246; //image height
 var image_width = 618;  //image width
</script>
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

Demo

On the next post I will discuss about “Automatic Content Slider for Blogger using Nivo Slider Part 2″. I will make another css styles for this Nivo Slider.
Just wait patiently …

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

Alhamdulillah… by Catur

Another post about the Automatic Content Slider for Blogger :

  1. Awesome Automatic Content Slider for Blogger using jQuery Part 3
  2. Awesome Automatic Content Slider for Blogger using jQuery Part 2
  3. 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

54 Responses to “Automatic Content Slider for Blogger using Nivo Slider part 1”

  1. Rute says:
    May 5, 2013 at 4:20 am

    Hello.
    The scripts are no longer working. The links on GoogleCode are resulting on a 404 page.

    Could you fix it, please?

    Reply
  2. Lay Costa says:
    March 8, 2013 at 8:25 pm

    Hello, I am Brazilian and I met your blog by other metablogs Brazilian, I’m trying to install this slider on my blogger but it is not working, I believe it is because of your script that asks for a password. You could solve this? Thank you.

    Reply
  3. RIFT platinum says:
    February 18, 2013 at 4:13 pm

    Wow great collection of works, thanks for sharing.

    Reply
  4. mdazar66 says:
    December 19, 2012 at 1:04 am

    Mr.Abu,

    Please help me as.

    you javascrip //http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js// asking always password

    Reply
  5. happi says:
    October 31, 2012 at 11:08 am

    very good post. So, Can You help me?
    I want update news from any Label. So, how can i do it? Help me please! Tks very much !

    Reply
  6. gamu says:
    October 23, 2012 at 1:39 am

    mohon bantuan …
    bagaimana cara photo slide di tampilkan di bagian postingan blogger ….
    terimakasih ….

    newbie

    Reply
  7. Josep says:
    July 14, 2012 at 5:51 pm

    How can adapt the “Nivo Slider” of my blog to make it automatic?
    Blog: josep-pepe2.blogspot.com
    Thanks!

    Reply
  8. Satya says:
    June 29, 2012 at 6:07 am

    Very nice, thank you,.

    Reply
  9. bloggercad says:
    June 14, 2012 at 1:44 am

    hello my friend!!

    I would like to help me…how can I input the 3 step in the html code of my template and not as gadget becouse i have problem!!

    Thank you!!

    Reply
  10. kd says:
    June 10, 2012 at 8:14 pm

    how to I add my own pictures to the slide show?

    Reply
  11. Michalis says:
    May 11, 2012 at 11:17 pm

    Great Job!
    Is it possible to do each slide show some more seconds and don’ t have random transactions? Please help me how I can change these parameters?

    Reply
  12. pakguru says:
    March 9, 2012 at 11:04 am

    assalam…
    wah..jazakallah, ust abu..
    pengalaman memasang nivo biar tidak ada jarak dengan header adalah mengganti di atas :cari:
    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 */
    }
    untuk margin ganti 10..biar tidak ada jarak dari atas..betul tidak ust abu, cz pengalaman di blog saaya spt itu..
    jazakallah..mudah2an jadi ilmu bermanfaat

    Reply
    • Beck says:
      July 21, 2012 at 12:50 pm

      Salam.
      Dari tadi saya cari, knp jarak dari header ke slide lebar banget, ternyata pak guru menemukannya. thank,s Pak guru dan Ust Abu.

      Reply
  13. ΣΤΑΥΡΟΣ ΠΑΠΑΓΕΩΡΓΟΠΟΥΛΟΣ says:
    December 28, 2011 at 1:21 am

    I was searching for this from the day i made my blog,almost 2 years,then i found this and its the best and easiest of all.Thanks so much!!!!!!!!!

    Reply
  14. Pu 3k* says:
    November 18, 2011 at 5:45 pm

    thank you very much x’D
    i’m so happy :x

    Reply
  15. super says:
    September 25, 2011 at 4:29 pm

    hi did you change the script?
    bcoz 2weeks back i installed this script and it is working
    also images in a blog post are shown in a slideshow
    but now the images in a blog post are not making a slideshow when i left click them
    even though the content slider for blogger posts is working

    Reply
  16. Mukhil says:
    September 22, 2011 at 2:31 pm

    Just searching this post for 3 days and finally got it. thanks abu farhan

    Reply
  17. jafeer says:
    September 4, 2011 at 2:33 am

    I Tried your al slider methods nothing work for me as I can’t add Html/javascript element. It just not getting saved

    Reply
  18. Знаю как! says:
    August 24, 2011 at 9:27 pm

    [...] поблагодарить блоггера Abu Farhan, у которого я нашел Nivo Slider, адаптированный под [...]

    Reply
  19. AltafDarwish says:
    August 21, 2011 at 1:09 pm

    Maaf bertanya…., cuba lihat blog saya… ada ruang kosong yang agak besar antara slider tu.. cam ne nak buang????

    Reply
  20. sam says:
    August 20, 2011 at 6:46 pm

    its awesome :)

    Reply
  21. ihsan says:
    August 19, 2011 at 1:34 am

    mesti saya kasih koment baru., soal’a reply’a admin abu farhan ga bisa saya reply lagi:)hhe.

    saya mau tanya gmn cara kita ngerobah gambar slider’a [link gambar yg harus saya rubah]?
    thanks

    btw saya punya saran buat abu farhan.,
    1. kok ga ada check list ketika saya memberi komentar shingga ada notifikasi ke email saya bahwa komentar anda telah dibalas gtu,.
    2.ga bisa ngereply lagi setelah ngereply 6kali reply , seperti yg diatas. sory before:)

    Reply
    • ihsan says:
      August 19, 2011 at 1:51 am

      3.kalo udah dikasih komentar ga bisa dihapus lagi:D
      4.tadi dikampus saya blajar uji kualitas perangkat lunak, ada materi seven check list. “to the point” kalo domain name kata’a lebih bagus ga pakek simbol ato tanda2, misal – + & dans sebagai’a

      Reply
  22. ihsan says:
    August 14, 2011 at 11:57 pm

    kok diblog saya muncul slider/slideshow’a di sidebar :(

    help me.., :)

    jadi’a malah kaya gambar ini.,,

    http://i399.photobucket.com/albums/pp80/ihsan_saidi/sliderinslide.jpg

    mm.,,

    help:)

    Reply
  23. Ari Giduk says:
    August 7, 2011 at 10:22 am

    benar-benar manstab : http://arigiduk.info/peluang-bisnis-online-tanpa-ribet

    Reply
  24. Automatic Content Slider for Blogger using Nivo Slider part 2 | Blogger Templates and Tricks by Abu Farhan says:
    July 31, 2011 at 11:48 am

    [...] Automatic Content Slider for Blogger using Nivo Slider part 1 [...]

    Reply
  25. suharjo says:
    July 28, 2011 at 2:32 am

    brother mohon bantuan Book Flip Slideshow by label for blogspot…
    look this http://www.dynamicdrive.com/dynamicindex14/bookflip.htm
    but i won bookflip by label thabks

    Reply
    • catur says:
      July 31, 2011 at 6:10 am

      sudah saya buatkan Book Flip Slideshow…
      sbentar lagi saya publish…

      Reply
      • SUHARJO says:
        July 31, 2011 at 4:54 pm

        bos.. imagenya di resize diperbesar menjadi widht = 980px dan height = 250px / 350px slideshownya jadi tidak mulus.. image cuma sepotong aja yang tampil.. coba cek bos blog sekolah saya .. http://sdit-attaqwapusat.blogspot.com
        .theme-default #slider {
        width:618px; /* Make sure your images are the same size */
        height:246px; /* Make sure your images are the same size */
        }

        var image_height = 246; //image height
        var image_width = 618; //image width

        Reply
      • catur says:
        August 4, 2011 at 3:24 am

        javascript untuk nivo slider sudah saya perbaiki…
        Insyaallah tidak ada bagian yang terputus.
        terima kasih untuk koreksinya…

        Reply
  26. Chandra says:
    July 27, 2011 at 8:27 pm

    I have problem with this code

    $(window).load(function() {
    $('#slider').nivoSlider();

    please help me for fix it. thanks

    Reply
  27. Як додати слайдер у блог на Blogger | Український інтернет says:
    July 25, 2011 at 5:09 pm

    [...] хочу подякувати блогеру Abu Farhan, у якого я знайшов Nivo Slider, адаптований під [...]

    Reply
  28. Adriano says:
    July 23, 2011 at 9:10 pm

    Cara, muito obrigado mesmo, ajudou bastante, continue com esse ótimo trabalho, eu sou do Brasil, mas mesmo assim leio seu blog frequentemente.

    Reply
  29. Ronald says:
    July 22, 2011 at 9:08 pm

    I apologize for being off-topic, but would you please please help me, I have problem with posting comment on some websites. Please have a look at this picture:

    http://i54.tinypic.com/2u6l7xz.jpg

    It was captured when I was browsing Ganool.com
    As you can see the ‘Post comment as’ dropdown list couldn’t load properly.
    When I typed something in the box then click ‘Post comment’ or ‘Preview’, nothing happened.

    I have tried to re-install my browser (Firefox 5) and Java (Java 6 update 26).
    I have also tried Chrome browser.
    But no luck, the dropdown list still couldn’t load.

    Please give me your opinion about this problem, it will be very appreciated.

    Thanks.

    Reply
  30. Enjero says:
    July 22, 2011 at 8:56 pm

    This is great…
    It is working fine to my blog. Thanks!

    Reply
  31. arton says:
    July 22, 2011 at 7:36 pm

    he how to show my posts in my blog I did how you said but in my blog show your posts,
    where to edit to link my posts

    Reply

Leave a Reply


seven − seven =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen