Game Kutu Loncat Dengan Effect HTML5 JavaScript dan CSS3

Game Kutu Loncat Dengan Menuggunakan HTML5

Aww, browserna gote gk ada HTML5!

Kutu Loncat

Menggunakan HTML5, CSS3, JavaScript

.....by Rully Nur'mansyah

and TB4all

use ← → to move and space to (re) start...

Play

game over!

you scored 0 points

Restart

0

Mau Scriptnya ? Kamu Bisa Komentar dan Masukan E-mail Kamu dan Nanti Akan Kami Kirim Ke E-mail Kamu !

Cara Membuat Widget Alexa Rangking Di Blog

Cara Membuat Widget Alexa Rangking Di Blog, Tutorial Cara Membuat Widget Alexa Rangking Di Blog, Membuat Widget Alexa Rangking Di Blog, Widget Alexa Rangking Di Blog, Cara Membuat Widget Alexa Rangking Pada Blog, Cara Membuat Widget Alexa Rangking Pada Blogspot, Cara Membuat Widget Alexa Rangking Pada Blogger, Cara Membuat Widget Alexa Rangking Di Blog Dengan Mudah, How To Make  Widget Alexa Rangking On Blog

Langsung Aja Ke Tutorialnya :

Caranya :

1. Login Ke Akun Blogger Sobat

2. Masuk Ke Tataletak

3. Buat Gadget dan Pilih HTML/Java Script

4. Buka Tab Baru Pada Browser dan Masuk Ke alexa.com

5. Masukan URL Blog Sobat Lalu Enter.

6. Klick Get Details, Lalu ada Menu Ged Widget Klick!

7. Lalu Klick Build Widget

8. Nanti Ada 3 Pilihan Bentuk Widgetnya Lalu Copy/Paste Script Widgetnya Ke dalam Dadget HTML/Java Script Yang Tadi Di Buat, Save Dan Liat Hasilnya :D

Selamat Mencoba ^_^

Cara Membuat Effect Pop Up Pada Gambar/Foto Di Blog

---

Cara Membuat Effect Pop Up Pada Gambar, Membuat Effect Pop Up Pada Gambar, Effect Pop Up Pada Gambar, Effect Pop Up Untuk Gambar, Tutorial Cara Membuat Effect Pop Up Pada Foto, Effect Foto, Foto Effect, Pop Up Effect, Edit Foto, Cara Membuat Effect Pop Up Pada Foto, Membuat Effect Pop Up Pada Foto, Effect Pop Up Pada Foto, Effect Pop Up Untuk Foto Dengan Simple Dan Mudah Di Pahami

Effect Pop Up Untuk Gambar/Foto Ini Bisa Juga Di Gunakan Untuk Membuat Gallery Foto.
Langsugn Aja Dah Ke Tutorialnya.

Caranya :

1. Login Ke Akun Blogger Sobat

2. Buat Postingan/Entry Baru

3. Beri Judul ( Jika Ingin Membuat Gallery Foto )

4. Lalu Copy/Paste Script Di Bawah Ke Dalam Page HTML :

---

<style>

.thumbnail{
position: relative; 
z-index: 0; 
}

{
background-colo
.thumbnail:hove
rr: transparent;
z-index: 50;
}

uk gambar pop up*/
position: absolute;
background-c
.thumbnail span{ /*aturan css un
tolor: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
 up*/
border-width:
visibility: hidden;
}

