PERINTAH-PERINTAH PENTING PADA KLOXO-MR

Bagi anda yang keberatan menggunakan control panel berbayar, anda dapat menggunakan control panel gratis untuk website anda yaitu salah satunya dengan menggunakan kloxo-MR. Tampilannya hampir mirip dengan cpanel, hanya saja memang tidak semudah dan se simple cpanel. karena mungkin anda lebih familier dengan cpanel. Setelah anda berhasil instalasi kloxo-MR. kadang sering terjadi error di kloxo-MR. Berikut adalah perintah-perintah yang sering akan anda gunakan jika anda menggunakan kloxo-MR.

Untuk mengetahui konfigurasi yang telah di install.

sh /script/sysinfo

untuk restart semua service

sh /script/restart-services
sh /script/restart-all

Restart service per item

/etc/init.d/named restart
/etc/init.d/httpd restart
/etc/init.d/nginx restart
/etc/init.d/php-fpm restart
/etc/init.d/mysqld restart
/etc/init.d/kloxo restart

Fix Sevice/ Perbaiki Service

sh /script/fixweb
sh /script/fixphp
sh /script/fixdns
sh /script/fixwebmail
sh /script/fixmail
sh /script/fixvpop

Fix Semua

sh /script/fix-all

Membersihkan untuk perangkat lunak yang terpengaruh, terutama setelah memperbarui kloxo-mr

sh /script/cleanup

Memperbaiki permission & ownership pada kloxo-mr

sh /script/fix-chownchmod

Perintah untuk optimize & repair mysql database

sh /script/mysql-optimize --select=repair
sh /script/mysql-optimize --select=optimize

Membersihkan Cache (*tidak bekerja pada OpenVz VPS)

sh /script/clearcache --select=1

Manual alternative apache optimize

### for mod_php select optimeze
sh /script/apache-optimize --select=optimize
### for suphp/fcgid/php-fpm
sh /script/apache-optimize --select=default

Reset mysql root password

sh /script/reset-mysql-root-password 

Reset Kloxo admin password login:

sh /script/resetpassword master 

Mengkonversi database (myisam or innodb)

sh /script/mysql-convert --engine=MyISAM
sh /script/mysql-convert --engine=InnoDB
### MariaDB only convert to aria
sh /script/mysql-convert --engine=aria

RkHunter Check (security)

rkhunter --check

cek memory

free -m

5 VPS Murah dan Berkualitas

Bagi agan-agan yang memiliki website dengan trafik tinggi dan sedang menggunakan hosting tentu sudah waktunya untuk berhijrah menggunakan vps, kenapa.? karena menggunakan vps lebih leluasa dan yang pasti website anda tidak lagi terganggu oleh pengguna website lain diserver yang sama pada layanan webhsting dan website anda akan lebih maksimal diakses oleh pengunjung terutama untuk website bisnis. Hanya saja bagi agan-agan yang masih belum familiar dengan vps perlu belajar dengan ekstra mencari referensi atau tutorial cara menggunakan vps, tapi yang pasti pengoperasian vps itu hapir sama saja seperti kita mengoperasikan hosting, dan yang paling menguntungkan bawa kita berkuasa atas vps/server kita sendiri.

Memiliki vps sama seperti agan memiliki PC mau instal berapa saja website bisa dan yang menikmati server hanya website-website agan sendiri tanpa terganggu oleh website orang lain. Oh ya ane lupa apa itu vps. VPS adalah Virtual Private Server sebuah teknologi yang digunakan oleh pengelola jasa web hosting yang memiliki server sendiri kemudian dibagi-bagi dalam beberapa private server. Bagi pengguna vps bertanggung jawab secara penuh atas vps dari menginstal cpanel hingga memanajemen.

Kiranya sekian dulu pengantarnya ya, karena kalau terlalu panjang kapan dapat vps-nya gkgkgk..! Dibawan ini ada dapat menggunakan vps Indonesia, USA atau Singapur.

1. Budgetvm (USA)

Budgetvm sebuah perusahaan jasa webhosting yang melayani jasa sewa vps yang cukup murah menurut ane, dan ane sangat merekomendasikan bagi agan-agan yang memiliki modal kecil karena ane menggunakan jasa vps ini, selain murah mereka juga menjaga server kita dari serangan-serangan hacking seperti DDos Protection dan layanan mereka juga banyak seperti.

• Cloud Server
• Dedicated Server
• VPS Server meliputi (SSD VPS, OpenVZ VPS dan Windows VPS)

Untuk harga tahunan mulai US$ 35.00 jika harga bulanan mulai US$ 7.00

2. Hostgator (USA)

Bagi agan-agan yang sering menggunakan internet tentu sudah sering milihat iklan hosting ini di iklan google dengan gambar buaya yang cukup manis, hostgator merupakan salah satu hosting yang cukup poluler dan terus terang ane tidak pernah menggunakan layanan VPS hosting ini karena kalau ane lihat harga sewa VPS yang sekitar US$ 19.95 per bulan membuat bulu kodok merinding tetapi yang pasti layanannya bagus karena mereka sudah berpengalaman puluhan tahun, dan spesifikasinya pun lumayan bagus disertai fitur-fitur yang mumpuni.

3. Digital Ocean (USA dan Singapura)

Jika agan yang sering gonta-ganti VPS ane rekom nyoba layanan vps yang satu ini, kenapa ane suruh nyoba karena layanan Digital Ocean ini memang sangat cocok untuk coba-coba server, saat agan pertama kali menggunakan layanan mereka makan sudah dikasih US$ 10.00 untuk trial atau mencoba layanan mereka, dan yang uniknya dalam hal transaksi biaya penggunakan layanan dihitung per jam, jadi beberapa jam agan menggunakan vps mereka kemudian dimatikan kembali maka uang US$ 10.00 ini akan dikurangi sesuai penggunaan jam dengan penggunaan US$ 5.00 perbulan yang paling murah. Dalam hal pengaturan atau membuat vps agan bisa pilih negara tempat mereka mearoh server yang paling dekat dengan negara pengguna, contoh karena server mereka tidak ada di Indonesia dan hanya ada di Singapura maka agan bisa memilih server mereka yang ada di Singapura dan dalam hitungan menit agan sudah memiliki VPS gratis untuk coba-coba.

4. Niagahoster (Indonesia)

Niagahoster salah satu penyedia layanan hosting yang cukup dikenal juga dijagat layanan hosting, vps dan domain di Indonesia dan Niagahoster juga sering muncul di iklan google dan facebook, untuk layanan vps harga yang ditawakan mulai Rp. 104.000 per bulan tanpa cpanel dan agan juga bisa memesan inklut cpanel (Webuzo atau cPanel) dengan fitur :

Waktu Pointing / Perubahan DNS Lebih Cepat

Dengan menggunakan Cloudflare, website anda tidak perlu mengalami downtime ketika melakukan propagansi DNS.

Website Accelerator

Teknologi Nginx Proxy , Cloudflare CDN & fitur Cache pada Cloudflare akan menghemat penggunaan Bandwith anda. Setelah Cloudflare melakukan caching, pengunjung akan mendapatkan tampilan website cache tanpa harus meload script langsung dari server anda.

Website Terhindar dari SPAM

Cloudflare akan melindungi website Anda dari SPAM & Botnet. Hanya traffic dari pengunjung asli ( manusia ) yang masuk ke website anda.

Melindungi dari DDOS dan Hacker

Serangan DDOS mengakibatkan tingginya request data yang akan membebani server anda. Dampak serangan ini dapat ditangani dengan menggunakan Cloudflare.

Performa & Kecepatan dengan HTTP/2 and SPDY

Pilih Http/2 atau SPDY? Anda bisa menggunakan keduanya!

Nikmati Performa & Load Website yang cepat serta Penggunaan Resource yang lebih hemat dengan kombinasi teknologi HTTP/2 & SPDY yang langsung aktif pada server anda.

5. Hostnic (Indonesia)

Ingin mencari vps Indonesia yang murah bisa juga mencoba layanan vps dari hostnic yang dulu dikenal indonetmedia, layanan perbulan yang paling murah mulai Rp. 99.000 dan tentunya kualitas juga tidak kalah dengan layanan vps dari web hosting lain.

Instal Kloxo MR 7 di CentOS 6

Kloxo MR merupakan contol panel atau cPanel gratisan yang kinerjanya sama seperti cPanel berbayar, bahkan fungsi yang ada dalam Kloxo MR bisa melebihi cpnael yang berbayar sesuai dengan kebutuhan kita, bagi agan-agan yang familiar menggunakan hosting untuk mengoperasikan websitenya tentunya sudah mengetahi keunggulan cpanel berbayar yang digunakan web hosting untuk operasional user mereka.

Bagi agan-agan yang menggunakan Virtual Private Server (VPS) dan Dedicated Server tentunya harus memutar otak untuk mencari cpanel yang gratisan, jika menggunakan cpanel berbayar maka kita harus bersiap-siap merogoh gocek sekitar $15 per bulan belum lagi membayar sewa VPS atau DS yang kisaran Rp. 200.000 hingga Rp. 2.500.000 per bulan tergantung kapasitas HDD dan RAM.

Tetapi jangan takut dulu gan, masih ada harapan untuk agan bisa berkarya atau mengobarak-abrik isi VPS agan tanpa harus mengeluarkan gocek banyak per bulan, asal rajin mencari informasi di mbah google saja banyak kok informasi cara menginstal Kloxo MR hingga menambah modul lain yang sesuai dengan kebutuhan skrip website yang ingin dibangun.

Oh ya sekilas bagi agan-agan yang baru kenal dengan Kloxo MR yaitu sebuah cpanel yang medukung sistem operasional pada sebuah server pada sistem opersional Linux yang sudah banyak dikembangkan secara garatis seperti CentOS, Debian, Ubuntu dll. Dan yang lebih membanggakan kita sebagai orang Indonesia adalah Kloxo MR awalnya dibuat dan dikembangkan oleh orang Indonesia asli yaitu Bapak Mustafa Ramadhan hingga sekarang, makanya disebut Kloxo MR dari singkatan Mustafa Ramadhan, hebat bukan dan yang pasti Kloxo MR sudah digunakan olah pengguna internet seluruh dunia..!

Waduh pengatarnya panjang yaaaaa...! sorry gan ide nulis lagi lancar. Baik kita ke TKP saja dech..!

Untuk langkah awal mengistal Kloxo MR pada CentOS 6 agan harus menggunakan SSL atau Putty untuk me-root server agan untuk mengisntal Kloxo MR. Setelah masuk di root server update CentOS terlebih dulu dengan perintah berikut :

# yum update -y

Setelah selesai mengupdate centos instal paket berkut yang dibutuhkan oleh Kloxo MR
# yum install yum-utils yum-priorities vim-minimal subversion curl zip unzip -y
# yum install telnet wget -y

Nonaktifkan SELinux
# setenforce 0

Jika tidak bisa, anda bisa menggunakan perintah berikut
# echo 'SELINUX=disabled' > /etc/selinux/config

Berikut masuk ketahap persiapan untuk menginstal Kloxo MR, menjalankan /
# cd /tmp

Kemudian menghapus rpm lama dengan perintah
#  rm -f mratwork*

Download repo file menggunakan wget
# wget https://github.com/mustafaramadhan/kloxo/raw/rpms/release/neutral/noarch/mratwork-release-0.0.1-1.noarch.rpm --no-check-certificate

rpm -ivh mratwork-release-0.0.1-1.noarch.rpm




Kemudian kembali ke /
# cd /

Kita bersihkan dulu semua yang kita instal tadi, maksudnya membersihkan disini yaitu membuang sampahn yang tidak dibutuhkan oleh Kloxo MR 7 agar lancar.
# yum clean all
# yum update mratwork-* -y
*Catatan:
Jika saat anda mengginstal kloxo mr 7 muncul informasi "http://repo.varnish-cache.org/redhat/varnish-3.0/el6/i386/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 - "The requested URL returned error: 410 repo"
Trying other mirror.
Error: Cannot retrieve repository metadata (repomd.xml) for repository: mratwork-varnish-3.0. Please verify its path and try again"

silakan menggunakan perintah berkut ini

# yum update mratwork-* --disablerepo=*varnish* -y
# yum install kloxomr7 -y

Nah sampai tahap ini kita sudah menyelesaikan penginstalan Kloxo MR 7 di centos 6 hanya saja anda masih belum bisa masuk di URL www.webanda.com:7777 jika menggunakan SSL dan www.webanda.com:7778 tidak menggunakan SSL. Jika belum menggunakan skrip dibawah ini.
# sh /script/upcp

Demikian kita sudah menyelesaikan pengistalan Kloxo MR 7 dan untuk login awal gunakan User : admin dan Password : admin kemudian jangan lupa mengubah Password jika sudah berhasil masuk ke cpanel.

Kiranya ini dulu gan, jika ada informasi lain yang masih kurang silakan isi komentar dibawah untuk saling berbagi ilmu biar dapat pahala...hehehehe...!

Sumber : https://github.com/mustafaramadhan/kloxo/blob/dev/how-to-install.txt

Cara Mendapatkan OAuth 2.0 client ID Untuk Login Dengan Akun Google

Saya yakin agan-agan sudah tidak asing lagi dengan akun google seperti gmail, google plus dan banyak lagi kegunaan akun google jika kita berkecimpung di dunia maya. Cukup satu akun google yang agan-agan p
unya sudah bisa dimanfaatkan untuk berbagai kegunaan baik yang berhubungan dengan produk google maupun produk selain punya google, seperti ingin mendaftarkan akun di web lain, pasti ada tombol login menggunakan akun google, yang berarti dengan satu akun google tersebut anda dapat menggunakannya dengan berbagai manfaat.

Setelah mendirikan indup perusahaan mereka yang bernama alphabet, google banyak melakukan perubahan baik yang berhubungan dengan managemen bisnis mereka maupun produk layanan yang mereka miliki yang diberikan kepada pengguna. Kadang-kadang bagi kita yang pengetahuannya pas-pasan untuk melakukan penyetingan produk layanan google ketika ada perubahan membuat kita takut untuk mengotak-atiknya walaupun sebenarnya kita sudah memiliki fasilitas tersebut, contoh perubahan tampilan layanan google yang dulu dan sekarang sangat banyak berubah, karena produk layanan google sekarang makin banyak sehingga membuat kita jadi bingung untuk melakukan penyetingan ulang.

Seperti judul diatas kita akan membuat autentikasi ID untuk tombol login pada website kita, agar jika ada orang yang ingin mendaftar menjadi user diwebsite kita tidak perlu lagi mengisi form pendaftaran, cukup dengan menekan tombol akun google maka orang sudah bisa terdaftar menjadi user di web kita.

1. Agan harus memiliki akun google, dan kadang-kadang tombol login google ini sudah ada plug atau modulenya jika website agan menggunakan skrip website Content Management System (CMS) maka silakan diinstal dulu ke websitenya.
2. Masuk ke halaman browsing, terserah menggunakan aplikasi apa google chrome, firefox, microsoft edge dll, dan arahkan url-nya ke : http://code.google.com/apis/console/

jika agan belum masuk ke akun googlenya silakan masuk dulu.

3. Kemudian membuat proyek baru, klik "BUAT PROYEK". Catatan : gunakan bahasa Indonesia agar lebih memudahkan agan memahami petunjuk yang diarahkan oleh layanan yang ingin dibuat.

4. Selanjutnya agan akan membuat nama proyek, silakan isi kolom nama proyeknya.

setelah membuat nama proyek jangan lupa tekan tombol warna biru "Buat"

5. Nah pada halaman ini agan akan diberi pilihan ingin membuat layanan google yang mana, karena dari semua pilihan ini berbeda kegunaanya.

Pilih langkah (1) "Kredensial", kemudian langkah (2) klik tombol "Buat Kredensial". Jangan ikuti langkah ke (3) jika anda ingin membuat login.

6. Masih pada halaman diatas pilih "ID klien 0Auth"

7. Isi semua kolom yang tersedia.

1. Buat Nama Proyek
2. Alamat url website agan
3. Untuk logo bisa menggunakan alamt url gambar ukuran maksimal 120x120px
4. Jika pada website agan ada kebiakan provasi silakan masukan alamt url-nya pada kolom ini, kita tidak tau persis maksud google meminta alamat ini, tetapi karena ini (Opsional) berarti wajib untuk diisi.
5. Sama seperti kolom 4 harus diisi kalau ada persyaratan layanan
6. Kemudian klik tombol "Simpan" untuk mendapatkan ID

8. Setelah selesai tahapan pada langkah ke 7, agan akan masuk lagi ke halaman berikutnya untuk mendapatkan scret atau ID kerahasiaan.

silakan isi sesuai dengan permintaan pada kolom, pada kolom URL pengalihan yang sah ambil dari aplikasi plugin/moduls yang anda instal di website agan, gambar berikut contohnya yang dilingkar warna merah, jika sudah selesai tekan tombol "Simpan"

9. Lihat ID Klien dan Rahasia klin yang ane blog warna hitam (sorry itu tahasia ane). 

Oke itu langkah demi langkah untuk mendapatkan OAuth 2.0 client ID google, ada beberapa langkah yang masih belum lengkap diatas, karena ane sulit melanjutkan jika hanya latihan. Silakan diotak-atik lagi jika tidak berhasil, jangan takut salah yang penting bisa.

Membuat Tombol Share dan Manfaatnya untuk Blog

Sekedar pertanyaan gan, kenapa setiap konten sebuah website/blog selalu ada tombol share?? ane yakin bagi agan-agan yang sudah punya web/blog pasti sudah familiar dengan tombol share, tapi bagi agan-agan yang masih pengen tau jawabannya pasti akan menyimak artikel ini hingga akhir.

Jawaban singkatnya, tombol share yang terdapat dibawah, diatas atau ada juga disamping kiri/kanan konten web/blog sangat-sangat bermanfaat untuk membagikan konten yang kita buat agar cepat diketahui oleh teman-teman atau sahabat kita yang memiliki akun di media sosial tujuan share kita, dan ini akan mempercapat trafik konten maupun web/blog kita, atau yang lebih enak lagi bahasanya beriklan gratis ke media sosial. Sekali share saja ke salah satu media sosial (facebook, twitter, linkedin, google plus dan pinterest) rata-rata trafik yang ada dapatkan sekitar 5 hingga 10 kunjungan, keren kan..! dengan catatan agan-agan harus memiliki akun disemua media sosial yang ingin dijadikan tujuan share.

Memanfaatkan share konten ke media sosial sangat besar, jadi jangan malas untuk melakukan share apa saja konten yang anda isi di web/blog agan, baik gambar, video atau artikel, bahakan bisa dilakukan berulang-ulang jika isi konten tersebut memiliki up date informasinya.

Hampir setiap web/blog terdapat tombol share bawaan dari web/blog yang kita miliki, tetapi kadang-kadang rasanya kita ingin yang lebih baik dan praktis sesuai dengan selera kita. Pada blogger misalnya kalau kita menggunakan template bawaan dari bloggernya terlihat kurang lengkap, makannya kita perlu memodifikasi template blog kita agar memiliki tombol share yang lebih keren dan berfungsi dengan baik.

Berikut kita langkah demi langkah akan ane sajikan dan dilengkapi dengan gambar. Pada tutorial kali ini ane menggunakan tombol share addthis tetapi agan-agan juga bisa menggunakan tombol share lain.
1. Jika agan ingin menggunakan tombol share addthis maka langkah awal yang harus dilakukan yaitu login ke web addthis, bagi yang belum memiliki akun di addthis silakan mendaftar dulu gratis kok gan jika menggunakan tombol yang gratisan, tetapi ada juga yang pro jika ingin berbayar.

Pilih tombol yang bertulis Free jika ingin yang gratisan.

2. Setelah agan memilih salah tombol, klik "GET THE CODE" atau bahasa Indonesia nya, dapatkan kode dalam bentuk HTML dan Javascript.

3. Agan akan masuk ke halaman kode, sebelum masuk ke halaman kode sebenarnya agan masih bisa memodifikasi tampilan kode, dan sudah disiapkan beberapa alternatif pilihan yaitu dengan menekan tombol "SETTING", tetapi karena terlalu pajang mungkin lain kali akan kita bahas, tetapi silakan agan-agan coba otak-atik sendiri untuk membuat costumized tampilan tombol sharenya.

Lihat lingkaran kotak warna merah, kode itu yang anda ambil, kemudian pada panah yang warna merah, masuk ke halaman template "edit html" cari kode </body> dan letakan kode javascript pada gambar diatas di posisi diatas kode </body> tersebut.

4. Kemudian pada halaman kode addthis scroll ke bawah masih ada satu kode html lagi yang harus agan copy ke template blog agan.

Copy kode html yang dilingkar warna merah dan paste ke template blog agan diposisi <data:post.body/> letakan skrip html tersebut dibawahnya, lihat gambar berikut.

5. Setelah semua kode tercopy ke template blog agan-agan jangan lupa tekan tombol "Simpan template" agar benar-benar tertanam di template blognya, dan silakan lihat hasilnya..!

Demikian tutorial membuat tombol share di konten web/blognya, semoga bermanfaat..! selamat mencoba.

Membuat Form Pendaftaran

Kali ini ane akan share kepada agan-agan yang dua buah form pendaftaran, ya semoga saja kebetulan agan-agan sedang mencari untuk menjadi bahan inspirasi desain untuk web/blog-nya. Dengan pengetahuan yang pas-pasan tentang koding HTML, CSS dan JS semoga saja tutorial ini tidak membuat agan-agan bingung, jika bingung silakan isi komentar bisa berupa pertanyaan, masukan atau kritikan untuk saling menutupi atas kekuarang dua form pendaftaran yang ane buat ini.

Form pendaftaran berikut ane buat menggunakan framework bootstrap, seperti yang ane bilang diatas dengan pengetahuan pas-pasan makanya ane menggunakan bootstrap untuk membuat form pendaftaran ini agar lebih mudah dan praktis, yang pasti kalau menggunakan bootstrap kita tidak repot-repot lagi membuat koding css dan javascript-nya karena css dan javascript sudah tersedian, bisa digunakan secara online atau offline dengan mendownload frameworknya disini.

Oke tanpa basa-basi lagi silakan dinikmati kayak kopi tutorial dibawah ini, bisa untuk dimodifikasi, bisa dicopy/paste langsung, atau sekedar dibaca tapi jangan lupa memberikan komentar heheheh....! maksa gan, biar kelihatan ramae..!

1. Form Pendaftaran dengan bentuk Horizontal, kenapa disebut horizonta ya? karena posisi kolom dan namanya terletak secara horizontal, nama kolomnya disebekah kiri dan kolomnya disebelah kanan, itu gan jawabannya, biasa tampilan form pendaftaran secara horizontal digunakan satu halaman penuh karena tampilannya yang melebar. Coba lihat gambar dibawah ini.

Untuk nama kolom dan kolom bisa agan modifikasi sesuai dengan kebutuhan, jangan sungkan-sungkan untuk memodifikasinya dan jangan takut salah, yang penting berkreasi betul..!(kata kiwil).

Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Sign Up Horizontal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2" style="background-color:lavender;">
<br>
<h2>Form Sign Up Horizontal</h2>
<form class="form-horizontal">
<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Firs Name</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputEmail3" placeholder="Firs Name">
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Last Name</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputEmail3" placeholder="Last Name">
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Username</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputEmail3" placeholder="Username">
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-6">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-6">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
 
    <div class="form-group">
      <label for="comment" class="col-sm-2 control-label">Alamat</label>
 <div class="col-sm-6">
<textarea class="form-control" rows="5" id="comment" placeholder="Jalan, RT/RW dan Kecamatan"></textarea>
 </div>
    </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Provinsi</label>
    <div class="col-sm-6">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Pilih Provinsi<span class="caret"></span></button>
<ul class="dropdown-menu">
 <li><a href="#">DKI Jakarta</a></li>
 <li><a href="#">Jawa Barat</a></li>
 <li><a href="#">Jawa Timur</a></li>
</ul>
</div>
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Negara</label>
    <div class="col-sm-6">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Pilih Negara<span class="caret"></span></button>
<ul class="dropdown-menu">
 <li><a href="#">Indonesia</a></li>
 <li><a href="#">Malaysia</a></li>
 <li><a href="#">Singapura</a></li>
</ul>
</div>
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Kode Post</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputEmail3" placeholder="Kode Post">
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Handphone</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputEmail3" placeholder="Handphone">
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Captcha</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="inputEmail3" placeholder="Captcha">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Kebijakan & Persyaratan Pengguna
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary pull-right">Sign Up</button>
    </div>
  </div>
</form>
</div>
</div>
</body>
</html>

2. Form Pendaftaran Vertical, kenapa ya disebut vertikal..? hampir sama dengan jawaban form pendaftaran horizontal, karena posisi nama kolom dan kolom berada diposisi vertikal yaitu nama kolom diatas dan kolomnya dibawah jadi disebut vertikal, yang pasti kode html-nya ada sedikit berbeda gan dan agak simpel dari yang horizontal. Coba lihat gambar dibawah ini.

Sama seperti form pendaftaran horizontal, bisa dimodifikasi sesuai selera masing-masing.

Kode HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Sign Up Vertical</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<br>

<div class="container">

<div class="row">

<div class="col-md-6 col-md-offset-3" style="background-color:lavender;">

<h2>Form Sign Up Vertical</h2>

<form role="form">

<div class="form-group">

    <label for="inputEmail3">Firs Name</label>

      <input type="text" class="form-control" id="inputEmail3" placeholder="Firs Name">

  </div>

  <div class="form-group">

    <label for="inputEmail3">Last Name</label>

      <input type="text" class="form-control" id="inputEmail3" placeholder="Last Name">

  </div>

  <div class="form-group">

    <label for="inputEmail3">Username</label>

      <input type="text" class="form-control" id="inputEmail3" placeholder="Username">

  </div>

  <div class="form-group">

    <label for="inputEmail3">Email</label>

      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">

  </div>

  <div class="form-group">

    <label for="inputPassword3">Password</label>

      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

  </div>

    <div class="form-group">

      <label for="comment">Alamat</label>

<textarea class="form-control" rows="5" id="comment" placeholder="Jalan, RT/RW dan Kecamatan"></textarea>

    </div>

  <div class="form-group">

    <label for="inputEmail3">Provinsi</label>

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Pilih Provinsi<span class="caret"></span></button>

