Dynamic Blinkie Text Generator at TextSpace.net

Feedburner

I heart FeedBurner

Minggu, 30 April 2017

Materi belajar jquery

https://jqueryui.com/dialog/
http://canvasjs.com/jquery-charts/

speedometer gauge javascript

https://jsfiddle.net/edot92/dt9c9swo/

install golang di ubuntu

sudo add-apt-repository ppa:gophers/archive
sudo apt-get update
sudo apt-get install golang-1.8 -y
sudo ln /usr/lib/go-1.8/bin/go /usr/bin/go1.8
sudo mv /usr/bin/go1.8 /usr/bin/go
export GOPATH=$HOME/go
additional port permmisive
setcap cap_net_bind_service=+epi appname
//pastikan terinstall pm2
sudo chmod u+x appname
pm2 startup // jika belum pernah ada program autostart
pm2 start ./appname --name “appname”
pm2 save

Kamis, 27 April 2017

Teamviewer gagal konek otomatis di linux

TeamViewer provides a script called teamviewerd.sysv available in /opt/teamviewer/tv_bin/script. Here's an excerpt:
#!/bin/bash
#
# /etc/init.d/teamviewerd
#
# chkconfig: 2345 95 05
# description: daemon for TeamViewer
#
# processname: teamviewerd
# config: /etc/teamviewer/global.conf
# pidfile: /var/run/teamviewerd.pid

### BEGIN INIT INFO
# Provides:          teamviewerd
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Required-Start:    $all
# Required-Stop:     $local_fs $network $named
# Short-Description: TeamViewer remote control daemon
# Description:       TeamViewer remote control daemon
### END INIT INFO
All you need to do is make sure this script runs on startup. Making sure of this is relatively simple, just copy it to /etc/init.d like so:
cd /opt/teamviewer/tv_bin/script
sudo cp teamviewerd.sysv /etc/init.d/
Don't forget to make the script non-writable to anyone but the owner!
sudo chmod 755 /etc/init.d/teamviewerd.sysv
Then run
sudo update-rc.d teamviewerd.sysv defaults
The service will now start automatically with each boot. If you don't feel like rebooting, you can start the service manually with:
sudo service teamviewerd.sysv start

Selasa, 25 April 2017

karakter spesial html

Terdapat empat karakter yaitu tanda lebih kecil (<), tanda lebih besar (>), tanda dan (&) dan kutip ganda (“), yang mempunyai arti khusus dan digunakan sebagai kode dalam HTML sehingga tidak dapat digunakan secara langsung sebagai teks dalam dokumen HTML kita. Untuk menggunakan karakter-karakter di atas ke dalam dokumen HTML, diperlukan suatu karakter spesial untuk menggantikan karakter-karakter di atas.
Karakter spesial tersebut antara lain :
&lt;
karakter spesial untuk <
&gt;
karakter spesial untuk >
&amp;
karakter spesial untuk &
&quot;
karakter spesial untuk "
&#64;
karakter spesial untuk @
&#169;
karakter spesial untuk ©
&copy;
karakter spesial untuk ©
&#174;
karakter spesial untuk ®
&reg;
karakter spesial untuk ®
&nbsp;
karakter spesial untuk spasi yang tak dapat dipecah
Dibawah ini script untuk memperlihatkan contoh penggunaan karakter spesial dalam dokumen HTML :
<HTML>
   <HEAD>
<TITLE> Belajar membuat HTML yuk </TITLE>
   </HEAD>
   <BODY>
<H2>My Homepage</H2>
<h3>Penggunaan Karakter Spesial</h3>
Berikut ini contoh penggunaan karakter spesial<br>
Sekarang kita mencoba menggunakan tanda lebih kecil seperti ini &lt; dan
sekarang kita akan coba menggunakan tanda lebih besar seperti ini &gt;.
Bagaimana? dapat terlihat kan? yang akan ditampilkan saat ini adalah tanda dan &amp;.
tanda kutip ganda &quot; dan tanda &#64; seperti yang sering digunakan dalam alamat email.
Pernah lihat tanda &#169; atau tanda &copy; atau tanda &#174; atau tanda &reg;.
Pasti salah satunya sudah pernah lihat kan?
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Terlihat perbedaannya tidak? ya, saya tambahkan beberapa spasi
di kalimatnya.
   </BODY>
</HTML>

Jumat, 21 April 2017

Fungsi tag alt pada html

