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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo7z04yTLmAizpdN8UaT-YipcgmXl4tTSmBxMUaSJ3X52R1CT-byfO5Fprq7w88nirDKfhBEQIc8u32GHULWtMC94fY-q4r3QZ0VvdtJkCEipoKqBuQ3chvaMuB9pf-LFgnpMQKmyaQ80u/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio981mD7EvUd3lRPNiAUir_xZL76M6s0ARmwsErTNV8FJdh8-TOjP5xrgCAH7KH7ZchhGPCZXYEWLZ6Vtt_ZMWL4Za4fuPRO93-igbE_hpPORd1WBE6ZwThKtDJT-fzi5pPhCbOKhNQkuZ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGt3TWJsYfmVUYNb4o_FS2aiaL2EVe938B0fjdUvWo4iiBgty4c4aMqdtP6dPdNmq6hqsJXqikwmDsmJZr6GEiCQx4XagZ9-hRrLZ65aHb3-V-s1xTFQMzXtxtSatY_22mBBEQMllAOg1Z/s1600/ARM.jpg" title="Aneka Ragam Makalah" /></a></div>
<div id="Gambar3"><a href="http://www.blocopy.blogspot.com.com/" target="_blank"><img alt="blocopy.blogspot.com" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMOOGms0OAcQq0_w071pqFWvF34g4sP6rD3Hg7l4MohygALxUKfffnCu17-NhkJYOC7ydz-Y5morx4P42ioF0bcVofKkxW7MoFt-ZQCfXqXMvbhPqTVq6rWlJiZOgIaYr3FPsJd04LFsa4/s1600/blocopy.blogspot.com.jpg" title="blocopy.blogspot.com.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 ^-^.