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

Login to Blogger Dashboard and navigate to Layout > Edit Html
Don’t click the checkbox which says ‘Expand Widget Templates’
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 :

Categories: Content Slider, Widget

Tags: Blogger, Content Slider, slider

Enjoyed this Post?

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

Trackback

Leave a response

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

alexa says:

February 3, 2012 at 9:40 am

nice tutor ever meet

Reply
durgesh says:

January 30, 2012 at 2:41 am

please tell me where put code Before ]]> or after

Reply
- Abu Farhan says:
  
  January 30, 2012 at 6:27 am
  
  Before ]]
  
  Reply
AdamKwon says:

January 2, 2012 at 3:34 pm

Assalamualaikum, Abu Farhan.
Thanks for the tutorial, it’s really helping me here.

Hey, how to re-size it ? I mean, to make it larger, how to do it ? Prompt reply please. Thanks for everything & Wassalamualaikum.

Reply
ΣΤΑΥΡΟΣ ΠΑΠΑΓΕΩΡΓΟΠΟΥΛΟΣ 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
alan says:

December 15, 2011 at 12:55 am

dude..,its working man!
Just got the right article,after searching a while

Reply
Randi Bouty says:

December 12, 2011 at 10:53 am

lihat di blog saya kok slide nya kayak gitu?

tolong bantuannya

Reply
Pu 3k* says:

November 18, 2011 at 5:45 pm

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

Reply
Nicolay says:

October 16, 2011 at 1:45 am

Correcting about your words “Then insert the script in front of it..????” on your post, many reader are confused, it would be better “Then paste the script below to above that code”. even so, it,s a nice post to my bookmark

Reply
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
- Abu Farhan says:
  
  September 26, 2011 at 9:40 am
  
  the script still there it can’t change directly have to upload to google code
  
  Reply
Mukhil says:

September 22, 2011 at 2:31 pm

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

Reply
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
- Abu Farhan says:
  
  September 4, 2011 at 4:01 pm
  
  you already have jquery in your template. If you want to use slider dont add jquery link from my script
  
  Reply
  - jafeer says:
    
    September 4, 2011 at 7:06 pm
    
    I didn’t add the jquery link from your script still cannot save html/javascript gadgets
    
    Reply
    - Abu Farhan says:
      
      September 23, 2011 at 7:46 am
      
      Don’t add from edit html but add Gadget and put the script
      
      Reply
Знаю как! says:

August 24, 2011 at 9:27 pm

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

Reply
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
- catur says:
  
  August 25, 2011 at 9:24 pm
  
  Automatic in blogger Only for CSS 3 (Firefox 4 and above, chrome)
  Not Work for IE
  
  Reply
sam says:

August 20, 2011 at 6:46 pm

its awesome :)

Reply
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
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
- ihsan says:
  
  August 15, 2011 at 12:00 am
  
  btw nice posting.,
  
  oa, kalo dah jwab ada notif’a ga diemail saya yya., soal’a biasa kalo di wp ada check subscribe/send to email setelah komen. tp yg ini ga.,
  
  thanks banget jawaban’a :)
  
  Reply
