Site Map

Memuat...

Kolom Tutorial™

Image Slide Show Sederhana

slide show ini sangat mudah cara penerapannnya sobat blogger  hanya tinggal menambahkan kode dibawah ini di add widget--->>> Html.

Gampangkan sob,..............????
Ini Demonya gan :

Ini Kode Yang Harus Agan Kopas

<style>
#slideshow {margin:50px auto;position:relative;width:240px;height:240px;padding:10px;box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow > div {position:absolute;top:5px;left:-1px;right:10px;bottom:10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<div id="slideshow">
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
</div>

Semoga artikel ini bermanfaat gan, jangan lupa komen, hehhehehheh.....

Efek Zoom Image With Css

Artikel selanjutnya di blog baru ini kita akan membahas tentang membuat efek image/gambar membesar ketika di sorot mouse, untuk lankah-langkahnya sebagai berikut :

1. Login Ke Akun Blogger Sobat
2. Klik Template Kemudian centang expand widget template
3. Selanjutnya cari kode ]]></b:skin> dan taruh kode CSS dibawah ini tepat diatas kode ]]></b:skin>
Ini Kode CSS Nya

.bteffect {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.bteffect:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

4. kemudian jika sobat ingin memposting sebuah gambar jangan lupa sisipkan kode
Ini Kode CSS Nya

<img class="bteffect"src="LINK URL GAMBAR SOBAT DISINI" width="320" />

Demikian Artikel kali ini semoga bermanfaat bagi sobat blogger

Site Map Alex Joenaedi Blog's