cara bikin slide otomatis di blog
Hari ini kita akan belajar bagaimana melakukan sesuatu yang menyenangkan! wordpress pengguna kemampuan untuk menginstal plugin dan menciptakan fitur slider gambar di blog-nya. Ini cara masang gambar slider template dan widget standar untuk Blogger pengunjung, tapi sekarang saya akan menunjukkan cara untuk membuat slide gambar Blogger. Kode acara asli saya dapat membuat Anda pembantu ditemukan di Blogger. Cara membuat slider gambar blog,silakan langsung ke tkp
1.1Blogger
2.Edit template
3Copy code di bawah ini dan cari code
]]></b:skin> atau </style> di bagian head template. perhatian wrapper dan #slider jka pada wrapper anda ubah code width atau height pada #slider wrapper { position:relative; margin:0 auto 15px; width:600px; height:350px; display:block; padding:5px; background:#FFF; z-index:2; }
#slide-prev,#slide-next { -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; padding:15px; bottom:50%; position:absolute; z-index:4; }
#slide-prev { left:20px; background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGWglPkiYnQDXhnGeudgX3XLzfWQ_hM2lHS2Nq6_rQ02FokT9i3FAPaWUU6w8cgq2tYSUtJ6NTQYjvFIEKG0CiZUVL3jujXcRkYHqNBHLurbmFtz-0gR67At6re60RkUBqGxoreTZoZA/s1600/arrow_left.png) no-repeat center; }
#slide-next { right:20px; background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQfnaOc2vURSfAMJci_LVAli5EKPSpxPdMO5KawGreVWLuFfTL2Ol8h3G8mXy6pDcqqMoEvZfy-cPrimLJqM9j5-a2dsn0_gXRYK9-8IX0Rt5BoEOyC1zIeKHf6CZIFBkYoaJhcbInN4/s1600/arrow_right.png) no-repeat center; }
#slider { width:600px; height:350px; margin-left:auto; margin-right:auto; position:relative; z-index:2; display:block; }
#slider img { width:100%; height:100%; }
.slide { display:none; }
.cs-activeSlide { display:block; }
.slide-descriptions { display:none; }
.caption { background:rgba(238,238,238,0.83); color:#333; display:none; padding:5px 10px; position:absolute; left:0; right:0; bottom:5px; z-index:3; font:normal 13px/20px Arial,sans-serif; }
2.copy scrip di bawah ini,cari code <head> atau tekan CTR+F dan letakan scrip di bawahnya
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://sites.google.com/site/vanzdy/script/jquery-chopslider-2.2.0.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script>
jQuery(function(){
$("#slider").chopSlider({
slide : ".slide",
nextTrigger : "a#slide-next",
prevTrigger : "a#slide-prev",
hideTriggers : true,
sliderPagination : ".slider-pagination",
useCaptions : true,
everyCaptionIn : ".sl-descr",
showCaptionIn : ".caption",
captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
autoplay : true, // slidernya otomatis bermain, "false" jika tidak otomatis
autoplayDelay : 3000, // waktu penundaan gambar
t3D : csTransitions['3DFlips']['random'],
t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
noCSS3 : csTransitions['noCSS3']['random'],
mobile : csTransitions['mobile']['random'],
onStart: function(){},
onEnd: function(){}
})
})
</script>
3.1.layout<script src="https://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script>
jQuery(function(){
$("#slider").chopSlider({
slide : ".slide",
nextTrigger : "a#slide-next",
prevTrigger : "a#slide-prev",
hideTriggers : true,
sliderPagination : ".slider-pagination",
useCaptions : true,
everyCaptionIn : ".sl-descr",
showCaptionIn : ".caption",
captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
autoplay : true, // slidernya otomatis bermain, "false" jika tidak otomatis
autoplayDelay : 3000, // waktu penundaan gambar
t3D : csTransitions['3DFlips']['random'],
t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
noCSS3 : csTransitions['noCSS3']['random'],
mobile : csTransitions['mobile']['random'],
onStart: function(){},
onEnd: function(){}
})
})
</script>
2.add a gadget
3.pastakan code scrip dan ganti ulr gambarnya
4.save
<div class="wrapper">
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"><img src="url gambar1.jpg"/></div>
<div class="slide"><img src="url gambar2.jpg"/></div>
<div class="slide"><img src="url gambar3.jpg"/></div>
<div class="slide"><img src="url gambar4.jpg"/></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
</div>
<div class="caption"></div>
</div>
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"><img src="url gambar1.jpg"/></div>
<div class="slide"><img src="url gambar2.jpg"/></div>
<div class="slide"><img src="url gambar3.jpg"/></div>
<div class="slide"><img src="url gambar4.jpg"/></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
</div>
<div class="caption"></div>
</div>
Comments
Post a Comment