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 sobat2. 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 kodeHTML 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 :
- Perhatikan tulisan yang berwarna Merah, silahkan sesuaikan dengan keinginan anda.
- Demikian Cara membuat Efek Remote Link pada gambar Selamat mencoba dan semoga bermanfaat
Tidak ada komentar:
Posting Komentar