- Back to Home »
- Blogger , Tips and Trick »
- Cara Membuat Gambar Pratinjau di Blog
Posted by : Eja Gaming
Minggu, 10 Maret 2013
1.Login Blog
2.Klik Nama Blog → Template → Edit HTML
3.Cari kode berikut menggunakan Ctrl+F atau F3
]]></b:skin>4.Masukkan kode berikut tepat di atas kode ]]></b:skin>
/* ---------------5.Klik simpan
Easiest Tooltip and Image Preview with jQuery
---------------------------------- */
#Imagetip{
margin:0;
padding:0;
}
#Imagetip li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
6.Untuk memanggilnya Masukkan kode berikut
<ul id="Imagetip">7.Ganti tulisan berwarna Merah dengan URL gambar anda
<li><a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXYH8orVfHGRLa74-4n25sN-U4r8OrsjhrbLN1FzVVoKOJI7sqAfhKj_8lLOrJCUFon7PyPPeTpZaPzNcSmojCoSQ8dvkDdKzI9cnEBLQtNCd8aGRgk12-a_QucEsG5bXhMy9l_bJx5aI/s1600/1.jpg%20" title="Lake and a mountain"> <img alt="gallery thumbnail" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXYH8orVfHGRLa74-4n25sN-U4r8OrsjhrbLN1FzVVoKOJI7sqAfhKj_8lLOrJCUFon7PyPPeTpZaPzNcSmojCoSQ8dvkDdKzI9cnEBLQtNCd8aGRgk12-a_QucEsG5bXhMy9l_bJx5aI/s1600/1.jpg" width="100px" /></a></li>
<li><a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_J2ittfFKSrTXSgWS9haJr9H4HsClLtmWIPaRHbVCq3XQq6-ceSkdkCVdNn17rAG8gFPNWaAT0gwsHydr1Ssvag4a72xrSX8TEEqdEMQiOK5rPYENE1C5AhGlDa6n475f0v_7LpxfrZM/s1600/2.jpg" title="Fly fishing"><img alt="gallery thumbnail" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_J2ittfFKSrTXSgWS9haJr9H4HsClLtmWIPaRHbVCq3XQq6-ceSkdkCVdNn17rAG8gFPNWaAT0gwsHydr1Ssvag4a72xrSX8TEEqdEMQiOK5rPYENE1C5AhGlDa6n475f0v_7LpxfrZM/s1600/2.jpg" width="100px" /></a></li>
<li><a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2eXzs6vu1Nso3YKuyVhbg8BCebp0b423z93FwnquskCNJPEfUiEiGg_dbMeGNW8CfbA5fa-FxdtqDNJwXig9fwAitHaNO3tM8h_fmm2ZZygvM-BR8a413tScC2AcdA0wlViOtfzekeA/s1600/3.jpg" title="Autumn"><img alt="gallery thumbnail" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2eXzs6vu1Nso3YKuyVhbg8BCebp0b423z93FwnquskCNJPEfUiEiGg_dbMeGNW8CfbA5fa-FxdtqDNJwXig9fwAitHaNO3tM8h_fmm2ZZygvM-BR8a413tScC2AcdA0wlViOtfzekeA/s1600/3.jpg" width="100px" /></a></li>
<li><a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjja5QpGv9pany8RjAXOM8ouGyTu2slylcDqZiVnDcNjDYboog4i4tFGGYqYXkLFYfwUHhjvfQLgtv1n6w1uqICPuba5H2zH95-geCV07vg6xZtn-gQJJuaPT8tjVdLcwtfLnV5vCXmsKE/s1600/4.jpg" title="Skiing on a mountain"><img alt="gallery thumbnail" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjja5QpGv9pany8RjAXOM8ouGyTu2slylcDqZiVnDcNjDYboog4i4tFGGYqYXkLFYfwUHhjvfQLgtv1n6w1uqICPuba5H2zH95-geCV07vg6xZtn-gQJJuaPT8tjVdLcwtfLnV5vCXmsKE/s1600/4.jpg" width="100px" /></a></li>
</ul>