Close it

Selasa, 31 Mei 2011

2 Tutorial Dan Pengenalan CSS3►► URL : http://wwdq.blogspot.com/2011/05/tutorial-dan-pengenalan-css3.html.

Cascading Style Sheet (CSS) adalah salah satu bahasa perograman website untuk mengatur beberapa komponen yang ada dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Sama dengan styles dalam software atau aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan HTML atau XHTML.

Bagi anda yang mungkin belum mengetahui CSS, CSS digunakan dalam pembuatan layout yang tableless, artinya pembuatan layout tidak lagi menggunakan metode table, karena dampak dari penggunaan table yang paling terasa adalah beratnya layout yang dihasilkan karena begitu banyak kode-kode dari hasil penggunaan table. Tableless pun menjadi standarisasi bagi seorang SEO-er, karena sifatnya yang search engine friendly. Tidak hanya dalam pembuatan layout, CSS3 pun efektif digunakan dalam pembuatan style-style yang mempercantik sebuah website.

CSS3 merupakan pengembangan dari CSS ini yang bisa membuat sebuah web menjadi lebih menarik. Dalam CSS3 ini meliputi hal-hal seperti berikut ini:

Drop Shadow
Menggunakan drop shadow pada css 3, cukup tambahkan baris
-moz-box-shadow: #585858 3px 3px 4px;
moz ini digunakan untuk browser firefox
-webkit-box-shadow: #585858 3px 3px 4px;
webkit digunakan untuk browser chrome serta safari 

Contoh DropShadow

Gradient
background: -moz-linear-gradient(-45deg, #000000,#ffffff );
penggunaan moz-linear-gradien dengan 45derajat mulai dari hitam sampai putih, hasilnya adalah seperti ini :

Contoh


Tutorial lainnya tentang CSS3 Akan segera menyusul :)

Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Tutorial Dan Pengenalan CSS3.

3 Penyampaian Pemikiran, Agar Dapat Berkreasi►► URL : http://wwdq.blogspot.com/2011/05/penyampaian-pemikiran-agar-dapat.html.

Dari judul diatas mungkin anda masih belum tahu jelas apa yang dimaksud pada postingan kali ini. Penyampaian Pemikiran, agar dapat berkreasi. yang dimaksud dari penyampaian pemikiran agar dapat berkreasi disini, adalah pemikiran membuat sebuah website sendiri dengan cara manual dari awal sampai akhir website itu jadi, Lebih Baik dari segi pengtahuan , daripada pembuatan website dengan menggunakan CMS, atau sejenisnya yang berfungsi memudahkan si Pembuat untuk membangun sebuah website.


Apa yang menjadi dasar saya berpikiran seperti itu? Bila anda terbiasa memakai yang instant seperti cms atau sejenisnya, anda tidak tahu sulitnya apabila membuat pemograman website secara manual. Sulit? Mungkin beberapa orang beranggapan "ngapain sih pakai yang sulit atau manual, kalau ada yang lebih mudah".
Menurut saya anggapan ini benar, mengapa? Karena memang benar yang mudah itu lebih efisien, dan dalam proses pembuatan tidak banyak memakan waktu, bahkan dari segi tampilan dan pemograman lebih sempurna yang instant daripada pemograman sendiri.

Tapi disisi lain pembuatan website dengan pemograman sendiri, anda jadi mengetahui step by step dalam pembuatan website tersebut. Dan yang terpenting membuat website dengan pemograman sendiri lebih membuat si pembangun website lebih kreatif dan inovatif karena apa yang ada dipikiran dituangkan langsung kedalam pembuatan website tersebut. Hasil akhirnya pun pasti berbeda dari yang lain, unik.

Disini akan memberikan contoh perbedaan pembuatan database ala CMS dan ala Coding
Berikut adalah gambar pembuatan database ala CMS :
contoh gambar pembuatan database di CMS
Seperti yang anda liat gambar diatas, dalam CMS pembuatan database mengunakan GUI (graphical user interface) yang memudahkan kita membuat database. Tetapi apakah anda tahu syntax pembuatan database tersebut?

<?php

$con = mysql_connect("localhost","username","password"); /*server, username, password*/
if (!$con)
{ die('Could not connect: ' . mysql_error());
}
if (mysql_query("CREATE DATABASE nama_db",$con)) //nama database
{
echo "Database created";
}
else
{
echo "Error creating database: " . mysql_error();
}
mysql_close($con);

?>
Syntax diatas adalah pembuatan database menggunakan coding. dengan pembuatan database menggunakan coding, anda pun jadi tahu syntax pembuat database tersebut. Ini hanya sekedar pengetahuan.

Dalam pembuatan tampilan website pun sama seperti pemograman dalam website tersebut. Saya akui tampilan website yang terbangun dari cms atau yang sejenisnya memang sangat bagus. Tetapi apakah uniq? Yang berarti berbeda dari yang lain. Mungkin saja orang lain diluar sana memakai tampilan yang sama.
Beda dengan membuat sendiri tampilannya, banyak kelebihan yang bisa didapat dari membuat sendiri tampilan website atau yang sering didengar dengan layout. Salah satunya yaitu membuat layout yang kita buat menjadi beda daripada yang lain karena yang terjadi dari pembuatan layout tersebut ialah hasil dari pemikiran dan keinginan sendiri. Dan selain itu, kita pun dituntut untuk berkreasi agar hasil akhirnya sesuai dengan yang diinginkan.

Dari semua pembuatan dengan cara manual pemograman maupun tampilan sebuah website, kita pun mendapat nilai +. Karena dari sini kita mendapat pelajaran bahwa berkreasi itu penting sebagai Inovasi Karya Anak Bangsa menuju Kemandirian Nasional.

Lebih hebat lagi bila anda bisa menguasai kedua-duanya, bisa dengan cara yang mudah/instant, bisa pula dengan cara manual.

Postingan kali ini saya terinsfirasi dari blog guru saya yang bernama Pak Mawan A Nugroho karena Beliau yang membuat sendiri blog yang dia miliki, dari pemograman hingga tampilannya.
Postingan ini dibuat dari pemikiran saya sendiri, jadi bila ada pemikiran lain dari para senior, mohon dimaklumkan dan dikomentari postingan ini. Terimakasih :)
read more. . . ►► Penyampaian Pemikiran, Agar Dapat Berkreasi.

Senin, 30 Mei 2011

1 Download Artisteer Dan Cracknya►► URL : http://wwdq.blogspot.com/2011/05/download-artisteer-dan-cracknya.html.

Sudah lama tidak update blog, yah dikarenakan sibuk dengan dunia nyata. tetapi diujung akhir bulan Mei 2011 ini, wwdq kembali update dan kali ini wwdq berbagi pengetahuan (bagi para senior mohon maklum) tentang  software Artisteer untuk mendesain template dan disini pun menyediakan link download + Keygen. Sebelum Download, apasih Artisteer itu?





Artisteer adalah sebuah aplikasi yang  pertama dan unik untuk mendesain web secara otomatisasi dan langsung menciptakan web yang fantastis, aplikasi ini memiliki template yang unik untuk Blogger,  Joomla, Drupal, WordPress, dan theme untuk blog anda atau halaman HTML.
Dengan Artisteer anda bisa segera menjadi ahli desain web, mengedit dan grafis mengiris, pengkodean XHTML dan CSS, dan membuat desain Web template dan Joomla, Drupal dan WordPress theme.Semua dalam hitungan menit, tanpa Photoshop atau Dreamweaver, dan tidak ada keterampilan teknis.
Fitur Artisteer 2.6.0 Full :
  • Desain awesome WordPress Blog, Joomla profesional! dan Drupal template, dan desain Website
  • Mudah Digunakan
  • Tidak perlu belajar Photoshop, CSS, HTML atau teknologi lainnya
  • Ekspor sebagai Theme WordPress atau Template CMS
Alasan2 Orang Menggunakan Artisteer :
  1. Menghasilkan  ide-ide keren pada saat mendesain Web
  2. Sesuai desain yang dihasilkan untuk membuat Web tampak hebat dan Blog template.
  3. Validasi HTML dan CSS yang sesuai dengan standar Web.
  4. Anda tidak perlu belajar Photoshop, CSS, HTML dan teknologi web lainnya untuk membuat desain tampak besar, termasuk gambar dan tombol.
  5. Jika Anda seorang desainer Web, menghasilkan gagasan, prototipe dan Website u
  6. Pilih dan menggunakan banyak elemen desain disertakan, dari latar belakang ke obyek foto dan tombol.
  7. Secara otomatis memecahkan masalah dengan aliasing gambar, kompatibilitas browser Web dan rincian lain yang membutuhkan waktu dan pengetahuan.
  8. Pelajari cara membuat HTML profesional dan kode CSS.
Versi artisteer yang saya pakai adalah Artisteer 2.6.0.36391 Standard Edition. bagi ada yang tidak sabar untuk mencobanya silakan download di situs resminya.
Download Artisteer
Download Keygennya Disini :
Download Keygen Artisteer


Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Download Artisteer Dan Cracknya.

0 Tentang Apache (Server Web)►► URL : http://wwdq.blogspot.com/2011/05/tentang-apache-server-web.html.

Pengertian Web Server
Server web adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser web dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML. Server web yang terkenal diantaranya adalah Apache dan Microsoft Internet Information Service (IIS). Apache merupakan server web antar-platform, sedangkan IIS hanya dapat beroperasi di sistem operasi Windows.
Server web juga dapat berarti komputer yang berfungsi seperti definisi di atas.

