Welcome In Hudi Net

Contoh Sliding Login Dengan JQuery

Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member

Tutorial

Untuk membuatnya Silahkan : KLIK DISINI

Member Login

Lost your password?

Not a member yet? Sign Up!

.
  • Hot Cabe - Cabe 'an




Membuat Simple Slide Show Sederhana

Slide Show ini lebih sederhana ketimbang cara membuat sliding feature post yang sebelum pernah saya posting. Tampilannya tidak kalah menarik dan di jamin tidak lelet ditempatkan di blog anda. Sekarang mari kita bahas cara membuat simple slide show ini, ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-slideshow.js' type='text/javascript'/>
<style type='text/css'>
ul.slideshow{list-style:none; width:400px; height:200px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; }
ul.slideshow li{position:absolute; left:0; right:0}
ul.slideshow li.show{z-index:500}
ul img{width:400px; height:250px; border:none}
#slideshow-caption{width:500px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500}
#slideshow-caption .slideshow-caption-container{padding:5px 10px; z-index:1000}
#slideshow-caption h3{margin:0; padding:0; font-size:16px}
#slideshow-caption p{margin:5px 0 0 0; padding:0}
</style>
Klik Simpan Template
Selanjutnya klik Rancangan lagi
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya
<ul class="slideshow">
<li><a href="#"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQi3bsrgNx2QZlW8usp1hLNhHTexySlZn65LYL0Q9jcq49f1nR9" title="judul gambar 1"
alt="deskripsi gambar 1" /></a></li>

<li><a href="#"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSC4hhV85L6rR8E_4orJuFFmgMQAGEkLahRizLN0TLLLFofgQdy" title="judul gambar 2" alt="deskripsi gambar 2" /></a></li>

<li><a href="#"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTUulXmOmQfig52BbjbWnVHc76_hGioRxQqVZesUgv6vM2BP2D8" title="judul gambar 3" alt="deskripsi gambar 3" /></a></li>

<li><a href="#"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRIZzxTcdcqZdBKIXR5_p7c4xMloe9wnf5sbJ6FU7fSkV-_K3qO" title="judul gambar 4" alt="deskripsi gambar 4" /></a></li>
</ul>
Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu


--------------------
BlackBerry
--------------------

BlackBerry
BlackBerry Storm
Iphone 3Gs
Sony Ericsson K660i
Notebook Sony VAIO
Yahoo! Messenger
Sony Ericsson Xperia X1
Notebook ACER
Love Letters
Notebook COMPAQ
Apple MacBook Pro
O2 smartphone
Bloo for Android
TweetDeck

--------------------
---------------------------- KOSONG... ^_^ ----------------------------