Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Efek Remote Linking Pada Gambar di Blog

Efek Remote Linking Pada Gambar di Blog
Membuat Efek Remote Linking Pada Gambar di Blog – 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 nampak terlihat berbeda dari link-link lainnya yang ada. Efek Remote Linking Pada Gambar di Blog ini akan memungkinkan hover yang berbeda saat pada link tersebut tersorot oleh mouse. Secara langsung link dapat di atur sesuai dengan keinginan apabila pada link tersebut ingin kita jadikan sebagai remote yang nantinya apabila saat onmouseover maka secara otomatis akan terjadi hover pada gambar beserta linknya yang akan mengarah pada konten halamannya. Pemasangannyapun juga sangat mudah dan tidak perlu edit HMTL sehingga anda tidak usah memasukkan kode kedalam template blog. Agar lebih jelasnya, berikut adalah tutorial untuk Membuat Efek Remote Linking Pada Gambar di Blog:

1. Login ke akun blogger.
2. Lalu copy kode berikut 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="http://mas-andes.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://lh4.googleusercontent.com/-ysZHoIsK-8o/UdBzKrwDnAI/AAAAAAAAFaY/bC-HEpgiOy8/w419-h285-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" />
</span></a>

<a href="http://mas-andes.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://lh4.googleusercontent.com/-q-omq3Kwefw/UdBzKaM0lMI/AAAAAAAAFaU/hTaPEmPJgx4/w419-h285-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" />
</span></a>

<a href="http://mas-andes.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://lh6.googleusercontent.com/-YmOC3wCaJ3M/UdBzJ1tYBpI/AAAAAAAAFaE/WxcFAZ3YZ7k/w419-h285-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" />
</span></a>

<a href="http://mas-andes.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://lh6.googleusercontent.com/-yDwXmValNlc/UdBzJ5UQXiI/AAAAAAAAFaI/Z2PBUHYHaDU/w419-h285-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" />
</span></a>
</div>
Keterangan:
Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
Ganti URL photo dengan gambar yang di inginkan.

3. Selanjutnya paste kedalam kolom posting mode HTML, kemudian bisa langsung klik Publikasikan.

DEMO:

Berlangganan artikel via email

43 Response to "Membuat Efek Remote Linking Pada Gambar di Blog"

Terima kasih, bermanfaat banget Mas tutorial efek remote linknya. Photonya juga bagus.hehe

Balas

tips baru lagi nih. thanks sudah berbagi sob. hehehe

Balas

selamat Pagi Sobat,,,hm sepertinya saya baru mendengar istilah remote linking pada gambar Sob...foto fotonya keren keren yaa Sob,,,yaa 11 12 dengan foto saya,,hehehehe

Balas

Tutorial penting dan berguna sekali sobat, perlu disave dulu nih sob.terima kasih banyak sudah berbagi

Balas

wow.. ini , ahaha premaan kampus :p ..
*piss bang jangan palak saya -___-

tuh kalo textnya kebanyakan bisa gak ngepas sama panjang gambarnya, apa textnya bisa di show/hide :D ..
itu yg ngasi nama efeknya siapa sih, kreatip amat.

Balas

keren mas tutornya, sama keren ama potonya, hehhehe

Balas

wowww keren dan menawan gambarnya

pengen nyoba saya

Balas

Eheheh ....kok bisa keren gitu yah efeknya. Gini nih kalau jago css
Sayang ..potonya ndak mendukung....heheheh.
Peace mas brow

Balas

keren mas. seandainya saja saya pakai blogspot pasti bisa gunain ini tips

Balas

wajib d coba nih bang hehehe..nice pokonya :D


komen back yeee

Balas

hmmm,,makin manteb saja nih mas andes post nya,,coba nggak yaa

Balas

tiada hari tanpa....nyetones nih...kayaknya mas andes hehehe :)

Balas

kalo udah dua hari...jangan lupa di angetin juga ya mas PP...hehe
biar ndak bau basi :)

Balas

top mas....cuman warna background dalam kotaknya ndak bisa di rubah ya mas...