Apa itu Apache?
Server HTTP Apache atau Server Web/WWW Apache adalah server web yang dapat dijalankan di banyak sistem operasi (Unix, BSD, Linux, Microsoft Windows dan Novell Netware serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web. Protokol yang digunakan untuk melayani fasilitas web/www ini mengunakan HTTP.

Apache memiliki fitur-fitur canggih seperti pesan kesalahan yang dapat dikonfigur, autentikasi berbasis basis data dan lain-lain. Apache juga didukung oleh sejumlah antarmuka pengguna berbasis grafik (GUI) yang memungkinkan penanganan server menjadi mudah.
Apache merupakan perangkat lunak sumber terbuka dikembangkan oleh komunitas terbuka yang terdiri dari pengembang-pengembang dibawah naungan Apache Software Foundation.

Bagaimana Apache ditemukan?
Pada awal mulanya, Apache merupakan perangkat lunak sumber terbuka yang menjadi alternatif dari server web Netscape (sekarang dikenal sebagai Sun Java System Web Server). Sejak April 1996 Apache menjadi server web terpopuler di internet. Pada Mei 1999, Apache digunakan di 57% dari semua web server di dunia. Pada November 2005 persentase ini naik menjadi 71%. (sumber: Netcraft Web Server Survey, November 2005).

Asal mula nama Apache berasal ketika sebuah server web populer yang dikembangkan pada awal 1995 yang bernama NCSA HTTPd 1.3 memiliki sejumlah perubahan besar terhadap kode sumbernya (patch). Saking banyaknya patch pada perangkat lunak tersebut sehingga disebut sebuah server yang memiliki banyak patch (“a patchy” server). Tetapi pada halaman FAQ situs web resminya, disebutkan bahwa “Apache” dipilih untuk menghormati suku asli Indian Amerika Apache , yang dikenal karena keahlian dan strategi perangnya. Versi 2 dari Apache ditulis dari awal tanpa mengandung kode sumber dari NCSA.

Bagaimana Penggunaan Apache?
Apache adalah komponen server web dari paket perangkat lunak LAMP (Linux, Apache, MySQL, PHP/Perl/bahasa pemrograman Python).

Saingan Apache
Menurut statistik dari Netcraft, Apache merupakan server web yang paling banyak digunakan di dunia per 2005. Microsoft Internet Information Services (IIS) merupakan kompetitor utama Apache, diikuti oleh Sun Java Web Server dari Sun Microsystem.

sumber : http://ekociba.../tentang-apache
read more. . . ►► Tentang Apache (Server Web).

2 Apasih Pengertian OAuth (Open Authorization)?►► URL : http://wwdq.blogspot.com/2011/05/apasih-pengertian-oauth-open.html.

OAuth singkatan dari Open Authorization sudah banyak yang mengenal istilah ini. Dengan banyaknya pengguna Twitter dan Facebook, popularitas OAuth pun meningkat. Dengan OAuth diharapkan kita tidak lagi harus memberikan username dan password pada pihak ketiga. Takutnya bisa disalahgunakan oleh orang yang tidak bertanggungjawab.

Lebih jelasnya OAuth adalah suatu protokol terbuka yang memungkinkan pengguna untuk berbagi sumber pribadi mereka (mis. foto, video, daftar alamat) yang disimpan di suatu situs web dengan situs lain tanpa perlu menyerahkan nama pengguna dan kata sandi mereka. Proses ini dilakukan dengan memberikan token, bukan nama pengguna dan kata sandi, untuk data mereka yang diinangi oleh suatu penyedia jasa tertentu. Setiap token memberikan akses untuk suatu situs spesifik (mis. suatu situs penyunting video) terhadap suatu sumber spesifik (mis. hanya video dari album tertentu) selama durasi tertentu (mis. dua jam ke depan).

OAuth mengizinkan seorang mengguna untuk memberikan akses kepada situs pihak ketiga untuk mengakses informasi mereka yang disimpan di penyedia layanan lain tanpa harus membagi izin akses atau keseluruhan data mereka. Cara kerjanya kurang lebih mirip dengan menggunakan kartu kredit dan menandatangani slip transaksi, alih-alih memberikan kartu ATM dan PIN-nya.
Layanan OAuth merupakan layanan komplementer tapi terpisah dari OpenId.

Jadi Fungsi  OAuth ialah memberikan akses ke data kita kepada pihak lain. Ambil contoh saja, Twitter, dengan OAuth, twit-twit saya bisa diakses melalui Tuitwit, Dabr, ataupun TweetDeck. Dengan aplikasi tersebut data dibuka sebebas-bebasnya bahkan sampai ke kotak suratnya. Ini tentu sangat berbahaya jika data tersebut digunakan untuk hal yang tidak-tidak.

Masih dalam konteks Twitter, sekarang yang menjadi masalah adalah aplikasi/website yang tidak ada hubungannya dengan Twitter tetapi menggunakan OAuth-nya Twitter untuk registrasi dan login. Memang kalau dilihat dari sisi kemudahan, sangat efisien menggunakan OAuth ini karena pengunjung tidak perlu lagi mengisi form berulang-ulang jika ingin menjadi anggota website yang baru.

Ada layanan lain yang seharusnya cocok untuk hal ini yaitu OpenID. Karena popularitas OAuth, para pengembang sepertinya agak malas menggunakan OpenID. Memang sih mengembangkan OpenID lebih kompleks dari OAuth tetapi tentu saja lebih aman dan privacy lebih terjamin. Di sisi lain, pengguna pun masih awam menggunakan layanan ini. Untungnya sekarang jika kita menggunakan Google, Yahoo, dll sudah bisa digunakan sebagai OpenID.


read more. . . ►► Apasih Pengertian OAuth (Open Authorization)?.

Senin, 16 Mei 2011

12 Cara meningkatkan SEO Blog (dasar)►► URL : http://wwdq.blogspot.com/2011/05/cara-meningkatkan-seo-blog-dasar.html.

Setiap blog/website memiliki elemen, template/theme, basic code, dan berbagai macam elemen lain yang berbeda-beda sehingga usaha untuk melakukan SEO pun tidak sama persis. Misalnya, WordPress memiliki basic elemen PHP, HTML, JavaScript, dan CSS. Selain itu WordPress juga dilengkapi dengan banyak plugin SEO yang siap dipakai untuk memaksimalkan hasil di search engine. Blogspot memiliki elemen dasar HTML, Javascript, dan CSS, yang tentu saja ada kelemahannya. Meskipun kita dapat menggunakan plugin SEO berbasic Javascript, namun saya sendiri tidak melihat efek yang signifikan. Kelebihannya, di Blogspot kita dapat melakukan modifikasi/hack tanpa batas baik pada design maupun untuk meningkatkan SEO-nya.

Cara-cara berikut ini merupakan cara yang masuk kategori organic SEO, yaitu optimalisasi search engine dengan cara-cara yang natural, yang saya lihat dan rasa justru memiliki efek yang baik. Selain itu, saya juga kurang begitu mendukung cara-cara Blackhat SEO yang saat ini pun mulai disisihkan oleh Google.

1. Pilih template yang SEO friendly.
Suatu design layout blog bisa memiliki keunggulan dan kelemahan. Di satu sisi, sebuah tampilan template/theme tampak hebat, namun dari segi SEO bisa saja lemah, ataupun sebaliknya. Oleh karena itu, pilihlah template Blogger yang SEO friendly. Saat ini telah banyak tersedia template Blogger gratis berkualitas premium yang telah disisipi hack SEO. Jika sudah 'terlanjur sayang' dan ingin tetap menggunakan template yang lama, lakukan dari langkah kedua berikut.
2. Pasang meta tags di blog
Ada banyak jenis meta tag, yang paling lazim digunakan adalah meta description, yang berisi deskripsi blog/website dan meta key, yang berisi keyword-keyword yang berkaitan dengan isi blog/website. Selain itu ada pula meta author, yang berisi nama penulis atau nama institusi/perusahaan, namun jarang sekali dipakai. Dan masih banyak lagi meta-meta lainnya.
3. Maksimalkan keyword pada title/judul blog
Memadatkan judul dengan keyword yang ditargetkan dapat memperbesar kepadatan keyword (keyword density) suatu blog. Pada blogspot, edit judul melalui Dashboard > Design/Rancangan > Klik edit pada header, isi dengan judul yang diinginkan dan save.
4. Letakkan judul posting di depan nama blog
Pada template Blogger yang belum di isi hack, biasanya nama blog berada di depan judul posting. Untuk mengeceknya, buka sebuah halaman posting dan lihatlah tab dan bar pada browser. Lihatlah apakah nama blog berada di depan dan di susul judul posting. Pada hasil indeks search engine, hal ini dapat mengurangi akurasi dan kepadatan keyword serta memotong judul posting di bagian belakang. Apalagi jika judul posting sangat panjang. Pengunjung jadi tidak mengerti poin keseluruhannya.
5. Maksimalkan keyword yang padat dan efektif di dalam posting blog
Ini bukan berarti membuat keyword sebanyak-banyaknya, tetapi mengatur letak/posisi keyword, menggunakan keyword dan frase yang tepat, dan tidak menggunakan terlalu banyak kata yang bertele-tele. Misalnya, hindari kata-kata seperti ini: "Dalam pada posting kali ini...", dan lain-lain.
6. Percepat waktu loading (load time) blog
Google juga memberlakukan penalti terhadap blog/website yang terlalu berat dan lama untuk di-load. Ini logis, karena waktu yang dibutuhkan oleh spider saat crawling dan mengumpulkan informasi menjadi lebih lama. Hal-hal yang menghambat loading blog/website biasanya adalah: terlalu banyaknya file javascript (biasanya pada widget) dan terlalu besarrnya file-file gambar. Pengunjung tentu juga akan kerepotan karena harus menunggu loading yang lama, apalagi bagi yang koneksi internetnya lemot.
7. Percepat proses indeks search engine terhadap blog
Indeks yang cepat menunjukkan bahwa blog telah dikenal oleh search engine. Hal ini tentu saja mempercepat SEO suatu posting karena kita tidak perlu menunggu dalam waktu yang lama dan pengunjung pun bisa segera menemukannya di search engine. Meskipun ini bukan jaminan bahwa artikel posting berada dalam indeks halaman utama, akan tetapi ini adalah langkah awal dari proses SEO itu sendiri.
8. Link building yang efektif
Link building mereupakan poin paling penting dalam SEO. Link building adalah proses menciptakan inbound link (link yang mengarah ke blog/website), yaitu mendapatkan backlink dari blog/website lain. Melakukan link building bisa dengan banyak cara, yaitu: membuat reciprocal link baik dengan direktori/social bookmark (yang mensyaratkan reciprocal link) ataupun bertukar link dengan blog/website lain, mendaftarkan blog dan artikel ke social bookmark/direktori, dan berkomentar di blog/website lain dengan meninggalkan link di form komentator, cara ini lazim dikenal sebagai blogwalking, meskipun kemudian agak disalahartikan dengan meninggalkan komentar berisi, "blogwalking!", atau, "mampir gan!", dan lain-lain. Berkomentarlah sesuai konten karena ini menunjukkan kualitas dan Google juga melirik itu loh. Jangan lupa, ada link dan anchor text di atas komentar tersebut, dan Google memperhatikannya ketika crawling.

Untuk melakukan link building yang efektif dengan tujuan mendapatkan backlink yang berkualitas dan meningkatkan pagerank, berkomentarlah di blog-blog dofollow ber-pagerank tinggi dan daftarkan blog serta artikel di situs direktori dan social bookmark dofollow. Perbanyak backlink yang mengarah ke blog/website anda, namun lakukan secara natural, yaitu tidak secara serampangan, terlalu banyak backlink yang dibuat dalam satu hari juga dapat dianggap 'tidak wajar' oleh Google. Saya biasa membatasi 5-10 kali link building setiap harinya.

Link building dapat meningkatkan visibility atau kenampakan blog/website di mata search engine, meningkatkan jumlah traffic yang berkualitas. Semakin banyak tarffic semakin tinggi nilai kepentingannya bagi search engine sehingga dia rutin melakukan crawling. Link building juga menambah kredibilitas dan popularitas suatu blog/website.



Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Cara meningkatkan SEO Blog (dasar).

Minggu, 15 Mei 2011

12 Pengenalan CSS Lebih Dalam (versi lengkap)►► URL : http://wwdq.blogspot.com/2011/05/pengenalan-css-lebih-dalam-versi.html.

Cascading Style Sheet atau yang disingkat CSS memungkinkan anda untuk mendesain tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).
Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS.

Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.

Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:

1. Metode Table
2. Metode Div


Manfaat dari CSS:
  1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
  2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
  3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
  4. Dapat berkolaborasi dengan JavaScript.
  5. Digunakan dalam hampir semua web browser.
Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:
  • Static –> posisi normal (default).
  • Relative –> posisi elemen tergantung dari elemen yang lain.
  • Absolute –> posisi elemen berpatokan pada jendela browser.
  • Fixed –> posisi elemen tetap walaupun digeser.

2. Float (Nempel)

Menggunakan properti float atau clear:
  • Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
  • Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
  • Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
  • Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
  • Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.
Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:
Margin –> jarak/batas elemen dengan elemen lain
Border –> border/gari tepi elemen
Padding–> jarak elemen dengan isi elemen (elemen anak)
Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:

Sintaks-sintaks CSS untuk layout diantaranya:

1. background: Untuk mengeset background. Ada beberapa sintak untuk background, yaitu:

   a. background-color: yaitu warna background.
   b. background-image:url('URLGAMBAR.jpg'); yaitu URL gambar yang dijadikan background.
   c. background-repeat: bernilai "repeat", "repeat-x", "repeat-y", dan "no-repeat". Maksudnya adalah pengulangan gambar. "repeat" artinya gambar akan diulang, memenuhi layar. "repeat-x" artinya gambar akan diulang sepanjang horizontal, "repeat-y" gambar akan diulang secara vertikal, sedangkan "no-repeat" artinya gambar hanya ditampilkan 1x, tidak akan diulang.
   d. background-position: nilainya "nilaihorizontal nilaivertikal". Maksudnya adalah posisi latarbelakang dari layer (bagian div/span/element yang diberi latar). Misal: body{background-position:10px 30px} maka latar belakang dari bagian body akan diberi jarak 10 piksel antara batas pinggir kiri body dan 30piksel dari batas pinggir atas body. Anda juga bisa mengisinya dengan "top" "middle" "bottom" untuk nilaihorizontal, dan "left" "center" "right" untuk nilaivertikal (pilih salah satu).
   e. background-attachment: Nilainya "fixed" dan "scroll". "fixed" artinya tampilan gambar latar belakang akan tetap sepanjang anda meng-scroll mouse anda.Sedangkan "scroll" kebalikannya.

2. width: Nilainya berupa nilai dalam piksel atau "auto". Untuk menentukan lebar elemen.
3. height: Idem dengan width bedanya height untuk menentukan tinggi elemen.
4. margin: Batas antara suatu element dengan elemen diluarnya. Nilainya bisa berupa auto atau nilai dalam piksel. Sintaksnya begini: margin:marginatas marginkanan marginbawah marginkiri. Atau jika nilai semua margin sama langsung saja margin: nilaimargin.
5. padding: Batas antara suatu batas (border) element dengan unsur element didalam element tersebut. Sintaksnya begini: padding:paddingatas paddingkanan paddingbawah paddingkiri. Atau jika nilai semua margin sama langsung saja padding: nilaimargin.
6. border: ada 3 unsur untuk border yaitu:

   a. border-width: lebar dari border
   b. border-color: warna dari border
   c. border-style: gaya dari border, nilainya "solid" (biasa) "double" (dobel/dua garis) "groove" (groove) "inset" (menjorok kedalam) "outset" (menjorok keluar) "dotted" (bertitik-titik) "dashed" (bergaris-garis)

7. position: posisi, nilainya "fixed" (tetap, akan melayang terus selama anda menscroll halaman, belum didukung IE ), "static" (diam, posisi default), "relative" (tergantung objek disekitarnya), "absolute" (dihitung dari pojok kiri atas layar, hampir sama seperti fixed, tetapi tidak akan ikut melayang ketika kita men-scroll mouse) . Setelah menentukan jenis posisi, kita harus menentukan:

a. pilih (top: atau bottom: jika pilih top artinya dihitung dari atas, sedangkan bottom sebaliknya)
b. pilih (left: atau right:. jika pilih left nilai akan dihitung dari kiri, sedangkan right sebaliknya.

8. z-index: z-index adalah posisi suatu elemen dari dasar dokumen, jika tidak diset maka defaultnya 0. Misalnya ada 3 buah buku ditumpuk, maka buku terbawah mempunyai z-index 0, buku ke2 daribawah:1, dan buku teratas:2.
9. visibility: nilainya hanya 2, yaitu "visible" dan "hidden". Visible artinya kelihatan, kalo hidden ya artinya tersembunyi!
10. display: nilainya "none" "inline" "block". Jika none maka tidak akan ditampilkan, inline ditampilkan dalam sebaris (biasanya untuk navigasi menu horizontal) dan block akan ditampilkan secara perbaris. Untuk display "none" dan visibility "hidden" perbedaannya adalah, untuk display "none" elemen didalamnya tidak akan ditampilkan, sedangkan visibility "hidden" akan tetap ada ruang untuk elemen tersebut, namun elemennya disembunyikan.


Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
  1. External Style Sheet (file CSS berbeda dari file HTML),
  2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
  3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).
Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:

Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. contoh: 
<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>

</body>
</html>

Eksternal CSS
file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:
<html>
<head>
<link rel="stylesheet" type="text/css" href="public.css"/>
</head>
<body>
</body>
</html>

Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css

Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.

Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.

CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.

Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>.

Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat kode berikut:
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Link

Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.

berikut kodenya
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}

Sumber : http://www.cmsplaza.com/

Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Pengenalan CSS Lebih Dalam (versi lengkap).

Rabu, 11 Mei 2011

4 Pembuatan Layout Web Sederhana Menggunakan CSS dan Fungsi Div►► URL : http://wwdq.blogspot.com/2011/05/pembuatan-layout-web-sederhana.html.

Sudah lama tidak update dikarenakan sibuk tetapi kali ini menyempatkan diri untuk posting tentang CSS, disini mau kasih tau cara membuat layout web sederhana menggunakan CSS dan fungsi div. Sederhana sekali pembuatan layout menggunakan CSS, dalam sebuah tampilan web dasarnya mempunyai bagian-bagian seperti header, menu, sidebar, content, dan footer.




contoh yang dapat dihasilkan dari css

Pembuatan desain seperti diatas lebih mudah dibuat dengan menggunakan CSS, dibawah ini merupakan code CSS dan Code HTMLnya untuk membuat desain web seperti diatas ;

nama file cssnya.css
#wrapper {
margin: auto;
width: 756px;
border: 1px solid Blue;
}
#header {
height: 70px;
border: 1px solid green;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner2 {
float: left;
width: 550px;
height: 330px;
border: 1px solid green;
}
#menu{
height: 70px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 20px;
width: 320px;
height: 250px;
border: 1px solid red;
}
#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid green;
}

file htmlnya, simpan dengan nama index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Belajar CSS bersama WWDQ</title>
<link rel="stylesheet" href="cssnya.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
Header</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="inner2">
<div id="menu">
Menu
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>

</body>
</html>

<link rel="stylesheet" href="cssnya.css" type="text/css" /> <--yang berwarna merah itu file cssnya, anda harus menaruh file .cssnya dengan file .html dalam 1 direktori/folder, atau boleh pisah tetapi pada kode html harus ditulis nama direktorinya. Contoh :
<link rel="stylesheet" href="../namafolder/cssnya.css" type="text/css" />
      Ingat ini hanya pembagian lahan wrapper untuk header, menu, sidebar, content, dan footer, jadi masih polos. disini lah anda berkreasi memperbaiki tampilan menjadi semenarik mungkin menggunakan CSS

Semoga Bermanfaat

Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Pembuatan Layout Web Sederhana Menggunakan CSS dan Fungsi Div.

0 CMS (Content Management System) Berbasis Web►► URL : http://wwdq.blogspot.com/2011/05/cms-content-management-system-berbasis.html.

Content Management System Berbasis Web
Pada suatu situs atau aplikasi, tentu Anda memiliki content yang ditampilkan. Misalkan berita, produk, ataupun promosi-promosi tertentu. Anda memerlukan suatu sistem untuk mengatur content tersebut, sistem tersebut yang dikenal dengan Content Management System (CMS).

Sebuah CMS berbasis web memiliki fitur-fitur untuk memudahkan pekerjaan Anda untuk mem-publish content situs Anda ke Internet agar semua orang dapat menikmati content terbaru.

CMS yang baik tentu memudahkan pengguna dan menghindari kompleksitas yang tidak diperlukan. Untuk membuat CMS tentu diperlukan kemampuan programming yang baik, tapi untuk menggunakan CMS, tidak diperlukan kemampuan programming dan memang bukan tugas pengguna CMS jika harus melakukan kegiatan programming.

CMS dapat mendukung fitur-fitur sebagai berikut:

1. Melakukan import dan menciptakan dokumen dan materi multimedia.
2. Mengidentifikasi pengguna dan pengaturan content management.
3. Kemampuan untuk memberikan tugas dan tanggung jawab pada kategori content yang berlainan.
4. Definisi pengaturan content, dimana terdapat pemberitahuan untuk content yang berubah.
5. Kemampuan untuk melakukan tracking pada perubahan content.
6. Kemampuan untuk publish content.

Pada awalnya, CMS dikembangkan secara internal oleh organisasi yang banyak melakukan web publishing, seperti majalah dan koran online, juga newsletter.

Urutan Pengoperasian

Bayangkan tahap pengerjaan pada sebuah surat kabar secara manual, dimulai dari tahap pertama. Seorang Content Creator membuat dokumen atau berita baru, tugas selanjutnya berada pada tangan Copy Editor, yang dapat menolak atau menyetujui, atau memberikan komentar pada dokumen tersebut.

Kemudian seorang Layout Editor akan melakukan layout yang diperlukan, setelah itu Chief Editor memiliki tanggung jawab untuk melakukan publikasi dokumen tersebut.

Demikian pula pengoperasian pada CMS, yang membantu melakukan pengontrolan masing-masing langkah pengoperasian diatas. Content dan semua informasi terkait pada umumnya disimpan pada sebuah sistem relational database yang tentu sudah tidak asing lagi bagi Anda.

Secara contoh nyata, perubahan apa saja content yang dapat Anda lakukan pada CMS? Walaupun bukan sebuah keharusan, pada sebuah CMS umumnya Anda dapat melakukan perubahan content terhadap:

1. Block.
2. Module.
3. Theme.

Masing-masing akan dijelaskan secara terpisah.

Block

Block merupakan sebuah bagian yang membentuk website secara keseluruhan. Contohnya suatu block header yang terdiri dari logo dan kata pengantar, atau block footer yang berisi alamat perusahaan, ataupun menu navigasi pada sisi kiri.

Block dapat digunakan pada setiap halaman website, sehingga Anda dapat membayangkan betapa repotnya jika Anda hanya ingin mengubah alamat perusahaan pada footer, Anda harus mengganti seluruh halaman yang ada!

Dengan block, potongan-potongan kode program dipisahkan dengan rapi dan melalui CMS, Anda dapat melakukan perubahan terhadap masing-masing block tersebut.

Module

Banyak modul yang membentuk sebuah situs, misalnya modul artikel, FAQ, produk, gallery, dan lain sebagainya. Setiap modul penting sebaiknya dibuat secara dinamis, dan dapat diupdate dengan mudah melalui CMS.

Aplikasi CMS juga sering kali menyertakan tools WYSIWYG editor untuk memudahkan pengguna melakukan perubahan content. Seperti yang Anda ketahui, browser menterjemahkan kode-kode tag HTML sehingga tampil dengan format tertentu seperti huruf berjenis bold, italic, dan lain sebagainya.

Tanpa menggunakan tools WYSIWYG editor, pengguna CMS harus mengetikkan tag-tag HTML untuk membuat format-format tertentu,tetapi dengan tools WYSIWYG editor, pengguna dapat mengetik dan memberikan format tulisan dengan mudah sebagaimana layaknya menulis pada aplikasi word processing. Beberapa WYSIWYG editor bahkan menyediakan icon-icon smiley yang gaul.

Pada CMS, juga mungkin terdapat modul khusus, seperti modul system dan administrator. Penggunaannya dapat dikembangkan menjadi banyak hal, seperti memberikan hak akses dan membuat tingkatan security bagi pengguna.

Theme

Bagian theme sering berubah sesuai event yang tengah atau akan berlangsung. Sebuah theme (tema) adalah tampilan kosmetik yang terdapat pada setiap halaman website, dan mengontrol properti seperti warna dan font.

Dengan Apa CMS dibuat?

Sebuah CMS berbasis web pada dasarnya sama dengan aplikasi web yang telah Anda kenal. Anda perlu memiliki sistem relational database seperti MySQL, Microsoft SQL Server, PostgreSQL dan lain sebagainya. Sebagai bahasa pemrograman/script, Anda dapat menggunakan PHP, JSP, ASP, ColdFusion dan lain sebagainya.

Apakah sebuah situs harus memiliki CMS? Jika situs Anda merupakan sebuah web dinamis, jawabannya tentu sebaiknya Anda memiliki CMS. Dengan CMS, Anda dapat melakukan pemeliharaan dan pembaharuan isi website dengan mudah tanpa memiliki keahlian seorang webmaster!

Memilih Produk CMS

Terdapat cukup banyak aplikasi CMS sebagai sebuah paket produk yang dapat disesuaikan dengan kebutuhan Anda, walau tidak tertutup kemungkinan untuk membuat sendiri CMS jika Anda memiliki team developer.

Sebelum memilih CMS, terlebih dahulu Anda harus menuliskan tipe perusahaan Anda sebagai titik awalnya, dapat dimulai dengan, apakah perusahaan Anda merupakan perusahaan kecil, menengah, atau besar dan sejauh mana kebutuhannya akan CMS, apakah keberadaan CMS akan menangani kebutuhan Intranet maupun Internet.

Selanjutnya content yang akan dipublish oleh CMS. Apakah berupa halaman web sederhana, atau halaman web yang kompleks dengan layout yang spesifik, informasi dinamis dari database, dan lain sebagainya.

Sesuaikan tujuan dan strategi Anda, termasuk strategi jangka panjang bisnis Anda. Beberapa kunci keunggulan CMS yang dapat Anda bandingkan satu sama lain:

1. Workflow.
Kemudahan customize pada workflow yang digunakan oleh perusahaan Anda menjadi salah satu kunci yang Anda perlukan. Pertimbangkan apakah CMS yang Anda pilih dapat menjalankan workflow pada perusahaan Anda.

2. Security.
Merupakan faktor untuk memproteksi keamanan integritas content. Adanya level security dan tracking/audit trail akan merupakan nilai tambah.

3. Report.
CMS harus menyediakan laporan dengan ruang lingkup yang luas. Baik untuk level pengguna maupun administrator. Dukungan untuk menghasilkan laporan yang dapat di customize juga dibutuhkan dalam beberapa kasus.

Termasuk adalah laporan untuk statistik penggunaan, misalnya penggunaan harian, halaman dengan rating paling tinggi, ataupun penggunaan search engine.

Selanjutnya dari sisi presentation, juga perlu dipertimbangkan dukungan cross-browser, kecepatan akses, navigasi dan lain sebagainya.

Khusus jika Anda ingin membeli produk CMS, perhatikan training yang Anda dapatkan, dokumentasi (untuk pengguna, administrator, dan developer), garansi, persetujuan maintenance, resource yang diperlukan (hardware, software, operating system), skill yang diperlukan untuk menggunakan CMS tersebut, dan tentu saja harga dan referensi dimana CMS tersebut pernah diimplementasi. Referensi berguna untuk membandingkan karakteristik antara organisasi yang menjadi referensi dengan organisasi Anda.

CMS Open Source

Jika pada operating system Anda telah mengenal platform open source, kemudian tools developer atau relational database berbasis open source, maka tidak heran Anda juga akan mendapatkan aplikasi open source.

Demikian pula pada CMS, terdapat cukup banyak CMS open source, antara lain adalah:

1. e107.
Salah satu CMS favorit yang dibuat dengan kombinasi PHP dan MySQL. Dapat di customize dengan mudah dan terus dikembangkan.

2. PHP-Nuke.
Dengan PHP-Nuke, Anda dapat melakukan proses administrasi dan maintenance content untuk kebutuhan Intranet maupun Internet.

3. Joomla!.
Salah satu CMS yang terkenal dan digunakan mulai dari website sederhana hingga aplikasi corporate yang kompleks.

Masih cukup banyak CMS dengan masing-masing keunggulan dan kelemahannya, beberapa yang populer adalah YACS, MODx, PHP-Fusion, WordPress, Drupal, Xaraya, Plone, Mambo, PostNuke, phpBB, dan lain sebagainya.

Wah, ternyata memilih CMS open source lebih pusing lagi! Mungkin demikian komentar Anda. Sebaiknya Anda perlu mengenal CMS open source secara umum lebih jauh lagi.

Kebanyakan CMS open source berjalan pada platform LAMP, apakah LAMP itu? LAMP merupakan singkatan yang menunjukkan Linux, Apache, MySQL, dan PHP yang memang keseluruhannya merupakan open source.

Jika Anda mengunjungi masing-masing situs CMS tersebut dan semakin bingung karena semuanya mengaku bahwa CMS mereka merupakan solusi untuk Anda, maka Anda mungkin akan mendapatkan pencerahan dengan melihat siapa yang telah menggunakannya.

Saat mengevaluasi sebuah CMS, cari link yang menunjukkan situs yang menggunakan CMS tersebut. Sebagai contoh, jika Anda melihat Mamboo, maka CMS tersebut digunakan oleh banyak situs menarik dengan ukuran bisnis relatif kecil dengan berbagai background.

Acuan selanjutnya, pastikan CMS tersebut masih terus dikembangkan sehingga terus dilakukan perbaikan-perbaikan. Masuk dalam forum diskusi juga dapat memberikan informasi berguna bagi Anda.

Jika dari seluruh referensi yang Anda dapatkan, Anda masih belum mendapatkan gambaran yang cukup, maka langkah ini pasti akan menjawabnya, yaitu gunakan versi demo! Situs www.opensourcecms.com memberikan Anda dua jam akses demo untuk lebih dari 100 CMS open source yang tersedia.

Membangun Sendiri CMS

Jika darah programmer Anda bergolak atau Anda memiliki suatu nama unik yang menurut Anda cocok sebagai nama sebuah CMS, mungkin timbul motivasi Anda untuk membuat sendiri CMS, atau paling tidak sekedar mengetahui bagaimana membuat CMS.

Panduan pertama adalah membuat daftar kebutuhan pengguna, dimana pada intinya CMS Anda akan mengijinkan content situs Intranet/Internet dapat dengan mudah disimpan dan di manage didalam sebuah database, dengan tambahan beberapa fitur seperti otorisasi pengguna atau tingkat pengguna.

Sebuah interface yang mudah digunakan untuk melakukan proses add, remove, dan modify isi merupakan sebuah keharusan. Lakukan pemrograman secara OOP atau paling tidak secara modular, karena CMS Anda berpeluang terus dikembangkan dan menjadi besar.

Gunakan bahasa pemrograman dan database yang Anda kuasai, atau direkomendasikan. Untuk aplikasi web berbasis Linux, salah satu pilihan Anda dapat menggunakan PHP dan MySQL, ataupun menggunakan ASP / ASP.NET dan SQL Server untuk platform Windows.

Fokuskan dalam melakukan design database terlebih dahulu, design table berikut field seperti table untuk menampung artikel, produk, dan lain-lain.

CMS merupakan pengolahan content, karena itu content yang masuk dan diolah harus valid, dalam artian Anda harus melakukan memproteksi maksimal. Buat juga log untuk kegiatan detail pengguna agar dapat dilakukan trace back untuk kegiatan yang telah terjadi. Setiap pengguna CMS harus bertanggung jawab atas hak yang telah diberikan, sesuai dengan level atau group security-nya.

Untuk estetika CMS, berbeda dengan saat Anda membangun situs multimedia yang wah, pada CMS justru Anda seharusnya meminimalisasi desain, tetapi memiliki interface yang atraktif. Google adalah contoh yang baik dalam hal ini.

Jika Anda telah berhasil membuat sebuah basic CMS yang baik, maka akan banyak ide yang dapat direalisasikan untuk pengembangannya. Contohnya menambahkan WYSIWYG editor, menciptakan profile untuk masing-masing pengguna CMS, atau tools untuk berkomunikasi lebih lanjut, seperti forum publik, calendar, dan banyak lagi.

Tentu saja apa yang telah dijelaskan diatas hanyalah aspek-aspek utama, dalam prakteknya Anda akan menemui lebih banyak lagi permasalahan yang tentunya secara positif akan semakin memperbaiki CMS Anda.


Sumber : Majalah PC Media Edisi 04/2007

Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► CMS (Content Management System) Berbasis Web.

45 Fungsi Session Pada PHP Dan Cara Pembuatannya►► URL : http://wwdq.blogspot.com/2011/05/fungsi-session-pada-php-dan-cara.html.

PHP mempunyai session (catatan aktivitas) yang digunakan untuk menjaga / memelihara informasi akses dari seorang pengakses / pemakai aplikasi web. Session memungkinkan pelacakan akses pemakai, pangaturan pemakaian aplikasi oleh pemakai dan meningkatkan layanan situs web. Setiap pengunjung akan diberi sebuah id yang unik, yang disebut dengan id session (session_id). ID ini dapat disimpan dalam suatu cookie pada sisi user atau disertakan dalam URL. Session koneksi antara klien dan server akan hilang atau putus apabila browser ditutup. Apabila browser dijalankan kembali dan koneksi ke server dilakukan maka dianggap sebagai koneksi baru.
Session digunakan untuk menyimpan suatu informasi antar proses request, baik request dalam bentuk POST atau GET.
Salah satu contoh yang menggambarkan penggunaan session adalah proses login. Dalam hal ini user akan memasukkan usernamenya melalui form login. Setelah login berhasil, user tersebut dihadapkan pada link menu navigasi yang menuju ke beberapa halaman web. Apabila kita ingin username tersebut akan selalu tampil atau tercatat di halaman-halaman web tersebut, maka username tadi haruslah disimpan dalam session.



Fungsi-fungsi session :

1. session_start(), untuk memulai session.
    session_start — Menginisialisasi data dari session.
  session_start() membuat sebuah session atau melanjutkan session sebelumnya berdasarkan pada pengidentifikasi session via GET atau POST atau cookie.

2. session_destroy()
    session_destroy — Menghancurkan semua data yang terdaftar dari sebuah session
  session_destroy() menghancurkan semua data yang berhubungan dengan session saat ini. Hal ini tidak merubah variabel global yang berhubungan dengan session tersebut, Hal ini juga tidak merubah cookie dari session. Untuk menggunakan lagi variabel sssion tersebut, session_start() haruslah dipanggil.

3. session_id(), untuk mengambil atau menentukan identitas sebuah session.
   session_id — Mengambil atau mengatur session id saat ini.
     session_id() digunakan untuk mengambil atau mengatur session id saat ini.
SID yang konstan dapat juga digunakan untuk mengambil nama dari SID saat ini dan session_id dalam bentuk string cocok untk ditambahkan kedalam URL.


4. session_register(), untuk mendaftarkan variabel ke sebuah session.
    session_is_registered — Mengetahui apakah sebuah variabel telah terdaftar atau belum dalam sebuah session.
        Fungsi ini tidak diperkenankan oleh PHP 5.3.0 dan dihapus pada PHP 6.0.0. 

 Contoh Pemograman PHP menggunakan Session


Langkah Pertama membuat file setup.php untuk membuat database:

setup.php
<html>

<head>

<title>Setup Database</title>

</head>





<body>

<?php

$cn = @mysql_connect("localhost", "root", "") or die ("Gagal konek ke MySQL.");

mysql_query("drop database if exists db_user", $cn) or die ("Gagal menghapus database.");

mysql_query("create database db_user", $cn) or die ("Gagal membuat database.");

