Cara Membuat Efek Remote Linking Pada Gambar

Semua-Niche|Cara Membuat Efek Remote Linking Pada Gambar,Hallo semua
maaf untuk akhir-akhir ini saya jarang postingan karena sedang memodifikasi
tampilan template blog ini agar terlihat menarik,Modifikasi ini dilaksanakan pastinya
untuk menambah kenyamanan anda dalam "berselancar" di blog ini, Ok hari
ini saya akan memberikan tutorial membuat remot linking,Apa itu remote linking ?

Baca Juga ! : Cara Mudah Membuat Widget Translator Halaman Blog

Yaitu dimana blog yang anda posting atau tampilankan di postingan/blog anda
akan dimasukan link yang dimana apabila di klik gambar tersebut maka akan menuju
link yang anda masukan ke script nya.

Langkah Pembuatannya :

1.Untuk Langkah Pertama,Silahkan masuk ke dalam blog anda
2.Mudah saja,Silahkan masukan kode dibawah ini ke dalam postingan anda
3.Pastikan untuk dibagian HTML bukan COMPOSE

<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://semuaniche.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/AVvXsEjJ4ikHdaaUNvGvB2kvhVkJI734B-NrQaDNk8RVKs1Nm63a4MV4QQ2PiYIbB0f_cJiV-b8ALnECcVT5OBy4LRbPT_pWdHme02faA2oM9FU6jY_DKLeQTraMho_DZ0woQkFBuCkTSJa45sdA/w419-h285-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" />
</span></a>

<a href="https://semuaniche.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/AVvXsEi331XymPuUaxTbAcz8w86x4Eiro_kJHyW-C696hPJf2Tj3uPaSzlRZTgtqwX_W3rjNqR-fR70eguqalUAfgqirNa_C6hzpQQpw9cqz64hWYD0W7XjUEu7gGcDMcDfttj-n6qo4e8VPX_Py/w419-h285-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" />
</span></a>

<a href="https://semuaniche.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/AVvXsEgyVWrNri7Lv1yi2wrVVuNRrgVjk004-Vhr-Oh6ckhEdvu9JdfWdqAF9y-43MfPTS0HQ5tnX15IfxRoGvzvh_U0yZrPBV6UzwTJwmX1amwMcBCt4ilqENY4vQheLt1H0JvnjeUl6x19ghdm/w419-h285-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" />
</span></a>

<a href="https://semuaniche.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/AVvXsEjKhISh4jdLY8a65c3lfp3YzQn81BKSZhOPPhl0mDo5GwEek-lomBVJMVTrKLJllf8xyc53MAVfvHuGcV8inJcb96upmoslfL434IeO79ZwZBVLqeVjBWAXNehII8MWtcKegDWobLl7_Wpl/w419-h285-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" />
</span></a>
</div>

Catatan :  Agar gambar tersebut ke blog anda silahkan
                anda ganti url blog semua-niche dengan blog anda