- Abu Farhan says:
  
  August 15, 2011 at 6:23 pm
  
  Add gadgetnya di atas postingan bukan di sidebar
  
  Reply
  - ihsan says:
    
    August 16, 2011 at 1:16 am
    
    oe,iya :)
    saya kepengen ngeAdd nivo sidebar’a dibawah menubar’a “ga dibawah header” bisa ga yya:?hmm..
    
    jika dilihat hasil akhir kira2 begini :
    
    http://i399.photobucket.com/albums/pp80/ihsan_saidi/Untitled-2.jpg
    
    thanks before:)
    
    Reply
    - Abu Farhan says:
      
      August 16, 2011 at 7:40 am
      
      Cari
      
      <b:section class=’main’ id=’main’ showaddelement=’no’>
      
      ganti “no” menjadi yes
      
      kemudian add gadget pada bagian atas postingan
      
      Reply
      - ihsan says:
        
        August 16, 2011 at 3:14 pm
        
        yeeee berhasil gan!:D thanks .,,
        
        tp lagi lagi dapat masalah baru euy.,ckck.
        ada semacam backgroud selebar widht gadget yg muncul dibelakang slider. coba liat digambar ini http://goo.gl/Na4su ato langsung ke ihsansaidi.blogsopt.com
        
        ,hmmm..ada ada saja nech.ckck
        
        kenapa yyaght kira2.,helep:)
        
        thanks before
      - admin says:
        
        August 16, 2011 at 4:16 pm
        
        itu karena adanya class .widget-content yg mempunya bacground selebar sidebar
        jadi harus edit dari edit html cari bagian tersebut ganti classnya jangan widget content
Ari Giduk says:

August 7, 2011 at 10:22 am

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

Reply
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
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
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
Як додати слайдер у блог на Blogger | Український інтернет says:

July 25, 2011 at 5:09 pm

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

Reply
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
- catur says:
  
  July 27, 2011 at 12:10 am
  
  obrigado…
  
  Reply
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
- catur says:
  
  July 23, 2011 at 5:30 am
  
  because the page is not completely loaded.
  maybe your internet connection is slow.
  
  Reply
  - Ronald says:
    
    July 23, 2011 at 6:38 pm
    
    I have tried a lot of times, and I did wait for it to load completely, but it doesn’t help.
    Do you really think it is a connection speed problem? My download speed is about 40KB/s.
    
    Reply
  - catur says:
    
    July 23, 2011 at 7:31 pm
    
    if not your internet connection maybe the problem is your browser.
    because when I try with my browser, works well…
    http://i1133.photobucket.com/albums/m596/abu-farhan/workswell.jpg
    
    Reply
  - Ronald says:
    
    July 23, 2011 at 8:41 pm
    
    As I wrote before, I have already tried to re-install my browser and java.
    I have also tried loading the page with Chrome browser. No luck.
    What I think is: perhaps some wrong settings in my Windows XP? But I just don’t know which.
    Thanks for replying though..
    
    Reply
- Ronald says:
  
  July 23, 2011 at 9:33 pm
  
  I have it solved!
  It was the ISP ‘feature’ with webpage caching problem after all.
  By using Modify Headers add-on, I turned off the cache for cache-control and pragma. As the result, the ‘Post comment as’ dropdown list loaded properly, and now I can post again :)
  
  @catur: Thanks for your replies.
  
  Reply
  - catur says:
    
    July 23, 2011 at 10:43 pm
    
    ok…:)
    
    Reply
Enjero says:

July 22, 2011 at 8:56 pm

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

Reply
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
- Abu Farhan says:
  
  July 23, 2011 at 6:24 am
  
  Change http://abu-farhan-demo.blogspot.com
  to your link
  
  Reply

Click here to cancel reply.

Advertise Here

Automatic Content Slider for Blogger using Nivo Slider part 1

Step 1 : Apply Style

Step 2 : Apply Javascript

Step 3 : Apply Gadget

Enjoyed this Post?

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

Leave a Reply

Categories

Partner

Ads

Recent Posts

PLEASE DONATE MY BLOG

Archives

Information for you

Facebook

Blogger

About Me

Bismillah, Alhamdulillah

Tag

Friends

Site Navigation

Automatic Content Slider for Blogger using Nivo Slider part 1

Step 1 : Apply Style

Step 2 : Apply Javascript

Step 3 : Apply Gadget

Enjoyed this Post?

Related Articles :

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

Leave a Reply

Categories

Partner

Ads

Recent Posts

PLEASE DONATE MY BLOG

Archives

Information for you

Facebook

Blogger

About Me

Bismillah, Alhamdulillah

Tag

Friends

Site Navigation