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:

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

    Could you fix it, please?

  2. Lay Costa says:

    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.

  3. Wow great collection of works, thanks for sharing.

  4. mdazar66 says:

    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

  5. happi says:

    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 !

  6. gamu says:

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

    newbie

  7. Josep says:

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

  8. Satya says:

    Very nice, thank you,.

  9. bloggercad says:

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

  10. kd says:

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

  11. Michalis says:

    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?

  12. pakguru says:

    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

    • Beck says:

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

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

  14. Pu 3k* says:

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

  15. super says:

    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

  16. Mukhil says:

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

  17. jafeer says:

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

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

  19. AltafDarwish says:

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

  20. sam says:

    its awesome :)

  21. ihsan says:

    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:)

    • ihsan says:

      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

  22. ihsan says:

    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:)

  23. suharjo says:

    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

    • catur says:

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

      • SUHARJO says:

        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

      • catur says:

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

  24. Chandra says:

    I have problem with this code

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

    please help me for fix it. thanks

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

  26. Adriano says:

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

  27. Ronald says:

    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.

  28. Enjero says:

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

  29. arton says:

    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

Leave a Reply


+ five = eleven

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen