Tampilkan postingan dengan label Rahasia Browser dan Browsing tip. Tampilkan semua postingan
Tampilkan postingan dengan label Rahasia Browser dan Browsing tip. Tampilkan semua postingan

Minggu, 15 November 2009

apa manfaat kegunaan domain forwarding
Domain forwarding (atau disebut juga sebagai URL forwarding atau web forwarding) adalah sebuah layanan yang fungsinya untuk mengalihkan akses atau kunjungan visitor pada sebuah url atau domain ke domain/url lainnya secara otomatis.

Domain forwarding sering digunakan sebagai cara oleh para webmasters untuk memiliki beberapa nama domain yang mengarah atau beralih ke website yang sama. Namun, ada beberapa hal yang perlu Anda ketahui.

Ada dua jenis URL forwarding: redirected dan masked/cloaked. Dengan menggunakan jenis redirected, anda masih bisa melihat url asli halaman tersebut pada window browser, sedangkan jika menggunakan cloaked url forwarding, maka nama di window browser tetap sama sesuai nama yang dimasukkan.

Kekurangan dan Kelebihan

Domain forwarding bisa bermanfaat terutama jika anda menggunakan hosting gratis, URL Anda yang diberikan mungkin sangat panjang, penuh dengan angka, kode dan karakter. Dengan menggunakan nama domain baru yang di-forward maka akan bisa dibuat lebih pendek dan mudah diingat dibandingkan dengan url website gratis tersebut.

kelebihan kekurangan domain url forwarding
Namun ada juga beberapa kelemahan jika hendak menggunakan URL forwarding. Salah satunya adalah URL forwarding tidak kompatibel dengan beberapa browser. Jika seseorang memiliki browser yang lebih kuno, atau telah menonaktifkan JavaScript di browser miliknya (beberapa program "safe surfing" melakukannya secara otomatis), maka mereka semua akan melihat layar yang kosong. Kebanyakan program URL forwarding memerlukan JavaScript untuk bekerja.

Mem-forward nama domain dapat bermanfaat bagi pemilik usaha yang ingin pindah situs Web mereka tanpa kehilangan traffic - pengunjung yang mengetikkan alamat Web lama akan diarahkan ke situs web baru yang diforward.

Domain Forwarding memungkinkan Anda untuk mengakses situs web Anda melalui nama domain yang anda forward tanpa mengubah informasi yang ada pada domain name server anda. Namun, setelah pengunjung mendarat di website Anda, alamat URL Anda pada browser mereka akan berubah balik pada alamat url aslinya.

Jika Anda menggunakan web hosting gratis, website Anda mungkin memiliki subdomain, yang cenderung tampil kurang profesional dibandingkan dengan top level domain. Web/url forwarding dapat membantu mendukung nama usaha Anda - hanya mendaftarkan top level domain yang relevan dan redirect ke subdomain yang disediakan oleh Web hosting gratis yg Anda pakai.

Perbedaan Domain Masking dan Forwarding

apa itu fungsi kelemahan domain masking
Selain mem-forward nama domain ke halaman anda, Anda juga mungkin ingin melakukan masking pada web-forwarding Anda. Masking menyembunyikan nama domain situs Web Anda dan membiarkan pengunjung hanya melihat alamat Web yang mereka ketik pada browser mereka. Hal ini juga bisa membantu jika Anda lebih suka pengunjung tidak mengetahui kalau alamat url yang mereka tuju sebenarnya sudah dialihkan.

Untuk meningkatkan rangking di search engine, banyak webmasters juga meletakkan beberapa konten berkualitas dan membiarkannya selama beberapa minggu sebelum mem-forward domain barunya ke website utama mereka.

Domain masking bekerja dengan cara yang kurang lebih sama seperti domain forwarding. Namun, bedanya domain masking memungkinkan nama domain baru Anda tetap bertahan pada address bar browser bahkan ketika pengunjung telah mendarat pada situs Anda.

Namun terdapat kelemahan jika menggunakan layanan masking domain dibandingkan dengan hanya memforward url baru langsung ke website Anda. Website dengan nama domain masking dianggap buruk oleh search engine karena cara kerja maskingnya itu sendiri. Ketika nama domain Anda dimasking, search engine tidak mendetek adanya konten pada url baru tersebut. Karena mesin pencari cinta konten, maka website dengan domain masking cenderung tampil tidak significan di mata search engine.
PHP redirect adalah suatu cara untuk redirect (mengalihkan) pengunjung secara otomatis dari suatu halaman web ke halaman web lainnya menggunakan script PHP. Redirect semacam ini lebih search engine friendly daripada redirect menggunakan Meta Refresh. Ada beberapa alasan mengapa para pemilik website perlu redirect halaman web mereka, salah satunya karena mereka melakukan perubahan pada website direktori mereka dan atau juga untuk memperpendek link URL mereka yang panjang. Anda juga bisa secara mudah mengalihkan pengunjung anda ke halaman lain menggunakan kode script PHP (atau disebut juga dengan php redirect). Dengan menggunakan metode ini, pengunjung anda dapat di transfer ke halaman baru tanpa harus klik beberapa link untuk melanjutkan. Untungnya menggunakan kode script PHP ini juga mudah digunakan.


Berikut cara cara nya:
  • Buat dan beri nama folder baru. Nama folder tersebut akan menjadi bagian dari nama url link yang anda akan gunakan untuk redirect. Misalkan nama folder nya adalah matahari, maka link redirectnya akan menjadi www.namadomainanda.com/matahari
  • Buat file php (anda bisa menggunakan notepad untuk ini), copy paste kode php dibawah ini ke dalam notepad dan simpan dalam bentuk index.php. Ganti �URL anda� dengan URL yang ingin anda redirect dan simpan file tersebut dalam folder yang baru saja anda buat.

    <?php
    header("location:URL anda");
    ?>

    Jadi contoh hasilnya seperti ini:

    <?php
    header("location:http://www.elevenmillion.blogspot.com");
    ?>
  • Upload folder tersebut pada hosting account anda dan selesai. Anda bisa test file baru anda pada tiap browser, seperti ini: www.namadomainanda.com/namafolder. Redirect semestinya terjadi dengan langsung.
Metode ini tidak akan men-cloak afiliasi url anda pada address box. Ini hanya untuk sekedar redirect saja.




Meta refresh redirect adalah suatu cara untuk redirect (mengalihkan) pengunjung secara otomatis dari satu halaman web ke halaman web lainnya menggunakan tag meta http-equiv yang anda sisipkan di bagian header sebuah dokumen HTML.


Berikut cara menggunakannya:
  • Pertama- tama, buat folder dan namakan folder tersebut apa saja yang anda suka. Nama folder tersebut akan menjadi bagian link yang akan anda gunakan untuk redirect. Jadi jika nama folder tersebut �melati� maka link redirectnya akan menjadi www.domainanda.com/melati.
  • Selanjutnya buat file html (anda bisa menggunakan notepad) dan letakkan kode script dibawah ini dan simpan dalam bentuk index.html. Ganti tulisan �URL anda� dengan URL yang ingin anda redirect pada script tersebut. Simpan filenya ke dalam folder yang barusan anda buat.

    <html><head><meta http-equiv="refresh" content="0; url= URL anda"></head><body></body></html>
  • Upload folder tersebut ke account hosting anda dan selesai.
Untuk mengetestnya anda bisa ketik nama domain anda diikuti dengan nama folder tersebut pada address bar anda. Seperti ini: www.namadomainanda.com/namafolder dan anda akan otomatis dibawa menuju ke halaman yang anda redirect.

Salah satu kelemahan pada meta refresh ini adalah anda harus memisahkan setiap file untuk tiap pengalihan.
Metode ini tidak akan cloak link afiliasi anda pada address bar, cara ini hanya digunakan untuk sekedar pengalihan atau redirection.

Dengan menggunakan metode meta refresh redirect, yang dikerjakan tag ini sebenarnya adalah menyuruh browser anda untuk secara otomatis men-request halaman lain setelah beberapa detik kemudian. Perintah dari content=�� memberitahu browser anda berapa lama waktu yang dibutuhkan untuk mengeksekusi perintah refresh dan pengalihan. Namun bagi anda yang ingin menggunakan metode ini perlu berhati- hati karena banyak para pakar SEO mengatakan bahwa search engine tidak menyukai ini dan bisa berdampak buruk terhadap page rank dan halaman tersebut bisa di ban karena anda mengirim pengunjung ke halaman yang mereka tidak minta. Jika anda hendak men-redirect, anda bisa menggunakan redirect yang lebih search engine friendly, yaitu PHP redirect.




Rabu, 11 November 2009

Banyak para pemilik artikel dan blogger yang sengaja menghilangkan tanggal atau kapan sebuah artikel atau halaman web pertama kali di publikasikan dengan tujuan berbagai alasan, salah satunya karena ingin artikel mereka terlihat selalu up to date walaupun postingan mereka sudah ada yang bertahun-tahun lamanya sehingga sebagian informasi yang diberikan sebenarnya sudah tidak valid atau berlaku lagi. Namun banyak juga para browser atau pengunjung web yang ingin mengetahui informasi tersebut, yaitu tanggal atau kapan halaman web tersebut dibuat untuk sekedar memperkirakan apakah informasi yang tersediakan disana masih valid atau tidaknya. Walaupun untuk mengetahui hal tersebut bisa dibilang sulit, namun anda bisa coba cara berikut ini:

  • Buka halaman web yang ingin anda cek tanggalnya di browser anda.
  • Copy Url halaman tersebut.
  • Pergi ke Google.com, ketik �inurl:� di search box tersebut dan paste Url halaman tadi disamping, setelah itu tekan Enter. Contohnya seperti ini (saya ambil postingan saya sebelumnya sebagai contoh):

    inurl:http://elevenmillion.blogspot.com/2010/02/cara-ganti-bahasa-browser-firefox.html
  • Sekarang di address bar anda, ketik "&as_qdr=y15" pada akhir Google search Url (lihat contohnya di bawah), setelah itu tekan Enter lagi.

    http://www.google.com/#hl=en&source=hp&q=inurl%3Ahttp%3A%2F%2Felevenmillion.blogspot.com%2F2010%2F02%2Fcara-ganti-bahasa-browser-firefox.html&aq=f&aqi=&oq=&fp=c5aa4278f68e4a4&as_qdr=y15
  • Pada halaman baru yang terbuka, anda akan melihat tanggal publikasi halaman web tersebut disamping judul (lihat gambarnya di bawah).
cara mengetahui tanggal sebuah artikel
Di Web saat ini banyak sekali ancaman dari hal-hal yg amat mengganggu sampai ke yg berbahaya seperti dari hal yang paling umum yaitu email spam, penipuan, sampai ke virus-virus ataupun spyware berbahaya yang menyerang dan tersebar pada banyak situs yang tertular. Karena itu, ini membuat para pengguna web harus lebih berhati-hati lagi dalam menggunakan internet.

Saya yakin banyak diantara kalian yg tidak tau cara mengecek reputasi sebuah situs atau website, apakah situs tersebut berbahaya ataupun sudah di blacklist karena hal-hal tertentu. Mengetahui hal ini sangatlah penting apalagi untuk anda yang hendak bekerja sama dengannya seperti pemasangan iklan di tempatnya, melakukan pertukaran link (links exchange) ataupun bagi yang hendak membeli nama registered domain. Bagi anda yang mau pindah ke server baru atau perusahaan hosting baru anda juga perlu memastikan bahwa alamat IP mereka bersih dan aman.



Salah satu alat atau tool yang berguna untuk membantu hal ini adalah BlacklistAlert.org, anda bisa menggunakan alat ini untuk meyelidiki apakah situs anda sendiri juga telah diblacklist. Untuk menggunakannya, anda hanya perlu memasukkan nama domain anda pada kotak kosong yg disediakan setelah itu tool tersebut akan mulai mengeceknya. Jika pada hasilnya status anda OK, maka situs anda aman-aman saja, tetapi jika tidak OK maka seharusnya disana juga ada penjelasan mengapa. Alat lain yang bisa digunakan untuk hal ini adalah dengan melalui situs mxtoolbox. Jika website anda tercantumkan di dalamnya (alias di blacklist), anda bisa cari tau bagaimana cara untuk mengeluarkan website anda dari dalam daftar. Cara mengecek apakah sebuah situs di banned oleh Google/Adsense bisa melalui bannedcheck.

Untuk mengecek apakah sebuah situs sedang down untuk semuanya atau hanya anda saja yang tidak bisa mengaksesnya, anda bisa menggunakan tool ini downforeveryoneorjustme.com. Kadang banyak orang yang berpikir bahwa mereka tidak bisa mengakses sebuah situs karena situs tersebut lagi down padahal DNS atau IP mereka yang bermasalah.

Untuk mengecek pagerank, keyword density, meta tags, backlinks, link popularity, social services (dan banyak lagi) pada suatu website anda bisa mencobanya melalui testeveryhing. Tool ini dibagi menjadi 8 katogori dan anda bisa mencoba semuanya dari ping tester sampai yang ke graphic generator.

Website yang �aman dan benar� seharusnya memiliki halaman contact yang tertera nomor telepon dan alamat perusahaan. Anda juga bisa check informasi lainnya melalui whois search dan liat apakah informasi keduanya sama. Banyak situs yang tidak jelas menyatakan bahwa keberadaan mereka ada di US tetapi setelah di check meggunakan tool itu ternyata tidak benar.

Faktor penting lainnya untuk menentukan apakah sebuah website itu �aman� adalah dari umur websitenya itu sendiri. Website scam dan penipuan sering ditemukan hanya berumur beberapa bulan saja. Jika website yang serius dalam berbisnis biasanya dia register nama domainnya beberapa tahun sebelumnya.

Salah satu tips lainnya yang tidak kalah penting adalah mengecek tetangga2nya dalam hosting dia melalui IP search. Banyak website yang ditujukan untuk penipuan berada dalam shared IP address. Anda perlu waspasa jika tetangga-tetangga nya keliatan aneh dan mencurigakan.

Gunakan akal sehat dan hindari segala penawaran yang manjanjikan hal-hal yang terlalu hebat untuk sebuah kenyataan. Perhatikan logo Veri-Sign pada sebuah website, logo tersebut biasanya dimiliki sebuah website yang terpercaya dan biasanya logo tersebut terletak di bawah halaman atau di footer. Klik link tersebut untuk memastikan apakah website itu legal sebelum melanjutkan transaksi.

Hendak berbagi pengalaman anda tentang hal ini? Ada rekomendasi tool lain? bisa dishare disini.
Akhir akhir ini banyak sekali di internet link-link yang jika diklik maka akan menimbulkan banyak masalah di komputer anda. Masalahnya beraneka ragam seperti virus yang bisa membuat komputer jadi hang atau lambat maupun crash, spyware yang bisa melacak informasi informasi pribadi seperti password dll, dan masalah besar lainnya.


Jika anda harus mengecek seluruh source code dari sebuah website untuk mencari tau apakah ada link2 berbahaya yang disisipkan, maka ini tidak hanya sangat merepotkan tapi juga sangat amat menyita waktu. Anda mungkin mempunyai program anti-virus dan malware terinstal di komputer anda tapi program tersebut tidak memberi tahu link mana yang aman untuk diklik dan link mana yg aman sampai pada akhirnya anda sendiri yg mencoba untuk mengkliknya. Belum lagi banyak virus-virus tertentu atau serangan phishing, drive-by dowload maupun malware canggih lainnya yang lolos dalam scan program antivirus.

Link-link yang berbahaya ini sering ditemukan dalam bentuk shortcut, video lucu, berita yang mengejutkan, cerita yang menarik ataupun tombol �like� tetapi mereka semua dirancang dengan tujuan yang sama � mencuri informasi pribadi atau merusak/menguasai komputer anda. Berikut ini adalah tool atau alat alat di internet yang berguna untuk membantu mendetek apakah sebuah link itu aman atau tidak jika diklik. Sekarang anda bisa mengecek sebuah website sebelum anda mengunjung website tersebut.

Siteadvisor � masukkan URL yang ingin anda cek pada kotak yg disediakan (kanan layar dibawah heading �View a Site Report�). Jika link atau sebuah website dinyatakan aman untuk dikunjungi maka SiteAdvisor akan melaporkan �We tested this site and didnt find any significsnt problems� dalam tulisan berwarna hijau. Alat ini juga memberitahu online afiliasi yang dimiliki website tersebut dan review/rating anggota communitynya seperti apa.

Norton�s SafeWeb � alat online bermanfaat lain untuk mengecek apakah ada spyware, virus dan phishing pada sebuah website. Alat ini bisa melindungi anda dari situs yang berbahaya atau situs yang berusaha mencuri data data pribadi anda.

PhishTank � situs komunitas gratis dimana anda bisa memasukkan alamat alamat website yang anda yakin betul situs tersebut berbahaya. Nanti website tersebut akan dimasukkan kedalam daftar mereka supaya orang lain juga tau. Tentunya anda harus menjadi registered user terlebih dahulu dan website-website yang anda masukkan sudah harus diverify oleh para komunitasnya supaya bisa masuk ke dalam daftarnya. PhishTank dioperasikan oleh OpenDNS. Disini anda juga bisa melihat situs-situs apa saja yang telah terdaftar disana.

AVG Web Page Scanner � alat ini membantu kita mengecek suatu halaman website yang ingin anda kunjungi, apakah halaman tersebut aman atau tidak. Jika anda menerima link link yang aneh dan mencurigakan pada email anda, link tersebut bisa di copy-pastekan ke dalam kotak yang sudah disediakan. LinkScanner akan mengecek apakah ada program2, kode, ataupun link2 yang berbahaya tersimpan di halaman tersebut.

Google Safe Browsing � alat yang sama untuk mengecek malware pada website tapi kali ini alatnya berasal dari Google. Untuk menggunakannya anda perlu mengetik kode berikut ke dalam address bar browser anda: http://www.google.com/safebrowsing/diagnostic?site=situsanda.com (ganti kata yang tebal dengan alamat URL atau IP yang ingin anda cek). Google Safe Browsing akan memberitahu apakah situs tersebut telah terdapat malware yang berbahaya dalam 90 hari terakhir.

Online Link Scan � alat berguna lainnya untuk scan virus, spyware, malware dan trojan. Situs ini menggabungkan beberapa tool yang ada diatas menjadi satu sehingga anda bisa menggunakan alat alat tersebut di satu tempat.

Alat-alat lain yang serupa:
http://unmaskparasites.com
http://hosts-file.net
http://freenuts.com/check-if-links-are-safe/ (digunakan utk scan link yg diperpendek untuk keamanan - link anda yang diperpendek akan dibuka (expand) sebelum discan melalui Google SafeBrowsing and SiteAdvisor.
http://www.browserdefender.com/
http://www.mywot.com/
http://lookup.uribl.com/ (situs ini akan memberitahu situs2 apa saja yg telah diblacklist)
http://www.urlvoid.com/

Sabtu, 07 November 2009

XHTML singkatan dari Extensible HyperText Markup Language, adalah versi HTML yang lebih disiplin, ketat dan stabil. XHTML adalah kombinasi antara HTML dan XML (Extensible Markup Language). XML diciptakan untuk menjelaskan data, sedangkan HTML diciptakan untuk menampilkan data.

HTML (bahasa asli World Wide Web) secara pesat digantikan oleh XHTML. Keduanya sebenarnya hampir sama dikarenakan XHTML adalah warisan atau berasal dari HTML yang dirancang untuk menyesuaikan standar XML. Hanya ada beberapa perbedaan kecil antara kedua bahasa markup ini, bisa dikatakan bahwa XHTML adalah generasi baru HTML.
Salah satu keunggulan yang dimiliki XHTML adalah dapat digunakan pada perangkat non �komputer� seperti ponsel dan semacamnya.

  • Semua elemen dan attribute pada dokumen XHTML harus diketik dalam huruf kecil (ini tidak perlu pada HTML).
  • Semua tag pembuka harus ditutup dengan tag penutup, di HTML banyak tag- tag pembuka dibiarkan terbuka tanpa menutupnya namun tidak terjadi error bila dibuka pada browser, salah satu contohnya adalah line break dan image tag.
  • Dalam dunia XHTML, segala tag harus bersarang secara teratur (properly nested), artinya bahwa jika anda membuka tag �a� setelah itu membuka tag baru di dalamnya, maka tag yang paling baru harus ditutup duluan dan tag yang terbuka pertama harus ditutup paling akhir. Walaupun nesting ini juga terdapat dalam dunia HTML namun tidak seketat peraturan di XHTML.
  • Tiap value pada attribute harus terbungkus dengan tanda kutip ganda atau tunggal dan atributnya sendiri tidak boleh disingkat.
  • Image tag harus terdapat alt attribute yang menyediakan deskripsi image, untuk memungkinkan mereka memiliki beberapa persyaratan untuk aksesibilitas bersama dengan standar web yang berbeda.
  • Persyaratan lain dari XHTML adalah adanya pernyataan dari DOCTYPE yang menentukan aturan mana yang diikuti oleh dokumen anda (aturan yang diwarisi dari XML). Anda akan menemukan pernyataan ini pada barisan pertama dari atas ketika anda mengaktifkan halaman source kode XHTML yaitu tipe dokumen deklarasi (juga disebut dengan DTD atau DOCTYPE). Sebagian besar halaman web yang diciptakan hari ini akan menyertakan deklarasi DOCTYPE tersebut. Ada 3 DTD untuk XHTML: Strict (hanya akan validasi jika tanpa tag usang), Transisi (masih akan memvalidasi dengan tag usang), dan Frameset (untuk halaman yang "set up frame"). Semua dokumen XHTML harus sesuai dengan aturan sintaks XML.


CSS singkatan dari Cascading Style Sheets, adalah alat untuk mengatur tata letak atau design pada website. CSS mengontrol penampilan halaman web atau menyediakan informasi untuk browser bagaimana cara untuk menampilkan suatu halaman web seperti font, garis, margin (garis pinggir), lebar-tinggi halaman dan background. CSS juga mampu mengontrol layout (tata letak) berbagai dokumen dari satu style sheet dan juga mengaplikasi layout tertentu pada berbagai media dan masih banyak lagi. Jika dibandingkan dengan HTML, CSS lebih banyak menawarkan pilihan dan sekarang telah didukung oleh seluruh browser.


Untuk membangun struktur sebuah konten HTML diperlukan, untuk mem-format konten yang telah terstruktur CSS diperlukan. Banyak properti yang digunakan pada CSS mirip dengan yang dipakai di HTML, jadi jika anda sering menggunakan html untuk layout situs anda, anda akan mengenali banyak kode yang sama disini.

Kode CSS terdiri dari 3 bagian yaitu selector, property dan value:

Selector {property: value;}

Selector diletakkan terlebih dahulu, diikuti dengan property dan kemudian value. Tiap properti dengan valuenya dipisahkan dengan tanda titik dua dan berakhir dengan semi-kolon. Mereka juga diletakkan dalam braket keriting (curly bracket). Contohnya sebagai berikut:

Body {background-color:red;}

Selector: Elemen html apa yang di aplikasi di bagian ini
Property: Apa yang akan dirubah pada bagian ini
Value: Nilai pengaturannya.
Jangan meletakkan spasi diantara property value dengan unitnya karena hanya akan berfungsi pada Internet Explorer saja dan bukan pada Firefox maupun Opera.

CSS bisa diaplikasikan dengan 3 cara untuk dokumen HTML :
  • Dengan cara menggunakan attribute style HTML (inline) � contoh:

    <body style="background-color: yellow;">
  • Dengan cara menyelipkan kode CSS nya diantara style tag (<style>) � contoh:

    <html>
    <head>
    <title>Contoh</title>
    <style type="text/css">
    body {background-color: yellow;}
    </style>
    </head>
  • Dengan cara menyelipkan kode CSS di file terpisah (external style sheet) dan terlink pada dokumen HTML. Link yang menghubungkan itu bisa dibuat dengan meletakkan barisan kode HTML dibawah ini yang diletakkan diantara head tag pembuka dan penutup pada dokumen HTML.

    <link rel="stylesheet" type="text/css" href="nama-folder/nama-file.css" />
External style sheet yang mempunyai ekstensi �.CSS� banyak yang tidak mengetahui bahwa file tersebut sebenarnya hanyalah file text biasa. File CSS tidak seharusnya terdapat tag HTML di dalam.

Jika kode CSS teraplikasi ke dokumen html lebih dari satu tempat, misalkan pada internal style sheet dan juga pada external style sheet, biasanya yang diambil adalah yang dari internal. Dan jika terdapat juga kode CSS yang teraplikasi pada inline style (dalam kode html sebuah elemen) maka yang diambil sebagai prioritas utama adalah yang inline. Jika link CSS external style sheet terletak setelah internal style sheet dalam head tag dokumen html, maka external style sheet lah yang akan diprioritaskan.

Cara yang akan kita bahas disini adalah cara yang paling diminati dan yang paling banyak digunakan, yaitu yang ketiga dari 3 cara diatas (External Style Sheet). Untuk memahami bagaimana cara CSS bekerja, anda bisa copy 2 kode dibawah ini dan paste di notepad masing-masing. Yang satu anda simpan dengan nama �halamanku.htm� dan yang satunya lagi dengan nama �style.css�. Simpan kedua file tersebut di direktori atau folder yang sama.




Simpan ini dengan nama "halamanku.htm":Simpan ini dengan nama "style.css":
<html>
<head>
<title>Halamanku</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Halo, Nama Aku Edy Bright</h1>
</body>
</html>

body {

  background-color: red;

}

Setelah itu buka file �halamanku.htm� nya dengan double klik file tersebut dan anda akan melihat bahwa design file tersebut telah dipengaruhi oleh file CSS. Anda bisa mengubah settingan pada file CSS untuk mengubah tampilan file HTML dan file dokumen HTML lainnya yang terhubung ke CSS tersebut.

Kode CSS umum lainnya:


Property dan Value:

Warna dan background
color:green; - (pilih warna)
background-color:#ff0000; - (pilih warna background)
background-image:url("mypic.gif"); - (gambar background)
background-repeat:no-repeat;/repeat;/repeat-x;/repeat-y; - (model gambar background)
Background-attachment:scroll/ fixed - (menyetel gambar tetap atau bisa discroll atas-bawah)
background-position:2cm 2cm/ 50% 25%/ top right - (posisi image background)

Font
font-family:"Times New Roman", serif; - (jenis font apa yang hendak digunakan, koma digunakan untuk memisahkan antara pilihan utama dan pilihan alternatif,artinya jika Times New Roman tidak bisa ditampilkan pada browser maka Serif yang akan dipilih. Koma juga digunakan untuk memisahkan beberapa selector). Pada layar komputer jenis teks Sans-serif dianggap lebih mudah dibaca dibandingkan dengan Serif. Jika font yang dipilih terdapat beberapa kata, berikan tanda kutip, seperti: �Times New Roman�.
font-style:italic;/ oblique; - (font style)
font-variant:small-caps;/ normal; - (font variant)
font-weight:bold;/ normal; - (font weight)
font-size:30px;/ 12pt;/ 120%;/1em; - (ukuran font). Jika ukuran font tidak disetting, maka font tersebut akan otomatis menjadi 16px atau 1em (16px=1em), itu adalah default sizenya.

Text
text-indent:30px; - (text indent)
text-align:right;/ center;/ justify; - (text align)
text-decoration:underline;/ overline;/ line-through; - (garis bawah/ garis atas dan garis tengah pada teks)
letter-spacing:6px; - (spasi antar huruf)
text-transform:uppercase;/ lowercase;/ none; - (huruf besar atau kecil)
list-style-type:circle;/ square;/ upper-roman; - (tanda urutan daftar)
p:first-letter{color:#ff0000;font-size:xx-large;} � (merubah huruf pertama pada paragraf)
p:first-line {color:#0000ff;font-variant:small-caps;} �(merubah barisan pertama pada paragraf)


Margin, Padding, Border
margin-top/ right/ bottom/ left:100px; - (posisi margin)
or margin:100px 40px 10px 70px; - (putaran jam � atas, kanan, bawah, kiri)
padding:20px 20px 20px 80px; - (padding= spasi antara border dan konten)
border-width:thick;/ thin;/medium;
border-style:dotted;/ dashed;/ solid;/ double;/ groove;/ ridge;/ inset;/ outset;
border-style:dotted solid double dashed; - (membuat style berbeda pada tiap border dari atas-kanan-bawah-kiri/ arah putaran-jam)
border-top/ left/ bottom-color:red; - (menambah warna pada satu border)
border-bottom/ top/ right-style:solid; -(membuat style pada satu border)
border-top/ left/ bottom-width:thick; -(menyetel ukuran border)
outline:green dotted thick; - (membuat garis mengelilingi elemen diluar border).
outline-color:#00ff00;/ style:dotted;/ width:5px;


position:absolute;/ relative; top:150px; left:500px; - (meletakkan elemen secara posisi absolute atau relative)
z-index:1;/2;/3; etc. - (untuk membuat elemen menjadi layer (lapisan) dan value dari property nya bisa digunakan sebagai urutan elemen mana yang akan menimpa dan yang akan ditimpa)

visibility:hidden � (menyembunyikan elemen tanpa menghilangkan ruang yang ditempatkannya)
display:none � (menyembunyikan elemen termasuk ruang yang ditempatkannya)
max-height:/min-height:/max-width:/min-width:100px; - (mengatur tinggi dan lebar maximum/ minimum sebuah elemen)
display:inline � (mengganti block element menjadi inline)
display:block � (mengganti inline elemen menjadi block element)



Selectors:

Link
a:visited - (link yang telah terkunjungi)
a:active - (link pada saat diklik)
a:hover - (ketika cursor diletakkan diatas link)

Class, Id and Div
class="....." - (untuk aplikasi style pada sebuah elemen atau group elemen)
id="....." - (untuk aplikasi style pada satu elemen unik, dua elemen tidak bisa menyandang id yang sama)
span class="....." - (untuk memberi efek visual pada bagian terpilih sebuah teks)
div id="....." - (untuk men-group satu atau lebih block-level elemen)

Comment
/*letakkan komentar anda disini*/ - (anda bisa meletakkan komentar atau catatan diatas kode CSS untuk menjelaskan perintah kode tersebut, comment dihiraukan oleh browser)



HTML digunakan untuk membuat struktur konten, sedangkan CSS digunakan untuk mem-format konten yang telah terstruktur.

Dahulu,ketika Tim Berners Lee menciptakan World Wide Web (www), hanya bahasa HTML yang digunakan untuk membuat struktur pada teks. Penulis menandai teks mereka dengan menyatakan �ini adalah headline� atau �ini adalah paragraph� dengan menggunakan tag html seperti <h1> dan <p>.


Seiring menanjaknya kepopularitasan Web, para designer mulai mencari cara untuk mengembangkan layout pada dokumen online. Untuk mengabulkan niatnya, para produser browser (waktu itu Netscape dan Microsoft) menciptakan tag html baru seperti <font> yang berbeda pada tag html asli atau original pada waktu itu untuk mendefinisikan tata letak dan bukan struktur.

Hal ini juga membawa situasi dimana struktur tag asli seperti <table> makin disalah-gunakan pada layout halaman web selain digunakan untuk membangun struktur pada teks. Banyak tag layout baru seperti <blink> hanya bisa berfungsi pada satu tipe browser. �Anda perlu browser X untuk melihat halaman ini� telah menjadi disclaimer umum pada situs web.

CSS akhirnya terciptakan untuk mengatasi semua masalah ini dengan menyediakan designer web dengan layout yang lebih canggih untuk semua jenis tipe browser. CSS juga dibuat untuk memungkinkan para developer untuk memisahkan konten dari design supaya html dapat melaksanakan tugasnya lebih leluasa. CSS pertama kali dikembangkan pada tahun 1997 tetapi tidak mendapat kepopularitasan sampai pada sekitar tahun 2000an ketika para web browser mulai menggunakannya lebih dari sekedar merubah basic font dan aspek warna pada CSS.

Dengan CSS anda juga dapat mengontrol layout pada banyak dokumen dari satu style sheet, artinya jika anda memiliki 100 halaman website yang menggunakan design layout dari satu style sheet, maka anda hanya perlu mengubah satu file CSS tersebut untuk mengubah seluruh 100 halaman itu. CSS juga dapat mengaplikasi layout berbeda untuk tipe-media yang berlainan seperti screen, print dll.



Bagian 1: HTML | Bagian 2: HTML Attribute | Bagian 3: Table HTML | Bagian 4: Colspan dan Rowspan

Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar. Colspan adalah kependekan dari �column span� yang bisa mengartikan sebagai �berapa kotak kesamping� sedangkan rowspan mengartikan �berapa kotak kebawah�.

Attribute colspan diletakkan dalam tag <td> dan anda bisa mengatur �value�nya berapa kotak yang akan di span. Berikut saya kasih contohnya:


<table border="1">
<tr>
<td colspan="5">Gabungan Kotak 1-5</td>
</tr>
<tr>
<td>Kotak 1</td>
<td>Kotak 2</td>
<td>Kotak 3</td>
<td>Kotak 4</td>
<td>Kotak 5</td>
</tr>
</table>

dan hasilnya akan menjadi seperti ini:
Gabungan kotak 1-5
Kotak 1Kotak 2Kotak 3Kotak 4Kotak 5

Dengan menyetting colspan menjadi �5�, kotak di barisan pertama akan melebar menjadi gabungan dari 5 kolom. Berikut adalah contoh lain untuk pemahaman yang lebih baik:

<table border="1">
<tr>
<td colspan="3">Kotak 1-3</td>
<td>Kotak A</td>
<td>Kotak B</td>
</tr>
<tr>
<td>Kotak 1</td>
<td>Kotak 2</td>
<td>Kotak 3</td>
<td>Kotak 4</td>
<td>Kotak 5</td>
</tr>
</table>

dan anda bisa lihat di browser, hasilnya akan seperti ini:


Kotak 1-3
Kotak AKotak B
Kotak 1Kotak 2Kotak 3Kotak 4Kotak 5

Bagaimana dengan Rowspan?
Rowspan tugasnya untuk menyatukan kotak- kotak row kebawah sehingga menjadi satu unit yang panjang. Contohnya seperti ini:

<table border="1">
<tr>
<td rowspan="5">Kotak 1-5</td>
<td>Kotak 1</td>
</tr>
<tr>
<td>Kotak 2</td>
</tr>
<tr>
<td>Kotak 3</td>
</tr>
<tr>
<td>Kotak 4</td>
</tr>
<tr>
<td>Kotak 5</td>
</tr>
</table>

dan ini hasilnya pada browser anda:
Kotak 1-5Kotak 1
Kotak 2
Kotak 3
Kotak 4
Kotak 5

Tidak sesulit yang anda perkirakan bukan? dengan banyaknya latihan dan seringnya menggunakan attribute tersebut anda akan semakin gampang memahaminya dan akan terbiasa.



Bagian 1: HTML | Bagian 2: HTML Attribute | Bagian 3: Table HTML | Bagian 4: Colspan dan Rowspan

Table dibuat dengan table tag (<tag>). Table terbuat dari baris (<tr>) dan kolom (<td>). Tr artinya table row dan td artinya table data.
  • Untuk mulai membuat table anda perlu table tag pembuka yaitu <table> dan untuk mengakhiri anda tutup dengan table tag penutup yaitu </table>.
  • Untuk memulai membuat baris table horizontal anda perlu tag pembuka <tr> dan setelah memasukkan beberapa kolom anda perlu menutupnya kembali dengan tag penutup </tr>.
  • Untuk memulai membuat kolom table, seperti biasa anda juga memerlukan tag pembuka <td> dan setelah memasukkan data- data anda perlu menutupnya kembali dengan tag penutup </td>.
  • Jika hendak membuat kolom baru lagi dalam satu baris, anda tinggal ulang langkah cara membuat kolom yang sudah dijelaskan diatas sebelum menutupnya dengan tag penutup baris yaitu </tr>.
Berikut anda bisa lihat contohnya untuk pemahaman yang lebih baik:



<table>

<tr>

<td>Kotak A</td>

<td>Kotak B</td>

</tr>

<tr>

<td>Kotak C</td>

<td>Kotak D</td>

</tr>

</table>









Kotak AKotak B
Kotak CKotak D

Anda bisa melihat susunan kode HTMLnya di sebelah kiri dan hasilnya di sebelah kanan.
Berikut cara kerjanya:

Cara membuat Table dengan kode HTML
Rows = barisan kotak horizontal.
Columns = barisan kotak vertical.

Anda juga bisa menambahkan attribute untuk menyetel lebar, warna, posisi atau ketebalan garis border pada table. Berikut adalah salah satu contoh susunan html table dengan attribute, attributenya saya highlight dengan warna merah:

<table width="513" height="166" border="3" align="center" bordercolor="yellow" bgcolor="green">

<tr>

<td align="right" valign="top"><strong>Lihat text aku sekarang..<br />
Text aku muncul diatas kanan dalam table</strong></td>

</tr>

</table>

Hasilnya akan seperti ini:

Lihat text aku sekarang,..

Text aku muncul di sudut atas kanan dalam table

�valign� adalah nama attribute yang digunakan untuk mengatur posisi vertical konten dalam table.
�Align� adalah nama attribute yang digunakan untuk mengatur posisi horizontal konten dalam table.



Bagian 1: HTML | Bagian 2: HTML Attribute | Bagian 3: Table HTML | Bagian 4: Colspan dan Rowspan

Apa itu attribute dalam dunia HTML?
Attribute adalah perintah tambahan terhadap elemen yang ditulis setelah tag pembuka dan biasanya berupa sepasang nama/value seperti: name=�value�. Value tersebut biasanya terdapat diantara tanda kutip.
Berikut contoh- contoh attribute:




<h3 style="background-color:red;"> </h3>


Text H3 dengan background warna merah.


<body style="background-color:green;">


Membuat warna background hijau.

<FONT COLOR="Lime"> </FONT>Merubah warna font menjadi "lime".
<FONT SIZE=5> </FONT>Menyetel ukuran font.
<A HREF="URL"> </A>Membuat link ke halaman Web lain.
<a href="page2.htm"> </a>Untuk nge-link ke halaman Web lain pada website yang sama.
<a href="Subfolder/page2.htm"> </a>Untuk ngelink ke halaman Web lain dalam subfolder pada website yang sama.
<a href="../page2.htm"> </a>Kebalikannya dalam contoh diatas.
<h1 id="heading1"> </h1>Untuk memberi tanda pada elemen dimana anda akan ngelink dalam halaman yang sama.
<a href="#heading1"> </a>Untuk nge-lnk pada elemen yang telah anda tandai sebelumnya pada halaman yang sama.
<A HREF="MAILTO:soscilla@gmail.com"> </A>Membuat link menuju email address.
<a href="http://www.soscilla.blogspot.com/" title="Kunjungi blog saya :)"> </a>Untuk membuat title pada link, seperti ini: Anda bisa meletakkan cursor anda pada link ini.

<p align="right"> </p>

Untuk merubah posisi ke kanan halaman.
<FONT FACE=�Courier new, arial, helvetica�> </FONT>
Untuk memilih jenis font yang akan digunakan.
<img src="image url ">
Untuk memasukkan gambar atau image.

Untuk memasang gambar, ada 3 jenis tipe gambar yang bisa diterima dan dipasang pada halaman web anda yaitu:
  • PNG (Portable Network Graphics)
  • JPG / JPEG (Joint Photographic Experts Group)
  • GIF (Graphics Interchange Format)



Bagian 1: HTML | Bagian 2: HTML Attribute | Bagian 3: Table HTML | Bagian 4: Colspan dan Rowspan

HTML singkatan dari Hyper Text Markup Language, merupakan bahasa komputer yang ditulis pada suatu halaman file untuk memberitahu browser anda bagaimana sebuah halaman hendak ditampilkan. HTML adalah bahasa yang digunakan untuk memberitahu browser bagaimana untuk menampilkan suatu halaman sesuai dengan yang kita inginkan, seperti posisi, ukuran, warna dan lain- lain. Bahasa tersebut terdiri dari berbagai kode- kode yang masing- masing memiliki fungsi dan tugasnya masing- masing. Ketika anda melihat sebuah halaman di browser komputer anda, yang anda lihat sebenarnya adalah penerjemahan perintah HTML yang dilakukan oleh browser anda dari sebuah halaman.


Anda bisa melihat kode- kode HTML apa saja yang terdapat pada sebuah halaman di internet dengan meng-klik �View� dan setelah itu pilih �Source� diatas kiri browser anda, jika anda menggunakan Firefox anda bisa tekan Ctrl + U pada keyboard anda. Untuk orang- orang yang tidak mengerti HTML dan cara menggunakannya mungkin kode- kode tersebut akan terlihat sangat complex dan menakutkan. Padahal sebenarnya bahasa HTML amatlah mudah dipahami dan mudah dipelajari. Jika anda ingin bisa membuat website, anda harus belajar apa itu HTML dan cara menggunakannya.

Kode HTML terdiri dari tag (atau disebut juga dengan markup tag atau HTML tag) dan tagnya itu sendiri terdiri dari kata kunci yang terdapat dalam braket sudut. Sebagian besar tag HTML dimulai dengan tag pembuka dan diakhiri dengan tag penutup. Dokumen HTML terdiri dari 2 bagian: Head (informasi tentang halaman itu, apa yang anda tulis di bagian ini tidak akan ditampilkan atau terlihat pada browser komputer anda) dan Body (informasi yang membentuk sebuah halaman, apa yang anda letakkan/ tulis di bagian ini akan ditampilkan pada browser).

Masih bingung? Baiklah, mari kita praktek saja. Praktek mampu membuat anda jauh lebih mengerti dengan cepat dari pada hanya sekedar teori. Mari kita mulai...

Buka Notepad, copy dan paste kode HTML di bawah ini pada Notepad tersebut:

<html>

<head>

<title>Ini adalah website pertamaku!</title>

</head>

<body>

<p><b>Ini kalimat kesatu</b></p>

<p><i>Ini kalimat kedua</i></p>

<p><U>Ini kalimat ketiga</u></p>

</body>

</html>

Simpan Notepadnya dan beri dengan nama apa saja tapi diakhiri dengan �.htm� seperti halamanku.htm atau fileku.htm. Jangan lupa pilih �All Files� jika tidak anda akan menyimpannya dalam bentuk text dokumen dan bukan dokumen HTML.
Cara membuat website�.htm� dari nama akhir file tersebut mengartikan bahwa itu adalah dokumen HTML, anda juga bisa mengakhiri dengan nama �.html�, hasilnya akan sama. Setelah disimpan, cobalah buka file tersebut dengan double-klik filenya. Lihat dan perhatikan apa yang terjadi pada ketiga kalimat tersebut, perintah tag yang berlainan akan menghasilkan efek yang berbeda kepada tiap teks tersebut.

Berikut adalah kode basic HTML umum lainnya:


<HTML> </HTML>Untuk membuat halaman Web. Semua halaman Web mengandung perintah tag ini.
<HEAD> </HEAD>Semua elemen head diletakkan disini, apa yang anda tulis di area ini tidak akan ditampilkan atau terlihat. Elemen di dalam head tag termasuk script, meta informasi, memerintahkan browser dimana untuk menemukan style sheet dan lain- lain.
<TITLE> </TITLE>
Menampilkan judul di title bar.
<BODY> </BODY>
Apa yang anda tulis disini akan terlihat dan ditampilkan pada browser.
<B> </B> atau <strong> </strong>Menebalkan huruf atau teks

<I> </I> atau <em> </em>
Memiringkan huruf atau teks dalam model Italics
<u> </u>Menggaris bawahi teks.
<strike> </strike>Menggambar garis lurus di tengah- tengah teks.
<CENTER> </CENTER>
Meletakkan atau memposisikan sesuatu di tengah halaman.
<H1> </H1>

Heading 1

<H2> </H2>

Heading 2

<H3> </H3>

Heading 3

<H4> </H4>

Heading 4

<H5> </H5>
Heading 5
<H6> </H6>
Heading 6
<BR>
Line baru.
Membuat sebuah spasi diantara lines (contohnya dua kalimat ini).
<P> </p>
Paragraph baru.

Membuat double spasi diantara lines, paragraphs (contohnya dua kalimat ini).
&nbsp;Spasi.
<HR>
Membuat garis horizontal pada dokumen.
<ul>
<li>Daftar list</li>
<li>Daftar list lain</li>
</ul>
  • Daftar list informasi
  • Daftar list informasi lain
<ol>
<li>List pertama</li>
<li>List kedua</li>
</ol>
  1. List informasi pertama
  2. List informasi kedua

<b> artinya "bold"
<i> artinya "italics"
<em> artinya "emphasis"
<u> artinya "underline"
<h1> artinya "heading 1"
<br> artinya "break"
<p> artinya "paragraph"
<hr> artinya "horizontal"
<ul> artinya "unordered list"
<ol> artinya "ordered list"

Tidak akan berpengaruh jika anda mengetik perintah tagnya dalam huruf kecil atau huruf besar, hasilnya akan sama.

Dalam kode HTML, ada yang namanya attribute. Attribute memerankan peranan yang tidak kalah penting. Apa itu attribute? Mari kita kita bahas dalam halaman selanjutnya.



Minggu, 01 November 2009

Diigo situs bookmark sosialDiigo adalah layanan bookmark sosial. Mungkin banyak dari kalian sudah tahu cara mem-favorit halaman web menggunakan Internet Explorer atau mem-bookmark dengan menggunakan browser Firefox. Di Diigo, layanan ini kurang lebih sama, tetapi bukannya menyimpan URL dalam browser melainkan menyimpannya di internet. Dengan hal ini maka keuntungan dari pengguna Diigo dalam blogging atau web-surfing sehari-hari bisa dikatakan sebagai berikut:


Diigo memungkinkan para penggunanya untuk menyorot teks informasi dari halaman web, meng-highlightnya dan juga dapat membuat catatan pribadi di halaman tersebut. Untuk menjaga semuanya terorganisir, mereka dapat diatur oleh tag atau dengan list (daftar).

Ketika anda highlight atau menyorot kalimat pada halaman web tertentu, hal itu sama seperti ketika anda men-stabilo kalimat pada kertas halaman buku tulis, kata-kata yang dihighlight pada artikel tersebut akan disimpan secara otomatis, jadi kapanpun anda kembali ke halaman yang sama, settingan informasi ini tidak akan berubah.

Diigo juga memungkinkan para browser untuk membuat sebuah catatan (sticky note) yang dapat dilekatkan atau ditempel pada halaman web. Ketika membuat sticky note tersebut, anda bisa memindahkannya di manapun pada halaman Web.

Bookmark yang anda buat akan disimpan secara online (Sama seperti Del.icio.us atau StumbleUpon), berbeda halnya jika anda membookmark halaman web favorit anda melalui browser, list bookmark tersebut tidak akan selalu bersama anda terutama jika anda mengganti atau pindah ke komputer atau laptop lain. Kedua, anda akan kehilangan semua daftar bookmark anda jika sesuatu yang buruk terjadi pada hard drive anda, misalkan rusak permanen. Ketiga, jika menggunakan browser anda untuk mem-bookmark halaman di web, hanya anda sendiri yang dapat melihat apa yang ada dalam daftar bookmark anda. Dengan menggunakan Diigo, pengguna lain dapat melihat apa saja yang terdapat pada daftar list bookmark anda dan begitu juga sebaliknya.

Dengan begitu, maka sesama pengguna Diigo dapat berbagi satu sama lainnya, mereka juga dapat akses ke dalam halaman web pilihan anda, menambah komentar atau opini ataupun melihat highlight atau catatan anda. Semua informasi ini dapat dilihat dari komputer manapun, browser atau ponsel dengan kemampuan browsing. Hal ini bisa terjadi karena informasi yang disimpan secara online. Anda dapat mencari dan mengakses bookmark anda di mana saja, dengan melalui teks lengkap atau dengan tag. Diigo juga memberikan pilihan apakah bookmark yang anda miliki akan di perlihatkan secara umum atau disembunyikan untuk anda sendiri yang bisa mengaksesnya. Bookmark juga dapat disusun berbentuk list.

Ketika pengguna mem-bookmark halaman dengan Diigo, mereka sebenarnya melakukan dua hal: kesatu, URL halaman web tersebut akan disimpan, kedua, gambar cache halaman tersebut juga disimpan. Ini berarti bahwa mereka akan selalu memiliki salinan dari halaman asli termasuk bagian highlight dan catatannya, walaupun jika konten halaman tersebut dirubah atau jika URL tersebut menjadi broken.

Fitur Groups yang terdapat di Diigo juga memungkinkan anda untuk bergabung dengan group dalam bidang yang anda minati, sehingga ketika orang lain dalam group niche anda melakukan bookmark, anda akan diberitahu. Anda juga dapat menciptakan atau membuat grup anda sendiri. Setiap group juga memiliki papan diskusi dimana anggota dapat membuat pengumuman, melakukan percakapan, dll
Jika anda ingin menemukan lebih banyak situs berita sosial untuk meningkatkan kunjungan ke situs anda lebih banyak, anda dapat mencoba Propeller dan Reddit.

Reddit situs jejaring sosialPropeller (sebelumnya dikenal sebagai Netscape) dan Reddit, keduanya adalah situs-situs berita sosial terkenal, dan seperti website social news lainnya Reddit dan Propeller juga merupakan situs yang diprogram atau di kendalikan oleh para anggotanya, termasuk anda jika salah satu penggunanya. Anda dapat menemukan banyak topik dari teknologi, gadget ke humor ataupun politik dan banyak lagi. Setelah anda daftar untuk menjadi anggota mereka (gratis), anda dapat submit atau mengirim artikel menarik apapun ke situs tersebut dan melakukan vote pada tiap artikel, anda juga dapat berbagi dengan teman-teman ataupun membuat daftar list artikel favorit anda. Anda juga dapat submit halaman situs web atau blog anda sendiri yang anda rasa layak dan menarik untuk diceritakan atau berbagi kepada orang lain dan sekaligus mengundang lebih banyak trafik ke situs anda. Ini merupakan hadiah yang bagus untuk sebuah artikel yang berkualitas dan konten yang informatif.



Namun untuk Reddit anda perlu berhati-hati terutama yang suka spam atau mengirim artikel milik sendiri atau konten self-promotion karena tidak semua konten yang anda kirim akan ditampilkan dan akan di 'auto-buried' alias di kubur secara otomatis oleh sistim robotnya dan tidak akan tampil pada hasil pencariannya (walaupun banyak yang protes artikelnya tidak ada yang mengandung self-promotion atau berhubungan dengan SEO). Ketika anda di banned oleh situsnya, anda masih bisa masuk atau login dan submit artikel sebanyak mungkin, pada halaman utama username anda juga akan terdapat daftar artikel-artikel yang anda submit namun halaman-halaman tersebut hanya bisa dilihat oleh anda sendiri dan bukan orang lain maupun search engine.

situs jejaring sosial, PropellerCara kerjanya? sistim ini sangat mirip dengan systim situs bookmark sosial lainnya seperti Mixx, del.icio.us, StumbleUpon atau Digg. Anggota menemukan artikel bagus di web, menyerahkan mereka ke Propeller atau Reddit dan anggota lain dapat melakukan voting dan mengomentari artikel-artikel tersebut. Artikel yang paling populer akan naik ke atas dan akan menerima trafik yang besar. Tentu saja masing-masing kedua situs tersebut (atau situs bookmark lainnya) memiliki cara masing-masing yang berbeda untuk menyajikan dan memperlakukan sebuah konten. Untuk melakukan voting pada Propeller, cukup tekan "Prop It" tombol merah di sebelah kiri ringkasan cerita. Pengguna juga dapat membuat grup atau bergabung dengan sejumlah kelompok yang ada. Bonus yang lain sebagai anggota adalah anda bisa memperluas akses masuk dari situs-situs semacam ini ke website anda dan menciptakan kemungkinan bagi orang lain untuk link ke situs anda.

gambar pesan error pada redditGambar ini saya dapat ketika sedang bermain-main di Reddit (gambar kiri), tepatnya setelah submit artikel. Gambarnya lucu aja jadi saya paste dech disini. Saya cek kembali apakah artikelnya berhasil terkirim ternyata berhasil tetapi gak jelas kenapa gambar ini muncul, mungkin anda pernah mengalaminya?

Untuk mulai menggunakan Propeller dan Reddit, anda bisa berkunjung ke situsnya dan mendaftar untuk sebuah account. Tidak akan ada toolbar yang perlu diinstal, yang diperlukan hanyalah waktu anda yang cukup banyak untuk disita untuk bermain-main pada situs jaringan tersebut, memperbanyak teman, melibatkan diri dalam diskusi dan meninggalkan komentar. Setelah anda punya begitu banyak teman sudah, anda dapat meminta mereka untuk mengunjungi postingan anda yang anda submit dan memberikan voting yang positif. Ketika anda akhirnya mulai menggunakan semua situs berita sosial ini, seperti kebanyakan hal-hal online lainnya, kadang bisa membuat kita sedikit kecanduan.
URL shortening adalah teknik di World Wide Web di mana URL (Uniform Resource Locator) yang panjang diganti dengan yang pendek tapi tetap mengarah ke halaman yang sama. Hal ini dapat dilakukan dengan menggunakan HTTP Redirect pada nama domain yang pendek, yang menghubung ke halaman web yang memiliki URL yang panjang.

cara memperpendek url


Kegunaan lain dari URL shortening adalah untuk "mempercantik" link, melacak klik, atau menyembunyikan alamat url sebenarnya. Meskipun menyamar sebagai alamat url yang berbeda banyak dilakukan oleh para bisnis online maupun oleh keperluan pribadi, namun hal ini sering dianggap sebagai penyalahgunaan dan akibatnya beberapa penyedia layanan URL shortening telah menemukan diri mereka dalam daftar spam blacklist. Beberapa situs web juga tidak mengizinkan redirect link yang pendek di posting di halaman mereka.

apa itu url shortener shortening
Seiring dengan meningkatnya penggunaan Twitter, Facebook dan situs media sosial lainnya, semakin banyak pula jasa layanan url shortening ini dikarenakan terbatasnya space karakter di situs situs tersebut yang digunakan untuk berbagi pesan atau status update para pengguna. Seperti contoh, di Twitter sendiri hanya mengizinkan maksimal 140 karakter bagi para pengguna untuk post status update.

Ada banyak pilihan url shortener yang berbeda, dan semua hadir dengan fitur yang berbeda. Tergantung URL shortener manakah yang anda sukai dan mengapa. Salah satu yang sedang popular adalah url shortener yang menawarkan fitur dimana anda bisa melacak jumlah trafik yang dihasilkan tiap link tersebut. Pada bulan November 2009, link yang diperpendek dari layanan URL shortening Bitly telah diakses sebanyak 2,1 miliar kali.

However, apakah menggunakan url shortener ini akan berdampak negative pada seo?? Well, menurut para pakar, menggunakan url shortener seharusnya tidak menyebabkan dampak negative asalkan layanan url shortening tersebut bekerja secara teratur dan melalui konversi dengan teknik 301 redirect. Pada umumnya, layanan url shortener menggunakan 2 jenis tipe redirect, 302 dan 301 redirects.

Kode tersebut digunakan pada web server untuk memberitahukan pada browser (atau search engine) apakah url yang di request (url pendek) telah pindah ke url yang dialihkan secara permanen (301) atau hanya sementara saja (302). Jika sudah permanen (301), maka search engine akan menganggap bahwa url yang dialihkanlah sebagai url yang sebenarnya dan akan memberikan kredit pada url yang lebih panjang tersebut. Tetapi jika hanya sementara (302), maka search engine akan menganggap bahwa url yang pendek tersebut adalah yang aslinya, maka yang akan memperoleh kredit adalah url shortenernya, bukan web atau blog anda.

Untuk mengetahui apakah url shortener yang anda pakai menggunakan 301 directs atau tidak, anda bisa check disini. However, anda juga perlu inget bahwa walaupun banyak url shortener yang menggunakan teknik 301 redirect, mereka juga bisa kapan saja merubah layanan tersebut ke 302 directs tanpa pemberitahuan.
StumbleUpon profile anda bisa menjadi bagian yang penting untuk mempromosikan website anda dan dapat menyumbang akses tambahan menuju ke situs situs anda. Ketika pengguna StumbleUpon melihat profile anda dan hendak mengetahui lebih dalam tentang diri anda mereka akan cenderung membaca detil detil yang ada disana dan mengklik link yang anda letakkan. Kesempatan untuk menarik pengunjung ke website anda pun akan semakin banyak. Membuat link pada profile StumbleUpon tidaklah sulit, berikut caranya:

  • Masuk ke akun StumbleUpon anda dan klik �Settings� yang terletak di atas kanan pojok halaman.
  • Setelah itu pada tab kedua, klik �Customize Profile�.
  • Pada bagian �About you�, di barisan pertama anda akan diminta untuk �introduce yourself to everyone� alias �Perkenalkan diri anda ke semua orang�. Anda bisa meletakkan link anda di area tersebut bersamaan dengan data profile anda. Cara membuat linknya anda masukkan kode html sebagai berikut:

    <a href="http://www.elevenmillion.blogspot.com/">masukkan teks anda disini</a>

    Ganti URL saya (yang saya highlight dengan warna biru di atas) dengan url milik anda dan ganti teks merahnya dengan teks anda. Teks tersebut akan menjadi link yang digunakan untuk men-direct pengunjung ke URL yang anda cantumkan.
  • Jangan kaget jika sistim pada StumbleUpon akan otomatis menyisipkan kode �No Follow� pada kode link html anda, itu bukan error dan biarkan saja.
  • Jika sudah selesai klik �Save preferences� untuk menyimpan settingan dan data baru anda. Lihat profile baru anda dan link anda pun sudah jadi.


Untuk menggunakan StumbleUpon ada beberapa peraturan yang harus diikuti untuk mendapatkan hasil yang positif atau meningkatkan trafik yang besar. Berikut adalah beberapa tips dan cara yang digunakan oleh beberapa pengguna StumbleUpon yang berpengalaman untuk mengoptimalkan website mereka:

  • Membuat profile yang lengkap dan bagus adalah amat penting.
  • Jangan submit atau Stumble pada halaman utama atau main page website anda.
  • Tulis konten yang berkualitas dan usahakan untuk Stumble hanya pada halaman anda yang terbaik.
  • Buat konten yang panjang dan seakan- akan tidak bisa dicerna jika hanya dikunjungi sekali saja.
  • Jangan terlalu banyak meletakkan iklan dan produk-produk yang untuk dijual. Kemungkinan pengunjung malah akan tekan tombol �tidak suka� dan memperparah kepopularitasan page anda.
  • Website anda sebaiknya memiliki branding dan URL yang mudah diingat.
  • Label dan tag halaman yang anda submit secara teratur. Cara tagging juga bisa membantu. Cari beberapa keyword yang popular dan yang paling banyak dicari.
  • Seperti social website lainnya, Digg , Reddit, Propeller, Mixx dan sejenisnya, memperluas persahabatan dan mencari teman sebanyak-banyaknya mampu memberi faktor yang mendukung.
  • Letakkan tombol StumbleUpon pada halaman web anda untuk mempermudah pengunjung bookmark halaman tersebut.
  • Stumble pada halaman yang nge-link ke anda dan ajak teman anda juga untuk Stumble halaman tersebut.
  • Anda bisa membeli �sponsored stumble� yang artinya anda membayar StumbleUpon untuk membawa pengunjung ke halaman page web anda. Anda bisa men-target pengunjung berdasarkan hobi tertentu, lokasi, sejarah rating situs yang sama dan demography seperti jenis kelamin dan umur.
  • Rancang halaman �About� page anda dan bergabung pada komunitas yang berhubungan dengan interest anda.

Berbagai metode untuk Stumble, ikuti panduan ini dan nikmati kemudahan dan kecepatan menjelajahi StumbleUpon:


Untuk Stumble berdasarkan topik atau kesukaan tertentu:
Dari toolbar > All > pilih topiknya.

Untuk Stumble favorite pengguna lain:
Dari profile mereka > Stumble (anda akan Stumble hanya pada halaman-halaman yang di �jempolkan� oleh pengguna tersebut.

Untuk Stumble tag milik pengguna lain:
Dari profile mereka > klik salah satu tag favorite mereka > Stumble (anda akan Stumble pada halaman web yang ada pada tag tersebut.

Untuk Stumble halaman dari website tertentu seperti Youtube, Blogger dll. Ini disebut juga dengan Stumble Thru atau Channel Stumbling:
Dari toolbar > All > Stumble Thru.
Dari website > Strumble Thru (letaknya pada bagian footer bawah).

Untuk Strumble halaman web berdasarkan keywords:
Dari toolbar > search/ tag box > ketikkan keyword anda > enter dan Strumble.

Untuk memunculkan search/ tag box:
Klik Tools > Toolbar Option > Search & Tagging tab > centang kotak �Show search/ tag box�.

Untuk kembali ke Stumble mode semula:
Klik �Tools� pada drop-down menu di toolbar > All, atau
Dari website > tab Discover > Stumble.


Untuk mengubah topik kategori yang ingin anda kunjungi:
Klik �Setting� diatas kanan > Manage Interests > pilih jenis topik yang disuka > Save preference.

Anda akan beberapa kali menemukan �sponsored stumble� yang artinya pemilik iklan membayar StumbleUpon untuk membawa pengunjung ke halaman webnya. Ini ditandai oleh icon berupa orang yang berbaju hijau pada toolbar. Anda akan melihat halaman �sponsored stumble� yang berhubungan dengan topik yang anda pilih, dan anda tidak akan melihat lebih dari satu di tiap 15 putaran stumble.

Anda juga bisa mengecek apakah suatu halaman web sudah terdaftar di StumbleUpon, untuk mengeceknya anda bisa kunjungi link ini dan ketik alamat URL di tempat yang disediakan.


Bagaimana cara membuat profile StumbleUpon:
Klik �Settings� > Account Settings:
Isi nama, alamat email, lokasi dan sebagainya. Anda juga bisa memilih apakah tanggal ulang tahun anda perlu dimunculkan atau tidak.

Klik �Settings� > Customize Profile:
Disini anda bisa merubah warna theme dan meletakkan deskripsi pendek tentang diri anda. Disini juga terdapat berbagai pilihan mengenai apa saja yang anda ingin pengunjung anda tau tentang diri anda.

Klik �Setting� > Profile Picture:
Upload foto anda. Logo mengenai website anda atau foto close-up wajah anda dipercayai sebagai pilihan yang paling dihargai untuk sebuah profile.


Berbagi StumbleUpon anda dengan teman via email:
Anda bisa impor semua alamat email teman anda untuk mengetahui apakah mereka sudah menggunakan StumbleUpon supaya anda bisa add atau subscribe ke mereka atau mengundang teman anda untuk bergabung jika belum punya.

Klik tab Stumbler > klik �See who you know� > Find friends > masukkan alamat email anda dan passwordnya > Find friends.
Centang kotak disamping nama teman-teman anda yang sudah memiliki account StumbleUpon untuk add mereka sebagai teman.
Centang kotak disamping nama teman-teman anda yang belum memiliki account StumbleUpon untuk mengundang mereka untuk bergabung.
Klik Invite.


Ketika anda memberikan �thumbs up� pada sebuah artikel, dan artikel tersebut sudah ada di StumbleUpon maka imagenya akan highlight, setelah itu tidak akan ada apa-apa. Anda masih bisa menambahkan review pada halaman tersebut dengan meng-klik �balon teks� yang berwarna putih di toolbar StumbleUpon anda. Jika halaman yang anda �thumbs up� belum ada di StumbleUpon maka window pop-up akan muncul dan meminta anda untuk mengisi judul, deskripsi dan tipe klasifikasi topik tentang halaman tersebut. Menambahkan detil detil informasi mengenai artikel yang anda Stumble akan sangat bermanfaat bagi pengguna lain dan bagi profile StumbleUpon anda. Anda perlu mengisi judul, review, kategori topik, tags dan informasi lainnya yang diperlukan.
Anda juga bisa mengecek apakah website anda atau suatu halaman web sudah terdaftar di StumbleUpon, untuk melakukan itu anda bisa kunjungi link ini dan ketik alamat URL tersebut di tempat yang disediakan.

cara submit artikel ke StumbleUponKalau anda menemukan halaman website yang anda pikir itu bagus dan menarik, jangan ragu untuk membuat pemilik website tersebut senang dengan meng-klk tombol �i like it�. Kalau anda adalah orang pertama yang Stumble halaman tersebut maka ini juga akan menjadi kabar bagus karena profile andalah yang akan dimunculkan pada halaman review artikel tersebut dan tentunya hal ini akan mengundang trafik kembali pada situs anda, ditambah lagi apabila banyak pengguna StumbleUpon yang suka dengan artikel tersebut maka akan semakin banyak orang yang akan melihat profile anda. Dan kalau sang pemilik situs yang anda Stumble tersebut tau trafik yang diperoleh mereka adalah hasil Stumble dari anda, maka mereka juga akan mengunjungi link anda dan siapa tau mereka akan membuat hal yang sama pada anda. Oleh karena itu membuat profile yang bagus akan sangat berguna sebelum anda Stumble lebih lanjut, letakkan URL anda di profile, anda bisa merubah Layout dan warna dan masukkan data-data lain yang diperlukan.

Untuk berharap artikel anda di Stumble orang maka usahakan memaksimalkan kualitas konten anda karena untuk menarik trafik besar dari StumbleUpon sangat tergantung dengan kualitas pada suatu konten. Kalau hendak Stumble halaman sendiri, usahakan cari halaman yang menurut anda adalah yang terbaik/ terbagus dan sangat disarankan untuk tidak sering Stumble konten milik anda sendiri apalagi jika selalu men-Stumble halaman-halaman yang penuh dengan penjualan, maka kemungkinan besar para pengguna StumbleUpon akan menekan tombol �dislike� dan akan menurunkan kepopularitasan situs anda.