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 langkah2 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 :
Maka hasilnya akan terlihat saat anda menekan tombol
BUKA dibawah ini
Welcome to my blog 😊
