Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Motion Image Gallery

Gambar/image akan mengalir dari arah kanan ke kiri atau sebaliknya dari kiri ke kanan ketika mouse di arahkan di atas image. Kecepatan gerak Motion Image Gallery dapat diatur dengan merubah variable kecepatannya.

Langkah pengerjaan Motion Image Gallery :

1. Download motiongallery.js dan upload di file hosting supaya template menjadi lebih ringkas.

DOWNLOAD motiongallery.js.

2. Gunakan link hasil upload motiongallery.js membentuk KODE :

<script type="text/javascript" src="http://..../..../motiongallery.js"></script>

3. Login di Blogger --> Tata Letak --> Edit HTML.

4. Cari KODE ]]></b:skin> kemudian simpan KODE CSS persis di atasnya, sedang motiongallery.js di sebelah bawahnya.

5. Langkah terakhir KLIK Simpan Template.

KODE CSS

#box{
border:10px solid red;
width:500px;
background:url(http://i48.tinypic.com/2d6l4bc.jpg);
}
#boxdalam {
margin:10px 0;
position:relative;
overflow:hidden;
width: 460px;
height: 390px;
}
#boxdalam a img { padding:20px; margin:0 6px;
border: 8px solid #fff;
}
#boxdalam a:hover img {
border: 8px solid #000;
}
#statusdiv {
font-size:16px;
font-family: Verdana;
font-weight: bolder;
background: #3333FF;
border: 3px solid #99CCFF;
padding: 4px;
position: absolute;
left: -300px;
visibility: hidden;
}
#boxdalam a:hover {
color:green;
}

6. Gunakan KODE HTML di bawah ini di bagian body di antara tag <body> dan tag </body> atau pada saat membuat posting.

xHTML

<div id="box"><div id="boxdalam">
<div id="gallery" style="position:absolute;left:0;top:0;white-space: nowrap;">


<nobr id="trueContainer"><a href="javascript:enlargeimage('Link-1')"><img src="image-1.jpg" border=1></a> <a href="javascript:enlargeimage('Link-2', 300, 300)"><img src="image-2.jpg" border=1></a> <a href="Link-3"><img src="image-3.jpg" border=1></a> <a href="Link-4"><img src="image-4.jpg" border=1></a> <a href="Link-5"><img src="image-5.jpg" border=1></a> <a href="Link-6"><img src="image-6.jpg" border=1></a></nobr>


</div>
</div></div>

Catatan :

1. Image yang di gunakan di motion image gallery berukuran width=400px dan height=332px.
2. Jika ingin menambah jumlah image langsung saja tambahkan KODE seperti halnya <a href="Link-6"><img src="image-7.jpg" border=1></a>
3. Link-1 s/d Link-6 merupakan Link yang berkaitan dengan image yang ditampilkan.
4. image-1.jpg s/d image-6.jpg adalah URL/Link image yang akan ditampilkan.
5. Apabila ingin merubah ukuran tampilan gambar, image maka beberapa variable pada KODE CSS harus dilakukan perubahan.
6. Di bawah ini tersedia beberapa Link gambar yang bisa digunakan untuk mencoba :

- http://img.theomegaproject.org/thumbs/2009/12/13.jpg
- http://img.theomegaproject.org/thumbs/2009/12/14.jpg
- http://img.theomegaproject.org/thumbs/2009/12/68.jpg
- http://img.theomegaproject.org/thumbs/2009/12/118.jpg
- http://img.theomegaproject.org/thumbs/2009/12/101.jpg
- http://img.theomegaproject.org/thumbs/2009/12/114.jpg


Semoga berhasil dengan baik dan bermanfaat untuk blog kamu !!!

1 komentar:

 
GR | Edited by | gubhug reyot