Dalam Posting ini kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri dan ke kanan secara bergantian dengan menggunakan tag html saja.
Pertemuan kali ini saya akan berbagi tentang slide show image yang sangat cocok dipasang untuk blog kamu, dengan tampilan slide bergantian secara vertikal dan seorang pengungjung dapat memilih dengan mengeklik pada gambar tersebut. untuk dapat membangun slidernya kita membutuhkan tag css, html, dan Javascript. mari kita langsung saja menuju TKP.
Baiklah berikut ini tag html yang dapat membangun Slide Image nya :
Caranya tinggal vaste kan saja kode di bawah ini pada situs kita tepat nya di TATA LETAK
Klik tambahkan widget lalu pilih HTML/Java scrift lalu vaste. lihat hasilnya..
css
<style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style>
html
<div class="amdhas" id="ke2">
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHjfWYr06MDvazl8DBpuEzIyKnYlu1vzU1XckUVUbo5idQSiMa3YNeYFNk4z6yjOKRkgbJpo3MdVErKc8L0xuCWka13iLJfZ2CNg0FtzlPbTSXDJ-cXDgIJkiGwQUjGdpF_LQxqoUyMVHR/s1600/img_gubhugreyot-cleopatra.jpg" width="400" />
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbNaSJcVC38Jq4OSQNX8FhlEw34kKWapsY8K3t5B3lbfIqP6WlWWKPrp0bSd7UYHSgnAGun6ASKU7fyyJE9KoVVobBFgHxe1co6weXdgiZjZcX9gOEIQa0xygP3WM5uEUwBAyQNUZUnVm/s1600/img_gubhugreyot_gadisku-06.jpg" width="400" />
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimIkeiyW2S79t3PcU91ezGxFoimPd1zgWnWEfFZW12CyLnCvMT7wQ4M9jqdbVmdtmr_DnTrpgo3EikHwH82i55X9B9r4VU-lkp2DG2SH9VoefGgwWng3JTMsbRtTy6oIVJRMttUSyChVCZ/s1600/img_gubhugreyot-house2.jpg" width="400" /></div>
javascrift
<script src="https://takim.googlecode.com/svn/branches/jquery.min.js" type="text/javascript"></script>
<script src="https://takim.googlecode.com/svn/branches/animation2.js" type="text/javascript"></script>
<script src="https://takim.googlecode.com/svn/branches/lora-malunk.animation3.js" type="text/javascript"></script>
Adapun File nya dapat dilihat hasilnya dan dapat juga diunduh berikut di bawah ini :
Tambahkan komentar anda untuk: