News Update :
Home » » How to make an automatic Carousel slider based on labels?

How to make an automatic Carousel slider based on labels?

In this tutorial I will discuss how to create automatic Carousel slider based on your labels in blogger. All you have to do only replace with your own label and the slider will work based on the label that you add in Edit HTML template. I made this carousel slider was very simple and only used jCarousellite script without adding easing effects or mousewheel.

carousel slider johny

  1. You must login to blogger with your account
  2. After that select the blog that you want to add slider.
  3. Go to the template >> Edit HTML and check the expand widget templates, don't forget to backup your template first.
  4. And then place this following codes above ]]></b:skin>:
    #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
    #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}
    #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
    #carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}
    #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
    #carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center}
    #carousel ul{width:100000px;position:relative;margin-top:10px}
    #carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
    #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
    #carousel ul li a.slider_title:hover{color:#cd1713}
    #carousel a img{display:block;background:#fff;margin-top:0}
    Look at some codes with the blue color above, that's the width and height of the slider in the demo that I made, change with your own size depend on your template width.
  5. Still in Edit HTML, add this following code above </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
    showRandomImg = true;

    aBold = true;

    summaryPost = 140;
    summaryTitle = 25;

    numposts1 = 15;
    label1 = "news";

    function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }

    s = s.join("");
    s = s.substring(0,chop-1);
    return s;
    }
    function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img = new Array();
    document.write('<ul>');
    for (var i = 0; i < numposts1; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }

    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
    pcm = entry.link[k].title.split(" ")[0];
    break;
    }
    }

    if ("content" in entry) {
    var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
    var postcontent = entry.summary.$t;}
    else var postcontent = "";
    postdate = entry.published.$t;
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];
    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var daystr = day+ ' ' + m + ' ' + y ;
    var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

    document.write(trtd);
    j++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>
    Notes:
    See the red URL script above, that's the latest series jQuery.min.js script code that I use to made this slider. And if you've found jQuery.min.js although with the different series in your template, the red codes no longer need to insert. There must be only one jQuery.min.js in your template, it is up to the serial number, if possible the latest version.
    Blue code (15) : amount of your post that display in the slider. news was a label that I choose to show up in slider.
  6. Next step you must call the slider to appear in your blog. Place this following code above <div id='main-wrapper'>:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='carousel'>
    <div id='previous_button'/>
    <div class='container'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>   
    <div class='clear'/>
    </div>
    <div id='next_button'/>
    </div>
    <script type='text/javascript'>
    (function($) {     $(document).ready(function(){
    $(&quot;#carousel .container&quot;).jCarouselLite({
        auto:4000,
        scroll: 1,
        speed: 800,   
        visible: 5,
        start: 0,
        circular: true,
        btnPrev: &quot;#previous_button&quot;,
        btnNext: &quot;#next_button&quot;
        });
        })})(jQuery)   
    </script>
    </b:if>
    You can also put the following codes in the bottom of your navigation menu or you can also placed in your footer side, that's depend on your needs.
  7. The final step, save templates and see the results.

1215 comments:

«Oldest   ‹Older   1201 – 1215 of 1215   Newer›   Newest»
حسن عابد said...

شركة تنظيف مجالس بالرياض
شركة مكافحة صراصير بالرياض

شركة مكافحة حشرات بالدمام
شركة مكافحة فئران بالدمام
شركة مكافحة حشرات بالخبر
شركة رش مبيدات بالدمام
شركة رش مبيدات بالخبر

شركة مكافحة حشرات بالجبيل
شركة رش مبيدات بالجبيل
شركة مكافحة حشرات بالقطيف


حسن عابد said...

شركة مكافحة حشرات بسيهات

شركة مكافحة حشرات بجازان
شركة مكافحة النمل الابيض بالدمام
شركة مكافحة النمل الابيض بالدمام

شركة مكافحة الحمام بالدمام
شركة مكافحة الحمام بالخبر

الكلمة الدلالية هنا
شركة تاجير عمالة

كشف تسربات المياه بالدمام
شركة عزل خزانات بالدمام

حسن عابد said...

شركة عزل اسطح بالدمام

شركة تسليك بيارات بالدمام
شركة تسليك مجاري بالدمام
شركة تنظيف مساجد بالدمام
شركة تنظيف مساجد بالخبر

شركة تنظيف سجاد بسيهات



حسن عابد said...

شركة النور تقدم العديد من الخدمات لعملائها الكرام فنحن متخصصون في اعمال التنظيف ومكافحة الحشرات والنمل الابيض وكشف تسربات المياة وتسليك البيارات والمجاري اتصل بنا ليصلك مندوبنا اينما كنت فروعنا عديدة في جميع انحاء المملكة ,خبراء وفنيين في , احدث الاجهزة والمعدات ضمان علي جميع اعمالنا , اتصل الان 0501650440 خبرتنا ف اعمال التنظيف عالية تمتد لاكثر من عشرون عاما خبراء وفنيين في اعمال التنظيف ونستخدم افضل المواد والمعدات واحدث الاجهزة
شركة تنظيف فلل بالرياض
شركة تنظيف شقق بالرياض
شركة تنظيف بالرياض
شركة تنظيف منازل بالرياض
شركة تنظيف سجاد بالرياض
شركة تنظيف موكيت بالرياض
شركة تنظيف سجاد وموكيت بالدمام

حسن عابد said...

شركة تنظيف سجاد وموكيت بالخبر
شركة تنظيف كنب بالدمام

