Cara Membuat Foto Slider Dalam Blog

Foto merupakan salah satu media untuk menarik perhatian pengunjung khususnya pada media online internet. Dengan adanya foto pembaca akan lebih mudah mengerti dan mengenal yang disampaikan lebih tulisan. Dan pada artikel ini akan dibahas membuat beberapa buah foto yang terdapat dalam satu kotak ditampilkan secara bergantian.

Tampilan foto/gambar slider ini hampir sama dengan tampilan slider menggunakan picasa web. Tampilan foto slide ini hampir menghiasi media online internet nasional dan internasional ternama dan terkemuka seperti Kompas, Republika, BBC Indonesia, Reuters, Daylimail dan lain-lain.

Gambar: Foto Slider dalam media online internet blog

Cara membuat foto slider dalam blog dapat dilakukan dengan langkah-langkah sebagai berikut:

1. Sign in di blog
2. Klick Template
3. Klick Edit HTML
4. Cari kode ]]></b:skin>
5. Copy lalu paste kode berikut ini pas diatas ]]></b:skin>
6. Klick Simpan untuk menyimpan perubahan

Kode yang diletakan di atas ]]></b:skin>

#images { width: 400px; height: 250px; overflow: hidden; position: relative; margin: 20px auto; } #images img { width: 400px; height: 250px; position: absolute; top: 0; left: -400px; z-index: 1; opacity: 0; transition: all linear 500ms; -o-transition: all linear 500ms; -moz-transition: all linear 500ms; -webkit-transition: all linear 500ms; } #images img:target { left: 0; z-index: 9; opacity: 1; } #images img:first-child { left: 0; opacity: 1; } #slider a { text-decoration: none; background: #E3F1FA; border: 1px solid #C6E4F2; padding: 4px 6px; color: #222; } #slider a:hover { background: #C6E4F2; }

Setelah melakukan step diatas selanjutnya menempatkan kode gambar pada gadget. Untuk mendapatkan gadgetnya baca artikel ini

Kode beserta url gambar untuk ditempatkan pada gadget HTML/JavaScript
<div id="images"><img id="image1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4UH0evllFoxlEaQX9-m0v0XVPlRMoMktm1SAx6HLyjWZX4RsKJjbn-HVReqV47DfCVvNxYVLLktNC8K7jhX1EffX31vlTXIcltkIekGT7zlBmH07ZjLz5GX1g1Xv3jH6a4vvzTUJhGKU_/s320/Pesta+Nikah.JPG" /> <img id="image2" src="http://1.bp.blogspot.com/-eQmEUraCOS8/TryB4AHuyhI/AAAAAAAAB3k/wmy1kf7fmgY/s320/Tonggorisa.JPG" /> <img id="image3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4zXe0MAT84J6yekTB-roymrRLkAvoWsUqCz85SVOmqleCguUwxHHcP3LiGQhyphenhyphen8CbbDKmt-XHF13tRSco-hT1uLMNeiKGLDUP2N_VZcpSFNv2e7gyu8otGAiuqY0ibPi2cZw4sGn11OMw/s320/Jennifer+Lawrence.jpg" /> <img id="image4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq48_4kF8pJtLzQ4OH7Wl0JjrUpQxYN1ALd64PW7yr3sblv2VdS8-lUi8TtFPOl1CnncE9m8arYcMEXVkW9M_b1UrQz5kgtMxn7zZkKgqHkMghUQneIT8WpmYE4aX9cALqfEkOpdleon8V/s320/Tarian.JPG" /> <img id="image5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ04X-WikojL-kKurmLL86ewtgKVYJfihDMM6xJYWw0wadihXMZhQem-GCvf9hAYc1w_3s9NIlE_FrAyO4U-lTe3C17hRZzAyiRWX7MN-3PxPSZJ-NyVjxesD4H_0pXPRceN9EEVMCpG9D/s320/Menari.JPG" /> </div><div id="slider"> <a href="#image1">1</a> <a href="#image2">2</a> <a href="#image3">3</a> <a href="#image4">4</a> <a href="#image5">5</a> </div>
Keterangan

•  <img id="image1" adalah url tab untuk menampilkan gambar harus sama dengan <a href="#image1">1</a>
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNu15c9r-_K2Y3ezDvoB3b0YiSqUlwUc-VkV8MQ0f3R6SJY28zowMJzJbIhlkHRiI01MYj4CtyD4zU1Ame5ZoLrcW13N1Ww73ayWEGOl4vrQgOz0vDLJlsv1R7arRVj2EAyrJmj-02W556/s320/20091201+Bintang+Baru+Talabiu.jpg" /> adalah url gambar yang sudah pernah dipublikasikan secara online internet. Silahkan mengganti url gambar diatas dengan url foto/gambar anda sendiri.

Dengan menerapkan beberapa langkah diatas foto akan langsung dapat dislide.

Artikel lainnya

Cara Membuat Sound Track Slide Show PowerPoint
Url Domain Blogger Akan Diganti Masal Dalam Beberapa Bulan Lagi
Cara Membatasi Jumlah Komentar Visitor Blog Pada Halaman Posting Tertentu
Istilah Yang Wajib Diketahui Blogger Untuk Menata Tampilan Media Online Blog
Cara Menampilkan Gambar Foto Blog Pada Halaman Pencarian Web Browsing