Membuat Efek Remote Linking Pada Gambar di Blog

Membuat Efek Remote Linking Pada Gambar di Blog – 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 nampak terlihat berbeda dari link-link lainnya yang ada. Efek Remote Linking Pada Gambar di Blog ini 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 nantinya apabila saat onmouseover maka secara otomatis akan terjadi hover pada gambar beserta linknya yang akan mengarah pada konten halamannya. Pemasangannyapun juga sangat mudah dan tidak perlu edit HMTL sehingga anda tidak usah memasukkan kode kedalam template blog. Agar lebih jelasnya, berikut adalah tutorial untuk Membuat Efek Remote Linking Pada Gambar di Blog:

1. Login ke akun blogger.
2. Lalu copy kode berikut ini.

<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: #ffefcd; }
.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://mas-andes.blogspot.com" id="img1">
<span class="name">Photo 1</span><br />
Silahkan ganti dengan deksripsi teks yang di inginkan.
<span class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg54NtFY7supyax8PUNYNR9Du984h9MgfwET4yDxDSPII_zOXl7qLS1n9_FKgLXhHg_qEi6ikZBt0NFG_9aZ1ZLal4AZrEMVOayfyQG4wMK9v3QIAuNHcEUlmJWyvng6vDu0Tw6fl1JlCTW/w419-h285-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" />
</span></a>

<a href="http://mas-andes.blogspot.com" id="img2">
<span class="name">Photo 2</span><br />
Silahkan ganti dengan deksripsi teks yang di inginkan.
<span class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7S1FCV2YWvhmdXWWeH0cpSvEg_kh0cZmART1wwabZl0hlO2HW1GWALBc2Dqck_yu7anb1G1-vL90e_qz_5zGZx6TETyRIOY1ugCB7px_QyTrEk7G52ZkTzQ78H_8-h4blwphTaDL0jrLE/w419-h285-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" />
</span></a>

<a href="http://mas-andes.blogspot.com" id="img3">
<span class="name">Photo 3</span><br />
Silahkan ganti dengan deksripsi teks yang di inginkan.
<span class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-Y1cm66bu0YWRPmVj5LMgw2qH04FsKLbd_RZcc0ed4piVNgm8dxwwKFnNFaOkMkkRTbIKgLFC0Hf_Zt5gAZDi0aanvBvDhnzY3-gtv2NA8iujqySrpJ4IdQpB6qyPwe4hPGxIw_wxBMX/w419-h285-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" />
</span></a>

<a href="http://mas-andes.blogspot.com" id="img4">
<span class="name">Photo 4</span><br />
Silahkan ganti dengan deksripsi teks yang di inginkan.
<span class="photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitCNtMaMRAZd_hwZVFbHORAGvNlL0yNrYTgib1Za9M8D0o66Pk5s2L4EcLOKXsbuVsfaz8S56icJhKYJEpKZA3f6VX1YFmDo2jtYlwu9HWopC-4HRTkAY87K7IwdBieXZTq3-bxj3K8Mj7/w419-h285-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" />
</span></a>
</div>

Keterangan:

Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
Ganti URL photo dengan gambar yang di inginkan.

3. Selanjutnya paste kedalam kolom posting mode HTML, kemudian bisa langsung klik Publikasikan.

DEMO:

Photo 1
Silahkan ganti dengan deksripsi teks yang di inginkan. Photo 2
Silahkan ganti dengan deksripsi teks yang di inginkan. Photo 3
Silahkan ganti dengan deksripsi teks yang di inginkan. Photo 4
Silahkan ganti dengan deksripsi teks yang di inginkan.