17 Juni 2014

Cara Berbagi Share Files Google Drive

Leave a Comment
Cara berbagi share files google drive kebutuhan hosting file berdanding lurus dengan jumlah pengguna internet, artinya semakin banyak pengguna internet di Dunia maka semakin besar hosting yang dibutuhkan. Mengapa demikian? Webmaster lebih suka dan merasa aman menyimpan file nya di dalam hosting internet, terlebih jika fasilitas hosting tersebut adalah gratis, begitu juga dengan para pengguna internet yang membutuhkan informasi, baik dalam bentuk artikel, tutorial, gambar, video, dan lain lain. Jika webmaster menginginkan web atau blog nya dikunjungi banyak pengguna internet, maka webmaster wajib memberikan pelayanan yang baik dan user friendly. Upaya untuk memberikan pelayanan yang baik dan user friendly ini dapat dilakukan dengan berbagai macam cara, diantaranya adalah dengan berbagi tutorial yang relevan dengan konten post blog yang telah dibuat

Tutorial dapat dikemas dalam bentuk file (zip, rar, exe, image, video dan lain lain), kemudian di simpan dan di share. Google drive adalah salah satu layanan yang dapat digunakan untuk menyimpan file dan berbagai atau share files. Bagaimana cara berbagi file tersebut kepada seluruh pengguna internet? berikut adalah cara berbagi share files google drive

Pada tutorial yang lain blog All in one blog juga telah menjelaskan bagaimana cara menyimpan file di google drive, dan pada kesempatan kali ini kami akan memberikan turorial tentang bagaimana cara berbagi atau share files yang telah disimpan di dalam google drive.

Berikut langkah-langkah cara berbagi atau share files google drive:
  1. Masuk ke dashboard Google drive Anda.
  2. Pilih My Drive, kemudian pilih folder yang telah Anda buat.
    .
    cara berbagi share files google drive
    cara share files google drive
  3. Pilih file yang akan dishare, klik kanan pada file tersebut, kemudian pilih Share.
    cara berbagi share files google drive
    cara share files google drive
  4. Pada tampilan jendela pop up yang muncul seperti gambar di bawah ini, copy link yang terdapat pada bagian Link to share dan tempel pada halaman web atau blog Anda.
    cara berbagi share files google drive
    cara share files google drive
    Masih pada langkah di atas pada tampilan jendela pop up seperti gambar di atas. Lakukan setelan untuk siapa saja Anda berbagi file tersebut. Caranya klik Change… pada bagian Who has access.
    cara berbagi share files google drive
    cara share files google drive
  5. Siapa saja yang diijinkan mengundul file Anda? Jika Anda bermaksud untuk berbagi kepada seluruh pengguna internet didunia dan semua pengunjung blog Anda, maka pada bagian Visibility options pilih "Public on the web". Kemudian klik Button Save.
  6. File Anda di Google Drive telah berhasil di share.
Jadi Google Drive ini dapat berfungi sebagai hosting file sekaligus sebagai tempat berbagi atau share files, sama seperti 4shared, Ziddu, Mediafire, dan lain lain.
Jika anda mengikuti tutorial ini dan mengujinya maka file yang telah di share dan kemudian di download oleh pengguna internet, maka tampilannya seperti gambar di bawah ini.
cara berbagi share files google drive
cara share files google drive

Demikian tutorial bagaimana cara berbagi atau share files di google drive. Jika Anda masih belum memahami tutorial ini, Anda dapat memberikan pertanyaan atau komentar pada form komentar yang tersedia. Semoga dapat membantu
Read More

Cara Membuat Daftar Isi Peta Situs Blog

Leave a Comment
Cara membuat daftar isi peta situs blog sitemap atau peta situs atau daftar isi blog sangat erat hubungannya dengan SEO, Search Engine Optimization, membuat peta situs merupakan salah satu tips optimasi blog on-page (SEO On page). Kenapa demikian? Daftar isi atau peta situs blog akan mempermudah pengunjung blog menjelajah, menelusuri, atau mengexplorer seluruh konten yang terdapat dalam sebuah blog, karena konten yang terdapat dalam blog tersebut dapat dilihat dalam bentuk daftar isi. Lebih dekat dengan SEO, peta situs akan terbaca oleh spider search engine sehingga peluang untuk mendapatkan pengunjung dengan traffic organic yang tinggi akan semakin besar. Itulah alasan yang kami tangkap, mengapa membuat daftar isi atau peta situs blog merupakan salah satu tips SEO blog. Kemudian bagaimana cara membuat daftar isi peta situs blog tersebut?

