Cara Membuat Slide Di Blogger

Cara Membuat Slide Di Blogger

Kali ini saya mau share tutorial membuat menampilkan slider di blogger bagai yang belum tahu silakan saja simak dengan baik dan ikuti cara pertama biar mampu menggunakan ya sahabat tampilan slider cukup mudah untuk percobaan buat kalian semua bagi yang tidak mampu silakan unduh ya alasannya ialah website ini tidak mampu di copy paste semoga aja anda mampu menggerti untuk menerapkan caranya dan banyak caranya untuk menempelkan di blogger kau ya teman-temanku semua semangat kau pasti mampu teman-temanku. slider-slider di temui pada blogger

Slider Sangat Reponsive 

sangat keren jenis ini sangat ringan pada ukuran sangat kecil sekitar 2kb, Dengan loading halaman berjalan cepat dan normal sekali , suka slideshow ini akan saya kasih tutorial tapi cukup menarik. Saya menambahkan slider/slideshow atau setidaknya mencoba terlebih dahulu sebagai pengalaman.saya sendiri slider saya berformat HTML dan CSS bagi yang tahu silakan di edit sendiri biar lebih seo dan keren untuk tampilan blogger kau sahabat eksklusif ikuti langkah saya ya kawanku semua:

Silakan masukan Code berikut ini kawan diatas ]]></b:skin> atau </style> di bab head template:

Langkah:

.easyslider-wrapper {
    width: auto;
    float: left;
    position: relative;
    padding-right: 2%;
    padding-top: 10px;
    }
.easyslider {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 350px;
    background: #eee;
    }
.image_reel {
    position: absolute;
    top: 0;
    left: 0;
    }
.image_reel img {
    float: left;
    width: 20%;
    height: 350px;
    }
.paging {
    background: none;
    position: absolute;
    bottom: 15px;
    right: 20px;
    padding:4px 0 2px;
    z-index: 100;
    display: none;
    }
.paging a {
    margin: 3px;
    background: #fff;
    width: 10px;
    height:10px;
    display: inline-block;
    border: none;
    outline: none;
    }
.paging a.active {
    background: #15E3FF;
    border: 1px solid #15E3FF;
    }
.paging a:hover {
}
.easytitledes {
    width:70%;
    display: none;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 101;
    background: #000A3F;
    background: rgba(2, 0, 51, 0.6);
    padding: 10px 15px;
    }
.easytitledes a {
    color: #15E3FF;
    font: 14px sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    }
.easytitledes a:hover {
    color:#29FF00
    }
.easytitledes p {
    color: #fff;
    font: 12px Arial;
    }

 

Langkah selanjutnya kawan masukan di bab head lalu masukan code jquery di atas </head pada blogger kau sendiri:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

Catatan : Kawan semua mampu lewati langkah ini jikalau blogger anda sudah di masukan jquery ya kawan.

Langkah selanjutnya lagi kawan pastekan code template, masukan arahan JavaScript berikut diatas </head> 

<script type="text/javascript">
/*<![CDATA[*/$(document).ready(function() {
    $(".paging").show();
    $(".paging a:first").addClass("active");

var imageWidth = $(".easyslider").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

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

rotate = function(){ var triggerID = $active.attr("rel") - 1;

var image_reelPosition = triggerID * imageWidth;

    $(".paging a").removeClass('active');
        $active.addClass('active');

    $(".easytitledes").stop(true,true).slideUp('slow');
    $(".easytitledes").eq(
    $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
    $(".image_reel").animate({left: -image_reelPosition}, 400 );
    };

rotateSwitch = function(){
    $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

play = setInterval(function(){
    $active = $('.paging a.active').next();

if ( $active.length === 0) {
    $active = $('.paging a:first'); } rotate(); }, 8000); };

rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(".paging a").click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
/*]]>*/</script>

Silakan Unduh Script Di Sini

Silakan Lihat Versi ini  DEMO
 
Semangat kawan semoga kau mampu untuk menampilkan cara.nya good luck jangan lupa siapkan kopi dan camilan biar anda mampu fokus kawan wkwk. jangan lupa lihat yang lain juga masih banyak untuk anda pelajari semua, Di website ini mencar ilmu bersama biar mampu lebih dalam untuk pengetahuan bersama biar kita cerdik bagi para adik-adik yang ingin mencar ilmu juga silakan di sini bebar untuk bertanya lewat facebook atau di channel bbm ada silakan masuk facebook dulu nanti ada pin channel bbm saya sendiri semoga bermanfaat untuk adik-adik yang di suruh membuat website sama guru-guru biar nilai kita lebih baik untuk penilaian anda semua adik-adik, kuncinya kita harus semangat tidak mudah mengalah untuk mencar ilmu bersama di sini kunjungi terus ya adik-adik dan kawan-kawanku semua sedikit mengembangkan semoga bermanfaat untuk kita semua. adik-adik dan kawan-kawanku


Jangan lupa share dan kunjungi terus ke sahabat lain biar mampu juga saya akan update terus dan terbaru semoga bermanfaat untuk kita semua.
Terima Kasih Atas Kunjungan Semuanya  
Sumber http://www.yayiks.com