Cara Membuat Slide Di 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 agar lebih seo dan keren untuk tampilan blogger kamu teman langsung ikuti langkah saya ya kawanku semua:

Silakan masukan Code berikut ini kawan diatas ]]></b:skin> atau </style> di bagian 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 bagian head lalu masukan code jquery di atas </head pada blogger kamu sendiri:

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

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

Langkah selanjutnya lagi kawan pastekan code template, masukan kode 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>

Artikel Terkait