sponsor

sponsor

Slider

Materi dan Tutorial Khusus Untuk Membuat Situs Web Dan Blog Bagi Pemula Hingga Tingkat Mahir. Gambar tema oleh kelvinjay. Diberdayakan oleh Blogger.

Posts

Recent Tube

Business

Technology

Life & style

Games

Sports

Fashion

Artikel Website

Anda membuat sebuah website diperlukan sedikitnya 4 langkah

By: MELANESIA POST on 12.44 / comment : 0 , , , , , , , ,


Web Design Minimalis
Memilih desain terbaik untuk web perusahaan anda sangatlah penting, kecuali jika anda hanya ingin membangun sebuah web berbasis bisnis, mungkin anda tidak terlalu memikirkan bagaimana desainnya melainkan bagaimana sistem bisnis pada web tersebut berjalan optimal. Membangun sebuah website memerlukan proses dan waktu yang tidak cepat.
Untuk membantu Anda membuat sebuah website diperlukan sedikitnya 4 langkah, yaitu :

1. Memastikan tujuan pembuatan website

Sebelum anda mencari perusahaan jasa pembuatan website, alangkah baiknya jika anda mendifinisikan garis besar isi dan tujuan dari web yang ingin anda buat. Buatlah beberapa pertanyaan yang dapat menunjang dalam suksesnya pembuatan web anda, seperti dibawah ini :
- Apa tujuan anda membuat website?
- Apakah web tersebut menjual atau hanya sekedar company profile?
- Apakah anda memiliki katalog produk?
- Siapa saja target pasar anda?
- Apakah sudah punya merk?
- Siapa saja kompetitor anda?
- Apakah mereka sudah mempunyai website? Jika iya, seperti apa website mereka?
- Seberapa cepat anda ingin web anda langsung jadi?
- Apa yang terjadi jika anda tidak membuat website tersebut?

Mungkin untuk menjawab pertanyaan diatas agak memakan waktu, namun jika anda mempunyai waktu luang anda dapat menulis jawabannya di selembar kertas. Karena pertanyaan tersebut biasanya akan ditanyakan terlebih dahulu oleh setiap perusahaan jasa web design sebelum mereka membuat web perusahaan anda. Jika anda sudah mendapatkan semua jawaban diatas, anda akan mempunyai beberapa kriteria untuk memilih desain terbaik untuk website anda. Misal jika anda ingin membuat web toko online, maka sebaiknya anda mencari perusahaan yang sudah berpengalaman membuat toko online, selain dari kualitasnya yang baik, mereka juga akan lebih cepat menyelesaikan proses pembuatan website anda, karena pengalaman yang mereka miliki untuk membuat web sejenis.

2. Tentukan biayanya

Berapa biaya yang anda targetkan untuk website tersebut. Jika anda masih awam tentang harga web design, ada baiknya anda melakukan survey harga dulu ke beberapa Perusahaan jasa web design, yang kemudian dari hasil survey tersebut anda dapat mengira2 berapa budget yang diperlukan. dengan demikian ketika anda bernegosiasi dengan perusahaan pembuat web, anda sudah mempunyai data yang lengkap.

3. Menentukan Desain Web

Step ke-3 ini sangatlah penting bagi website anda, karena desain dari sebuah website mempunyai nilai jual tersendiri di mata konsumen. Usahakan desain yang anda inginkan sudah ada sebelum anda melakukan deal dengan perusahaan jasa web tersebut. Dengan demikian, anda dapat menanyakan langsung berapa lama untuk proses pembuatan web design tersebut. Jika anda memiliki gambar produk atau logo perusahaan, alangkah baiknya jika anda menyertakan foto produk dan logo perusahaan anda, sehingga perusahaan jasa pembuatan web dapat memberikan masukan dan ide untuk desain web anda.

4. Memilih Web Hosting dan domain

Jika anda masih awam tentang web hosting dan nama domain, lebih baik anda serahkan proses ini kepada yang lebih berpengalaman yaitu itu sendiri, karena biasanya mereka akan menawarkan dengan paket-paket hosting dan domain yang sudah siap pake. Namun jika anda ingin menentukan hosting dana domain sendiri, ada baiknya anda melakukan riset pasar terlebih dahulu. Misal, jika target pasar anda adalah dalam negeri, maka akan lebih baik jika nama domain anda menggunakan bahasa indonesia, dan hosting yang akan digunakan menggunakan server IIX server indonesia (bukan server luar). Untuk penjelasan terperinci proses ini akan saya bahas di lain kesempatan.

Membuat Pure CSS3 Horizontal Accordion Menu (Tanpa Javascript Atau jQuery)

