CARA MEMBUAT SENDIRI AKUN BLOG BARU DI BLOGSPOT

BAGAIMANA CARA MEMBUAT SENDIRI AKUN BLOG BARU DI BLOGSPOT

Untuk membuat sebuah akun di blogspot sangatlah mudah. Bahkan anak SD saja sudah banyak yang mengetahui cara ini, jadi saya yakin saudara pun tidak akan mengalami kesulitan di sini.

1. Silahkan kunjungi alamat www.blogger.com dan masukkan username dan password dari akun Gmail anda.
2. Dalam halaman dasbor anda akan melihat gambar anda, dan di bawah gambar itu ada sebuah tombol "Blog Baru". Klik pada tombol itu untuk memulai membuat blog anda.
   
3. Anda akan melihat sebuah formulir yang harus diisi untuk membuat blog baru anda. Di dalam formulir ini anda diminta mengisi Judul Blog, Alamat Blog, dan Template Dasar.
   
4. Panduan untuk anda: 
• Pastikan Judul, dan Alamat Subdomain yang anda pilih mengandung kata kunci yang anda targetkan. Atau sembarang saja jika anda berniat mengganti subdomain blogspot anda dengan domain sendiri nantinya (entah itu .com, .org, .net, dll). 
• Untuk bisnis online sangat disarankan untuk mengganti nama domain agar terlihat lebih profesional dan tentunya menunjang SEO jika nama domain anda bisa tepat sama dengan kata kunci yang anda kejar. (Biayanya cuma Rp.100.000/tahun)
5. Setelah anda selesai di formulir ini silahkan klik tombol BUAT BLOG, dan selesai

Sampai di sini anda sudah tahu cara membuat blog baru. Tapi blog saudara masihlah blog yang sangat standar dan belum ada isinya. Saudara akan sangat sulit bersaing di Google ataupun di pasar bisnis online jika hanya mengandalkan blog alakadarnya ini. Jadi anda harus tahu bagaimana cara membuat blog anda terlihat lebih menarik.

---

Cara Membuat Tampilan Blog Baru Anda Lebih Keren Dan Elegan

Sekarang blog anda sudah jadi, tapi tampilannya masih sangat standar sekali. Jadi ada baiknya saudara melakukan penggantian template agar tampilan blognya menjadi lebih keren dan lebih profesional. Untuk melakukan ini saudara bisa mengunjungi http://btemplates.com/.

Anda akan melihat bahwa pada situs btemplates ini ada banyak sekali template yang menarik untuk anda gunakan. Tapi sebelum anda memilih yang mana yang akan anda gunakan untuk membuat blog menjadi lebih keren; ada baiknya anda mengklik dulu link DEMO untuk melihat bagaimana tampilan online dari template ini.

Anda akan diperlihatkan tampilan dari template yang sudah diterapkan pada sebuah blog. Jika anda menyukainya, maka silahkan mengklik tombol DOWNLOAD yang ada pada navbar paling atas (lihat gambar di bawah)

Anda akan diarahkan ke halaman detail template dan di sana ada sebuah link download. Silahkan klik pada link tersebut untuk mengunduh template blog anda anggap bisa membuat blog anda terlihat lebih profesional.

Akan muncul kotak dialog untuk konfirmasi download anda, klik OK

Tunggu sampai pengunduhan file ZIP anda selesai. Jika sudah selesai; ekstraksi file ZIP tadi. Anda akan memperoleh sebuah folder yang di dalamnya ada file XML. File inilah yang akan anda upload pada blog baru yang tadi anda buat di blogspot. Pada contoh di bawah ada 2 file XML, yaitu versi dengan slideshow dan tanpa slideshow.

Sekarang anda sudah mempunyai sebuah template yang keren dan modis yang bisa dipasangkan pada blog yang baru anda buat ini. Tapi bagaimana cara memasang templatenya? Sederhana saja....Masuklah ke menu TEMPLATE dari blog anda dan cari tombol CADANGKAN DAN PULIHKAN di kanan atas layar anda. 

Akan muncul kotak pop-up. Silahkan klik browse dan buka file XML yang sebelumnya sudah anda ekstraksi dari file ZIP. Setelah anda memilih filenya silahkan klik UNGGAH