Pada kesempatan kali ini, kami akan memberikan tutorial bagaimana cara membuat peta situs dalam bentuk Daftar Isi blog, dan pada artikel sebelumnya kami juga telah menjelaskan bagaimana cara membuat sitemap web blog yang seo friendly menggunakan google webmaster tools.

Oke, langsung saja. Berikut adalah langkah langkah cara membuat daftar isi peta situs blog, atau supaya lebih mudah di mengerti, membuat peta situs atau sitemap dalam bentuk daftar isi:
  1. Masuk ke dashboard blog Anda. Pilih Laman, klik Laman Baru.
    cara membuat daftar isi peta situs blog
    cara membuat daftar isi blog
  2. Kemudian akan tampil seperti gambar dibawah ini.
    cara membuat daftar isi peta situs blog
    cara membuat daftar isi blog
  3. Pada tampilan seperti di atas, klik button HTML. Kemudian salin script di bawah ini dan tempel pada html editor. Pastikan pada HTML editor bukan pada Compose editor.
    <script src="//dl.dropboxusercontent.com/u/7922863/this%20is/thisis.js"></script>
    <script src="http://blog.rajaputramedia.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

    atau

    <div style="background-color: none; border: none; height: auto; margin: auto; overflow: auto; padding: auto; text-align: left; width: 100%;">
    <script src="https://my-code-js.googlecode.com/svn/branches/sitemap.js"></script><script src="http://blog.rajaputramedia.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
  4. Pada kedua script di atas terdapat 2 bagian source code, yang pertama adalah source code dimana terdapat script, code html, dan style yang akan membentuk sebuah layout daftar isi, dan yang kedua adalah source code yang akan mengambil seluruh data post blog dalam bentuk url dan meletakannya ke dalam layout daftar isi tersebut. Ganti url blog http://blog.rajaputramedia.com dengan url blog Anda.
  5. Setelah script ditempel, langkah selanjutnya adalah isi judul laman (Anda dapat mengisi dengan judul Sitemap atau Peta Situs atau Daftar Isi), kemudian lakukan setelan laman untuk deskripsi penelusuran dan pilihan.
    cara membuat daftar isi peta situs blog
    cara membuat daftar isi blog
  6. Terakhir klik button Perbarui.
Sekarang Anda telah memiliki Daftar Isi Blog dengan style yang menarik dan membuat pengunjung akan lebih mudah menjelajah konten blog Anda dengan mencari di halaman daftar isi blog.
Jika Anda mengikuti tutorial ini dan mempraktekannya untuk Blog Anda, maka daftar isi blog yang telah dibuat akan tampil seperti gambar di bawah ini.
cara membuat daftar isi peta situs blog
cara membuat daftar isi blog

Demikian tutorial bagaimana cara membuat daftar isi peta situs blog, jika Anda masih kurang memahami tutorial ini, Anda dapat memberikan pertanyaan pada form komentar yang tersedia. Semoga dapat membantu.
Read More

15 Juni 2014

Cara Mendaftarkan Web Blog ke Google Webmaster Tool

4 comments
Cara mendaftarkan web blog ke Google Webmaster Tool ketika pengguna internet membutuhkan informasi, maka dia akan mengetikan kata atau keyword yang relevan dengan informasi yang dibutuhkan pada kotak pencarian search engine, kemudian search engine akan memberikan ribuan referensi hasil pencarian dalam bentuk url dari suatu web atau blog yang di dalamnya memiliki informasi yang relevan dengan pencarian yang dimaksud

Sebagai seorang webmaster yang memiliki beberapa web atau blog dengan ratusan bahkan ribuan informasi dalam bentuk artikel seperti All in one blog, tentunya menginginkan url web atau blog kita terdapat dalam hasil pencarian tersebut, artinya url web blog telah terindeks oleh google search engine, bahkan harus optimis web blog yang kita miliki berada di page 1 (one), lebih optimis lagi berada diurutan teratas alias nomor 1 (satu) dari pencarian tersebut, hal ini tentu akan meningkatkan traffic web atau blog.

Tetapi bagaimana caranya? Mendaftarkan web blog ke google menggunakan webmaster tool merupakan salah satu cara agar url web blog terdapat dalam hasil pencarian google (terindeks oleh search engine google), pencarian google tentunya. Kenapa harus google? Search engine google merupakan search engine yang paling sering digunakan oleh pengguna internet di Dunia, baik untuk mencari informasi, menjual informasi, bahkan membeli informasi.
Tujuan mendaftar google webmaster tools adalah untuk menambahkan web blog ke dalam daftar index mesin pencari google. Pertanyaannya, bagaimana cara mendaftarkan web blog ke google webmaster tool ?
Berikut adalah langkah langkah atau cara mendaftarkan web blog ke google webmaster tool :
  1. Anda harus memiliki akun google. Jika belum memiliki akun google, silahkan Anda mendaftar di gmail.com
  2. Setelah anda memiliki akun google, silahkan login ke Google Webmaster Tools
  3. Klik button TAMBAHKAN SITUS berwarna merah.
    cara mendaftarkan web blog ke google webmaster tool
    cara mendaftarkan web ke webmaster tool
  4. Pada popup window yang tampil, masukan url web atau blog Anda, dan klik button Terus.
    cara mendaftarkan web blog ke google webmaster tool
    cara mendaftarkan web ke webmaster tool
  5. Berikutnya adalah tahap verifikasi kepemilikan web atau blog. Anda dapat menggunakan metode alternative. Dengan cara klik pada tab Metode Alternatif.
    cara mendaftarkan web blog ke google webmaster tool
    cara mendaftarkan web ke webmaster tool
  6. Terdapat 4 pilihan metode alternative, Anda dapat menggunakan Tag HTML (Tambahkan tag meta ke beranda situs Anda). Klik radio button Tag HTML, maka akan tampil script meta tag seperti gambar di bawah ini:
    cara mendaftarkan web blog ke google webmaster tool
    cara mendaftarkan web ke webmaster tool
  7. Silahkan Anda salin meta tag yang tampil (halaman google webmaster tool jangan ditutup), kemudian tempel pada source code web atau rancangan template blog Anda. Meta tag harus berada pada bagian <head>, sebelum bagian <body> .
  8. Kemudian kembali ke halaman google webmaster tool (masih di halaman google webmaster tool yang sama pada langkah 5), klik button VERIFIKASI.
  9. Tunggu sampai proses verifikasi selesai, jika berhasil akan tampil informasi bahwa proses verifikasi telah sukses. Kemudian klik button continue.
  10. Proses mendaftarkan web blog ke google webmaster tool telah selesai.
Google webmaster tool telah aktif dan dapat Anda gunakan untuk menganalisis berbagai data statistik dan melakukan beberapa pengaturan web atau blog, Anda juga dapat menambahkan sitemap web atau blog di google webmaster tool.

Demikian tutorial tentang bagaimana cara mendaftarkan web blog ke google webmaster tool. Jika masih belum paham, Anda dapat mengajukan pertanyaan pada form komentar. Semoga dapat membantu
Read More

8 Juni 2014

Cara Membuat Drop Down Menu CSS

Leave a Comment
Cara membuat drop down menu css terkadang dalam menilai sebuah web atau blog dikatakan terlihat menarik secara visual jika desainya terkesan dinamis, bergerak, dan dengan kumpulan warna yang berbeda namun sesuai, baik dalam desain layout, header, menu navigasi, content, sidebar, dan footer. Salah satu contohnya adalah desain menu navigasi drop down, untuk membuat desain drop down menu tidak dapat dilakukan hanya dengan menggunkan HTML akan tetapi harus dipadukan dengan CSS. Kemudian bagaimana cara membuat drop down menu dengan CSS dan HTML?

Berikut contoh study kasus All in one blog pembuatan drop down menu navigasi yang hanya menggunakan html tanpa css, perhatikan script di bawah ini:
<!DOCTYPE html>
<html>
<body>
    <div>
        <ul>
            <li><a href='/'><span>Home</span></a></li>
            <li><a href='/'><span>Products</span></a>
                <ul>
                 <li><a href='#'><span>Product 1</span></a></li>
                 <li><a href='#'><span>Product 2</span></a></li>
                 <li><a href='#'><span>Product 3</span></a>
                    <ul>
                       <li><a href='#'><span>Sub Product</span></a></li>
                       <li><a href='#'><span>Sub Product</span></a></li>
                       <li><a href='#'><span>Sub Product</span></a></li>
                       <li><a href='#'><span>Sub Product</span></a></li>
                    </ul>
                 </li>
                </ul>
           </li>
           <li><a href='/'><span>Articles</span></a></li>
           <li><a href='/'><span>Tutorials</span></a></li>
           <li><a href='/'><span>SEO</span></a></li>
        </ul>
    </div>
</body>
</html>

Coba Anda salin script di atas dan simpan dalam sebuah folder dengan nama file index.html, kemudian jalankan file tersebut menggunkan web browser. Mungkin menurut Anda hasilnya terlihat kurang menarik dan biasa saja, secara visual menunjukan drop down menu tetapi tidak disertai dengan style. Seperti gambar di bawah ini:
cara membuat drop down menu css
cara membuat drop down menu css
Agar menu navigasi di atas dapat terlihat menarik dengan drop down menu yang berjalan dengan baik, maka html harus dipadukan dengan css. Bagaimana caranya ?
Berikut langkah – langkah cara membuat drop down menu CSS, jika ingin memadukan dengan box shadow Anda dapat mempelajarinya pada postingan cara membuat efek bayangan dengan CSS.
  1. Tulis script HTML untuk membentuk menu navigasi, contohnya seperti script berikut:
    <!DOCTYPE html>
    <html>
    <head>
        <link rel='stylesheet' type='text/css' href='styles.css' />
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    </head>
    <body>
    <div id='cssmenu'>
    <ul>
       <li class='active'><a href='http://www.rajaputramedia.com/'><span>Home</span></a></li>
       <li class='has-sub'><a href='http://www.rajaputramedia.com/'><span>Products</span></a>
          <ul>
             <li class='has-sub'><a href='#'><span>Product 1</span></a></li>
             <li class='has-sub'><a href='#'><span>Product 2</span></a></li>
             <li class='has-sub'><a href='#'><span>Product 3</span></a>
                <ul>
                   <li><a href='#'><span>Sub Product</span></a></li>
                   <li><a href='#'><span>Sub Product</span></a></li>
                   <li><a href='#'><span>Sub Product</span></a></li>
                   <li class='last'><a href='#'><span>Sub Product</span></a></li>
                </ul>
             </li>
          </ul>
       </li>
       <li><a href='http://www.rajaputramedia.com/'><span>Articles</span></a></li>
       <li><a href='http://www.rajaputramedia.com/'><span>Tutorials</span></a></li>
       <li class='last'><a href='http://www.rajaputramedia.com/'><span>SEO</span></a></li>
    </ul>
    </div>
    </body>
    </html> 
    
  2. Setelah menulis script html di atas, simpan dalam sebuah folder latihan dengan nama file index.html.
  3. Kemudian tulis script css di bawah ini untuk membentuk style dan drop down menu.
    #cssmenu ul,
    #cssmenu li,
    #cssmenu span,
    #cssmenu a {
      margin: 0;
      padding: 0;
      position: relative;
    }
    #cssmenu {
      margin:20px 10px 0px 10px;
      height: 40px;
      border-radius: 5px 5px 0 0;
      -moz-border-radius: 5px 5px 0 0;
      -webkit-border-radius: 5px 5px 0 0;
      background: #fefefe;
      background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
      background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
      background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
      background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
      background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
      border-bottom: 2px solid #ffa800;
    }
    #cssmenu:after,
    #cssmenu ul:after {
      content: '';
      display: block;
      clear: both;
    }
    #cssmenu a {
      background: #fefefe;
      background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
      background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
      background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
      background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
      background: linear-gradient(top, #fefefe 0%, #ececec 100%);
      color: #000;
      display: inline-block;
      font-family: Helvetica, Arial, Verdana, sans-serif;
      font-size: 12px;
      line-height: 40px;
      padding: 0 20px;
      text-decoration: none;
    }
    #cssmenu ul {
      list-style: none;
    }
    #cssmenu > ul {
      float: left;
    }
    #cssmenu > ul > li {
      float: left;
    }
    #cssmenu > ul > li > a {
      color: #000;
      font-size: 12px;
    }
    #cssmenu > ul > li:hover:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      bottom: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #ffa800;
      margin-left: -10px;
    }
    #cssmenu > ul > li:first-child > a {
      border-radius: 5px 0 0 0;
      -moz-border-radius: 5px 0 0 0;
      -webkit-border-radius: 5px 0 0 0;
    }
    #cssmenu > ul > li.active:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      bottom: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #ffa800;
      margin-left: -10px;
    }
    #cssmenu > ul > li.active > a {
      -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      background: #ececec;
      background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
      background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    }
    #cssmenu > ul > li:hover > a {
      background: #ececec;
      background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
      background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    }
    #cssmenu .has-sub {
      z-index: 1;
    }
    #cssmenu .has-sub:hover > ul {
      display: block;
    }
    #cssmenu .has-sub ul {
      display: none;
      position: absolute;
      width: 200px;
      top: 100%;
      left: 0;
    }
    #cssmenu .has-sub ul li {
      *margin-bottom: -1px;
    }
    #cssmenu .has-sub ul li a {
      background: #ffa800;
      border-bottom: 1px solid #fff;
      filter: none;
      font-size: 11px;
      display: block;
      line-height: 120%;
      padding: 10px;
      color: #ffffff;
    }
    #cssmenu .has-sub ul li:hover a {
      background: #cc8500;
    }
    #cssmenu .has-sub .has-sub:hover > ul {
      display: block;
    }
    #cssmenu .has-sub .has-sub ul {
      display: none;
      position: absolute;
      left: 100%;
      top: 0;
    }
    #cssmenu .has-sub .has-sub ul li a {
      background: #cc8500;
      border-bottom: 1px solid #fff;
      border-left: 1px solid #fff;
    }
    #cssmenu .has-sub .has-sub ul li a:hover {
      background: #b37400;
    }
    
  4. Simpan dalam folder yang sama dengan file index.html, yaitu folder latihan. Simpan dengan nama file styles.css
Setelah terbentuk 2 (dua) file di atas yaitu index.html dan styles.css, dan pastikan tersimpan dalam satu folder yaitu folder dengan nama "latihan", jalankan file index.html menggunakan web browser, lihat tampilan yang di hasilkan. Menu navigasi terlihat menarik, style, dan dengan drop down menu css yang berjalan dengan baik, seperti gambar di bawah ini:

cara membuat drop down menu css
cara membuat drop down menu css
Menu navigasi terlihat lebih menarik kan ?

Demikian tutorial bagaimana cara membuat drop down menu css, agar menu navigasi terlihat lebih menarik dan terkesan dinamis. Jika masih kurang memahami tutorial ini, Anda dapat memberikan pertanyaan melalui form komentar. Semoga dapat membantu
Read More

7 Juni 2014

Cara Menampilkan Foto di Pencarian Google

Leave a Comment
Cara menampilkan foto di pencarian google ketika Anda melakukan pencarian dengan meuliskan keywords pada kotak pencarian google atau search engine, maka akan banyak sekali list web atau blog url yang muncul dari hasil pencarian tersebut. Coba Anda perhatikan web atau blog url yang muncul tersebut, sebagian hanya berupa teks dan tidak sedikit yang menampilkan teks dan foto (gambar). Mengapa demikian ? Padahal secara default, tampilan web atau blog url yang muncul hanya berupa teks. Agar dapat menarik minat pembaca untuk berkunjung di kesan pertama saat pencarian di search engine, kita dapat menambahkan gambar di samping teks web atau blog url tersebut. Bagaimana cara menampilkan foto di hasil pencarian google tersebut?

cara menampilkan foto di pencarian google
cara menampilkan foto di pencarian google
Berikut adalah langkah atau cara menampilkan foto di pencarian Google :
  1. Masuk ke akun Google+  > Profile > About > Edit kontributor dan tautan dengan judul dan url web blog Anda.
    cara menampilkan foto di pencarian google
    cara menampilkan foto di pencarian google
  2. Masuk ke akun Blogger > Dashboard > Template > Edit HTML
  3. Masukan kode berikut di antara tag <head> dan </head>.
    <link href='https://plus.google.com/id_Anda' rel='author'/>
    <link href='https://plus.google.com/id_Anda' rel='publisher'/>
    
    Kemudian ganti id_profil Google+ berwarna biru tebal dengan id_profil Google+ Anda.
  4. Untuk melakukan pengecekan apakah web atau blog url telah menampilkan foto di pencarian Google, masukan URL tersebut di Google Richsnippet.
    cara menampilkan foto di pencarian google
    cara menampilkan foto di pencarian google
Demikian cara menampilkan foto di pencarian google. Jika dalam tampilan preview di Google Richsnippet halaman web blog url telah berhasil menampilkan foto, bukan berarti foto tersebut langsung muncul di halaman hasil penelusuran Google yang sebenarnya. Hal ini dimungkinkan Google perlu melakukan pengaturan khusus terkait proses penambahan foto yang telah dilakukan.

Demikian tutorial tentang bagaimana cara menampilkan foto di pencarian google atau google search. Jika masih kurang memahami artikel ini, Anda dapat memberikan pertanyaan melalui form komentar. Semoga dapat membantu
Read More

5 Juni 2014

Sejarah HTML

Leave a Comment
Sejarah HTML diawali pada ahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML

sejarah html
sejarah html
Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi di luar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5. [resource http://id.wikipedia.org/wiki/HTML]
Kemudian bagaimana sejarah HTML dan perkembangannya ?

SGML ke HTML
Seorang peneliti yang bernama Tim Berners-Lee dari CERN, saat ini menjadi direktur W3C (World Wide Web Consortium) mengemukakan suatu ide tentang pembuatan suatu script bahasa pemprograman dan dokumen yang bisa diakses oleh seluruh komputer tanpa melihat jenis platformnya apakah itu Windows, Unix, Linux dan sebagainya. Semenjak itu HTML lebih populer daripada SGML. Pada era inilah awal sejarah HTML.

Perkembangan HTML
Sebelum HTML disahkan sebagai suatu dokumen HTML standar, maka HTML harus disetujui dulu oleh W3C untuk dievaluasi secara ketat. Setiap terjadi perkembangan suatu versi HTML, web browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, web browser tak akan bisa menampilkan HTML tersebut.

HTML versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).

HTML versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.

HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2

HTML versi 4.0
HTML versi 4 memuat cukup banyak perubahan dan revisi dari pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain - lain.

HTML versi 5.0
HTML versi 5 adalah revisi kelima dari sejarah HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Demikian penjelasan singkat mengenai sejarah HTML sampai saat ini, saat pos blog ini dibuat. Semoga dapat membantu
Read More

3 Juni 2014

Apa itu HTML - Hyper Text Markup Language

Leave a Comment
Apa itu HTML ( Hyper Text Markup Language ), merupakan bahasa pemrograman standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web ( dokumen HTML ) yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video

apa itu html
apa itu html

Apa itu HTML ? HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). [resource http://id.wikipedia.org/wiki/HTML]

Apa itu HTML ? untuk memepelajari bagaimana sejarah HTML dapat Anda lihat di sini. HTML terdiri dari sejumlah perintah dimana kita bisa melakukan setting untuk judul, garis, table, gambar dan lain - lain yang disebut tag. Setiap tag masih dapat dilengkapi lagi oleh sejumlah attribute. Dibawah ini sebagian contoh tag dan attributenya:
<html>
<head>
<title>Apa itu HTML</title>
</head>
<body bgcolor="red">
<font face="arial" color="yellow" size="5">Mengenal HTML</font>
</body>
</html>

Tulisan berwarna biru langit tebal adalah tag, silver adalah attribute dan biru adalah nilai/value dari attribute.

Demikian penjelasan mengenai bahasa pemrograman HTML. Harapan kami sekarang Anda dapat memahami apa itu html. Semoga dapat membantu
Read More

2 Juni 2014

Cara Membuat Sitemap Web Blog Seo Friendly

3 comments
Cara membuat sitemap web blog seo friendly hampir semua blogger atau webmaster menginginkan traffic web blog yang tinggi dengan berbagai macam trik SEO, begitu juga dengan All in one blog ini, salah satu cara nya adalah sitemap web atau blog. Sitemap atau peta situs sangat berhubungan dengan traffic organic, yaitu traffic atau lalu lintas pengunjung yang datang ke sebuah blog melalui mesin pencari seperti Google. Agar web atau blog terindeks dalam mesin pencari Google, maka sitemap harus disubmit atau dikirimkan ke Google Webmaster tools. Sebelum membuat dan mengirimkan sitemap blog ke Google webmaster tools, pastikan web atau blog telah ditambahkan atau mendaftarkan web blog ke Google webmaster tool

cara membuat sitemap web blog seo friendly
cara membuat sitemap website
Sebelum memulai artikel atau tutorial cara membuat sitemap ini, sebaiknya Anda telah mempelajari dan mengerti apa itu sitemap atau peta situs? Sitemap terdiri dari dua jenis, yaitu HTML dan XML. Yang kami jelaskan adalah sitemap jenis  XML yang pada dasarnya adalah sebuah file teks yang memiliki list daftar halaman web blog Anda yang terdapat di log (catatan) web blog Anda . Web crawler menggunakan sitemap ini untuk menemukan web blog Anda dan membantu dalam mengindeks posting Anda di mesin pencari seperti Google.
Cara membuat sitemap web blog seo friendly sangat beragam akan tetapi pada intinya adalah memiliki tujuan yang sama, yaitu agar web blog terdaftar di mesin pencari google dan cepat terindeks. Pada artikel atau tutorial ini, akan kami jelaskan bagaimana cara membuat sitemap web atau blog yang seo friendly.

Berikut langkah langkah cara membuat sitemap web blog seo friendly :
  1. Login ke akun Google Webmaster tools dan klik pada URL web blog Anda untuk mengakses tools web yang akan digunakan.
  2. Perhatikan pada bagian left sidebar webmaster,  klik Perayapan, kemudian pilih Peta Situs. Kemudian klik pada tombol warna merah "TAMBAHKAN/UJI PETA SITUS" di sudut kanan atas.
    cara membuat sitemap web blog seo friendly
    cara membuat sitemap website
  3. Pada tampilan yang muncul, pastikan seperti gambar dibawah ini:
    cara membuat sitemap web blog seo friendly
    cara membuat sitemap website
  4. Kemudian tambahkan kode berikut pada kolom yang tersedia. Lalu klik "Mengirim Peta Situs".
atom.xml?redirect=false&start-index=1&max-results=500

Jika web blog Anda memiliki lebih dari 500 posting, maka Anda harus menambahkan satu sitemap baru, caranya sama, cukup mengulang langkah satu sampai dengan langkah empat, akan tetapi kode selanjutnya adalah seperti berikut:
atom.xml?redirect=false&start-index=501&max-results=500

Jika web blog Anda memiliki lebih dari 1000 posting, tambahkan lagi sitemap web blog Anda. Pada kode yang akan dikirim cukup ganti value start dan value max. Intinya, pada setiap sitemap yang dikirim hanya mampu menampung 500 file log (jumlah posting) web atau blog.

Sekarang Anda telah mengerti bagaimana cara membuat sitemap web blog seo friendly berbeda lagi dengan cara membuat daftar isi peta situs blog, dan pastikan secepatnya web atau blog Anda memiliki sitemap, maka dapat dipastikan robot google akan lebih cepat mengindeks posting web blog Anda.

Demikian tutorial tentang bagaimana cara membuat sitemap web blog seo friendly, dan setidaknya ini merupakan cara mempercepat indeks blog oleh google search engine. Jika masih kurang memahami tutorial ini, Anda dapat memberikan pertanyaan melalui form komentar. Semoga dapat membantu
Read More