Cara Membuat Preview Gambar Di Blog Dengan CSS Dan HTML

Cara Membuat Preview Gambar Di Blog Dengan CSS Dan HTML
Assalamu'alaikum sobat blogger semua,tutorial kang roni kali ini masih berhubungan dengan gambar yang sebelumnya kang roni sudah memposting tutorial blog tentang Gambar di blog Bisa di Zooming akan tetapi imajinasi kang roni selalu ingin lebih canggih dan bisa lebih profesional biar para sobat blogger semua bisa ikut memanfaatkan apa yang sudah kang roni hasilkan.

Setelah hampir setengah hari kang roni mengadakan penelitian tentang Cara Membuat Preview Gambar Di Blog Dengan CSS Dan HTML akhirnya kang roni mendapatkan hasil yang cukup baik untuk di share kepada teman-teman,untuk Membuat Preview Gambar Di Blog Dengan CSS Dan HTML sobat bisa ikuti langkah-langkahnya dibawah tapi sebelumnya sobat bisa lihat contoh gambar dibawah ini dengan mengarahkan/meletakkan panah mouse diatas gambar tanpa mengklik,maksud kangroni gambar akan mempreview otomatis saat dilewati panah mouse.

KLIK UNTUK MELIHAT DEMONYA DIBLOG PERCOBAAN


Langkah Membuat Preview Gambar Di Blog

1.Login Blogger.com
2.Buka halaman Rancangan kemudian pilih Edit HTML
3.Download Template Lengkap untuk keamanan bila terjadi kesalahan edit
4.Beri centang pada kotak Expand Template Widget
5.Cari kode ]]></b:skin> setelah ketemu taruh kode CSS dibawah ini persis diatas kode tadi (]]></b:skin>).


<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

6.Save template.
7.Kemudian masukkan kode HTML dibawah ini kedalam elemen Tambah Gadget atau bisa juga ditaruh dalam postingan anda seperti contoh diatas.


<a class="thumbnail" href="http://roningasinanblog.blogspot.com/" title="Kang Roni Blog"><img src="http://en.clipart-fr.com/data/clipart/coloring_02/coloring_0748.gif" width="100px" height="66px" border="0" /><span><img src="http://en.clipart-fr.com/data/clipart/coloring_02/coloring_0748.gif" />
Tutor By Kang Roni Blog </span></a>


8.Simpan dan lihat hasilnya Preview Gambar Di Blog Dengan CSS Dan HTML sudah jadi.

Keterangan:Untuk code pada langkah nomor tujuh/7 terdapat dua link gambar yang diberi warna merah,link pertama akan tampil sebagai gambar kecil sebelum di preview dan link kedua akan tampil sebagai gambar preview/pratinjau otomatis.


Kemudian Kedua link tersebut sobat ganti aja dengan link gambar yang sobat kehendaki,bisa dengan dua link gambar yang sama dan bisa juga dengan dua link gambar yang berbeda.

Perlu di ingat saat anda menaruh kode HTML tadi kedalam postingan pastikan dalam mode Edit HTML bukan Compose.

Related Post:

8 comments:

arishuda said...

gan Join Blog Saya please
hack-pas.blogspot.com

Anonymous said...

thanks a lot of

Regiawan Saputra said...

kok gak bisa sobb,,
bingung nih gimana naruhnya lagi

roni said...

Perlu diperhatikan sob, taruh kode langkah nomor 7 pada mode edit HTML setelah itu jangan pernah klik mode compose sebelum anda menerbitkan entri.

Perbedaan antara Mode Edit HTML dan Mode Compose/Rich Text

qray uzumaki said...

download anime sub indo
animesubndo.blogspot.com

Alfiado Arsyidi said...

makasih sebelumnya, kalo mau nyoba yang bisa diklik tapi ada tombol closenya gtu gmn ya?
mampir idnsoftware.blogspot.com

Spectra Blouthing said...

sip gan, sangat bermanfaaat..

http://blouthing.blogspot.co.id/

Peny Fitriany said...

wah mantap

pasti terharu baca kisah2 di blog ini:
http://www.yukhijrah.id/

Post a Comment