Apabila anda ingin membuat konten halaman yang efektif agar supaya menarik pengunjung dan mesin pencari, Yang perlu anda lakukan adalah memaksimalkan setiap elemen halaman yang anda buat. Salah satu cara untuk melakukannya adalah dengan menggunakan ALT dan atribut TITLE disetiap anda membuat halaman. Semua itu berguna untuk meningkatkan tingkat kegunaan situs Anda dan sekaligus juga promosi jikalau anda memahami betul letak dan di mana harus menempatkan mereka.
Atribut ALT dirancang untuk menjadi sebuah deskripsi teks alternatif untuk gambar untuk Menampilkan teks ALT sebelum foto tersebut dimuat dalam browser utama dan bukan foto dalam berbasis teks browser. ALT adalah elemen yang dibutuhkan untuk gambar dan hanya dapat digunakan untuk tag gambar karena tujuan khususnya adalah untuk menggambarkan gambar. Fungsi dari ALT sendiri adalah menggambarkan citra dan informasi judul dalam tabel, link, dan menggambarkan tujuan dari elemen saat menggunakan kata kunci bertarget.
ALT dan TITLE melakukan tugas ganda yaitu meningkatkan upaya promosi dan aksesibilitas situs Anda. Dikarnakan Search engine spider menyukai kata kunci. Jadi gunakanlah atribut ALT dan Title disetiap kalian memposting suatu halaman diblog kalian karna itu bisa mempermudah mesin pencari untuk mengindex setiap postingan dari blog anda..
dan mas seem sudah menyiapkan script otomatis untuk memasang title dan ALT gambar secara otomatis.. jadi gak usah repot-repot pasang Alt dan title gambar satu persatu hehehee..
  1. login ke akun blog anda / www.blogger.com
  2. pilih tempelate, Edit HTML
  3. centang Expentempelate anda lalu cari code </body> (gunakan CTRL+F untuk memudahkan pencarian).
  4. Coy paste script dibawah ini tepat di atas kode </body> tadi
      5. simpan..

tapi lok sobat mau measangnya secara manual juga boleh malah itu menurut mas seem lebih afdol

brikut langkah-langkahnya :
1. klik gambar dan akan muncul sperti gambar dibawah ini

alt dan title text
2. lalu pilih propertis dan isikan
Ini bro pembuat favicon secara online :
1. http://www.favicon-generator.org/
2.www.zamzar.com

Senin, 17 April 2017

Cara restore windows 10

Banyak hal yang sudah diubah pada sektor prosedur booting pada Windows 10. Proses booting memang menjadi lebih cepat ketimbang pendahulunya (Windows 7) karena pada saat booting, Windows tidak mengaktifkan hardware yang sebelumnya pada Windows 7 hardware tersebut diaktifkan, contohnya pada keyboard dan mouse, sehingga berakibat pengguna tidak dapat menekan F8 untuk masuk safe mode. Safe mode adalah mode perbaikan yang dapat membantu Anda untuk mengganti / memperbaiki file sistem Windows yang rusak. Tanpa basa-basi lagi, ikuti tutorial cara masuk safe mode pada Windows 10 di bawah ini untuk lebih jelasnya.
Dengan Safe mode, Windows menonaktifkan program dan driver yang tidak terlalu diperlukan saat startup, sehingga dapat membantu Anda untuk menentukan apakah kerusakan ada pada sistem Windows, software yang ada di dalamnya, atau bahkan ketika komputer Anda terkena virus atau malware yang mengakibatkan komputer Windows Anda tidak dapat booting secara normal. Pada Windows 10 Pro, booting ke safe mode bukanlah hal yang sulit. Berikut adalah 2 metode yang dapat Anda gunakan untuk masuk ke safe mode pada Windows 10.

Boot Ke Safe Mode Menggunakan msconfig

Langkah 1: Buka Run. Caranya tekan tombol Windows + R pada keyboard dan ketik msconfig.
msconfig Windows 10
msconfig Windows 10
Langkah 2: Pada jendela system configuration, klik tab Boot lalu pilih Safe Mode (Minimal) lalu klik Apply.
Safe Mode (Minimal) Windows 10
Safe Mode (Minimal) Windows 10
Langkah 3: Restart komputer Anda.
Pada saat Windows Anda booting, Windows akan secara otomatis masuk ke safe mode tanpa harus menekan F8. Ketika Anda sudah selesai memperbaiki Windows Anda, jangan lupa untuk mengembalikan setting msconfig ke pengaturan semula.

Masuk Safe Mode Pada Windows 10 Tanpa Run / Command Prompt

Langkah 1: Buka Settings. Caranya klik tombol Start lalu klik Settings.
Settings Windows 10
Settings Windows 10
Langkah 2: Setelah jendela Settings terbuka, klik Update & security => Recovery => Advance startup.
Langkah 3: Setelah mengklik advanced mode, Anda akan melihat tiga pilihan – Continue, Troubleshoot, dan Turn off your PC. Klik Troubleshoot.
Troubleshoot Windows 10
Troubleshoot Windows 10
Langkah 4: Pada Advanced options ada beberapa pilihan seperti: System Restore, System Image Recovery, Startup Repair, Command Prompt, Startup Settings, dan Go back to the previous build. Klik Startup Settings untuk mengubah pengaturan startup.
Advanced Options Windows 10
Advanced Options Windows 10
Langkah 5: Klik tombol Restart untuk mengaktifkan mode Safe Mode.
Startup Settings Windows 10
Startup Settings Windows 10
Langkah 6: Setelah itu tekan tombol F4 untuk masuk ke Safe Mode.
F4 Save Mode
F4 Save Mode

Kamis, 06 April 2017

Matriks layout dengan boostrap

Bootstrap menyediakan fasilitas layouting konten web dengan Sistem Grid, cara kerjanya mirip seperti penggunaan <table> pada html. Dengan menggunakan sistem grid pembuatan struktur konten jadi lebih rapih dan mudah. Nah, cara menggunakannya kita hanya perlu mengeset atribut class pada div yang berisi konten yang dikehendaki, ada class yang bernama “row” dan “col-x-xx”.

Struktur dasarnya seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- <table> -->
<div class="container">
    <!-- <tr> -->
    <div class="row">
        <!-- <td> -->
        <div class="col-x-xx">Kolom 1 baris 1</div>
        <!-- </td> -->
        <!-- <td> -->
        <div class="col-x-xx">Kolom 2 baris 1</div>
        <!-- </td> -->
    </div>
    <!-- </tr> -->
    <!-- <tr> -->
    <div class="row">
        <!-- <td> -->
        <div class="col-x-xx">Kolom 1 baris 2</div>
        <!-- </td> -->
        <!-- <td> -->
        <div class="col-x-xx">Kolom 2 baris 2</div>
        <!-- </td> -->
    </div>
    <!-- </tr> -->
<!-- </table> -->
</div>
Mirip dengan penggunaan tabel kan ?
Row harus ada di dalam kelas container dan col-x-xx di dalam kelas row. Namun ada beberapa aturan tambahan yang diterapkan pada sistem grid ini, diantaranya adalah lebar kolom pada setiap baris dibatasi dengan 12 kolom saja. Dan setiap kolom yang didefinisikan harus menyertakan lebar kolom tersebut (seperti colspan) pada bagian xx dari col-x-xx yang dapat diisi dari angka 1 sampai 12.
Untuk bagian x dari col-x-xx diisi dengan atribut yang sudah disediakan oleh bootstrap berikut:
  1. xs ( Extra small devices [Hape] )
    • Untuk target device dengan resolusi <768px
    • Maksimal lebar div container yang diijinkan tidak ada (auto)
    • Maksimal lebar kolom yang diijinkan tidak ada (auto)
  2. sm ( Small devices [Tablet] )
    • Untuk target device dengan resolusi >=768px
    • Maksimal lebar div container yang diijinkan 750px
    • Maksimal lebar kolom yang diijinkan 60px
  3. md ( Medium devices [Desktop] )
    • Untuk target device dengan resolusi >=992px
    • Maksimal lebar div container yang diijinkan 970px
    • Maksimal lebar kolom yang diijinkan 78px
  4. lg ( Large devices [Desktop] )
    • Untuk target device dengan resolusi >=1200px
    • Maksimal lebar div container yang diijinkan 1170px
    • Maksimal lebar kolom yang diijinkan 95px