tapi ndak masalah juga sih....tetep idealis dan keren abisss... :)

Balas

Artikel baru lagi nikh yah Mas Andes...siip mantap Tiadak hari tanpa css dan javascript
nik Mas Andes....salam sukses..Mas Reques Tips cara membuat Slider post buat tampil di page blog lengkap gambar dan link nya trima kasih Mas...
by : xxx.karristaent.blogspot.com

Balas

mungkin link dibawah ini bisa menjawab request mas saud.

http://mas-andes.blogspot.com/2013/06/membuat-slider-di-blog-with-css3.html

http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html

http://mas-andes.blogspot.com/2013/05/jquery-slider-futured-content-blog.html

http://mas-andes.blogspot.com/2013/04/jquery-headline-fitur-post-slider-di.html

jika kurang sesuai ntar bisa dibahas dalam artikel yang baru lagi mas

Balas

bisa kok mas tinggal poles dikit aja kelar :)

Balas

mumpung pikiran masih fresh ayuk notepad++nya dibuka bang *hohoho

Balas

selamat pagi kembali mas hayardin putra..
gapapalah kalo 11 12 mas, yang penting bukan 69 aja ya
*hohoho

Balas

lhoo kenapa di angetin mas, kulkasnya macet yah *hohoho

Balas

waduh.. tak sepantasnya seorang pria memalak wanita *hohoho

bisa dong tentunya, kasih scroll juga bisa.
iyalah mas bro gituloh, senyummu membawa inspirasi berat miz :D *ahahaa..

Balas

mau nyaingin profilnya bang alex :D
*hohoho

Balas

waduh pengen jungkir balik deh rasanya, setiap kata yang muncul dari mbak anisa ini selalu bikin dadaku loncat batu *wahaha

silahkan coba mbak :)

Balas

gimana tuh mbak indah, depannya udah dikasih sayang ternyata belakangnya 'potonya ndak mendukung.
#udah naik pohon langsung terjun lagi deh
*wahaha

Balas

iya kang download, ana2 wae *hohoho

Balas

berhubung masih pagi pasti masih pake kolor ya mas *hohoho

Balas

silahkan saja bang boleh dicoba biar mantep :)

Balas

emmm kira2 gimana yaa kasih tau gak yaa..

Balas

Wah selain bisa diaplikasikan sebagai gambar-gambar tambahan pendukung post ataupun sidebar, bisa dikreasikan jadi featured post juga nih, tinggal ngatur ukuran .remote nya aja! Kelihatannya jauh lebih ringan dari slider-slider gambar lainnya. :)

Balas

support kembali buat mbak may :)

Balas

haha ada ada saja. masak pake kolor haha

Balas

berbagi kemeriahan mas..sukses selalu ya mas

Balas

Loh adminya ganti ya hehe...

Balas
avatar
Anonymous

Kalau dibikin vertikal atau hozontal bisa nggak ya mas... keren juga, bikin tampilan jadi tidak monoton :)

Balas

bisa mas, pada margin: 0 0 0 270px bisa diganti untuk merubah posisi teks.

Balas

mantap nih tutorial, remote linking memang keren. bisa memperindah blog atau posting. sukses selalu ya....

Balas

memang mas andes benar2 pakarnya kalo urusan beginian. Tutornya keren2...

Balas

Keren banget nih mas andes,,,selamat pagi selamat beraktifitas

Balas
avatar
Anonymous

Cantik Dan Keren Artikel nya Mas Andes
apa lagi yang yang ada di dalam box foto nya
Cantik fresh .. idzin simak yah.. bisa'an lah ari
Master The King blog mah,. bikin Artikel na hhhhh
salam sukses terus yah Mas..?

Balas
avatar
Anonymous

Duhh...!!! Punten Mas Andes..
Komentar saya di atas salah/keliru masukan ID..
mohon maaf yah Mas..? tanpa unsur kesengaja, an
Bila kurang sedap di pandang hapus saja gak apa2..
Karena emang saya yg salah.. panona kapahung...hkhkh

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Efek Remote Linking Pada Gambar di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode