Cara Download Via Google Drive
Wednesday, August 3, 2016
Sunday, July 31, 2016
Kumpulan Efek Hover 2D Keren Menggunakan CSS
Assalamualaikum wr wb
Pada
postingan kali ini, saya akan membahas tentang berbagai macam efek hover
menggunakan CSS. Efek ini bisa anda terapkan diberbagai macam objek seperti
gambar, tombol, dan lainnya. Tidak perlu berlama-lama langsung contoh efek
dibawah ini.
Arahkan atau dekatkan kursor ke kotak
2D Transitions || By : Moh. Syairi
GROW
SHRINK
Bounce In
Bounce Out
Rotate
Grow Rotate
Float
Sink
Lalu
begaimana cara membuatnya.?? Kita langsung saja.
- Efek Grow (Membesar)
GROW
<style>
#grow{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#grow:hover, .grow:focus, .grow:active {-webkit-transform: scale(1.1);transform: scale(1.1);background-color:#28CADA;}
</style>
<div id="grow" style="float:left">GROW</div>
- Efek Shrink (Mengecil)
SHRINK
<style>
#shrink{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#shrink:hover, .shrink:focus, .shrink:active {-webkit-transform: scale(0.9);transform: scale(0.9);background-color:#28CADA;}
</style>
<div id="shrink" style="float:left">SHRINK</div>
- Efek Bounce In (Memantul Masuk)
BOUNCE IN
<style>
#Bounce_In{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.5s;}
#Bounce_In:hover, .Bounce_In:focus, .Bounce_In:active {-webkit-transform: scale(1.2);transform: scale(1.2);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);background-color:#28CADA;}
</style>
<div id="Bounce_In" style="float:left">BOUNCE IN</div>
- Efek Bounce Out (Memantul keluar)
BOUNCE OUT
<style>
#Bounce_Out{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.5s;}
#Bounce_Out:hover, .Bounce_Out:focus, .Bounce_Out:active { -webkit-transform: scale(0.8);transform: scale(0.8);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);background-color:#28CADA;}
</style>
<div id="Bounce_Out" style="float:left">BOUNCE OUT</div>
- Efek Rotate (Memutar)
ROTATE
<style>
#Rotate{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#Rotate:hover, .Rotate:focus, .Rotate:active {-webkit-transform: rotate(4deg);transform: rotate(4deg);background-color:#28CADA;}
</style>
<div id="Rotate" style="float:left">ROTATE</div>
- Efek Grow Rotate (Membesar Memutar)
GROW ROTATE
<style>
#GrowRotate{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#GrowRotate:hover, .GrowRotate:focus, .GrowRotate:active { -webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);background-color:#28CADA;}
</style>
<div id="GrowRotate" style="float:left">GROW ROTATE</div>
- Efek Float (Keatas)
FLOAT
<style>
#float{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#float:hover, .float:focus, .float:active {-webkit-transform: translateY(-8px);transform: translateY(-8px);background-color:#28CADA;}
</style>
<div id="float" style="float:left">FLOAT</div>
- Efek Sink (kebawah)
SINK
<style>
#sink{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#sink:hover, .sink:focus, .sink:active { -webkit-transform: translateY(8px);transform: translateY(8px);background-color:#28CADA;}
</style>
<div id="sink" style="float:left">SINK</div>
Sekian
pembahasan mengenai efek hover 2D dan semoga bisa bermanfaat.
Friday, December 4, 2015
Program Koreksi Nilai Mahasiswa dan Cara Koneksi Database MySQL Ke Visual Basic 06
Note : Sebelumnya - Aktifkan xampp, Start ~> Aphace dan MySQL - Buat databasenya. Jika belum baca : http://syairiblog.blogspot.co.id/2015/12/membuat-database-koreksi-nilai.html - Setting konektor untuk menghubungkan database dengan Visual Basic 6. Silahkan baca : http://syairiblog.blogspot.co.id/2015/12/download-dan-setting-konektor-mysql-odbc.html - Silahkan Ikuti langkah-langkah di bawah pada artikel ini. - 3KA10 Semangat Ngerjainnya :)
Ikuti langkah-langkahnya sebagai berikut :
1. Siapkan software Visual Basic 06, jika belum install anda bisa DOWNLOAD
2. Buka aplikasinya, pilih NewProject ~> StandartEXE ~> Open
3. Klik Project pada menubar ~> Components.. (Ctrl + T)
4. Muncul tampilan seperti gambar dibawah, cari dan ceklis Microsoft ADO Data Control 6.0 (OLEDB) dan Microsoft DataGrid Control 6.0 (OLEDB) ~> Apply ~> Ok
5. Desain tampilannya seperti gambar dibawah ini
6. Klik kanan pada Adodc1 ~> ADODC Properties ~> Build ~> Provider ~> Microsoft OLE DB Provider for ODBC Driver ~> Next ~> Use data source name : DBLatSyairi ~> Test Connection ~> Ok ~> RecordSource ~> Command Type : 2-adCmdTable ~> Table or Stored : sim ~> Apply ~> Ok
Ikuti langkah-langkahnya seperti gambar dibawah ini, agar lebih paham
7. Copy-paste Adodc1 ~> Klik kanan ~> ADODC Properties ~> RecordSource ~> Ubah Table or Stored : Kunci ~> Apply ~> Ok
8. Seleksi semua Text1 sampai Text9 kemudian ganti Properties ~> DataSource : Adodc1
9. Hilangkan seleksi dan ganti satu-persatu DataField pada kotak Prperties, lihat gambar
10. Ganti juga Text10 (kotak kunci jawab) DataSource dan DataFieldnya
11. Klik DataGrid1 dan ganti properties DataSource : Adodc1
12. Klik View pada menubar ~> Code, ketikkan atau Copy-paste kodenya berikut ini
Dim benar, skorS, rasioS As Integer Private Sub Command1_Click() 'jumlah soal silahkan ganti sendiri 'atau modifikasi program sesuai keinginan jumlahsoal = 30 Text7 = jumlahsoal N = 1 benar = 0 While N <= jumlahsoal x = Val(Mid(Text5, N, 1)) y = Val(Mid(Text10, N, 1)) If x = y Then benar = benar + 1 End If N = N + 1 Wend skorS = benar Text6 = skorS rasioS = (Text6 / Val(jumlahsoal)) * 100 Text8 = rasioS If (rasioS > 80 And rasioS <= 100) Then grade = "A" ElseIf (rasioS > 60 And rasioS <= 80) Then grade = "B" ElseIf (rasioS > 50 And rasioS <= 60) Then grade = "C" ElseIf (rasioS > 40 And rasioS <= 50) Then grade = "D" Else grade = "E" End If Text9 = grade Adodc1.Recordset.Update 'by Moh. Syairi 'Blog : www.syairiblog.blogspot.co.id End Sub12. Hasil Run (F5)
13. Selesai
Sekian Pembahasan mengenai bagaimana cara membuat Program Koreksi Nilai Mahasiswa dan Cara Koneksi Database MySQL Ke Visual Basic 06 semoga bisa bermanfaat buat teman-teman.
Catatan : Program yang saya buat adalah program dasar bagaimana cara membuat dan mengkoneksikan database ke Visual Basic 06. Untuk copy-paste silahkan dan cantumkan sumber linknya, jika tidak anda melanggar Etika dan Profesionalisme Teknologi Sistem Informasi.
Download dan Setting Konektor MySQL ODBC
Note :
Aktifkan XAMPP, Start Apache dan MySQL
1. Pertama download konektornya terlebih dahulu mysql-connector-odbc-3.51.28-win32
2. Start ~ search : ODBC ~ pilih Data Souces ODBC
3. Maka muncul tampilan pada gambar berikut, pilih User DSN ~ Add
4. Muncul tampilan seperti gambar, pilih MySQL ODBC 3.51 Driver ~Finish
5. Isi data pada tampilan yang muncul. Data source Name (nama terserah anda), Server : localhost, User : root, Database : LatSyairi (nama database yang sudah kita buat sebelumnya) ~ Test ~ Ok
6. Maka muncul nama konektor yang sudah kita buat tadi yaitu DBLatSyairi
7. Selesai
Sekian pembahasan mengenai Download dan Setting Konektor MySQL ODBC dan semoga bermanfaat.
Subscribe to:
Posts (Atom)