شركة تنظيف كنب بالخبر
شركة تنظيف مجالس بالرياض
شركة تنظيف فلل بالاحساء
شركة تنظيف فلل بالدمام
شركة تنظيف بالدمام
شركة تنظيف شقق بالدمام
شركة خزانات بالدمام
شركة تنظيف شقق بجازان

حسن عابد said...

شركة تنظيف مجالس بالرياض
شركة مكافحة صراصير بالرياض

شركة مكافحة حشرات بالدمام
شركة مكافحة فئران بالدمام
شركة مكافحة حشرات بالخبر
شركة رش مبيدات بالدمام
شركة رش مبيدات بالخبر

شركة مكافحة حشرات بالجبيل
شركة رش مبيدات بالجبيل
شركة مكافحة حشرات بالقطيف


حسن عابد said...

شركة النور تقدم العديد من الخدمات لعملائها الكرام فنحن متخصصون في اعمال التنظيف ومكافحة الحشرات والنمل الابيض وكشف تسربات المياة وتسليك البيارات والمجاري اتصل بنا ليصلك مندوبنا اينما كنت فروعنا عديدة في جميع انحاء المملكة ,خبراء وفنيين في , احدث الاجهزة والمعدات ضمان علي جميع اعمالنا , اتصل الان 0501650440 خبرتنا ف اعمال التنظيف عالية تمتد لاكثر من عشرون عاما خبراء وفنيين في اعمال التنظيف ونستخدم افضل المواد والمعدات واحدث الاجهزة
شركة تنظيف فلل بالرياض
شركة تنظيف شقق بالرياض
شركة تنظيف بالرياض
شركة تنظيف منازل بالرياض
شركة تنظيف سجاد بالرياض
شركة تنظيف موكيت بالرياض
شركة تنظيف سجاد وموكيت بالدمام

solusi pria wanita said...

hammer of thor
hammer of thor asli

viagra usa
titan gel asli

Claudya Lee said...

Terima kasih Informasinya gan , Sangat Membantu dan di tunggu artikel berikutnya^^


bandarq
Agen Poker
Domino99

Baran Can said...

Bahçeşehir Çilingir
Başakşehir Çilingir
Ispartakule Çilingir
Bahçeşehir Ispartakule Çilingir

Bahçeşehir Kale Kilit Anahtarcı
Başakşehir Çilingir Numarası
Bahçeşehir Çilingir
Beylikdüzü Kavaklı Çilingir

mostafa khames said...

والدقة والمهارة شركة تنظيف خزانات بمكة وسرعة فى انجاز العمل شركة تنظيف شقق بمكة لان من اهم اساسيات العمل شركة مكافحة حشرات بمكة هى الكوادر البشرية شركة نقل عفش بمكة وتمتاز بوجود مشرفين ذو خبرة عالية شركة تنظيف خزانات بالطائف فى مجال

mostafa khames said...

تحرص شركة نقل عفش بمكة على تقديم أفضل خدماتها في مجال نقل العفش من أجل حرصها الدائم على توفير سبل الراحة والأمان لجميع عملائها شركة تنظيف بالبخار بمكة والتى تتفادى كافة المشاكل التى تواجه عملية النقل فلا تبحث كثيرا من شركة نقل عفش بمكة اذا كنت تستهدف افضل عملينا العزيز لن يكون هناك داعي للبحث المتواصل عن شركة تقوم بنقل عفش منزلك وتصبح عرضة للنصب والاحتيال من قبل بعض الشركات شركة تنظيف بمكة نضمن لك سلامة منقولاتك من أي خدوش أو كسر تتعرض له أثناء النقل

mostafa khames said...

كل هذه الصعوبات أصبحت ماض شركة تنظيف خزانات بمكة أما الآن في نقل العفش شركة تنظيف بالبخار بمكة من مكان إلي أخر شركة تنظيف شقق بمكة لم يكن بهذه السهولة شركة مكافحة حشرات بمكة تمتلك الكثير من الخبراتشركة نقل عفش بمكة الدراية الكاملة

mostafa khames said...



سوف يتم تقديم كل أنواع خدمات النظافة العامة والتي تحتاجها كل ربه منزل شركة تنظيف بمكة حيث أنها تعمل على إحلال الرونق على المنزل والبيت وأيضا تجعل هناك حالة من الهدوء بداخل المنزل شركة مكافحة حشرات بمكة فكلما كان المكان نظيف ورائحته منعشة يوميا وهوائه متجدد شركة تنظيف بالبخار بمكة يعمل على التخلص من حالات التوتر التي تصيب البعض أثناء تواجده في العمل اليومي شركة نقل عفش بمكة وتعتبر عملية التنظيف اليومية من أهم العمليات شركة تنظيف خزانات بمكة التي يجب أن تقوم بها ربا البيوت



mostafa khames said...


فيقوم عمال الشركة شركة مكافحة حشرات بمكة بالدخول لداخل الخزان و القيام بتنظيفه بفرش خصصة للخزانات شركة تنظيف خزانات بمكة و إزالة ما على الجدران من أوساخ و ترسبات شركة تنظيف بالبخار بمكة تعمل الشركة على تنظيف الخزان جيدا و القضاء على الطحالب التي قد تتكون به شركة نقل عفش بمكة و أي حشرات أخرى شركة مكافحة حشرات بالطائف لا تقلق

«Oldest ‹Older   1201 – 1215 of 1215   Newer› Newest»

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

 
Copyright © 2011. Johny Template All Rights Reserved
Company Info | Contact Us | Privacy policy | Term of use | Widget | Advertise with Us | Site map
Template Design by Borneo Templates Modify by Creating Website Inspired from Wordpress Hacks