منتديات الهجان
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

منتديات الهجان


 
الرئيسيةأحدث الصورالتسجيلدخول

 

 سلايد شو متطور Membuat Slider Image Otomatis Joss Banget

اذهب الى الأسفل 
كاتب الموضوعرسالة
الهجان
مستر وليد فريد
مستر وليد فريد
الهجان


ادعية لوجة الله : هوا الله
السرطان ذكر
عدد المساهمات : 4697
تاريخ الميلاد : 04/07/1975
تاريخ التسجيل : 21/09/2009
العمر : 48

سلايد شو متطور  Membuat Slider Image Otomatis Joss Banget  Empty
مُساهمةموضوع: سلايد شو متطور Membuat Slider Image Otomatis Joss Banget    سلايد شو متطور  Membuat Slider Image Otomatis Joss Banget  Icon_minitimeالأحد فبراير 16 2014, 20:15

Tutorial ini menjawab pertanyaan dari teman debbie irlando manurung alias Zondim, meminta untuk dibuatkan tutorial slider yang ada di Johny Ganteng Banget. Template yang dipakai di blog itu nantinya juga akan saya share, cuma sekarang lagi massa sibuk nguli jadi nanti aja kalau sudah luang waktunya. Ada beberapa template yang nantinya akan saya share tapi kali ini saya buat sederhana, dengan sedikit menggunakan javascript, ya yang pasti lebih enteng dari biasanya. Oke kembali ke tutorial yang akan saya buat, kali ini saya akan membahas tentang cara membuat slider image otomatis sederhana yang akan menampilkan postingan terbaru Anda.

سلايد شو متطور  Membuat Slider Image Otomatis Joss Banget  Image+slider+otomatis

DEMO

Slider ini hanya memakai innerfade jquery dan cycle jquery plugin untuk melembutkan perpindahan content slider (bener nggak ya...?), pengertian Innerfade jquery kira-kira seperti ini :
اقتباس :
InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.
Source : medienfreunde.com
Wah malah bingung sendiri saya mas/mbak maklum Inggris saya dapat 6 dulu waktu sekolah, langsung saja pada cara pembuatannya :

  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. الكود:
    Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :



    الكود:



    #featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:[b][color=blue]640[/color][/b]px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}

    #featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}

    #featuredSlider .container {height:[b][color=blue]226[/color][/b]px; margin:0 10px 0 0;overflow:hidden; position:relative;}

    .featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}

    .featuredTitle a{color:#f7441a}

    .featuredTitle a:hover{color:#000}

    .navigation {position:relative;bottom:23px;float:right;overflow:hidden;}

    ul.pagination {list-style-type:none; margin:0 auto; padding:0;}

    ul.pagination a { float:left; margin:0 5px; display:inline; }

    ul.pagination a { display:block;width:12px; padding-top:12px; height:0;
    overflow:hidden;
    background-image:url(http://2.bp.blogspot.com/-j2T8LeJpjkY/UBfzfSqJGSI/AAAAAAAAIDE/jiGwQpYoRO4/s1600/slider+pagination.png);
     background-position:0 0; background-repeat:no-repeat; }

    ul.pagination a:hover { background-position:0 -12px; }

    ul.pagination a:hover { background-position:0 -12px; }

    ul.pagination a.activeSlide { background-position:0 -12px }

    a.readmore {float:left;border:1px solid #444;background:#585858
    url(http://2.bp.blogspot.com/-S4AKqSDPUEs/ToSYCWJy4qI/AAAAAAAAABI/conBgqSajOY/s1600/fade.png)
     repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px
     0 #333;margin:10px 0 0 0;padding:4px
    10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;

    border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0,
    0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px
     1px 1px 0px rgba(0, 0, 0, 0.5);}

    a.readmore:hover {color:#ff0}


    Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.




  6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode :






  7. الكود:

    <script src='[color=red][b]http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js[/b][/color]' type='text/javascript'/>

    <script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>

    <script src='http://yourjavascript.com/122111125120/cycle.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 = 150;

    summaryTitle = 25;

    numposts  = [color=blue]7[/color];



    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('<div class="slides">')

     if (numposts <= json.feed.entry.length) {

      maxpost = numposts;

      }

     else

           {

        maxpost=json.feed.entry.length;

        }

       for (var i = 0; i < maxpost; 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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="[b][color=blue]340[/color][/b]" height="[b][color=blue]212[/color][/b]"
     src="'+img[i]+'"/></a></p><div
    class="featuredTitle"><a
    href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'...
     </p><a href="'+posturl+'" class="readmore">Read more
    »</a></div>';

     document.write(trtd);





     j++;

    }

        document.write('</div>')

    }



    //]]>

    </script>

الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://waled6662003.yoo7.com
 
سلايد شو متطور Membuat Slider Image Otomatis Joss Banget
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» HOFHV Membuat Content Slider Image Otomatis اخبارى الشرق 2
»  Membuat Simple Slider Otomatis Gambar Vertikal سلايد شو متميز
»  Membuat Slider Otomatis Sporty Magazine 2 Template
» jQuery Image Slider with Code and TutorialSlideshow
» سلايد شو اليوم السابع سلايد زاتى وافقى حصريا وفقط على منتديات الهجان

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات الهجان :: ركن بلوجر :: قسم سلايد شو بلوجر-
انتقل الى: