Membuat efek remote link pada gambar ~ blog sepot

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.

Okey,.. langsung ajah ke TKP.

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </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; }

Penerapannya:

Masukan kode HTML di bawah ini ke dalam postingan blog sobat (Menggunakan Mode HTML).


<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

Maka hasilnya akan terlihat saat anda menekan tombol BUKA dibawah ini

Terima kasih telah membaca artikel tentang Membuat efek remote link pada gambar di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.