By: KOTEKA CREATING WEBLOG on 07.38 / comment : 0 , , , , , , , , , , ,

Membuat Pure CSS3 Horizontal Accordion Menu (Tanpa Javascript Atau jQuery)

                                                        Text Resizer: Click for ResizerOcre, kali ini saya mau kembali ngajak anda main-main sama CSS3. Tepatnya, kali ini saya mau ngajak anda untuk membuat . Untuk yang gak tau apa itu "Accordion Menu", silahkan bayangkan sebuah "Harmonika Tangan" . Biar lebih gampang silahkan perhatikan gambar dibawah ini:Nha, Accordion Menu punya bentuk yang saya asumsikan mirip dengan bentuk Harmonika Tangan, yaitu ketika bagian lain dibuka bagian lainnya akan menutup secara otomatis. Bentuk aslinya bisa anda lihat pada gambar paling atas atau klo mau liat penampakannya secara langsung silahkan menuju link demo dibawah ini:Abiz ngeliat demo, pasti anda penasaran donk sama cara bikinnya hhe... Ocre Let's Go...5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode tersebut:6. Beralihlah, dan silahkan pikirkan dahulu mau ditaruh disebelah mana Accordion Menu ini. Saya kasih waktu 5 Menit dari sekarang .... aku arep nyruput kopi 'sik hhe...7. Udah? klo menurut anda Accordion ini lebih tepat jadi Widget Silahkan letakkan HTML yang akan saya berikan setelah ini di Edit Laman > Add Gadget atau klo anda lebih minat meletakkannya ditempat yang suka-suka anda dibawah postingan, diatas postingan atau bahkan pengganti postingan hha.... silahkan Cari kode , dan letakkan HTML dibawah ini setelah Kode tersebut atau tepat dibawahnya:8. Tolong jangan ditanya-tanya apa arti dari kalimat-kalimat diatas, soalnya itu saya ambil ngawur dari Template-template Free yang beralamat di btemplates.com haha.. biar agak gaya aja gitu soalnya saya lagi males ngarang tulisan panjang-panjang hhe... Dan kalimat tersebut bisa anda ganti dengan Script Widget anda klo mau. Multifungsi sesuai kebutuhan masing-masing lah haha...9. Klo Udah silahkan Save Template anda dan lihat Hasilnya.Untuk ng'ganti lebarnya silahkan ganti angka di Width yang saya kasih warna merah, dan klo gak suka dengan warna Background yang saya hadirkan silahkan ganti warna yang udah saya bikin warna-warni diatas dengan warna yang anda inginkan atau klo mau lebih spesifik pake aja Kode Warna Hexa.

"Accordion Menu"*Bukan Harmonika mulut








1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

]]></b:skin>

/*------------------------------------*\
ACCORDION
\*------------------------------------*/
.accordion{
width:940px;
overflow:hidden;
list-style:none;
margin-bottom:10px;
text-shadow:1px 1px 1px rgba(0,0,0,0.25);
}
.accordion li{
float:left;
width:20%;
overflow:hidden;
height:250px;
-moz-transition:width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
}
.accordion li:first-of-type{
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
}
.accordion li:last-of-type{
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
.accordion div{
padding:10px;
}
.accordion:hover li{
width:10%;
}
.accordion li:hover{
width:60%;
}
.slide-01 { background:red; color:white; }
.slide-02 { background:orange; color:white; }
.slide-03 { background:yellow; color:#333; text-shadow:none; }
.slide-04 { background:green; color:white; }
.slide-05 { background:blue; color:white; }
.accordion:hover li{
width:10%;
}
.accordion li:hover{
width:60%;
}




<body><body>

<ul class="accordion">

<li class="slide-01">

<div>

<h2>Slide one</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

</div>

</li>

<li class="slide-02">

<div>

<h2>Slide two</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

</div>

</li>

<li class="slide-03">

<div>

<h2>Slide three</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

</div>

</li>

<li class="slide-04">

<div>

<h2>Slide four</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

</div>

</li>

<li class="slide-05">

<div>

<h2>Slide five</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

</div>

</li>

</ul>





Selamat Mencoba...


Keterangan: Untuk ng'ganti lebarnya silahkan ganti angka di Width yang saya kasih warna merah, dan klo gak suka dengan warna Background yang saya hadirkan silahkan ganti warna yang udah saya bikin warna-warni diatas dengan warna yang anda inginkan atau klo mau lebih spesifik pake aja Kode Warna Hexa.

Cara Menambahkan Widget Twitter ke Website

By: KOPPAJA PAPUA on 10.32 / comment : 0 , , , , , , , , , , ,

Cara Menambahkan Widget Twitter ke Website

Hits: 537
Menambahkan widget twitter ke website cukup sederhana dan sangat mudah. Tentunya syarat utamanya adalah anda harus mempunyai akun twitter terlebih dahulu. Jika belum punya maka anda bisa membuatnya lebih dahulu. Anda bisa melihat contoh widgetnya seperti yang saya pasang di KursuswebPro.

Langkah-langkahnya sebagai berikut:

1.  Ketikkan pada tab browser anda http://www.twitter.com. Selanjutnya klik link "Login" untuk masuk ke area member twitter. Masukkan username dan password dengan benar.
 kursus website toko online
2.    Setelah Login, klik pada icon “Roda” kemudian pilih submenu “Setting”.

kursus website toko online
3.    Pilih menu “Widget” pada Navigasi jendela sebelah kiri.
kursus website toko online
4.    Kemudian Klik tombol “Create New”.

kursus website toko online
5.   Lakukan Konfigurasi untuk widget yang anda buat. Lihatlah contoh konfigurasi seperti pada gambar dibawah. Anda bisa melihat jendela “Preview” untuk melihat efek konfigurasi yang anda isikan.
kursus website toko online
6.    Setelah selesai melakukan konfigurasi, untuk menyimpannya cukup dengan menekan tombol “Create Widget”.
7.    Secara otomatis twitter akan menggenerate kode script untuk anda. Maka anda akan mendapatkan Kode script seperti contoh gambar di bawah ini.
 kursus website toko online
8.    Copy dan Paste kan kode script yang anda dapat di poin(7) ke website toko online anda.
9.    Selamat mencoba..!

Jika anda benar melakukan langkah-langkah di atas maka anda akan bisa melihat timeline dari twitter. Refresh halaman website anda.

Cara Import Database yang Melibihi Limit PHPMyadmin - XAMPP

By: KOPPAJA PAPUA on 10.31 / comment : 0 , , , , , , , , , , , ,

Cara Import Database yang Melibihi Limit PHPMyadmin - XAMPP

Hits: 1153
Suatu saat mungkin anda melakukan pekerjaan mengimport database melalui PHPMyadmin dengan server Localhost XAMPP, dimana ukuran file database melebihi limit yang sudah tersetting di PHPMyadmin. Akibatnya akan muncul Error dan Database gagal di import.

Hal ini dikarenakan setting server XAMPP default.  Biasanya masalah ditemukan pada setting php dan mysql server. Anda dapat merubah setting default server XAMPP tersebut.  Untuk mengatasinya anda bisa melakukan langkah-langkah berikut:

1.    Jika XAMPP anda sedang aktif maka sebelumnya matikan dahulu server XAMPP dengan menekan tombol “ Stop” pada server Apache dan MySQL .

 kursus website toko online

2.    Temukan path tempat anda menginstall XAMPP. Misalnya : C:\XAMPP. Artinya XAMPP terinstal pada direktori C pada komputer lokal anda.
 kursus website toko online

3.    Pada folder XAMPP, temukan path file php.ini. Lokasinya adalah: C:\XAMPP\php\php.ini. Selanjutnya Edit "php.ini" menggunakan editor Notepad.

4.    Temukan kode:

upload_max_filesize = 8M
Catatan: Ganti nilai pada tulisan merah.
Selanjutnya  Simpan File
kursus website toko online

5. Masih di XAMPP temukan file my.ini. Pathnya yaitu: C:\ xampp\mysql\bin\my.ini. Selanjutnya Edit php.ini menggunakan editor Notepad.

Temukan kode:  max_allowed_packet = 8M
Catatan: Ganti nilai pada tulisan merah.
Selanjutnya  Simpan File.
 kursus website toko online
6.    Setelah anda mensetting file php.ini dan my.ini maka anda bisa buka  dan aktifkan kembali Server XAMPP anda.  Klik tombol “Start” pada Apache dan MySQL.

7.    Jalankan PHPMyadmin dan cobalah kembali mengimport Database anda. Ketikkan pada tab browser: http://localhost/phpmyadmin . Selanjutnya pada navigasi sebelah kiri pilih nama Database. Pada jendela tengah pilih tab "Import".

8. Pilih file database yang akan anda import dengan menekan tombol "Browse". kemudian lanjutkan dengan klik tombol "Go" untuk memulai proses import database.
9. Selamat mencoba..semoga bermanfaat.

Cara Cepat dan Mudah Membuat Aplikasi Formulir untuk Website

By: KOPPAJA PAPUA on 10.29 / comment : 0 , , , , , , , ,

Cara Cepat dan Mudah Membuat Aplikasi Formulir untuk Website

Hits: 2209
Kursus website toko onlineSetiap website biasanya memiliki minimal satu atau lebih aplikasi formulir. Aplikasi formulir bisa berupa kontak,pendaftaran, form order, form survey dan atau yang lainnya. Biasanya pembuatan form tertentu  untuk website dibuat dengan melakukan coding atau menuliskan code script ke dalam website. Tentunya bagi anda yang awam bahasa pemrograman web pasti akan mengalami kesulitan.

Tapi jangan kuatir, sekarang sudah ada fasilitas form builder yang tersedia secara online dan gratis.  Aplikasi ini memudahkan kita dalam membuat beragam aplikasi formulir tanpa harus  tahu bahasa programming.  Dengan aplikasi ini anda bisa membuat form online dalam waktu yang relatif cepat dan tentunya profesional.  Aplikasi form builder online yang saya maksud adalah JotForm. Form builder ini bisa diaplikasikan untuk bermacam-macam platform website (misalnya: Joomla,Wordpress,Drupal,Oscommerce,Opencart,dll)

Aplikasi ini bisa anda manfaatkan secara gratis.  Baiklah, saya akan menunjukkan bagaimana cara membuat form secara mudah,cepat, dan profesional menggunakan JotForm.
1. Kunjungi websitenya di http://www.jotform.com. Anda harus  melakukan proses  Sign up terlebih dahulu agar bisa memanfaatkan fitur Form Builder tersebut.
Kursus Website
2. Setelah proses Signup selesai maka anda akan mendapatkan kiriman email konfirmasi dan validasi untuk aktifasi Login. Klik menu atas “Login”. Masukkan Username dan Password.
Kursus Website
 3. Silahkan login menggunakan akun yang anda buat pada saat Signup. Selanjutnya klik tombol “Create Form”.
 Kursus Website
4. Pilih “Blank Form” untuk membuat formulir baru sesuai selera anda. Klik tombol “Create”.
 Kursus Website
5.  Pembuatan form dengan cara “Drag & Drop” atau “Tarik dan Letakkan”. Perhatikan pada Navigasi sebelah kiri. Tarik variabel  form ke jendela tengah dengan mouse anda kemudian Edit “Nama  Variabelnya”.  Anda bisa lihat seperti contoh gambar dibawah ini:

Kursus Website
6. Jika sudah selesai membuat form, langkah berikutnya adalah melakukan Setting halaman “Terimakasih” dan Notifikasi Email ke Anda. Secara otomatis notifikasi akan terkirim ke email utama yang anda gunakan pada saat proses Signup. Akan tetapi anda bisa juga menggunakan email yang lain untuk pengiriman  notifikasi.
7. Perhatikan icon menu atas. Klik pada icon “Email Alerts” kemudian klik pada link teks “Notification”. Edit "From Name" dan "Recipient Email". Selanjutnya klik tombol “Finish”.
Kursus Website
8. Berikutnya adalah mensetting halaman “Terimakasih’. Masih di menu atas, klik icon “Thanks Wizard”. Pilihlah salah satu opsi. "Default Thank You Page" digunakan jika anda ingin menggunakan halaman Terimakasih yang dibuatkan oleh JotForm,  "Custom URL" digunakan jika anda ingin mengarahkan halaman terimakasih ke URL tertentu dalam website anda. Dan jika anda ingin membuat halaman terimakasih sendiri pilih opsi “Thank You message”.
 Kursus Website
9.    Edit halaman “Thank You message” dengan menggunakan teks editor yang sudah tersedia. Anda juga bisa memasukkan variabel form ke dalam teks anda. “Tarik dan Letakkan” variabel form ke dalam teks editor seperti contoh gambar dibawah ini.
 Kursus Website
10. Langkah berikutnya adalah mendapatkan script code formulir anda. Klik pada icon “Embed form”. Pilih platform website yang anda gunakan. Maka selanjutnya akan tampil code script. Copy dan Pastekan code tersebut ke dalam website anda.
 Kursus Website
11.    Jika sudah selesai, Simpan form dan berikan judul form. Secara otomatis jika ada submission maka data bisa dilihat pada Email notifikasi yang terkirim ke email anda dan atau melalui website JotForm melalui menu “My Form” >> Pilih Nama Form >> Klik tab dropdown “More”. Pilih link teks “View Submissions”.  Img13
 Kursus Website
12. Hasilnya anda akan melihat semua submission pada formulir yang sudah anda buat. Mudahkan..? Selamat mencoba. Semoga bermanfaat.
Langganan: Postingan (Atom)
Created By SoraTemplates | Distributed By Blogger