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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Efek Remote Link Pada Gambar
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

8 komentar

  1. keren sist tertarik sekali sama triknya begitu indah dan cantik sekali :)

    BalasHapus
    Balasan
    1. Terimakasih sist..saya hany tahap pembelajaran saja..

      Terimakasih sudah berkunjung

      Hapus
  2. Balasan
    1. saya hanya menggunakan kode style dengan sedikit modifikasi, karena tujuan saya share tutor ini, mungkin disalah satu menu laman blog kita ada kolekso foto, jadi alangkah baiknya jika ada seorang pengunjung yang klik foto tersebut dapat mengarah ke link yang kita tentukan, itu saja

      Hapus
  3. klo gambarnya lebih dari 4 gimana, perlu tambahin css gambar ga mbak?.

    BalasHapus
  4. keren banget toturialnya....

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK