Kaya Informasi 1999: JQUERY

Showing posts with label JQUERY. Show all posts

Tuesday, July 21, 2015

GALLERY PHOTO THUMB WITH BOOTSTRAP 3 (DOWNLOAD)

Assalamu'alaikum Warohmatullohi Wabarokatuh.
Apaka kabar para pembaca.
Semoga kita semua selalu dalam lindungan Allah Tuhan Yang Maha Esa.
Amin Ya Robbal Alamin.

Pada kesempatan ini saya ingin berbagi sedikit mengenai BOOTSTRAP 3.
Ya, setelah saya pelajari ternyata bootstrap 3 lebih nyaman digunakan dari pada versi yang sebelumnya,
dan saya memcoba untuk membuat sebuah template yang nantinya akan saya gunakan untuk membuat
sebuah website Directory Alumni.

Website ini nantinya akan berisi data-data siswa/i tepatnya mantan siswa/i dari sebuah sekolah.
Dimana setiap mantan siswa/i tersebut bergabung di dalamnya untuk mengobrol, berbagi kenangan masa lalu,
dan hal-hal lain.

Eits, maaf.
Kembali ke judul besar kita, template ini tidak saya bandrol dengan harga.
Yaps, benar! Ini free... for you.

Langsung saja ini tampilannya :

Dan link downloadnya ada disini.
DOWNLOAD

Ya,walaupun masih jelek tapi sudah cukup deh untuk digunakan sebagai template website dibanding dengan template yang di buat dengan CSS sendiri.

Terima kasih atas kunjungan Anda.
Jika terdapat kata-ata yang SALAH saya meminta maaf,
Pada Allah saya meminta Ampun.
Akhirul kalam.
Wassalamu'alaikum Warohmatullohi Wabarokatuh.

Kritik dan Saran Anda dapat menjadi hal yang paling bermanfaat untuk blog ini.

Wednesday, March 25, 2015

Tutorial Membuat Menu Dropdown Dengan Bootstrap

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Selamat pagi dan Salam Sejahtera bagi kita semua.
Semoga kita selalu dalam lindungan-Nya. Amin.

Nah pada kesempatan kali ini saya akan berbagi sedikit pengetahuan yang saya tahu dari bootstrap.
Setelah sebelumnya saya berbagi tentang "Belajar Membuat Social Button Dengan Bootstrap " dan pada hari ini kita akan membahas tentang "Membuat Menu Dropdown Dengan Bootstrap".
Berikut adalah tampilan hasil jadi dan struktur folder yang dibutuhkan:

Struktur Folder Dropdown Menu With Bootstrap

Dan pada tutorial ini saya akan menyertakan DEMO dan DOWNLOAD filenya. Mari lanjut ke script yang digunakan.
Lihat pada bagian bawah tutorial ini.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Selamat Datang Di Buku Online SMK Negeri 1 Beringin</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/sb-admin-2.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/jquery.showpassword.js" type="text/javascript"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<script src="dist/js/sb-admin-2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#pass').showPassword('#tampil');
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="#"> BUKU ONLINE </a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> <span class="fa fa-home"></span> Beranda </a></li>
<li><a href="#"> <span class="fa fa-user"></span> Profil</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="fa fa-book"></span> Kategory Buku <span class="fa fa-angle-double-down"></span> </a>
<ul class="dropdown-menu">
<li><a href=""> <span class="fa fa-book"></span> Doa </a></li>
<li><a href=""> <span class="fa fa-book"></span> Dongeng </a></li>
<li><a href=""> <span class="fa fa-book"></span> Kamus </a></li>
<li><a href=""> <span class="fa fa-book"></span> Teknologi </a></li>
</ul>
</li>
<li><a href="#"> <span class="fa fa-phone"></span> Kontak</a></li>
</ul>
</div>
</div>

</div>

</body>

</html>

Keterangan:
# Navbar-inverse digunakan untuk membuat background berwarna hitam.
ganti dengan Navbar-default untuk mendapatkan warna putih abu-abu.

Nah Sekian dari saya.

Wassalamu'alaikum Warohmatullohi Wabarokatuh.

Salam blogger teman.
Jangan lupa untuk memberikan komentar Anda disini.
Karena kritik dan saran Anda sangat membantu kemajuan blog ini.
See you!

Tuesday, March 24, 2015

Belajar Membuat Social Button Dengan Bootstrap

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Selamat membaca dan mengikuti,
Dan semoga kita semua mendapatkan Rahmat dan Hidayahnya.
Amin Ya Robbal Alamin.

Yuk, mari kita bahas ke judul langsung.
Pertama kita siapkan beberapa filenya (Download filenya).

Beberapa folder tidak diperlukan untuk tutorial ini namun saya tetap memasangnya dikarenakan pada tutorial selanjutnya akan ada pembahasan-pembahasan mengenai bootstrap yang lainnya dimana folder tersebut akan terpak. So, ikutin terus ya tutorialnya!
Karena tak lengkap rasanya bila belajar itu hanya sedikit-sedikit tanpa dilanjutkan.
Dan di bawah ini saya sertakan script juga tampilan ketika kita load di browser.

Tombol yang telah dibuat adalah tombol yang biasa sangat sering dijumpai dan dipakai pada blogger dan media website lain.
Tanpa menambah basa-basi mari Kita lanjutkan pada langkah-langkahnya.

Buat sebuah file dengan nama button.html dan sertakan script berikut.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="bootstrap tutorial">
<meta name="author" content="Fittra Ferdiansyah">
<title>Membuat Tombol Share Dengan Bootstrap</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<link href="dist/css/sb-admin-2.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-social/bootstrap-social.css">
</head>
<body>
<button type="button" class="btn btn-default">btn-default</button>
<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-info">btn-info</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-success">btn-success</button>

<button type="button" class="btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"></i> Facebook
</button>
<button type="button" class="btn btn-block btn-social btn-twitter">
<i class="fa fa-twitter"></i> Twitter
</button>
<button type="button" class="btn btn-block btn-social btn-google-plus">
<i class="fa fa-google-plus"></i> Google <i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-block btn-social btn-github">
<i class="fa fa-github"></i> Github
</button>
<button type="button" class="btn btn-block btn-social btn-linkedin">
<i class="fa fa-linkedin"></i> Linkedin
</button>
<button type="button" class="btn btn-block btn-social btn-tumblr">
<i class="fa fa-tumblr"></i> Tumblr
</button>
<button type="button" class="btn btn-block btn-social btn-dropbox">
<i class="fa fa-dropbox"></i> Dropbox
</button>
<button type="button" class="btn btn-block btn-social btn-vk">
<i class="fa fa-vk"></i> VK
</button><button type="button" class="btn btn-block btn-social btn-pinterest">
<i class="fa fa-pinterest"></i> Pinterest
</button>
<button type="button" class="btn btn-block btn-social btn-instagram">
<i class="fa fa-instagram"></i> Instagram
</button>
</body>
</html>

Nah, keterangan dari script diatas kita perjelas disini.
#warna hijau adalah file yang kita gunakan untuk memanggil fungsi-fungsi pada bootstrap.
#warna biru adalah button biasa menggunakan bootstrap.
#warna ungu adalah beberapa tombol share yang kita buat.

Perbedaan untuk membuat tombol biasa dengan tombol share berada pada class-class yang kita gunakan.

Oke, sekian dahulu berhubung waktu sudah larut malam Saya akhiri terlebih dahulu sampai disini.
Danbagi Anda yang ingin melihat DEMO nya ada disini.

See you!
Wassalamu'alaikum Warohmatullohi Wabarokatuh.
Komentar Anda Saya tunggu untuk memperbaiki kesalahan-kesalahan yang ada.

Terima Kasih.

Saturday, February 21, 2015

Teknik dan Trick Belajar JQuery Strength Password Mudah dan Cepat

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Hari yang cerah untuk menerima dan mempelajari pengetahuan yang indah.
Yak, jika pada postingan sebelumnya saya telah men-share postingan mengenai "JQuery Show Password" maka pada hari ini sesuai dengan judul pada postingan ini, maka saya akan membagikan sedikit trick menggunakan JQuery mengecek kekuatan kata sandi atau yang biasa kita sebut dengan "Password Strength With JQuery" .

Seperti biasa untuk demo dan scriptnya saya menaruhnya di bagian bawah postingan saya ini.
Screenshoot.

Nah jika sudah melihat tampilannya maka sempatkanlah diri Anda untuk memberikan tanggapan untuk blog saya supaya kedepannya bisa lebih maju lagi dalam memberikan wejangan pengetahuan yang berguna bagi kita semua. Amin.
Terima kasih,
dan salam Blogger.

DOWNLOAD DISINI dan DEMO nya.

Belajar JQuery Show Password (Menampilkan Password Dengan JQuery)

Assalamu'alaikum warohmatullohi Wabarokatuh.

Selamat malam, siang, pagi, sore atau apa aja dah buat semua para pembaca yang setia.
Kali ini dipostingan ini saya akan sedikit berbagi kapada Anda sekalian mengenai cara menggunakan JQuery dalampenggunaannya untuk menampilkan password yang telah diketik melalui form dengan type password.

Oke langsung saja ini dia screen shootnya,

Sebelum / ketika diinputkan sebuah password pada form.

Berikutnya merupakan screen shoot ketika kita sudah mengklik tampilkan password di checkbox.

Dan untuk scriptnya bisa langsung di download saja pada bagian akhir postingan ini.
Soalnya lumayan panjang, hehe,... becanda.

Sekian dan Terima Kasih.
Jangan Lupa untuk meninggalkan komentar Anda untuk membantu dalam pengembangan blog ini.
Ok,See you!

DOWNLOAD DISINI dan DEMO nya.

Sunday, February 15, 2015

JQUERY IPHONE SLIDE TO UNLOCK (Download and Demo)

Assalamu'alaikum Warohmatullohi Wabarokatuh.
Selamat beraktivitas dan salam sejahtera bagi kita semua.

Pada postingan kali ini saya akan membagikan script slide to unlock seperti pada iphone sungguhan menggunakan jquery. Silahkan saja bagi yang ingin mendownload dan melihat demonya bisa di lihat pada bagian bawah postingan ini.

Berikut Screen Shootnya.

Jangan lupa berikan komentar Anda untuk kritik dan saran Anda.
Terima kasih.

Password Untuk File : www.fittraferdiansyah.blogspot.com

DEMO dan DOWNLOAD DISINI