mysql_select_db("db_user", $cn) or die ("Gagal membuka database.");

mysql_query("create table tb_user (

login_username varchar(32) not null,

login_password char (32),

login_rights   varchar (32),

primary key(login_username)

)", $cn) or die("Gagal membuat table.");

mysql_query("insert into tb_user values('admin', md5('admin'), '[A] [U]')", $cn);

mysql_query("insert into tb_user values('user', md5('user'), '[U]'", $cn);

mysql_close($cn);

?>

<p>Sukses meng-setup database!<br/>

username: <b>admin</b> dan Password: <b>admin</b>

username: <b>user</b> dan Password: <b>user</b>

</p>

<p>Silakan menuju <a href="index.php">index.php</a></p>

</body>

</html>

Kedua Membuat File Halaman Utama :
index.php
<html>

<head>

<title>Homepage</title>

</head>



<body>

<P>

<a href="index.php">Home</a> |

<a href="login.php">Login</a> |

<a href="member.php">Member</a> |

<a href="logout.php">Logout</a>

</P>

<p>Selamat datang. Di sini semua orang bisa mengakses.</p>

</body>

</html>

Ketiga membuat file yang hanya dapat diakses untuk member saja :
member.php
<?php

session_start();



$username = "";

$password = "";

if (isset($_SESSION['username']) && isset($_SESSION['password'])) {

$un = $_SESSION['username'];

$pw = md5($_SESSION['password']);

$cn = @mysql_connect("localhost", "root", "") or die ("Gagal konek ke MySQL.");

mysql_select_db("db_user") or die ("Gagal memilih database.");

$query = "select * from tb_user where

login_username ='$un' and login_password = '$pw'";

$hasil = mysql_query($query) or die ("Gagal melakukan query.");

if ($hasil !=false) {

if (mysql_num_rows($hasil) ==1) {

$username = $_SESSION['username'];

$password = $_SESSION['password'];

};

};

};

?>

<html>

<head>

<title>Members Only</title>

</head>



<body>

<p>

<a href="index.php">Home</a> |

<a href="member.php">login</a> |

<a href="member.php">member</a> |

<a href="logout.php">logout</a>

</p>

<?php

if (empty($username) || empty($password)) {

echo "<p>Maaf, hanya members yang boleh mengakses halaman ini.</p>";

}

else {

?>

<p>

Selamat datang <b><?php echo $username; ?></b>

</p>

<?php

};

?>

</body>

</html>

Keempat membuat form login
login.php
<?php

session_start();



$username = "";

$password = "";

if (isset($_POST['username']) && isset($_POST['password'])) {

$un = $_POST['username'];

$pw = md5($_POST['password']);

$cn = @mysql_connect("localhost", "root", "") or die ("Gagal konek ke mysql.");

mysql_select_db("db_user") or die ("Gagal memilih database.");

$query = "select * from tb_user where

login_username = '$un' and login_password = '$pw'";

$hasil = mysql_query($query) or die ("Gagal melakukan query.");

if ($hasil !=false) {

if (mysql_num_rows($hasil) ==1) {

$username = $_POST['username'];

$password = $_POST['Password'];

$_SESSION['username'] = $_POST['username'];

$_SESSION['password'] = $_POST['password'];

};

};

};

?>

<html>

<head>

<title>Login</title>

</head>



<body>

<p>

<a href="index.php">Home</a> |

<a href="login.php">Login</a> |

<a href="member.php">Member</a> |

<a href="logout.php">Logout</a> 

</p>

<p>

<?php

if (empty($username)) {

if (isset($_POST['username']) || isset($_POST['password'])) {

echo "<p>Username dan pasaword yang anda ketik adalah salah!</p>";

};

?>

<form name="login_form" method="post" action="login.php">

username: <input name="username" size="32" maxleght="32"  ><br/>

password: <input name="password" type="password" maxleght="32"  ><br/>

<input type="submit" name="button" value="submit" >

</form>

<?php

}

else {

?>

<p>Anda telah berhasil melakukan login.</p>

<?php

};

?>

</p>

</body>

</html>

Kelima atau yang terakhir membuat file logout
logout.php
<?php
session_start();

unset($_SESSION['username']);
unset($_SESSION['password']);
?>

<html>
<head>
<title>logout</title>
</head>

<body>
<p>
<a href="index.php">Home</a> |
<a href="login.php">Login</a> |
<a href="memeber.php">Member</a> |
<a href="logout.php">Logout</a>
</p>
<p>
okee...Anda sudah logout.
</p>
</body>
</html>

Semoga postingan ini bermanfaat, Selamat Mencoba

Source code : mawan.or.id

Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Fungsi Session Pada PHP Dan Cara Pembuatannya.

Minggu, 08 Mei 2011

1 Operasi Perkalian (mencari luas) Dengan PHP►► URL : http://wwdq.blogspot.com/2011/05/operasi-perkalian-mencari-luas-dengan.html.

Hari ini mencoba belajar Pemograman PHP sederhana, nah pada postingan kali ini WwdQ ingin berbagi pembelajaran yang saya dapat hari ini. Yaitu membuat pemograman php menghitung Luas. Cara kerjanya mudah, hanya bermodal ilmu matematika operasi perkalian, hehehe... Pertama-tama, buatlah file phpnya, misalkan luas.php menggunakan Dreamweaver atau notepad ++, dll yang anda pakai. Langsung ke kode dibawah :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menghitung Luas</title>
</head>

<body>
<form id="form1" name="form1" method="get" action="luas.php">
<table width="500" border="0">
<tr>
<td width="116">Panjang</td>
<td width="152"><input name="panjang" type="text" id="panjang" /></td>
<td width="218" rowspan="2"><label>
<input type="submit" name="Submit" value="Submit" />
</label></td>
</tr>
<tr>
<td>Lebar</td>
<td><label>
<input name="lebar" type="text" id="lebar" />
</label></td>
</tr>
<tr>
<td bgcolor="#00FFFF"><div align="center"><strong>Luas = </strong></div></td>
<td><?php
$panjang = $_GET['panjang'];
$lebar = $_GET["lebar"];
echo "$panjang x $lebar =";
?></td>
<td><?php
$panjang = $_GET['panjang'];
$lebar = $_GET["lebar"];
$luas = $panjang * $lebar;
echo "$luas";
?></td>
</tr>
</table>
</form>
</body>
</html>

    Abaikan :
kode phpnya :
<?php
$panjang = $_GET['panjang']; //variabel Panjang yang dimasukan pada form
$lebar = $_GET["lebar"]; //variabel lebar yang dimasukan pada form
$luas = $panjang * $lebar; //rumus luasnya
echo "$luas"; //menampilkan hasilnya pada browser
?>
Selamat Mencoba

Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Operasi Perkalian (mencari luas) Dengan PHP.

Jumat, 06 Mei 2011

0 Pemenang Kompetisi Blogger Banten 2011 (repost)►► URL : http://wwdq.blogspot.com/2011/05/pemenang-kompetisi-blogger-banten-2011.html.

Senangnya liat informasi Pemenang Kompetisi Blogger Banten 2011, karena liat info ini saya jadi yakin bahwa saya salah satu Pemenang KBB 2011 kategori pelajar. Walaupun saya melihatnya telat 2 hari (dipostnya 4 mei 2011) tetapi saya ingin kembali berbagi info ini (repost). Tidak ada kata terlambat untuk berbagi ^_^






Pengumuman Pemenang Kompetisi Blogger Banten 2011

Kategori Mahasiswa/ Umum :
1. M Husnul Maarif (UNPAM – Tangsel)
2. Massaputro Delly TP (Kota Serang)
3. Rivafauziah (Kota Serang)
4. Ferinaldy (Tangerang)
5. Sugeng Handoyo (Tangerang)
6. Ginan Nuruzaman A (UNSERA – Serang)
7. Fadli Efendi (BSI – Tangerang Kota)
Kategori Pelajar :
1. Ade Saputra (SMK Negeri 1 Kota Serang)
2. Muchamad Ade Trejana Oktora (SMK Negeri 1 Rangkasbitung)
3. M. Ramy Dhia Humam (SMAN 3 Kab. Tangerang)
4. Dimas Yoga Pamungkas (SMAN 3 Rangkasbitung)
5. Handiyan Juansah (SMKN 2 Kota Tangerang)
6. Rizal Loa wanda (SMKN 1 Tangerang)
7. Mulyawati (SMAN Malingping)
Disampaikan dengan hormat kepada seluruh pemenang Kompetisi Blogger Banten 2011 sebagaimana diumumkan dan disampaikan pada acara Gathering Party Blogger Banten tanggal 29 April 2011, bahwa untuk teknis pengambilan hadiah harap menghubungi Dishubkominfo Provinsi Banten di KP3B Jl. Syeh Nawawi Al-Bantany – Curug – Kota Serang atau menghubungi kontak berikut:
Bapak Wahyu Priatna Telp. 087773585635
Bapak Asep Budiman Telp. 08174998215


Selamat Bagi Para Pemenang


Sumber : Banten.web.id


Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Pemenang Kompetisi Blogger Banten 2011 (repost).

Kamis, 05 Mei 2011

0 Pengenalan Variabel PHP (Newbie)►► URL : http://wwdq.blogspot.com/2011/05/pengenalan-variabel-php-newbie.html.

3 hari tidak update blog rasanya hampa banget, untuk menghilangkan rasa hampa tersebut, WwdQ akan memberi sedikit ilmu pada postingan kali ini mengenai Tutorial PHP "Pengenalan Variabel PHP (dasar)".

Variabel di PHP 
Variabel dalam PHP sangat toleran, tetapi harus juga di pelajari tipe datanya. karena sewaktu-waktu deklarasi variabel digunakan untuk kasus-kasus tertentu. tipe data dalam PHP selalu diawali dengan tanda dollar ( $ )kemudian di ikuti dengan string, underscore ( _ ) , atau ASCII. Variabel dalam PHP tidak boleh menggunakan angka setelah dollar ( $ ), menggunakan spasi, atau tanda baca.
ada 4 tipe data dalam php sbb:

  1. Integer
  2. Floating point number atau tipe data real
  3. String
  4. Boolean
  5.  
    Prakteknya :
<?php

$nama = World Web Design Q; //masukin kata World Web Design Q di variabel nama

echo $nama; //cetak atau menampilkan varabel nama

?>
Coba simpan dengan nama terserah anda.

     Sekarang kita coba operasi penjumlahan :
<?php

$a = 5; //Masukin angka 5 ke varabel a
$b = 5; //Masukin angka 5 ke varabel b
$hasil = $a + $b; //Masukin hasil $a + $b ke variabel $hasil

echo $hasil; //Cetak isi dari variabel $hasil

?>

Kalau hasilnya benar = 10, berarti anda sudah bisa :)

Selamat Mencoba

Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Pengenalan Variabel PHP (Newbie).

2 Pengertian CSS (Cascading Style Sheets)►► URL : http://wwdq.blogspot.com/2011/05/pengertian-css-cascading-style-sheets.html.

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.

CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.



Semoga Bermanfaat.
read more. . . ►► Pengertian CSS (Cascading Style Sheets).

Senin, 02 Mei 2011

9 Pengertian AJAX (Asynchronous JavaScript And XML)►► URL : http://wwdq.blogspot.com/2011/05/pengertian-ajax-asynchronous-javascript.html.

AJAX adalah singkatan dari Asynchronous JavaScript And XML. AJAX merupakan teknik baru di dunia pengembanan halaman web yang berguna untuk membuat aplikasi web, yang lebih “kaya” dibandingkan dengan aplikasi web biasa.
Apa triknya sehingga AJAX bisa membuat halaman web yang lebih kaya? Jawabannya adalah Ajax memungkinkan sebuah halaman web memperbarui data dari server yang ditampilkannya tanpa harus melakukan refresh, sehingga halaman terlihat lebih responsif.
Fitur dan ciri utama AJAX adalah sebuah halaman web tidak perl di-refresh setiap kali ada data baru yang ingin ditampilkan. Dengan demikian, sebuah aplikasi web akan terasa seperti aplikasi desktop saja. kecepatan, interaktivis, fungsionalitas, dan tingkat kegunaan halaman web akan meningkat.
Dari namanya, terlihat bahwa AJAX bersifat asynchronous. Arti asinkron di sini bahwa permintaan data tambahan dari server dan loadingnya dilakukan di background tanpa mempengaruhi tampilan dan sifat halaman web sekarang. Jadi, sembari AJAX bekerja mengambil data dari server, user yang membuka halaman web masih tetap bisa berinteraksi dengan alaman web tersebut, di mana halaman web tidak mengalami freezing seperti halnya aplikasi web konvensional.
Sekarang mungkin anda bertanya apakah AJAX itu sebuah bahasa pemrograman baru? bukan, AJAX sebenarnya bukan bahasa pemrograman baru, karena ternyata bahasa yang digunakan oleh AJAX adalah bahasa JavaScript yang sudah cukup berumur.
Ajax Merupakan Kombinasi Dari :
* XHTML (atau HTML) dan CSS untuk bahasa mark up dan tampilan.
* DOM yang diakses dengan client side scripting language, khususnya implementasi ECMAScript seperti JavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan
* Objek XMLHttpRequest untuk melakukan pertukaran data asinkronus dengan web server. Pada beberapa framework dan kasus Ajax, objek IFrame lebih dipilih daripada XMLHttpRequest untuk melakukan pertukaran data dengan web server.
* XML umumnya digunakan sebagai format untuk pengiriman data, walaupun format lain juga memungkinkan, seperti HTML, plain text, JSON dan EBML.

Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah teknologi spesifik, melainkan merupakan gabungan dari teknologi yang dipakai bersamaan. Bahkan, teknologi turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan.

Semoga Bermanfaat

Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Pengertian AJAX (Asynchronous JavaScript And XML).

0 Membuat Teks Yang Mengikuti Kursor►► URL : http://wwdq.blogspot.com/2011/05/membuat-teks-yang-mengikuti-kursor.html.

Awal bulan Mei 2011 WwdQ mulai posting lagi nih, kali ini membahas tentang Javascript. Memang tidak ada habisnya javascript, disini akan dipraktekan cara membuat Teks Mengikuti Kursor. Menarik kan? . postingan kali ini dimaksudkan untuk tampilan blog agar menarik, Tetapi bila blog anda sudah banyak dikunjungi orang dan mempunyai postingan yang pasti akan dicopy pengunjung, saya sarankan pikir 2x untuk memakai script ini. Mengapa demikian?, disaat saya mencoba script ini, saya direpotkan oleh teks yang mengelilingi kursor. Bagi anda yang masih tertarik dan yang ingin mencoba, dipersilakan melihat caranya dibawah ini:

Caranya :
  1. Masuk Ke Akun Blog Anda
  2. Dasbor => Rancangan => Elemen Laman
  3. Pilih Tambah Gadget
  4. Pilih HTML/JavaScript
  5. Copy Script Dibawah, Paste!
  6.  Simpan 



<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000000;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = " Text yang anda inginkan ";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>

Selamat Mencoba

Bila Kurang Jelas, silakan bertanya dibawah ini .
read more. . . ►► Membuat Teks Yang Mengikuti Kursor.

Tambahkan Bookmark halaman ini untuk mempermudah Pencarian Anda [CTRL+D].