Tunggu sampai unggahan selesai, dan anda akan melihat tampilan dari blog anda sudah berubah sesuai dengan tampilan template blog keren yang sebelumnya anda pilih dan unggah. Jadi sampai di sini anda sudah tahu cara membuat blog anda tampil keren dan profesional. Hanya saja blog yang keren itu akan percuma jika tidak ada orang yang bisa menemukannya.

Yang perlu anda pelajari berikutnya adalah bagaimana cara membuat blog anda menjadi search engine friendly atau SEO ready. Ini adalah langkah yang sangat penting dalam membuat blog anda karena SEO inilah yang akan membuat blog anda bisa masuk ke halaman pencarian di mesin pencari seperti Google.

---

Belajar Cara Membuat Blog Anda Menjadi Lebih SEO Friendly

Sekarang anda sudah paham bagaimana cara membuat blog dan mengganti tampilannya. Dengan kata lain anda sudah memounyai sebuah blog dan blog itu sudah terlihat keren. Tapi apakah blog anda sudah bisa bersaing di Google? Tentunya bisa saja dicoba, tapi akan jauh lebih mudah jika anda melakukan optimasi SEO terlebih dahulu.

Apa yang dimaksud dengan SEO itu? SEO dalah usaha untuk membuat blog anda bisa muncul di halaman pencarian Google saat seseorang mencari sesuatu yang berkenaan dengan blog anda. SEO ini ada onpage dan juga ada Offpage. Onpage adalah segala sesuatu yang perlu kita lakukan pada blog kita, sedangkan offpage adalah yang perlu kita lakukan di luar mengedit blog kita.

Jadi kita di sini cuma bisa melakukan onpagenya saja.... Perlu diingat bahwa anda tidak perlu melakukan ini pada template-template yang sudah diklaim sebagai SEO friendly.

Cara Membuat Title Tag Blog Anda Menjadi SEO Friendly

Untuk membuat blog anda menjadi lebih SEO Friendly, maka ini adalah sesuatu yang perlu anda lakukan. Tapi sebelum anda melakukannya perhatikan dulu apakah title tag anda sudah benar atau belum benar? Bagaimana cara mengetahuinya? Mudah saja:

• Bukalah homepage dari blog anda dan lihat bagian tab dari blog anda apakah menampilkan judul blog anda?
• Jika sudah, sekarang buka satu artikel anda dan lihat tab browser anda, apakah menampilkan judul artikel anda?

Jika judul blog sudah ditampilkan di halaman homepage, dan judul artikel sudah ditampilkan di halaman artikel maka itu sudah cukup baik.... Lihat gambar di bawah ini

Sebaliknya, jika tampilan judul blog anda belum seperti di atas, maka coba gantikan kode <title>.... </title> yang ada di dalam menu TEMPLATE > EDIT HTML agar terlihat seperti di bawah ini:
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/></title>
    </b:if>

Jika sudah selesai, tekan tombol jingga SIMPAN TEMPLATE.

Cara Membuat Meta Description Blog Lebih SEO Friendly

Untuk membuat meta description dari blog anda menjadi lebih SEO Friendly lakukan langkah-langkah di bawah ini:

• Buka menu SETELAN > PREFERENSI PENELUSURAN dan lihat bagian paling atas halaman
• Klik EDIT pada TAG META Deskripsi
• Pilih Ya
• Masukkan 150 karakter yang anda anggap mengandung kata kunci yang anda incar dan paling tepat menggambarkan isi dari halaman muka blog anda, karena ini adalah tempat memasukkan meta description untuk homepage.
• Klik Simpan Perubahan, maka anda sudah mengaktifkan meta description pada blogspot anda.

Editan Ringan Pada Heading Blogspot Anda

Setelah anda mengedit 2 hal di atas; kembalilah ke menu TEMPLATE > EDIT HTML dan klik pointer kursor anda di antara kode-kode yang ditampilkan setelah itu tekan CTRL+F.

• Masukkan kode <h3 dan tekan enter, anda akan di bawah menuju kode tersebut dan ubahlah menjadi <h2. Tekan enter lagi untuk menemukan <h3 yang lainnya dan ubah semuanya menjadi <h2. Jika enter anda tiba-tiba merusak kode, cukup tekan saja CTRL+Z untuk UNDO dan mengembalikan perubahan terakhir
• Ganti kode <h3 yang ada di kotak pencarian menjadi </h3>, lalu tekan lagi enter untuk mencari semua kode itu dan ubah jadi </h2>.
• Jika sudah selesai, tekan tombol jingga SIMPAN TEMPLATE.

Semua perubahan di atas mungkin hanya akan membawa onpage blog anda menjadi 70% SEO Friendly, tapi itu sudah cukup sebagai awalan. Nanti ke depannya anda akan mempelajari teknik-teknik lanjutan untuk membuat blog anda menjadi lebih SEO lagi....

---

Cara Membuat Blog Menjadi Populer

Sebenarnya ada beberapa hal yang perlu dilakukan untuk membuat blog anda menjadi populer. SEO hanya salah satu jalan untuk membuat blog anda menjadi populer. Metode mana yang anda pilih harus disesuaikan dengan jenis blog yang anda buat, budget yang anda miliki. Semakin minim budgetnya maka proses membuat blog menjadi populer itu menuntut kerja keras kita sendiri.

Untuk gambaran yang lebih lengkap tentang cara membuat blog menjadi populer silahkan baca link di bawah ini:

TIPS DASAR MEMBANGUN POPULARITAS BLOG <-- Pemula Coba Baca Ini Dulu

Sampai di sini anda sudah tahu cara membuat blog sendiri di blogspot dan tahapan untuk membuat blog menjadi populer, bahkan anda sudah mengganti templatenya. Apakah sudah selesai? Tentu belum. Anda masih harus melakukan sedikit setelan untuk membuat blog baru anda ini lebih SEO Friendly.

---

Bagaimana Cara Membuat Artikel Di Blog Baru Anda

Ok, sekarang blognya sudah ada, sudah keren, dan sudah SEO friendly juga, tapi masih kosong dan tidak ada artikelnya. Jadi sekarang saatnya anda belajar cara membuat artikel. Ini sangatlah mudah jadi anda pasti bisa melakukan ini.... Anda cukup mengenali icon-icon yang menjadi fitur di editor posting di blogspot di bawah ini:

1. JUDUL POS adalah kolom untuk memasukkan JUDUL dari artikel yang anda akan buat. Untuk membuat blog anda bersaing di pencarian Google, pastikan anda meletakkan kata kunci yang anda incar di awal judul.
2. PUBLIKASIKAN adalah tombol untuk menerbitkan postingan yang anda anggap sudah selesai dan sudah layak terbit.
3. SIMPAN adalah tombol yang bisa anda gunakan untuk menyimpan ketikan anda dalam bentuk draft jika anda belum bisa menyelesaikannya saat itu juga. Anda bisa mengeditnya lagi nanti dengan membuka menu POS dan mengklik link EDIT di bawah draft yang tersimpan ini.
4. PRATINJAU adalah tombol untuk melihat bagaimana tampilan dari ketikan anda saat diterapkan dalam template blog anda
5. TUTUP adalah tombol untuk menutup editor ini
6. COMPOSE adalah tampilan RICH TEXT saat kita sedang mengetik artikel
7. HTML adalah tampilan dalam bentuk kode HTML, anda juga bisa membuat kode yang tidak ada pada icon di tampilan ini.
8. UNDO dan REDO, di mana anda bisa membatalkan atau mengulangi suatu tindakan
9. FONT FAMILY adalah tombol untuk mengubah jenis huruf yang digunakan dalam pengetikan
10. FONT SIZE adalah tombol yang digunakan untuk mengubah ukuran dari huruf
11. FORMAT adalah tombol untuk mengubah suatu text menjadi judul poin pembahasan, atau judul subpoin pembahasan, atau judul dari subsubpoin pembahasan. Sangat direkomendasikan menggunakan fitur ini untuk membuat artikel blog menjadi SEO friendly.
12. BOLD adalah tombol untuk membuat huruf menjadi cetak tebal. Untuk membuat blog anda lebih SEO, maka sebaiknya pemunculan pertama kata kunci di dalam artikel yang anda buat dicetak tebal
13. ITALIC adalah tombol untuk membuat cetak miring, selain bold anda juga bisa menggunakan ini dan poin SEOnya sama saja
14. UNDERLINED adalah tombol untuk memberi garis bawah
15. STRIKETHROUGH adalah tombol untuk memberi coretan pada tulisan
16. FONT COLOR adalah tombol untuk mengubah warna teks
17. FONT HIGHLIGHTS berfungsi untuk memberi sorotan berwarna pada suatu bagian di dalam artikel yang dianggap penting
18. LINK dipergunakan untuk membuat tautan di dalam artikel anda
19. MASUKKAN GAMBAR tentu saja untuk memasang gambar di dalam postingan
20. MASUKKAN VIDEO untuk mengunggah sebuah video ke dalam postingan anda
21. JUMPBREAK digunakan untuk memotong tampilan artikel saat ditampilkan di halaman muka blog anda. Cukup klik pada suatu titik di dalam artikel anda lalu klik icon jumpbreak ini, maka yang berada di bawah titik yang anda tentukan tadi tidak akan ditayangkan di halaman muka.
22. RATA TEKS, digunakan untuk mengatur tulisan rata kiri, tengah, kanan, atau imbang.
23. ORDERED LIST untuk memberi penomoran pada poin-poin artikel.
24. UNORDERED LIST untuk memberi penandaan pada poin-poin artikel.
25. QUOTE untuk memberi tampilan khusus pada frasa atau kalimat atau paragraf yang kita anggap sebagai kutipan
26. REMOVE FORMATTING, untuk membersihkan semua style atau editan yang sudah kita terapkan pada suatu bagian di dalam artikel
27. CHECK SPELLING, jika anda mau mengecek pengejaan. Sepertinya ini untuk bahasa inggris saja
28. LEBEL, untuk memberi label kepada tulisan anda sebagai sistem pengelompokan artikel
29. JADWAL, bisa anda gunakan untuk menentukan waktu artikel akan terbit secara otomatis suatu saat di waktu yang akan datang
30. TAUTAN PERMANEN bisa anda gunakan untuk membuat URL yang anda inginkan untuk artikel anda
31. LOKASI untuk memasukkan keterangan tempat di mana anda saat menulis  artikel tersebut
32. DESKRIPSI PENELUSURAN, ini adalah tempat memasukkan meta description ke dalam artikel. Masukkan penjelasan singkat dari isi artikel anda (max.150 karakter) dan pastikan mengandung kata kunci....
33. PILIHAN adalah tombol yang berisi opsi HTML untuk mode tulis dan baris baru ketikan anda. Kalau anda bingung, maka abaikan saja.

Selesai! Sekarang pengetahuan dasar cara membuat blog dengan benar. Silahkan kembangkan blog yang baru anda buat ini, atau silahkan juga membuat blog yang lainnya. Tapi perlu dicatat bahwa materi ini hanyalah pembukaan saja dari pengetahuan blogging dan SEO, masih ada banyak hal untuk saudara pelajari di dunia blogging ini.

Read More

Cara Membuat Website Sederhana Untuk Pemula Dalam 5 Menit

Cara Membuat Website

Cara membuat website mungkin bisa dibilang bukan hal yang sulit bahkan cukup mudah untuk para webmaster (pembuat website). Namun bagaimana dengan teman-teman kita yang baru saja 'terjun' di dunia blogging ? apakah mereka juga menganggap Cara Membuat Website adalah hal yang mudah ? tentu tidak bukan, atas dasar itulah saya akan mencoba menjelaskan tahap demi tahap Bagaimana Cara Membuat Website dari Dasar atau Awal untuk para Pemula tentunya.

Tenang saja, Cara Membuat Web yang akan saya berikan ini tidak akan banyak memakan waktu Anda, karena sesuai judul yang saya buat Cara Membuat Website ini hanya akan memakan waktu 5 Menit saja, bahkan mungkin bisa kurang dari itu.

Baiklah, disini saya akan membagi Tutorial Membuat Website ini menjadi 2 Bagian.

1. Cara Membuat Website
2. Cara Upload File ke Website Menggunakan FTP
3. Video Cara Membuat Website

Kedua Cara diatas akan saya jelaskan secara gamblang dengan bahasa yang sesederhana mungkin. Jadi untuk Anda yang benar-benar buta akan Website mampu mengikuti Tutorial Membuat Website ini dengan Mudah.

1. Cara Membuat Website

Sebelum membuat website, hal yang harus Anda persiapkan adalah Hosting + Domain. Jika Anda bingung apa itu Hosting, maka kita bisa mengibaratkan Hosting itu ibarat Rumah untuk menyimpan barang-barang (file) dan Domain ibarat Nama Jalannya, agar pengunjung bisa berkunjung.

Untungnya hampir semua penyedia layanan website sekarang ini sudah menyediakan paket lengkap, yaitu mereka sudah menyiapkan Hosting dan Domain menjadi satu, jadi pesan Hosting dapat gratis Domain. Karena kita nyari yang gratisan jadi kita gak akan dapat Domain, melainkan hanya akan mendapat SubDomain (ada embel-embelnya, semacam blogspot.com atau wordpress.com).

Kembali ke Topik, untuk Cara Membuat Website.

1. Kunjungi situs penyedia Layanan pembuatan Website, disini akan saya beri contoh menggunakan situs penyedia layanan yang cukup populer di Indonesia, yaitu IDHostinger. Langsung saja kunjungi http://www.idhostinger.com/
   
   
2. Setelah terbuka, selanjutnya klik Buat Akun. Letaknya ada di pojok kanan atas, dekat form login.
   
   

   

   Cara Membuat Website Sederhana untuk Pemula (Gambar: 1)

   
   
3. Di halaman ini Anda diwajibkan mengisi. Nama, E-mail dan Password Anda. Isikan sesuai tempatnya.
   
   

   

   Cara Membuat Website Sederhana untuk Pemula (Gambar: 2)

   
   Jangan lupa centang, Saya setuju dengan Ketentuan Penggunaan Layanan.
   
   
4. Selanjtunya, kita buka Tab Baru dan masuk ke Email kita, untu mengaktivasi Akun kita. Nanti ada dua Email dari yang dikirim oleh IDHostinger, Anda lihat saja yang pertama atau yang paling bawah.
   
   

   

   Cara Membuat Website Sederhana untuk Pemula (Gambar: 3)

   
   Tingal Anda klik atau salin link tersebut ke Address Bar dan klik Enter.
   
   
5. Disini kita akan disuruh memilih Paket Hosting yang akan kita pakai nanti untuk Membuat Website. Karena kita hanya akan Membuat Web untuk Belajar saja, maka kita Order saja yang Paket Gratis.
   
   

   

   Cara Membuat Website Sederhana untuk Pemula (Gambar: 4)

   
   
6. Kalau diatas kita sudah memesan Hostingan makan setelah itu kita akan diberi hadiah SubDomain. Untuk SubDomainnya ada banyak pilihan, silahkan Anda pilih yang paling cocok atau sesuai dengan selera Anda. Lalu klik Buat.
   
   

   

   Cara Membuat Website Sederhana untuk Pemula (Gambar: 5)

   
   
7. SubDomain + Hosting Anda akan dibuat, jadi tunggu hingga muncul pemeberitahuan 'Akun telah dibuat 100%' di pojok kanan bawah.
   
   

   

   Cara Membuat Website Sederhana untuk Pemula (Gambar: 6)

   
   Selanjutnya, silahkan Anda klik Lihat Hasil.
   
   
8. Dari sini kita sudah berhasil membuat akun untuk membuat Websitenya, namun kita belum memesan Hosting + SubDomain atau dengan kata lain suah berhasi Mendaftar / Membuat Website. Namun kita harus melanjutkan untuk mengisi website kita dengan Artikel atau File. Caranya dengan mengklik tombol Kelola.
   
   

   

   Cara Membuat Website Sederhana untuk Pemula (Gambar: 7)

   
   
9. Maka Anda akan dibawa ke Cpanel (Control Panel). Disinilah tempat Anda mengatur segala sesuatu yang berkaitan dengan website Anda. Mulai dari :
   
   
   • Menambah Subdomain
   • Parkir Domain
   • Impor Website
   • Impor Database
   • Mengatur Halaman Error
   
   Dan masih banyak lagi. Namun kita tidak akan membahas fitur-fitur yang ada di Cpanel ini (butuh watu berhari-hari). Tujuan kita masuk Cpanel adalah untuk mengambil Data mengenai : 'Nama pengguna'.
   
   

   

   Cara Membuat Website Sederhana untuk Pemula (Gambar: 8)

   
   Lihat dan silhkan Anda Catat (kalau bisa dikertas atau buku).

2. Cara Upload File ke Website Menggunakan FTP

Untuk mengupload suatu file kedalam Website atau lebih tepatnya kedalam Hosting (rumah) sebenarnya cukup mudah, yaitu cukup dengan mengklik File Manajer dan tinggal Anda pilih file yang akan Anda Upload.

Tapi yang jadi masalah bagaimana jika kita ingin mengupload file kedalam Hosting saat kita menggunakan HandPhone ? tentu kita tidak mungkin masuk File Manajer yang ada disediakan IDHostinger, karena ada beberapa Javascript yang harus dijalankan, dan itu tidak mungkin dijalankan di browser Handphone (operamini / ucbrowser).

Maka dari itu, disini kita akan meminta bantuan FTP. FTP Online ini fungsinya menjadi perantara, Antara file yang akan kita upload dengan Hosting yang sudah kita pesan tadi (tanpa melalui file manajer).

Mohon maaf disini saya akan memberikan screenshotnya dari tampilan PC, tapi sebenarnya sama persis kok tampilannya antara di PC dan Handphone, karena saya sering membuka di HP juga.

Untuk Upload filenya mealalui FTP Online tentunya kita harus memilih 1 dari ribuan FTP Online yang ada di Internet, disini saya memutuskan untuk memilih Net4India karena sudah support https dan yang terpenting adalah sangan HandPhone Friendly (nyaman dan tidak terlalu berat jika dibuka melalui hp).

Sekarang, langkah-langkah Cara Upload File ke Website atau Hosting menggunakan FTP Online.

1. Buka https://ftp.net4india.com/
   
   

   

   Cara Upload File ke Website (Gambar: 1)

   
   Tadi sebelumnya saya menyuruh Anda untuk mencatat 'Nama pengguna' bukan ? gunanya ya untuk mengisi Login Panel di FTP ini. Ada tiga form yang harus Anda isi.
   
   FTP server: Isikan Nama Domain Anda
   Username: Isikan Nama Pengguna
   Password: Isikan Password
   
   Setelah semua terisi silahkan Anda klik Login.
   
   * yang dimaksud password disini adalah password saat Anda mengisi SubDomain, jadi bukan password saat Anda membuat akun IDHostinger.
   
   

   

   Cara Upload File ke Website (Gambar: 2)

   
   
2. Setelah klik Login, maka Anda akan masuk kedalam direktori root.
   
   

   

   Cara Upload File ke Website (Gambar: 3)

   
   Di direktori (folder) ini Anda tidak bisa mengupload apapun, andai kata bisa upload, Anda tidak akan bisa mengaksesnya melalui url (tidak bisa diakses umum), karena filenya berada di dalam. Solusinya Anda klik dulu public_html.
   
   
3. Disinilah tempat untuk mengatur halaman depan website Anda. Cara Mengaturnya, pertama-tama Anda hapus dulu default.php yang ada di direktori public_html ini. Ohya, default.php ini isinya adalah ucapan selamat datang yang otomatis dibuat oleh pihak IDHostinger, jadi kita hapus saja tidak masalah.
   
   

   

   Cara Upload File ke Website (Gambar: 4)

   
   Centang filenya dan pilih Delete. Lalu pilih Submit, dan klik Back untuk kembali ke public_html.
   
   
4. Langkah selanjutnya tinggal kita upload file kita ? tapi file apa yang akan kita upload ? jangan kuatir disini saya akan memberikan script / kode html untuk membuat halaman depan website, oya kode ini bukan buatan saya melainkan buatan master problogiz, yang juga sudah valid HTML5. Langsung saja ini dia kodenya.
   
   
   <!DOCTYPE html>
   <html lang="en">
   
   <head>
   <meta charset="utf-8">
   <title>Page Title</title>
   
   <!-- meta tags -->
   <meta name="keywords" content="">
   <meta name="description" content="">
   
   <!-- stylesheets -->
   
   <style>
   /* ~~~~~~~~~ layout ~~~~~~~~~~ */
   #container {width: 960px;margin: 20px auto;background: #fff;padding: 30px;overflow: hidden;}
   
   /* ~~~~~~~~~ header ~~~~~~~~~~ */
   #main-navigation {border-bottom: 5px solid #3942A3;margin: 20px 0;}
   #main-navigation ul {overflow: hidden;width: 100%;list-style: none;font-size: 1.6em;}#main-navigation li {float: left;}
   #main-navigation li a {background: #3972A3;margin: 0 5px 0 0;padding: 5px 30px;display: block;color: #000000;text-decoration: none;}
   #main-navigation li.current a {background: #666;}
   #main-navigation li a:hover {background: #777; }
   
   /* ~~~~~~~~~ article ~~~~~~~~~~ */
   article {width: 100%;overflow: hidden;}
   section {float: left;width: 500px;}
   
   /* ~~~~~~~~~ aside ~~~~~~~~~~ */
   aside {float: right;width: 310px;}
   
   /* ~~~~~~~~~ footer ~~~~~~~~~~ */
   footer {width: 840px;margin: 20px auto;font-size: 1.4em;text-align: right;}
   
   /* ~~~~~~~~~ common ~~~~~~~~~~ */
   body, select, input, textarea {font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif;color: #333;}
   body {background: #ccc;}
   h1 {font-weight: normal;color: #666;font: 3.2em/1.4 georgia, 'times new roman', times, serif;margin: 0.2em 0 0;}
   h2 {font-weight: normal;color: #666;font: 2.4em/1.4 georgia, 'times new roman', times, serif;margin: 0.2em 0; }
   section p, section ul, section ol,
   aside p, aside ul, aside ol {font-size: 1.4em;margin: 1em 0;}
   section ul {margin-left: 1em;}
   section ol {margin-left: 1.4em;}
   
   /* ~~~~~~~~~ generic ~~~~~~~~~~ */
   html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
   dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
   a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,strong, sub, sup, tt, var, legend, fieldset {margin: 0;padding: 0;}
   img {vertical-align: bottom;}
   img, fieldset {border: 0;}
   html {overflow-y: scroll;}
   header, nav, section, article, figure, aside, footer {display: block;}
   </style>
   
   <!-- javascript -->
   <script src="js/jquery-1.3.2.min.js"></script>
   
   <!--conditional-->
   <!--[if IE]>
   <script src="js/html5.js"></script>
   <![endif]-->
   </head>
   
   <body class="home">
   
   <div id="container">
   <header id="page-header">
   <h1>Judul Blog</h1>
   <nav id="main-navigation">
   <ul>
   <li class="current"><a href="#">Home</a></li>
   <li style="color: red;"><a href="#">About</a></li>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">Contact</a></li>
   </ul>
   </nav>
   </header>
   <article id="page-content">
   <section>
   <hgroup>
   <h2>Pemahaman HTML5</h2>
   <h2>Demo HTML5 Template</h2>
   </hgroup>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
   <h2>HTML 5 Item</h2>
   <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Lorem ipsum dolor sit amet</li>
   </ul>
   <ol>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Lorem ipsum dolor sit amet</li>
   </ol>
   </section>
   <aside>
   <h2>Artikel Terkait</h2>
   <p>Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit.</p>
   </aside>
   </article>
   </div>
   
   <footer>
   Footer
   </footer>
   
   </body>
   </html>
   
   Pertama Anda copy paste dahulu seluruh script diatas, selanjutnya paste kan kedalam aplikasi moby explorer (ini yang biasa saya pakai kalau mengedit text di hp) atau Anda bisa juga menggunakan editor yang gratis lainya, edit yang perlu diedit setelahs selesai di edit seve dengan nama index.html (tulis persis dengan apa yang saya tulis, jangan diganti Index.html atau ind3x.html)
   
   
5. Setelah Anda save sekarang saatnya Anda upload, caranya mudah saja, klik Upload.
   
   

   

   Cara Upload File ke Website (Gambar: 5)

   
   Dan selanjutnya pilih Choose File (ada 2 tulisan choose file, anda pilih yang atas karena itu nanti file yang diupload tidak akan dikompres / meminimalisir file rusak). Dilanjut dengan mengklik tombol Submit.
   
   Jika muncul tulisan :
   
   
   Checking files: 
   File index.html is OK
   Transferring files to the FTP server: 
   File index.html has been transferred to the FTP server using FTP mode FTP_ASCII
   
   Berarti file sukses diupload, itu artinya kita sudah berhasil mengubah halaman depan Website yang kita buat. Kalau tidak percaya cek saja Website Anda.
   
   Ini screenshot halaman depan Website saya yang index.html-nya menggunakan kode diatas.
   
   

   

   Cara Upload File ke Website (Gambar: 6)

   
   Cukup menarik bukan, hehe.Sekian tadi tips dan trik semoga tips dan trick baru saja dapat berpanfaat bagi anda ......

Read More