Untuk lebih jelasnya silahkan lihat screenshoot atau demo ...
Cara Membuat :
1. Tambahkan JavaScript sebelum
</body>
<script src='https://sites.google.com/site/kangistea/js/imgpreview.js' type='text/javascript'/>
2. Untuk mengedit tampilan, simpan kode CSS ini sebelum
]]></b:skin>
#preview{
position:absolute;
border:1px solid #ddd;
background:#eee;padding:5px;
display:none;color:#333;
}
3. Cara Menggunakan Untuk menambilkan image preview ini, ketika menulis artikel sobat harus menambahkan kode class="preview" dan title="keterangan gambar" untuk menambah keterangan dibawah gambar, pada teks link atau gambar yang akan di munculkan previewnya.
Contoh kode pada gambar demo :
<a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjB0ZGplDVCqTm1TgB-PNFZ822Yqi_Q_Lc0h2Dv46vni2L08Z_v_Q8J-CuAdPWok5vbaJ4L7y6DyaTv2GvFNNd1tMGy4tRUwqIewox0hULQPGLPr6bA1uQCtSIFSNdcG0YbK-AilVyEwM/s1600/citra-kirana.jpg" title="Citra Kirana Cakepan pake jilbab kan?"><img alt="citra kirana" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjB0ZGplDVCqTm1TgB-PNFZ822Yqi_Q_Lc0h2Dv46vni2L08Z_v_Q8J-CuAdPWok5vbaJ4L7y6DyaTv2GvFNNd1tMGy4tRUwqIewox0hULQPGLPr6bA1uQCtSIFSNdcG0YbK-AilVyEwM/s1600/citra-kirana.jpg" width="150" /></a>
<img alt="....... width="250" /> adalah gambar yang diperkecil menjadi 150px, bisa juga diganti dengan Teks.
Okey sob, itulah Cara Membuat Image Preview Dengan JQuery. Semoga bermanfaat.
Source
assalamualaikum gan
BalasHapuskalau boleh saya sarankan agan mungkin bisa di update infonya banyak pembaca tidak mengerti dengan tutorial ini contoh dari mana datangnya code href karan pembaca tidak semua sudah mengenal code css dan html oleh karena itu moho di update dan yang kedua kalau bisa scrip pemasangan untuk blogger dan word press html di bedakan, karena tidah semua pemebaca itu semua blogger terimakasih