Cara Membuat Efek Remote Linking Pada Gambar Di Blog

Cara Membuat Efek Remote Linking Pada Gambar Di Blog - Remote Linking bertujuan agar gambar yang ada pada postingan apabila gambar tersebut di klik maka akan menuju link yang telah di targetkan. Selain itu, remote linking pun akan semakin menambah daya tarik blog anda. Berikut cara membuat efek remote linking pada gambar di blog, mangga disimak langkah-langkahnya.

1. Langkah pertama, silahkan anda membuat postingan baru

2. Pilih HTML, lalu masukkan script dibawah 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="https://goo.gl/z03Qat" 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/AVvXsEgzP0swNHACp5uMgD-6tsz2rjvW4xAsysFtDxdxm_vg8QaXcYlYJUM03IjuDsoAszsv81nmeWFXo4KrHJTPmbugatyszlz9qtTjgnKgvpqsyDxB20w8WrQM35DVz603yRPNsj6uYS7vL_q_/h120/1.JP
" alt="" />

</span></a>

<a href="https://goo.gl/a9g4n6" 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/AVvXsEgra53E3w9q61ojIGTw86VP3uXacu6VZRICX1tArJ2UNdMASwIwZOg1o66LYICTvnqYP9xbRUswPqintHCxNesX2Fok2dTVcNJ6p-B8UTbb6gf1FCd3J8hKefGv-RYRrgJEDYA9DNgwake-/h120/2.jpg
" alt="" />

</span></a>

<a href="https://goo.gl/XltEvr" 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/AVvXsEhLj1BtBh2mdB3gLyL3bZQykyXn3z7Z9X3-11lHhZl-MZ-CWl7e80fdYGGnZd-dP8QC1UYNmHJCyyymxdBO8464fUyvFmlAy3LjLQqbZ32D7B0rzsaFI9fYHDpVdZoTAzsN3UdE_O2DvKAb/h120/3.JPG" alt="" />

</span></a>

<a href="https://goo.gl/ggLcE1" 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/AVvXsEhM2j6xbTorTTLtNpf2UAxnKlDvBSX9820wR2dl4fsyC0xsKzUUaogNhSffVSnNs31htw5hoCszEk79OeOx5ZjZJc2n2NhsvwwBdUa4xxFhD_i36EMXApGqTMMABI3XJNpTw4B-G1LjXvqD/h120/4.JPG" alt="" />

</span></a>

</div>

Baca juga :
» Cara Download Video Youtube Tanpa Software
» Cara Mudah Memasang Widget Ganti Background Blog Bergerak
» Cara Mudah Membuat Widget Banner Iklan Link Teks Pada Blog

3. Pilih Compose » Publikasikan, kemudian lihat hasilnya

Demikian cara membuat efek remote linking pada gambar di blog, semoga dapat bermanfaat. Terima kasih atas kunjungannya and happy blogging.

Please Share » » Facebook Google+ Twitter