Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

Modifikasi Efek Slide Gambar Cantik dan Ringan


Saya sudah lama mencari serta bertanya pada sahabat-sahabat blogger terkait cara membuat Modifikasi Efek Slide Gambar Cantik dan Ringan pada postingan blog, dan hasilnya saya belum menemukan apa-apa. Kendati demikian, ada juga cara untuk menampilkan gambar lebih dari 3 dalam satu tempat dengan menggunakan slider yang biasa kita lihat di beberapa blog. Baca Cara Membuat Show Hide Kotak Komentar

Namun, jika menampilkan sistem juery slider pada postingan blog, tentu ini akan membebani dan membuat loading artikelnya berat sekali, sebab kode-kode slidernya langsung diletakkan dalam postingan. Maka dari itu, saya terus mencari dan berusaha bagaimana caranya agar dapat mengumpulkan beberapa gambar dalam satu tempat dan bisa dilihat jika kita mengklik tombol tertentu (bukan cara hover).

Akhirnya ide itu muncul disaat saya berkunjung ke blognya mas Adhy Suryadi (kompi Ajaib) yang menjelaskan tentang cara "Membuat Tab View Dengan Onclick Event". Saya melihat ada struktur yang bisa dimodifikasi kemudian merubah sedikit kodenya guna memenuhi keinginan tentang Modifikasi Efek Slide Gambar Cantik dan Ringan. Baca juga Cara Menampilkan Widget Sesuai Keinginan

Saya tidak tahu apa nama modifikasi yang akan saya paparkan ini, sebab jika disebut slider photo/gambar, maka hal itu jelas mengarah pada tampilan slider show yang sudah banyak tutorialnya, oleh karena itu saya juga meminta saran kepada teman-teman tentang nama yang tepat untuk posting artikel ini. Berikut penjelasan Modifikasi Efek Slide Gambar Cantik dan Ringan


7Top Ranking
Aneka Ragam Makalah
Terwujud
Next
Next
Next
1. Log In ke www.blogger.com
2. Buat baru artikel atau edit artikel lama
3. Buka menu HTML buka Compose saat memasukkan kodenya
4. Copy dan Paste kode di bawah ini
<style>
#Gambar1 {display:block; text-align:center}
#Gambar2, #Gambar3 {display:none; text-align:center}
#Klik1, #Klik2, #Klik3 {box-shadow: 0px 0px 10px 3px #181515; padding:2px; text-align:center; border:1px solid #D1FA02; background:#D1FA02; cursor:pointer; width:125px; height:30px}
</style>
<center>
<table border="0" style="background: url(http://4.bp.blogspot.com/-im2YdA1Sgwg/U6gspeyTL3I/AAAAAAAABfA/3WFm-44tDms/s1600/tv.jpg); height: 315px; padding: 0px 0px 40px 0px; width: 400px;">
<tr>
<td>
<div id="Gambar1"><a href="http://7topranking.blogspot.com/" target="_blank"><img alt="7Top Ranking" src="http://1.bp.blogspot.com/-1BqgLo2eXT0/U6hGcfGixKI/AAAAAAAABfQ/ZKt91fiBNsA/s1600/7Top.jpg" title="7Top ranking" /></a></div>
<div id="Gambar2"><a href="http://www.anekamakalah.com/" target="_blank"><img alt="Aneka Ragam Makalah" src="http://2.bp.blogspot.com/-RtRekqstj04/U6hGhssuApI/AAAAAAAABfg/2IpWsTkEoJA/s1600/ARM.jpg" title="Aneka Ragam Makalah" /></a></div>
<div id="Gambar3"><a href="http://www.terwujud.com/" target="_blank"><img alt="Terwujud" src="http://4.bp.blogspot.com/-WQB1S0EGd98/U6hGfJZwTmI/AAAAAAAABfY/1fEPTrEtbrI/s1600/terwujud.jpg" title="Terwujud.com" /></a></div>
</td></tr></table>
<table border="0"><tr>
<td><div id="Klik1" onclick="document.getElementById('Gambar1').style.display='block';Gambar2.style.display='none';Gambar3.style.display='none';">Next</div></td>
<td><div id="Klik2" onclick="document.getElementById('Gambar1').style.display='none';Gambar2.style.display='block';Gambar3.style.display='none';">Next</div></td>
<td><div id="Klik3" onclick="document.getElementById('Gambar1').style.display='none';Gambar2.style.display='none';Gambar3.style.display='block';">Next</div></td>
</tr>
</table>
</center>
5. Publish artikel atau Perbaharui
6. Lihat hasilnya

Keterangan
  • Gambar: Sesuaikan Gambar dengan tampilan backgroundnya
  • Alamat dan Alt: Ganti dengan alamat blog anda serta alt-nya juga
  • Warna merah: Atur padding pada gambar hingga sesuai dengan tampilan background
  • Silahkan atur warna pada #D1FA02 sesuai yang anda inginkan
  • Ganti Next menjadi angka atau huruf yang anda inginkan
Hasil modifikasi ini sangat berbeda dengan desain slider gambar secara umum, perbedaan itu terlihat dari sisi loadingnya. Jika modifikasi yang saya paparkan ini loadingnya ringan, sedangkan slider gambar yang biasa kita jumpai memberikan dampak loading yang berat. Saya akan berupaya untuk mengembangkan hasil modifikasi ini pada tahap selanjutnya guna menyempurnakan tampilannya agar lebih menarik dan indah dipandang mata. Jangan lewatkan Modifikasi Menu Scroll dengan Backround Gambar

Demikianlah informasi tentang Modifikasi Efek Slide Gambar Cantik dan Ringan, modifikasi ini akan terus dikembangkan supaya lebih simple dan lebih menarik tampilannya. Jika ada kesalahan, mohon berikan tanggapan anda. Terima kasih ^-^.

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

7 komentar

keren, euy mas IBrahim!

kreatip!

:D

Balas

Terima kasih mbak maryam

Balas

cocok nih gan idenya buat blog dengan tema walpaper.. mantap deh :)

Balas

terima kasih mas irpan

Balas

wah mas ibrahim diam-diam hebat juga main kodenya.hehe
keren mas..

Balas

Bagus juga mas :) dicoba yah hehe

Balas

Saya mau tertawa dulu ya boss..

^_^

Balas

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis