√ Cara Menciptakan Dampak Remote Linking Pada Gambar Di Blog

Cara Membuat Efek Remote Linking Pada Gambar Di Blog - Remote Linking bertujuan semoga 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 menciptakan imbas remote linking pada gambar di blog, mangga disimak langkah-langkahnya.

1. Langkah pertama, silahkan anda menciptakan postingan baru

2. Pilih HTML, kemudian 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/AVvXsEgsprT5SWNaN1jP0lZBPC-tOFYN5Lg-cigULPGNDSAuUpYznbYpHIrflersEmF9FWOaq4p3cnoAfHYfdulNg4460HbSKuq61sYlIeM6nRlKqT1f0VY0uYe3hyLyPZGTlsblWMh_-KHm6kWW/h120/1.JP
 " alt="Cara Membuat Efek Remote Linking Pada Gambar Di Blog √ Cara Membuat Efek Remote Linking Pada Gambar Di Blog" />

</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/AVvXsEjrJQ1O13oL1ohLE64m8DwXbXQCcBM5LQI_QxTbd0lsVSeo7J2K9p6yzflgKIqeKAKM1o2ujKOSkd7eeots_BAz83xfkZhbcOObcfhn5KFZZro-bXEFg0GrikGkHojPgqWHmfTIEkfGjbd6/h120/2.jpg " alt="Cara Membuat Efek Remote Linking Pada Gambar Di Blog √ Cara Membuat Efek Remote Linking Pada Gambar Di Blog" />
 

</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/AVvXsEhFcDhQDsEdhYPhWZNh05rX9iDM0c3SZFQufMp0pMZ4ffWl3_yTvz07CuC3AFkZXeYVdTci0CjMT2NbwK4EN6zhCkXYYFHlvZymxIrSpR1SHWbmvLpnHyzjy-XFrcxj6cTK20BHe_l2lmOC/h120/3.JPG" alt="Cara Membuat Efek Remote Linking Pada Gambar Di Blog √ Cara Membuat Efek Remote Linking Pada Gambar Di Blog" />

</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/AVvXsEin0RB5GU7qZ0Klnokdce7dpEVO_Hkkqbh4W4SFV6d7ncY09LmudNBdzACm15auxq2chh7OClJ69gZlVE-SBF4JCMgI0Zl5a94VwZvsttYbiSvNTPsSFJgQoOVnKzmUmZisw4-1PC2Ol5Cg/h120/4.JPG" alt="Cara Membuat Efek Remote Linking Pada Gambar Di Blog √ Cara Membuat Efek Remote Linking Pada Gambar Di Blog" />

</span></a>

</div>

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

3. Pilih Compose » Publikasikan, kemudian lihat hasilnya

Demikian cara menciptakan imbas remote linking pada gambar di blog, semoga sanggup bermanfaat. Terima kasih atas kunjungannya and happy blogging.

Sumber http://ap-thea.blogspot.com