Cara Membuat Efek Remote Link Pada Gambar

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 seperti tombol DEMO SHOW dibawah ini:




DEMO SHOW


Berikut Cara Membuat Efek Remote Link Pada Gambar, cari kode ]></b:skin> pada Template Anda, gunakan Ctrl+F untuk memudahkan pencarian, selanjutnya copy kode berikut lalu pastekan diatasnya.

.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; }

Jika ingin Tampil pada postingan gambar, selanjutnya copy kode HTML berikut pada postingan Anda mode HTML, bukan yang Compose, lalu publikasikan hasil gambar Anda, dan lihat hasilnya

<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