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