Dalam tutorial kali ini, coba kita gunakan atribut md untuk desktop standar. Untuk melihat lebar setiap kolom dengan lebar yang berbeda – beda coba ketikan potongan kode berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
    <title>Latihan Bootstrap 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="bootstrap-3.1.1-dist/css/bootstrap.min.css">
    <style type="text/css">
        .col{
            box-shadow : inset 1px -1px 1px #444, inset -1px 1px 1px #444;;
            background-color: #dedef8;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row" align="center">
            <div class="col-md-1 col">1</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-2 col">2</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-3 col">3</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-4 col">4</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-5 col">5</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-6 col">6</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-7 col">7</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-8 col">8</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-9 col">9</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-10 col">10</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-11 col">11</div>
        </div>
        <div class="row" align="center">
            <div class="col-md-12 col">12</div>
        </div>
    </div>
</body>
</html>
Hasilnya seperti berikut :
Saungkode
Catatan :
Penambahan class col disini digunakan untuk menambahkan warna background serta border pada kolom dan akan digunakan pada kode – kode selanjutnya.
Sehingga untuk mengisi satu baris penuh dibutuhkan kolom dengan total lebar 12, misal 3 buah kolom dengan lebar 4 , 2 buah kolom dengan lebar 6 dan sebagainya. Contohnya tambahkan kode ini di dalam div container dari kode yang sudah ada di atas :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row" align="center">
    <div class="col-md-3 col">3</div>
    <div class="col-md-3 col">3</div>
    <div class="col-md-3 col">3</div>
    <div class="col-md-3 col">3</div>
</div>
<div class="row" align="center">
    <div class="col-md-4 col">4</div>
    <div class="col-md-4 col">4</div>
    <div class="col-md-4 col">4</div>
</div>
<div class="row" align="center">
    <div class="col-md-6 col">6</div>
    <div class="col-md-6 col">6</div>
</div>
<div class="row" align="center">
    <div class="col-md-12 col">12</div>
</div>
Hasilnya :
Screenshot - 080414 - 11:46:15
Kita juga dapat membubuhkan lebih dari satu kelas untuk atribut kolom, misalnya :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-6 col">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
        </p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
        quae ab illo inventore veritatis et quasi architecto beatae vitae
        dicta sunt explicabo.
        </p>
        </div>
        <div class="col-sm-9 col-md-6 col">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
        accusantium doloremque laudantium.
        </p>
        <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
        consectetur, adipisci velit, sed quia non numquam eius modi
        tempora incidunt ut labore et dolore magnam aliquam quaerat
        voluptatem.
        </p>
        </div>
    </div>
</div>
Maka ketika device yang digunakan adalah small device, konten akan dirender dengan panjang kolom 3 dan 9 lalu akan dirender dengan panjang 6 dan 6 bila device yang digunakan termasuk kategori medium device.
Screenshot - 080414 - 11:46:29Saungkode
Skala 6 :6 (atas) dan 3 : 9 (bawah)

Nested Columns

Grid System ini juga mendukung penempatan kolom secara bersarang artinya memasukkan kolom di dalam kolom atau baris lagi. Penggunaannya sama seperti <table> juga, langsung lihat saja contohnya :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="container">
    <div class="row">
        <div class="col-md-3 col">
            <h4>Kolom Pertama</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
 
        <div class="col-md-9 col">
            <h4>Kolom kedua yang dibagi menjadi 4</h4>
 
            <div class="row">
                <div class="col-md-6 col">
                    <p>Consectetur art party Tonx culpa semiotics. Pinterest
                    assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6 col">
                    <p> sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col">
                    <p>quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6 col">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim.</p>
                </div>
            </div>
        </div>
    </div>
</div>
Menghasilkan :
Saungkode

Column Offset

Lalu bagaimana caranya jika kita ingin menampilkan kolom dengan panjang 6 tapi berada di tengah layar? Cukup dengan menambahkan offset pada kolom.. Offset berfungsi menggeser kolom ke kanan sepanjang kolom yang diberikan, contohnya jika panjang 6 dan ingin di posisikan di tengah berarti offsetnya 3.. Syntax-nya col-x-offset-xx .
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <div class="row" align="center">
        <div class="col-md-6 col-md-offset-3 col">6</div>
    </div>
    <div class="row" align="center">
        <div class="col-md-5 col-md-offset-7 col">5</div>
    </div>
    <div class="row" align="center">
        <div class="col-md-10 col-md-offset-1 col">10</div>
    </div>
</div>
Bisa diibaratkan seperti menambahkan kolom kosong di depan.
Screenshot - 080414 - 11:46:59

Column Ordering

Ada satu lagi nih fitur yang cukup menarik, yaitu column ordering. Kita dapat mengubah posisi atau letak kolom dalam satu baris, ada dua operasi yaitu :
  • Push, mendorong kolom ke kanan seperti offset. Syntax-nya col-x-push-xx
  • Pull, menarik kolom ke kiri. Syntax-nya col-x-pull-xx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="container">
    <div class="row">
        <p>Sebelum dipindahkan</p>
        <div class="col-md-4 col">Saya di kiri</div>
        <div class="col-md-8 col">Saya ada di kanan</div>
    </div><br/>
    <div class="row">
        <p>Setelah dipindahkan</p>
        <div class="col-md-4 col-md-push-8 col">
            Lah, tadi kan saya di kiri
        </div>
        <div class="col-md-8 col-md-pull-4 col">
            Lho? perasaan tadi saya ada di kanan
        </div>
    </div>
</div>
Hingga Hasilnya :
Saungkode
Sumber : tutorialspoint.com