CARA MEMBUAT EFEK REMOTE LINK PADA GAMBAR DI BLOG

Cara Membuat Efek Remote Link Pada Gambar – Sebuah link yang terdapat pada blog memiliki fungsi maupun peranan yang sangat penting, dengan adanya hal ini link yang di inginkan dapat di custom agar pada link tersebut memiliki efek tersendiri yang nantinya akan terlihat berbeda dari link lainnya.
Setiap Postingan pasti terdapat sebuah gambar yang mengarah pada keseluruhan makna isi konten tulisan, tetapi link yang terdapat pada gambar tersebut hanya berupa alamat URL gambar, dengan sedikit modifikasi disini saya akan berbagi Cara Membuat Efek Remote Link Pada Gambar. Baca juga Cara Membuat Tampilan Gambar Berputar Di Blog.


Bagi anda yang mungkin mempunyai koleksi galeri Foto/gambar di blog Membuat Efek Remote Link Pada Gambar layak anda coba, karena pada semua gambar akan kita buat link dan akan di-Remote linknya sehingga akan mengarah ke alamat URL yang anda tentukan. Singkatnya seperti halnya anda menggunakan Remote TV dirumah, dengan Klik beberapa gambar yang diinginkan maka akan berpindah tanyangan ke alamat URL yang anda tentukan.
Efek Remote Link Pada Gambar akan memungkinkan hover yang berbeda saat pada link tersebut tersorot oleh mouse. Secara langsung link dapat di atur sesuai dengan keinginan apabila pada link tersebut ingin kita jadikan sebagai remote yang apabila saat onmouseover maka secara otomatis akan terjadi hover pada gambar beserta linknya yang akan mengarah pada konten halaman blog anda

Berikut Cara Membuat Efek Remote Link Pada Gambar, Cukup anda copy kode berikut lalu pastekan pada kolom postingan baru mode HTML

<style>
.remote{ position: relative; }
.remote a{ text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; }
.remote a img{ width:125px; height:125px;}
.remote a:hover{ background: #cecece; }
.remote a .name{ font: 18px Georgia, Serif; }
.remote a:hover .name{ color: #900; font-weight: bold; }
.remote a:hover img{ border: 5px solid #52e052; margin: -4px; }
.remote a .photo{ display: block; position: absolute; width: 125px; height: 125px; }
#img1 .photo{ top: 0; left: 0; }
#img2 .photo{ top: 0; left: 134px; }
#img3 .photo{ top: 134px; left: 0; }
#img4 .photo{ top: 134px; left: 134px; }
</style>

<div class="remote">
<a href="http://URL ANDA" id="img1">
<span class="name">Photo 1</span><br />
Silahkan ganti dengan TITLE URL ANDA
<span class="photo">
<img src="URL GAMBAR ANDA" alt="ATRIBUT GAMBAR ANDA" />
</span></a>

<div class="remote">
<a href="http://URL ANDA" id="img2">
<span class="name">Photo 2</span><br />
Silahkan ganti dengan TITLE URL ANDA
<span class="photo">
<img src="URL GAMBAR ANDA" alt="ATRIBUT GAMBAR ANDA" />
</span></a>

<div class="remote">
<a href="http://URL ANDA" id="img3">
<span class="name">Photo 3</span><br />
Silahkan ganti dengan TITLE URL ANDA
<span class="photo">
<img src="URL GAMBAR ANDA" alt="ATRIBUT GAMBAR ANDA" />
</span></a>

<div class="remote">
<a href="http://URL ANDA" id="img4">
<span class="name">Photo 4</span><br />
Silahkan ganti dengan TITLE URL ANDA
<span class="photo">
<img src="URL GAMBAR ANDA" alt="ATRIBUT GAMBAR ANDA" />
</span></a>
</div>

Keterangan - Perhatikan tulisan yang berwarna Merah, silahkan sesuaikan dengan keinginan anda. Demikian Cara Membuat Efek Remote Link Pada Gambar Selamat mencoba dan semoga bermanfaat.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Efek Remote Link Pada Gambar
Ditulis oleh= A.T. (Ref: Devy Indriyani

http://atutupohosepfeup.blogspot.com/2014/03/cara-membuat-efek-remote-link-pada.html

= TERIMA KASIH =

Sumber:
Disini