Bismillah, Alhamdulillah

Skip to Content

Awesome Automatic Content Slider for Blogger using jQuery Part 3

July 16th, 2011

The following is the sequel of the content slider part 3 … for you who really like the content slider, I give you the Awesome Automatic Content Slider for jQuery using Blogger Part 3 … more stylish, more beautiful, more attractive ..
I hope you like it …
The following is how it looks

Featured Content Slider


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
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com

http://css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/

--------------------------------------------------------------------
Featured Content Slider
*/
#slider-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px;font-size: 10px; background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-bg.png) top center; }
.slider-wrap{ font-family: Arial, Helvetica, sans-serif; width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel    { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav{ display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row    { margin: -46px 0 0 62px; }
#movers-row div    { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data{ background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-transpBlack.png); padding: 10px; height: 40px; margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link    { display: block; width: 62px; margin-top: -10px; position: relative; padding-top: 10px; z-index: 9999; }
.active-thumb { background: transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-icon-uparrowsmallwhite.png) top center no-repeat; }
/* END
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com
--------------------------------------------------------------------
Featured Content 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>
 <script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/FeaturedContentSlider.pack.js"></script>
 <script type="text/javascript">
 var theInt = null;
 var $crosslink, $navthumb;
 var curclicked = 0;
 theInterval = function(cur){
 clearInterval(theInt);
 if( typeof cur != 'undefined' )
 curclicked = cur;
 $crosslink.removeClass("active-thumb");
 $navthumb.eq(curclicked).parent().addClass("active-thumb");
 $(".stripNav ul li a").eq(curclicked).trigger('click');
 theInt = setInterval(function(){
 $crosslink.removeClass("active-thumb");
 $navthumb.eq(curclicked).parent().addClass("active-thumb");
 $(".stripNav ul li a").eq(curclicked).trigger('click');
 curclicked++;
 if( 6 == curclicked )
 curclicked = 0;
 }, 3000);
 };
 $(function(){
 $("#main-photo-slider").codaSlider();
 $navthumb = $(".nav-thumb");
 $crosslink = $(".cross-link");
 $navthumb
 .click(function() {
 var $this = $(this);
 theInterval($this.parent().attr('href').slice(1) - 1);
 return false;
 });
 theInterval();
 });
 </script>

Step 3 : Apply Gadget

Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<div id="slider-wrap">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-FeaturedContentSlider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6; //recommended
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<script src="http://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

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

25 Responses to “Awesome Automatic Content Slider for Blogger using jQuery Part 3”

  1. hussain says:

    I have pasted code in my template as u have instructed , but no posts are coming there in the slider

  2. hussain says:

    Assalam-o-alaikum !
    Is this slider automatic ?
    Do my latest post come in this slider automatically ?

  3. hussain says:

    Assalam-o-alaikum !
    Is this slider sutomatic ?
    do my latest post come in this slider automatically ?

  4. Ohh wow.. love the list…. some nice new ones I haven’t seen before as well!!

  5. Tim says:

    The link to the code for this rotator appears to be password protected. Any chance that this can be fixed?

  6. MIN says:

    can I insert this slider at anywhere on my blog

  7. Mahmud says:

    Assalamu alaykum.
    It works but posts do not slide completely. You may see on http://truth-on-top.blogspot.com/. every post leaves some portions of it when slides out. how to solve

  8. Flávio says:

    Messenger in visualizar:

    The reference to entity “alt” must end with the ‘;’ delimiter.

  9. Assalamu’alaikum…

    Akhi, ana coba tambahin ini widget, tapi kenapa kok footer di blog jadi rusak?

  10. Beck says:

    salam.
    Very Nice Tutorial..

  11. Hi! Do you know if they make any plugins to protect against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on. Any suggestions?

  12. yourself and revamp your style, you can…

    always find you’re inside voice if you look hard enough it is down the trying to escape. setting a routine writing schedule is always a good idea and then sticking to it will only help you in the long run.these examples…

  13. chjp says:

    I have created Automatic Content Slider for Blogger using Bloglist & jQuery (No JSON – Javascript)
    This is demo & tutorial: http://itdl.w3solution.net/2012/02/automatic-content-slider-using-bloglist.html

  14. [...] = ''; } tokyohive70,000 Tiket Konser 2NE1 di Jepang Terjual Habis Dalam Sehari!Awesome Automatic Content Slider for Blogger using jQuery Part 370,000 Tiket Konser 2NE1 di Jepang Terjual Habis Dalam Sehari!Awesome Automatic Content [...]

  15. renaldazwari says:

    assalamualaikum…
    mau nanya aja om… saya buka situs ini ==> beritahp.com, nah di situ ada tampilan yang keren banget, recent post-nya itu lho… yang ada di bawah menu, nah, itu bikinnya kayak gimana ya…? pake jQuery kah…? udah dua jam nyari gak ketemu2 juga… yang ada cuma recent post vertikal, atau paling banter versi marquee-nya…
    makasih sebelumnya :D
    wassalam,,,

  16. ihsan says:

    Assalamu ‘alaykum…
    afwan, ni apakah abu farhan akhmad?

    • admin says:

      Wa’alaikumsalam

      Apa kabar akh ?

      • Assalamu alaykum ya Akhi..

        ini scara tidak sengaja nyampe di blog ente, luar biasa ya, mohon ane dibantu ttg blog development, ane baru beli buku2 di gramedia untuk monetizing, tp tdk ada dasar sm skali ttg template SEO friendly, css dsb.
        antum punya ilmu yg luar biasa,

        sekiranya boleh ane minta email, atau fb, untuk konsultasi.
        jazakallah khaer ya akh..

        salam dr akmal makassar

      • ihsan says:

        alhamduliLLah Baik..
        gimana kabar antum sekeluarga?
        antum dimana sekarang?
        farhan dah punya adik..?
        BarakaLLahu Fiikum..

  17. Tarik says:

    شكرا أخي جزاك الله خيرا

  18. Rully says:

    saya tw cara memasangnya dengan meletakkan di sini di situ .. tapi apakah lebih baik jika di jelaskan bagaimana bisa terbentuk satu persatu :)

Leave a Reply


eight − three =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen