Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Jumat, 04 November 2016

Cara Membuat Preview Gambar Di Blog Dengan CSS Dan HTML

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.


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi