Website and Computer Tutorial

Cara Membuat Floating Menu Ringan ala Kaskus di Blog

2016-02-10T13:03:00.002+07:00

Ini adalah tutorial cara membuat Floating Menu pada blogger yang selalu berada di posisi atas blog walaupun saat scroll hanya dengan menggunakan CSS tanpa menggunakan .JS (Javascript), sehingga tidak berpengaruh pada loading blog sobat. Menu yang hanya menggunakan CSS sering dipakai para blogger karena simple dan tidak membuat loading berat jika digunakan di blog.

Floating Menu sudah sering kita jumpai di berbagai website berita ataupun lainnya. Tutorial ini saya dapat dari blog Kang Ismet yang ditulisnya beberapa tahun lalu.

Menurut Kang Ismet, konsep dasar Floating Menu ini sebenarnya sederhana, rahasianya ada pada CSS berikut ini:

#floating_menu{
width:100%;
position:fixed;
top:0;
}

Lalu diberi CSS tambahan untuk mempercantik tampilannya, seperti; height, z-index, font, color, dll.

Tampilan Floating Menu yang dibuat oleh Kang Ismet ini mirip sekali dengan tampilan kaskus beberapa waktu lalu, namun tanpa icon Home, dan FJB.

Dan ini adalah CSS untuk mempercantik tampilan floating menu yang harus di letakkan di atas ]]></b:skin>

/* Floating Menu */
#ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top, #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom, #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

Ganti ukuran menu 970px dengan ukuran blog sobat agar tampilannya penuh, atau sobat bisa mengubah dengan ukuran yang diinginkan. Untuk menampilkannya, saya menyarankan untuk meletakkan kode ini di atas <footer. Cara ini untuk mencegah text yang ada di floating menu dijadikan deskripsi pada SERP oleh Google.

<div id='ki_floating_menu'>
<ul>
<li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwrSz2m-MIQnXiVEsaVbB7eBAeOpO2JNWTNebNWU0IBSP-T5rwTcRUEX6R7IePidM-8_uoln22CB6k3_IBLsyf64XfdP9DINbSS0ZqDrTfsAUmSeHYBWJtqMp_RhVv6ZkBdtlaehDCy7k/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

Setelah itu save template, lalu bandingkan tampilannya dengan demo yang sudah dibuat oleh Kang Ismet di bawah ini:

Demo

Membuat Project Baru di Autoplay Media Studio

2016-02-08T14:13:00.003+07:00

Ini adalah hal pertama jika sobat ingin membuat program sederhana di komputer. Software yang dibutuhkan untuk membuat aplikasi tersebut adalah Autoplay Media Studio, dan versi yang saya gunakan adalah versi 8.3. Download versi terbaru Autoplay pada website resminya, klik pada link ini.

Setelah sobat menginstal Autoplay pada Laptop atau PC, jalankan programmnya lewat dekstop. Dan tampilannya akan seperti ini:

Ini adalah pilihan untuk membuat project baru dan membuka project yang sudah ada. Maka klik "Create a New Project" untuk membuat project baru.

Beri nama untuk project yang akan dibuat, sobat bisa mengubahnya lagi nanti pada folder Autoplay yang ada di My Document. Saya akan coba beri nama My Project.

Ini adalah tampilan jika nama project yang akan dibuat sudah dipakai sebelumnya, ganti nama project dengan nama yang belum pernah dibuat agar data project yang sebelumnya tidak tertimpa dengan project yang baru.

Setelah itu akan ada tampilan seperti ini, sebut saja ini worksheet yang memuat object yang akan sobat kerjakan untuk membuat project. Worksheet ini mempunyai 2 jenis, yaitu Page dan Dialog. Kita akan membahasnya di lain waktu.

Cara Mengatasi Komentar yang Tidak Muncul di Blog

2016-02-07T09:05:00.002+07:00

Ini adalah tutorial bagaimana cara mengatasi kolom komentar blogger yang hilang. Sebelumnya saya akan menjelaskan kenapa kolom komentar pada blog sobat tidak muncul.

Ada beberapa hal yang menyebabkan form komentar tidak muncul, di antaranya:

1. Pengaturan "Comment Location" yang di-hide
Pengaturan ini ada pada Setting > Posts and comments > Comments, lalu ubah pengaturan Comment Location menjadi:

Embedded, untuk kolom komentar yang letaknya tersemat di bawah postingan. Blogger umumnya menggunakan ini.
Full page, ini untuk kolom komentar berupa link yang memunculkan tab baru pada browser yang memuat komentar blog.
Popup Window, dan ini untuk kolom komentar berupa link yang memunculkant popup window yang memuat komentar blog.

2. Opsi "Reader comments" yang di-Don't allow
Kurang lebih pengaturannya seperti ini:

Don't allow, show existing gunanya untuk mencegah orang yang ingin berkomentar, tapi tidak menghilangkan komentar sebelumnya.
Sedangkan Don't allow, hide existing untuk mencegah dan menghilangkan komentar yang sudah ada.
Silahkan pilih Allow untuk memunculkan kolom komentar.

3. Pengaturan Komentar pada Layout > Blog Post tidak dicentang

4. Ada kode pada Template sobat yang Error

5. Atau bisa jadi Template yang sobat gunakan tidak mendukung kolom komentar

Dan itu adalah 5 hal yang mungkin menjadi penyebab mengapa kolom komentar di blog sobat menghilang.

Solusi CNAME Tidak Muncul Saat Dipasang

2015-04-04T03:27:00.002+07:00

Beberapa minggu lalu, saya meregistrasikan sebuah domain melalui Web Hosting lokal IDwebhost yang langsung saya hubungkan dengan Blogspot. Seperti biasa, kedua CNAME muncul pada saat saya mengganti opsi "Setup a 3rd party URL for your blog" pada tab Publishing yang ada di Setting, lalu saya hubungkan dengan Cloudflare.

Setelah beberapa saat, saya mencoba menghubungkannya dengan Wordpress, tidak ada kendala karena yang diganti hanya Nameserver-nya saja. Dan saat saya hubungkan kembali dengan Blogger, saya heran kenapa sudah beberapa hari CNAME record-nya dihapus, tetapi domain tersebut tetap tidak bisa dipakai.

Tidak bisa terpakainya domain karena saya tidak tau Google sudah tidak membutuhkan verifikasi domain yang sama untuk kedua kalinya. Misalnya seperti waktu sobat memasukkan domain saat pertama kali, akan ada error yang menunjukkan CNAME record "www" yang mengarah ke "ghs.google.com" dan CNAME yang berbeda-beda pada tiap domain.

Dan jika sobat pernah berpindah dari Blogger, lalu kembali ke Blogger, sobat sudah tidak memerlukan verifikasi record CNAME tersebut. Lantas yang perlu sobat lakukan hanyalah sebagai berikut:

1. Memasukkan CNAME record "www" yang mengarah ke "ghs.google.com"

2. Dan juga A record berupa URL Domain sobat menuju 4 IP ini:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Ini adalah screenshot percakapan saya dengan customer service IDwebhost saat saya menanyakan masalah asal terpasang-nya domain saya saat dipasang di Blogger.

Cara ini saya lakukan langsung dengan domain saya sendiri, dan terbukti berhasil. Sobat bisa mem-bookmark postingan ini untuk dicoba saat blog sobat ingin migrasi kembali ke Blogger, agar tidak bingung mencari kesana-kesini tentang CNAME yang hilang dan lupa tercatat.

Sekian tips dari saya agar Domain sobat tetap terpasang walaupun tanpa CNAME record yang muncul pada Blogger.

5 Daftar Situs Penyedia SSL Gratis

2015-03-23T00:46:00.001+07:00

Jika sobat adalah seorang pembisnis yang bergelut di dunia maya, khususnya pengelola blog/website toko online. Maka sobat harus memperhatikan juga keamanan yang terdapat pada website tersebut, hal ini tentu akan memudahkan sobat dalam meyakinkan visitor bahwa situs yang sobat kelola dapat dipercaya.

Salah satu keamanan yang perlu sobat perhatikan pada blog/website toko online adalah SSL.
Apa itu SSL?

"SSL (Secure Sockets Layer) adalah protokol yang menyediakan komunikasi aman di internet untuk hal-hal seperti penjelajahan web, email, perpesanan instan, dan transfer data lainnya." -Google.

Kabarnya Google kini sudah mampu membedakan antara situs yang aman untuk dikunjungi maupun tidak, ini akan berdampak pada hasil penelusuran di mesin pencarian Google sendiri. Artinya Google akan mengutamakan website yang aman di hasil pencariannya, sehingga visitor akan mengunjungi website yang benar-benar aman bukan sebaliknya.

Mungkin ini adalah kendala bagi sobat yang hanya sekedar iseng berjualan online di internet karena harus mengeluarkan beberapa biaya untuk membeli SSL. Walaupun begitu masih ada beberapa penyedia SSL gratis yang dapat sobat pakai untuk memperkuat keamanan blog/website sobat, seperti:

1. Cloudflare

Cloudflare adalah yang paling saya rekomendasi, situs ini menyediakan SSL gratis dan akses DNS untuk blog/website sobat tanpa batasan waktu.

2. CACert

CACert adalah penyedia SSL gratis selanjutnya, situs ini menyiapkan SSL gratis selama 1 tahun yang dapat sobat perpanjang sebelum masa aktifnya habis.

3. StartSSL

StartSSL menyediakan Sertifikat SSL yang dapat sobat pakai selama 30 hari secara gratis, sobat dapat memperpanjang sebelum masa aktif habis.

4. InstantSSL Comodo

InstantSSL Comodo dapat memberikan sobat fitur trial SSL gratis selama 90 hari. Setelah masa trial, sobat hanya dapat memperpanjang dengan membelinya.

5. GoGetSSL

GoGetSSL juga menyediakan masa trial untuk website sobat selama 90 hari sebelum sobat melakukan pembelian SSL sesungguhnya.

Dari beberapa situs penyedia SSL gratis diatas, dapat sobat jadikan sebagai referensi untuk memberi keamanan lebih pada blog/website sobat dan memberi kepercayaan lebih pada visitor dan calon pembeli pada situs belanja online yang sobat kelola.

Domain .SCIENCE Gratis

2015-03-21T04:54:00.005+07:00

Sekarang ini sudah banyak ekstensi domain yang mewakili websitenya masing-masing. Tidak hanya domain TLD seperti .COM, kini sudah ada domain gTLD (Generic Top Level Domain) yang mewakili kemana website ini menjurus menjadi lebih spesifik lagi. Contoh ekstensi gTLD seperti .SCIENCE. Seperti namanya, tentunya ekstensi ini dipakai untuk mewakili website yang berkenaan dengan hal Sains.

Harga ekstensi domain seperti ini lebih mahal ketimbang TLD, mungkin karena lebih mewakili. Namun, pada website register resminya di Register.science, mulai pada beberapa hari lalu penyedia domain ini menyediakan promo register domain .SCIENCE gratis untuk 1 akun dan 1 tahun pembelian.

Tidak ada syarat untuk mendapatkan promo ini, hanya tinggal daftar dan masukkan code promosinya. Dibawah ini adalah cara untuk mendaftarkan domain .SCIENCE secara gratis.

1. Buka link ini, dan daftarkan nama domain yang diinginkan.

2. Jika domain tersedia, klik Select, lalu klik Checkout (sudah saya beri tanda X)
Pada tahap ini mungkin akan sedikit kesulitan karena kadang domain yang tersedia telah di register, maka itu cari nama seunik mungkin.

3. Klik tombol yang sudah saya beri tanda X.

4. Masukkan code coupon "ForScience" lalu klik Apply. Harga akan berubah menjadi 0.00 Euro, lalu klik Confirm Order.

5. Sebelumnya jika anda belum mendaftar, lakukan pendaftaran dan isi email dengan benar.

6. Setelah itu, akan muncul Invoice pendaftaran domain yang selesai dibuat.

7. Akan ada pemberitahuan melalui email seperti ini.

8. Terakhir, buka email dan verikasi melalui link tersebut

Setelah itu domain sudah aktif, tinggal menyetting DNS lalu hubungkan ke Blogger/Hosting sobat.

Cara Memilih Nama Blog yang Bagus dan Cocok

2015-03-11T20:09:00.002+07:00

Salah satu hal utama yang sobat perlu lakukan, juga yang terpenting dalam membuat blog dan memulai bisnis sobat adalah memilih sebuah nama. Ini bisa jadi penentu proses keberhasilan sobat dalam memulai bisnis dengan blog. Ketertarikan calon pengunjung akan sebuah nama bisa jadi akan membuat bisnis sobat diingat dan dikunjungi di kemudian hari. Walaupun blog sobat tidak mendapat ranking pertama pada pencarian Google, ataupun pencari tidak mengunjungi blog sobat pada hari itu, mungkin di lain kali calon pengunjung akan mengingat nama blog sobat dan mengunjunginya di kemudian hari.

Kenapa penting memilih nama untuk blog, sedangkan konten atau bisnis yang kita sediakan sudah dapat dipercaya oleh pelanggan. Sebenarnya yang diutamakan di sini adalah calon pengunjung, yang artinya seseorang yang belum pernah mengunjung blog sobat sebelumnya, bukan pengunjung ataupun pelanggan, karena calon pengunjung belum tau apa dan seperti apa yang produk yang akan kita jual. Maka dari itu jadikan calon ini menjadi pengunjung, baru kita akan mendapatkan kunci menuju ke pintu berikutnya yaitu menjadikannya pelanggan.

Menarik calon pengunjung dengan alamat blog itu sangat menguntungkan. Hanya dengan bermodal alamat blog, calon pengunjung akan menungunjungi blog sobat. Sebelum sobat memilih alamat untuk blog, persiapkan nama usaha sobat yang mungkin cocok dan bagus dijadikan sebuah alamat blog. Misalnya sobat mempunyai usaha pakaian dan sablon yang bernama "F*uck Clothes", tentu sobat tidak akan memberi alamat seperti "f*ckclothes.com", karena kata itu sendiri adalah kata yang bermakna negatif dan sangat tidak sopan jika url tersebut dibagikan ke sosial media. Namun jika alamat diubah menjadi "fclothes.com" hasilnya akan bagus, tidak keluar dari jalur nama bisnis sobat, juga mendapat kata kunci dari alamat blog tersebut.

Mendapatkan kata kunci dari sebuah alamat blog adalah sebuah keuntungan. Jika pada kasus di atas sobat memilih alamat blog "onlineclothing.com", sobat sudah mendapatkan kata kunci untuk "online" dan "clothing" tentu ini sangat menguntungkan jika calon pelanggan mencari dengan kata kunci "online clothing di indonesia" atau "pesan clothing online" atau kata kunci lainnya. Selain itu, alamat blog yang menggunakan kata, lebih mudah diingat oleh para pengunjung. Dengan cara ini sobat dapat menyulap pengunjung menjadi pelanggan sobat. Dan jika si pelanggan memakai barang yang sobat jual, lalu dia memakai di rumah, di sekolah, ataupun ke kantor dan beberapa teman sekolah atau teman kantornya bertanya di mana dia membelinya, dia akan ingat dan memberi tahu semuanya, tentu ini akan sangat menguntungkan bagi sobat.

Maka dari itu buatlah alamat blog bukan hanya sekedar nama bisnis, tapi juga dapat mewakili dan mempercayai kepada calon pengunjung. Buatlah alamat se-simpel mungkin, dan mudah dalam pengucapan, maka blog sobat akan terus teringat oleh para pengunjung dan juga pelanggan.

Sekian tips dari saya mengenai cara menentukan alamat website untuk segera memulai memonitisasi.

Soal Simulator: Aplikasi Simulasi UN

2015-03-08T18:24:00.001+07:00

Soal Simulator adalah aplikasi pembelajaran dengan modul E-Learning yang bertujuan untuk mempermudah kegiatan belajar Peserta didik dalam menghadapi Ujian Negara.

Soal Simulator memiliki berbagai fitur yang mudah dipahami. Pada aplikasi ini terdapat soal-soal yang umumnya adalah soal-soal terdahulu yang dipakai pada tahun-tahun sebelumnya oleh Kemendikbud untuk diuji kepada Peserta didik pada saat UN.

Aplikasi ini adalah freeware atau gratis, hanya dengan mengunduhnya siswa dapat menjalankan program tanpa dipungut biaya sama sekali.

Dan ini adalah pengenalan UI(User Interface) pada aplikasi Soal Simulator.

Screenshot

Screenshot dapat berubah seiring pembaruan versi pada aplikasi

Updated Pembaruan pada tahun 2015

Tampilan awal

Pemilihan mata pelajaran

Tahun ajaran soal

Penambahan fitur listening

Berubah menjadi persentase

Fitur download langsung dari software

Video
Video belum tersedia

Soal Simulator it's easy to use, mudah dipelajari dan mudah dipahami bagi yang baru mencoba modul pembelajaran E-Learning ini. Navigasi pada aplikasi yang sangat user friendly akan membuat Peserta didik nyaman dalam pengerjaan soal.

Soal Simulator memiliki ukuran yang sangat ringan dan memiliki resolusi yang tidak terlalu besar, sehingga Peserta didik dapat menjalankannya pada PC atau Laptop beresolusi rendah sekalipun.

Soal Simulator dapat berjalan jika Windows pada PC atau Laptop sudah terinstall Microsoft .NET Framework 4.0 ataupun pada versi lebih tinggi. Untuk mendapatkan Microsoft .NET Framework, anda dapat mendapatkan versi terbarunya melalui link ini. Sebelumnya, pastikan seluruh perangkat PC atau Laptop anda mendukung.

Download | Version 1.0 Build 1 Date Jan 01 15 (Demo Version)

//docs.google.com/uc?id=0B6PuXoDH4x7IY2pxTjluQlVfQzA

FAQ

Apa itu Soal Simulator?
Soal Simulator adalah aplikasi yang berguna untuk mempermudah kegiatan belajar Peserta didik

Fitur yang dimiliki Soal Simulator
Soal Simulator memiliki berbagai fitur yang dapat memudahkan Peserta didik dalam melakukan kegiatan belajar.

Spesifikasi Pendukung Soal Simulator
Soal Simulator adalah Aplikasi yang sangat ringan dan memiliki resolusi yang tidak terlalu besar, sehingga dapat dimainkan pada PC atau Laptop yang mempunyai resolusi rendah. Soal Simulator dapat berjalan jika Windows pada PC atau Laptop sudah terinstall Microsoft .NET Framework 4.0 ataupun pada versi yang lebih tinggi. Anda dapat mendapatkan versi terbaru melalui link ini Download .NET Framework. Sebelumnya, pastikan seluruh perangkat PC atau Laptop anda mendukung.

Apakah Soal Simulator Gratis?
Soal Simulator adalah Freeware, aplikasi yang sama sekali tidak berbayar. Oleh karena itu aplikasi ini hanya akan menambahkan tombol Donasi. Fitur/waktu pemakaian Soal Simulator tidak akan dibatasi.

Teamwork
- Ahmad Haris as Programmer
- Yosia as Script Helper
- Deni Saputra as Writer
- DevCore (Foxcent Group)
- CSF Community