S
iapa bilang kalau kita akan membuat slide image kita banyak membutuhkan script script yang sangat berat ,yang bisa dan pasti akan berpengaruh pada looding blog itu sendiri,memang sich penambahan script pada suatu tutorial blog pastinya akan menimbulkan effec effec yang sangat keren dan maksimal .Nah sebagai Alternatif nich kang mahfid akan membuat sebuah slide show dengan cara yang sangat sederhana akan tetapi yang kita dapatkan hasil yang lumayan maksimal.
 |
| Contoh slide image |
.kotak{border:3px solid #222;height:300px;width:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 1px 0px 5px 5px rgba(2, 2, 10, 1);box-shadow: 1px 0px 5px 5px rgba(2, 2, 10, 1); overflow:hidden;}.effec{width: 300px;height: 300px;overflow: hidden;position:absolute;}
.tab-img{width:300px;background:transparent}
Untuk pasang kode slidernya gunakan kode di bawah ini di setiap postingan berikut kode nya .
<center>Buat Sobat yang Mau lihat Demonya klik aja Di sini atau Disini
<div class="kotak">
<div class="effec">
<img id="gambar1"width="300"height="300"align="center"src=" http://lh3.googleusercontent.com/-nhT3WXXAZUE/AAAAAAAAAAI/AAAAAAAAAZ4/l_Oarll2yIc/s512-c/photo.jpg">
<img id="gambar2"width="300"height="300"align="center"src=" http://e-kuta.com/blog/wp-content/uploads/2011/02/kadek.jpg">
<img id="gambar3"width="300"height="300"align="center"src=" http://indonesiaindonesia.com/imagehosting/images/882/1_dian_036.jpg"></div></div>
</center>
<br/>
<center><div class="tab-img">
<a href="#gambar1"><button>gambar 1</button></a>
<a href="#gambar2"><button>gambar 2</button></a>
<a href="#gambar3"><button>gambar 3</button></a>
</center></div>
Untuk teks berwarna merah ganti dengan url gambar yang sobat sukai
Judul Artikel :Cara membuat slide image sederhana
16 komentar
mau minta saran nih sob,
kalo di pasang buat blog saya pantes gak ya pake slide ginian,trs nanti image yang ada di slide itu apa sama kaya yang di postingan ?
@Ants Kaka yach untuk url gambarnya mending di ganti sob sesuai dengan selera sobat misal di pasang di side bar dengan judul My best friend tentunya sobat harus merubah width dan height nya
kok demonya enggak jalan sob??
@anak baik yang mana sob demonya yang tulisan "klik disini " kayaknya bekerja dengan baik
terima kasih informasinya...
masih utak atik template mas...hehehehe
iya nich sob sempat berantakan gara gara pemadaman listrik
Mas gimana yah, saya pasang di blog saya tapi gak bisa, bagian yang ini :
"#gambar1"
"#gambar2"
"#gambar3" di isi dengan apa yah? pas dipasang di postingan, kok malah jadi link ke blogger ?
thanks.
salam kenal
<a href="#gambar1"><button>gambar 1</button></a>
tanda #gambar1 di atas adalah untuk kode pemanggil ID sob untuk gambar
<img id="gambar1"width="300"height="300"align="center"src=" http://lh3.googleusercontent.com/-nhT3WXXAZUE/AAAAAAAAAAI/AAAAAAAAAZ4/l_Oarll2yIc/s512-c/photo.jpg">
jadi kode #gambar1 tetap kaya gitu gak usah di isi dengan kode yang lain dan seharusnya ini berjalan sesuai dengan demo
belum bisa mas, malah jadi kayak begini, pas tombol gambarnya di klik malah lari ke blogger...
yang tab-img
href=#gambar1" dst.. malah berubah jadi link blogger...
ada link contohnya ngak ...seharusnya ini tidak terjadi penerapan nya sama dengan tombol back to top
ini mas udah saya terapin di blog saya tapi masih belum bisa, gambar slidernya ada di bawah :
ini Link nya :
http://www.konterid.com/2013/05/headset-music-angel-warna-warni.html
(saya nyepam gak yah??) : ' (
kode gambar pemanggilnya sudah betul kaya gini mas
<a href="#gambar1"><button>gambar 1</button></a> kalau memang sudah betul kaya gitu aneh juga kalau gak bisa atau gini aja coba dengan id lain misal kan awal nya kode idnya kan kaya gini #gambar1 coba ganti dengan kode lain misla kaya gini
<center>
<div class="kotak">
<div class="effec">
<img id="goyang1"width="300"height="300"align="center"src=" http://lh3.googleusercontent.com/-nhT3WXXAZUE/AAAAAAAAAAI/AAAAAAAAAZ4/l_Oarll2yIc/s512-c/photo.jpg">
<img id="goyang2"width="300"height="300"align="center"src=" http://e-kuta.com/blog/wp-content/uploads/2011/02/kadek.jpg">
<img id="goyang3"width="300"height="300"align="center"src=" http://indonesiaindonesia.com/imagehosting/images/882/1_dian_036.jpg"></div></div>
</center>
<br/>
<center><div class="tab-img">
<a href="#goyang1"><button>gambar 1</button></a>
<a href="#goyang2"><button>gambar 2</button></a>
<a href="#goyang3"><button>gambar 3</button></a>
</center></div>
iya mas dari dulu udah di coba-coba yang ini tetep gak bisa2, mungkin di tmplate saya kali yang gak cocok... udah di ganti "goyang" juga masih belum bisa..
kayak nya tadi saya melihat sudah bisa sob saya klik gambar sudah berubah coba kasih spasi atau margin ama gambar yang di bawahnya
oh iya udah bisa, masa harus pake kata goyang aja yah...??
mantaplah,infonya makasih ya
Posting Komentar
Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>