.thumbnail span img{ /*aturan css untuk gambar po
p 0;
padding: 2px;
}

 /*aturan css untuk gambar pop up pada saat hover*/
visibility: visible;
.thumbnail:hover span
{top: 0;
left: 60px; /*posisi dimana gambar pop up akan diletakkan secara horizontal */

}
</style>

---

5. Jika Sudah Tambahkan Lagi Script HTMLnya Di Bawah Script Yang Tadi Di Kopas :

---

<a class="thumbnail" href="Link Tujuan Gambar"><img src="Link Foto Pertama Yang Kecil" width="100px" height="66px" border="0" /><span><img src="Link Foto Kedua Yang Besar" /><br />Beautifulness of Bali, Indonesia</span></a>

a class="thumbnail" href="Link Tujuan Gambar"><img src="Link Foto Pertama Yang Kecil" width="100px" height="66px" border="0"/><span><img src="Link Foto Kedua Yang Besar" /><br />Bali beautiful sunset</span></a>

---

6. Save Dan Lihat Hasilnya :D

Selamat Mencoba dan Berkreasi ^_^

Jika Tidak Ada Yang Di Mengerti Bisa Tinggalkan Komentar Di Postingan Ini :D dan Insyaallah Saya Bisa Membantu :D

Cara Membuat Gallery Foto Di Blog Dengan CSS

---

Gallery Foto, Foto Gallery, Cara Membuat Foto Gallery, Cara Membuat Gallery Foto, Cara Membuat Gallery, Tutorial Membuat Gallery Foto, Tutorial Membuat Foto Gallery, Cara Membuat Gallery Foto Di Blog, Cara Membuat Gallery Foto Dengan, Cara Membuat Foto Gallery Di Blogspot Dengan Mudah.

Contoh/Example :

• 
• 
• 
• 
• 
• 
• 

Langsung Saja Masuk Ke Intinya Ok :D:

1. Login Ke Akun Blogspot/Blogger Sobat,

2. Buat Postingan/Entry Baru Untuk Membuat Gallery Foto Blog Sobat,

3. Jika Sudah Membuat, Beri Judul Dengan Judul Yang Anda Inginkan,

4. Masuk Ke Bagian HTML, Lalu Copy/Paste Script Didalam Kotak Note Di Bawah Ke Dalam Bagian HTML Postingan Anda :

CSS Code :

<style>#gallery { padding:0; margin:0; list-style-type:none; overflow:hidden; width:400px; height:425px; border:1px solid #888; background:#fff url(images/image6.jpg) } #gallery li { float:left; } #gallery li a { display:block; height:30px; width:400px; float:left; text-decoration:none; border-bottom:1px solid #fff; cursor:default; } #gallery li a img { width:400px; height:30px; border:0; } #gallery li a:hover { background:#eee; height:239px; } #gallery li a:hover img { height:239px; } </style>

5. Jika Sudah Enter 1X dan Masukan Kode HTML Di Bawah :

HTML Code :

	<ul id="gallery">
	<li><a href="Link Tujuan Foto">
	<img src="Link Foto Yang Ingin Dimasukan" alt="#1" title="Foto1" /></a></li>
	<li><a href=" Link Tujuan Foto ">
	<img src=" Link Foto Yang Ingin Dimasukan " alt="#2" title="Foto2" /></a></li>
	<li><a href=" Link Tujuan Foto ">
	<img src=" Link Foto Yang Ingin Dimasukan " alt="#3" title="Foto3" /></a></li>
	<li><a href=" Link Tujuan Foto ">
	<img src=" Link Foto Yang Ingin Dimasukan " alt="#4" title="Foto4" /></a></li>
	<li><a href=" Link Tujuan Foto ">
	<img src="Link Foto Yang Ingin Dimasukan " alt="#5" title="Foto5" /></a></li>
	<li><a href=" Link Tujuan Foto ">
	<img src=" Link Foto Yang Ingin Dimasukan " alt="#6" title="Foto6" /></a></li>
	<li><a href=" Link Tujuan Foto ">
	<img src=" Link Foto Yang Ingin Dimasukan " alt="#7" title="Foto7" /></a></li>
	</ul>
	6. Simpan Postingan/Entry Dan Sobat Tinggal Buat Menu Navigasi Yang Mengarah Ke Postingan Yang Di Buat Itu :D. Sekian Dulu Tutorial Hari Ini Dari Saya Mohon Maaf Bila Kurang Di Mengerti dan Jika Ada Yang Tidak Di Mengerti Bisa Komentar Saja dan Insyaallah Saya Bisa Membantunya :D Selamat Mencoba ^_^

Cara Menghilangkan Pesan Label Pada Blog

               Kali ini TB4all Akan Memberitahu Bagaimana Cara Menghilangkan Pesan Label Pada Blog,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Menghilangkan Pesan Label Pada Blog .

Caranya :
1. Login Ke Akun Blogger Sobat
2. Pilih Rancangan > Edit HTML
3. Cari Kode ]]></b:skin> Pake Ctrl+F Supaya Lebih Cepat
4. Copy Script Dibawah Lalu Paste kan Diatas Kode ]]></b:skin>


Langsung Copy-Paste Script HTMLnya :


.status-msg-wrap{ display:none; }

5. Jika Sudah Simpan Templatenya Dan Lihat Apa Yang Terjadi ^_^

Cukup Simple Bukan :D, Terima Kasih Sudah Berkunjung Ke Blog Kami dan Terima Kasih Sudah Membaca Artikel Kami :D, Jangan Lupa Follow and Comment Ya :D, 

Oya Kalo Link Sobat Mau Di Tempel Di sini Comment Aja Di 

http://tb4all.blogspot.com/2012/04/halaman-tukar-link.html

10000000% Link Sobat Terpasang :D

Jika Sobat Mengalami Kesulitan Dalam Mengerjakannya Sobat Bisa Bertanya Kepada Kami Melalui Kontak Komentar.

Mohon Maaf Bila Ada Kesalahan Terhadap Script Mohon DiBeritahukan Kami Akan Selalu Membantu.