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

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


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

 

  Membuat Simple Slider Otomatis Gambar Vertikal سلايد شو متميز

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


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

 Membuat Simple Slider Otomatis Gambar Vertikal  سلايد شو متميز Empty
مُساهمةموضوع: Membuat Simple Slider Otomatis Gambar Vertikal سلايد شو متميز    Membuat Simple Slider Otomatis Gambar Vertikal  سلايد شو متميز Icon_minitimeالأحد فبراير 16 2014, 19:57

Membuat Simple Slider Otomatis Gambar Vertikal
Kali ini saya akan memberikan satu lagi tutorial membuat slider otomatis untuk image atau gambar vertikal. Sebelumnya saya minta maaf belum bisa menjawab semua pertanyaan yang masuk karena banyak sekali kegiatan di luar yang harus saya kerjakan. Dan tentu saja saya juga belum bisa memenuhi permintaan teman-teman yang menginginkan sebuah template khusus atau modifikasi template yang sudah ada menjadi sebuah template yang SEO friendly dan valid HTML.

 Membuat Simple Slider Otomatis Gambar Vertikal  سلايد شو متميز Slider+vertikal

DEMO

Slider ini sangat sederhana, seperti juga slider-slider sebelumnya, slider inipun bekerja secara otomatis berdasarkan artikel terbaru dan kategori tertentu. Untuk lebih jelas silahkan klik demo diatas, slider ini saya letakkan di sidebar sebelah kanan dengan ukuran lebar 300px. Slider ini sekilas terlihat seperti slider yang ada pada template-template dari designer India seperti Lasantha Bandara, Lansindu, Sameera dan lainnya, yang masih memasukkan gambar dan URL secara manual.  Jika Anda pengguna template buatan mereka, dan ingin mengganti agar slider bekerja secara otomatis, silahkan simak berikut langkah-langkah pembuatannya :

  1. Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.
  2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
  3. Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula :

الكود:
Klik "Buka" dan masukkan kode berikut di atas kode ]]></b:skin>


  1. الكود:
    /* Slider */

    .sompret-wrapper {float:right; position: relative;}

    .sompret { overflow: hidden; position: relative; width:300px; height:400px;}

    .image_reel { position: absolute; top: 0; left: 0; }

    .image_reel img {overflow: hidden;float: left;width:300px; height:auto;}

    .paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }

    .paging a { text-indent:-9999px;
    background:url(http://3.bp.blogspot.com/-_RkTTrabRbs/UQWYmksVCYI/AAAAAAAABaU/3vvF1qFSAYI/s1600/slider_item.png)
     no-repeat center; width:10px; height:10px;
    display:inline-block;margin:3px; border:none; outline:none; }

    .paging a.active {
    background:url(http://4.bp.blogspot.com/-b9OEmVdL6Q4/URA_BL7OXWI/AAAAAAAAB2k/c9exOQaNu2U/s1600/slider_item_active.png)
     no-repeat center; border:none; outline:none;}

    .paging a:hover {font-weight: bold; border:none; outline:none;}

    .crott { width:280px; display:
    none; position:absolute;bottom: 0; left: 0; z-index: 101; background:
    url(http://4.bp.blogspot.com/-PpOJ-vHwxvc/T5mGXWpHVCI/AAAAAAAAAqQ/Y1VmLDvoeHI/s1600/uj-opacity-40.png);padding:5px
     10px;  }

    .crott a{color: #fff;font: 16px Oswald }

    .crott p{color: #fff;font: 12px Arial;}

    Kode warna merah diatas adalah ukuran slider, untuk lebar 300px dan tinggi 400px. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan.

  2. الكود:
    Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :


    الكود:
    [color=red]<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>[/color]

    <script type='text/javascript'>

    //<![CDATA[

    jQuery(document).ready(function() {



    //Set Default State of each portfolio piece

     $(".paging").show();

     $(".paging a:first").addClass("active");



     //Get size of images, how many there are, then determin the size of the image reel.

     var imageWidth = $(".sompret").width();

     var imageSum = $(".image_reel img").size();

     var imageReelWidth = imageWidth * imageSum;

     

    //Adjust the image reel to its new size

     $(".image_reel").css({'width' : imageReelWidth});



     //Paging + Slider Function

     rotate = function(){

        var triggerID = $active.attr("rel") - 1; //Get number of times to slide

         var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

     

        $(".paging a").removeClass('active'); //Remove all active class

         $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

       

     $(".crott").stop(true,true).slideUp('slow');

      

      $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

      

         //Slider Animation

         $(".image_reel").animate({

             left: -image_reelPosition

         }, 500 );

     

     

     };



     //Rotation + Timing Event

     rotateSwitch = function(){

    $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds

             $active = $('.paging a.active').next();

             if ( $active.length === 0) { //If paging reaches the end...

                 $active = $('.paging a:first'); //go back to first

             }

             rotate(); //Trigger the paging and slider function

         }, 10000); //Timer speed in milliseconds (3 seconds)



    };

     

    rotateSwitch(); //Run function on launch



     //On Click

        $(".paging a").click(function() {  

            $active = $(this); //Activate the clicked paging

            //Reset Timer

            clearInterval(play); //Stop the rotation

            rotate(); //Trigger rotation immediately

            rotateSwitch(); // Resume rotation

            return false; //Prevent browser jump to link anchor

        });  



    });



    //]]>

    </script>

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

    summaryPost1 = 80;

    summaryTitle = 20;

    numposts1 = [color=red]6[/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 showrecentposts1(json) {

     j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

     img  = new Array();

       

       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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];



     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 = m+ ' ' + day + ' ' + y ;

     

    var trtd =
     '<div class="crott"><a
    href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'...
     </p></div>';    

     document.write(trtd);    

       

         j++;

     }

     

    }



    function showrecentposts2(json) {

     j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

     img  = new Array();

     

       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 = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';

      document.write(trtd);    

       

         j++;

     }

     

    }

     //]]>

    </script>

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

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