- upload photomu di Picasa atau flicker
- kemudian gunakan Notepad untuk mengetahui URL JPG kamu.
- log in ke blogmu
- kemudian buat entry baru / new post ( ingat gunakan HTML jangan Compose )
- Kopi paste code berikut kedalam entry barumu.
<html>
<head>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent
overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.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*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally
*/
z-index: 50;
}
</style>
</head>
<body>
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<br />
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>
<br />
</div>
</body>
</html>
6. Ganti yang berwarna merah denga URL JPG mu
7. Ganti yang berwarna biru dengan URL JPG mu
8. Ganti yang berlatar kuning dengan judul gambarmu
9.Pratinjau,simpan,publikasikan
Hasilnya kira kira akan seperti ini. Coba klik http://faktaremaja.blogspot.com/
Selamat mencoba
0 comments:
Post a Comment