<ul class="dropdown-menu">

 <li><a href="#">DKI Jakarta</a></li>

 <li><a href="#">Jawa Barat</a></li>

 <li><a href="#">Jawa Timur</a></li>

</ul>

</div>

  </div>

  <div class="form-group">

    <label for="inputEmail3">Negara</label>

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Pilih Negara<span class="caret"></span></button>

<ul class="dropdown-menu">

 <li><a href="#">Indonesia</a></li>

 <li><a href="#">Malaysia</a></li>

 <li><a href="#">Singapura</a></li>

</ul>

</div>

  </div>

  <div class="form-group">

    <label for="inputEmail3">Kode Post</label>

      <input type="text" class="form-control" id="inputEmail3" placeholder="Kode Post">

  </div>

  <div class="form-group">

    <label for="inputEmail3">Handphone</label>

      <input type="text" class="form-control" id="inputEmail3" placeholder="Handphone">

  </div>

  <div class="form-group">

    <label for="inputEmail3">Captcha</label>

      <input type="text" class="form-control" id="inputEmail3" placeholder="Captcha">

  </div>

  <div class="form-group">

    <div class="col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> Kebijakan & Persyaratan Pengguna

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-primary pull-right">Sign Up</button>

    </div>

  </div>

</form>

</div>

</div>

<br><br>

</body>

</html>

Demikian gan dua buah form pendaftaran sederhana yang bisa agan-agan gunakan untuk referensi atau insfirasi pada desain template website atau blog-nya, dan jangan lula komentar-nya heheheheh....!

Cara Mudah Memindahkan Tabel dari Microsoft Word 10 ke Konten Blogger

Pada fasilitas blogger tidak tersedia menu pembuatan tabel seperti pada menu web yang berbasis content management sistem (CMS) apa sebabnya kita tidak tau, yang pasti kadang-kadang tulisan yang kita buat untuk mengisi konten blog pasti membutuhkan sebuah tabel seperti contoh yang saya buat dibawah ini yaitu klasemen sementara pertandingan Piala Eropa 2016.

Sebenarnya ada banyak cara untuk memasukan tabel ke konten blogger seperti merubah format file dari word ke html tetapi ini sangat rumit, bagi yang tidak mengerti apa itu bahasa pemograman html maka akan bingung baik membuat maupun menginputnya ke dalam isi blogger.

Mari kita mulai, untuk langkah awal siapkan secangkir kopi atau teh hangat heheh... cuma bercanda..! langkah awal siapkan tabel yang sudah anda buat pada microsoft word 10 dan tabelnya harus final, seperti jumlah kolom, jumlah row dan warna jika ingin menarik, karena jika anda sudah masukan kedalam blog maka tidak bisa diedit lagi, tetapi untuk isi tabel masih bisa dirubah.

1. Tabel yang sudah siap untuk dipindah dari microsoft word 10 ke konten blog.

• Tanda panah merah
• Arahkan cursor anda ke menu "File" klik

2. Pilih menu dropdown "File"

• Kemudian pilih "Save & Sand"
• Tunggu sampai muncul halaman pilihan sebelah kanan.

3. Kemudian pilih menu "Post as Blog Post"

4. Pada informasi halaman sebelah kanan ada tulisan Blog, WordPress dll berarti konten ini bisa digunakan pada isi konten yang disebut.

5. Jika anda sudah merasa yakin dengan tabel dan isinya sudah siap di publikasikan blog anda, silakan klik "Publis as Blog Post" pada tombol bawah sebelah kanan.

6. Pada halaman kerja microsoft word anda akan muncul halaman baru yang akan anda copy ke blog anda, tetapi sebelum anda meng-copy tabel anda harus memblok dulu isi halaman dari judul hingga akhir tabel yang ingin di masukan ke blog anda.

7. Setelah meng-copy bisa dengan cara klik kanan pada cursor setelah itu klik copy, bisa juga pada keyboard tekan tombol Ctrl+C, 

• Kemudian masuk ke halaman blog anda Paste menggunakan tombol keyboard (Ctrl+V). 
• Jangan lupa simpan atau publikasi langsung.

3 Contoh Form Login

Hai agan-agan yang lagi cari-cari referensi untuk insfirasi membuat template website/blog silakan lihat dan pilih-pilih form login dibawah ini semoga bisa bermanfaat untuk proyeknya. Walaupun sedehana silakan dikembangkan, bagi yang jago koding silakan mengembangkannya menjadi lebih baik sesuai dengan ide dan kreatifitasnya, dan bagi yang newbie atau yang ingin coba-coba membuat sebuah form login bisa digunakan dan diotak-atik sesuai dengan selera, tingga merubah warna tampilan aja, juga link ke php dan database.

Pada tutorial di bawah saya menggunakan framework bootstrap untuk membuatnya, karena lebih mudah, maklum ane juga tidak jago koding hanya bermaksud untuk berbagi penglaman sambil belajar dan membuat perpustakaan online siapa tau dikemudian hari perlu jadi tidak repot-repot cari di file dihardisk.

Ok tanpa banyak basa-basi silakan bagi yang ingin copy langsung kodingnya silakan, bagi yang ingin menganalisa juga boleh, atau bagi yang ingin pilih-pilih juga tidak apa-apa, dan ane minta kesediaanya untuk memberikan komentar jika ada yang kurang sempurna.

1. Vertical Form Login

Vertikal form login sangat umum digunakan dan sering dilektakan di samping kiri atau kanan web/blog, tujuannya agar pengunjung lebih mudah jika sewaktu-waktu ingin login.

Kode HTML :

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Form Lgon Sederhana</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

  <h2>Vertical Login Form</h2>

  <div class="row">

  <div class="col-sm-4"></div>

  <div class="col-sm-4" style="background-color:lavender;">

  <h3>Login</h3>

  <form role="form">

    <div class="form-group">

      <label for="email">Email:</label>

      <input type="email" class="form-control" id="email" placeholder="Enter email">

    </div>

    <div class="form-group">

      <label for="pwd">Password:</label>

      <input type="password" class="form-control" id="pwd" placeholder="Enter password">

    </div>

    <div class="checkbox">

      <label><input type="checkbox"> Remember me</label>

    </div>

<div class="row">

        <div class="col-sm-12 form-group">

    <button type="submit" class="btn btn-default pull-right">Submit</button>

</div>

</div>

  </form>

  </div>

  <div class="col-sm-4"></div>

  </div>

</div>

</body>

</html>

2. Form Login Inline

Form login inline seperti yang kita lihat sering digunakan oleh web yang bersifat komunitas seperti jejaring sosial, forum, berbagi foro atau video. Jika anda ingin membuat web komunitas silakan gunakan form login inline untuk menjadi referensi anda untuk mengembangkannya.

Kode HTML :

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Login Inline</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<nav class="navbar navbar-default">

 <div class="container">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

 </button>

 <a class="navbar-brand" href="#">NamaWebsite</a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

        <li class="active"><a href="#">Beranda <span class="sr-only">(current)</span></a></li>

        <li><a href="#">HTML</a></li>

        <li class="dropdown">

          <a href="#" class=S"dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

 

 <form class="navbar-form navbar-right" role="form">

<div class="input-group">

<span class="input-group-addon" id="username">@</span>

<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">

</div>

<div class="input-group">

<span class="input-group-addon" id="pwd">!</span>

<input type="password" class="form-control" placeholder="Password" aria-describedby="sizing-addon1">

</div>

<button type="submit" class="btn btn-primary">Login</button>

<button type="submit" class="btn btn-info">Sign Up</button>

 </form>

</div>

</div>

</nav>

<p><center>Form Login untuk web berbasis CMS</center></p>

</body>

</html>

3. Form Login Horizontal

Form login horizontal biasanya digunakan pada halaman untama website, atau login menggunakan tombol pengarah seperti tombol "Login", ketika pengunjung mengklik tombol "Login" maka akan muncul halaman khusus login horizontal, kenapa harus menggunakan halaman khusus?? karena form login inline tampilannya agak lebar, makanya setiap template yang mengguakan form login inline selalu menyediakan halaman khusus bahkan dengan sistem popup dengan bantuan javascripts.

Kode HTML :

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Login Horizontal</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<div class="row">

<div class="col-md-6 col-md-offset-3 color">

<br>

<h2>Form Login Horizontal</h2>

<form class="form-horizontal">

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> Remember me

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-primary pull-right">Sign in</button>

    </div>

  </div>

</form>

</div>

</div>

</body>

</html>

Silakan digunakan sebagaimana menstinya, hehehehe..! kayak isi surat aja, ane sangat berharap masukan dari agan-agan untuk penyempurnaan form login yang sangat sederhana diatas. Oh ya jika agan-agan ingin membuat menu navigasi silakan lihat aretikel disini ya..!