affiliate program terbaru

May 29, 2008

aku dapatkan ini program,dari info teman komunitas di dunia maya. yang bisa menambah penghasilan dari internet. hanya dengan duduk di depan komputer….:)

dulu aku udah pernah ikuti, api akibat kelalaian…maka hasilnya yang dulu hangus. baru bulan lau ada pemberitahuannya…menyesal jadinya…

cara kerja dari program ini, yakni..pay per click.

yah udah langsung aja yah….caranya gabung:
- klik link ini .
- klik sign up, sign up terdapat pada bagian bawah. yakni bagian footernya..
- masukkan data-data yang valid,
- kalau anda mempunyai account paypal, atau egold.lebih bagus lagi. karna memudahkan untuk payout hasilnya.
- setelah, anda telah memasukkan data-data dengan baik.maka buka email anda. periksa pada kotak inbox atau spam. kalau yang menggunakan gmail.com biaasanya dikenali spam.
- setelah itu, buka email yang dikirimkan di email anda untuk aktivasi. klik link tersebut.
 - login dengan user dan pass yang anda buat tadi.
 - selamat bergabung yah………

contoh billing :



semoga bermanfaat . salam blogger


Menggunakan dual system dalam satu PC

May 15, 2008

Pernahkah anda menggunakan system operasi dalam satu PC??? jawaban anda pasti yah,karna menggunakan system dual boot yang marak digunakan sekarang ini.

Tapi pernahkah anda berpikir untuk menggunakannya saat yang bersamaan??? nah tentu anda berpikir tidak mungkin menggunakan 2 system operasi dalam satu PC secara bersamaan. Anda pasti mengatakan aku orang gila.

Tapi anda perlu ketahui, bahwa zaman sudah berkembang.segalanya serba bisa dan pasti.sekarang ini sudah ada tools yang dapat membantu anda. Nama tools tersebut yakni Vmware Workstation.

Saya akan jelaskan apa sih itu Vmware Workstation??

Vmware Workstation adalah sebuah oftware yang mampu membuat mesin virtual didalam sebuah PC/Server dengan OS Windows maupun Linux. Mesin virtual ini layaknya sebuah PC/Server yang dapat diinstall berbagai OS, Windows, Linux dari berbagai Distro, Novell dan Sun Solaris lengkap beserta peripheralnya seperti USB, Soundcard, CD-ROM hingga kartu jaringan.

Perangkat lunak ini sangat membantu kita yang sering berkecimpunk di dunia IT,terutama bagi kita yang rasa ingin mecobanya tinggi dalam hal software.nah kita dapat menggunakannya,agar system operasi yang telah berjalan atau menetap tidak terganggu.

Anda bisa mendownloadnya disini.

 

                 Gbr. gambar dari Vmware

 

selamat mencoba yah…kalau ada kesulitan. jangan sungkan-sungkan untuk bertanya….

semoga tutorial ini bermanfaat bagi teman-teman sekalian…. 


DOWNLOAD VIDEO PADA YOUTUBE

March 27, 2008

abis bongkar-bongkar harddisk (maksudnya ingat-ingat ilmu komputer yang udah lama dan tersimpan diotak sudah jamuran)emoticon,ternyata ada ilmu aku yang ternyata udah lama tersimpanemoticon. tapi untung aja masih aku ingat bahwa ini ilmu masih berguna dan banyak yang nyari.yah…aku posting aja……moga-moga aja bermanfaat.ini ilmu semasa aku masih jadi OP warnet dimakassar.

langsung aja yah…..emoticon:

cara download video youtube :
- cari video yotube yang inging didownload
- setelah anda telah dapat,klik video tersebut.setelah itu copy URLnya yang ada pada toolbar.contoh :
  urlnya ;
  http://www.youtube.com/watch?v=-M_UKfpDWVc&feature=related
- tapi yang harus di copy itu cuman sampai :
  contoh :
  url yang haru dicopy;
  http://www.youtube.com/watch?v=-M_UKfpDWVc
- lalu buka link ini .
- masukka url yang habis dicopy ke youtube url, lalu tekan tombol download
- lalu copy nama file tersebut,contoh :
   Tanjung_Emas_Ninggal_Janji.flv
- klik kanan link download video,save link as lalu paste khan ke name as-nya lalu tekan tombol save
- selesai.

yah…dari pada streming….ngabisin bandwith aja…mending download……apalagi yang ngenetnya diwarnet dan make telkomnetinstant  ini sangat membantu.

semoga aja….bener-bener bisa membantu…… ,jangan lupa kasih koment yah……..emoticon


Tutorial Catatanku.com

February 20, 2008
Yuk Ramai-ramai membuat Catatanku.com
Oleh achfa ( Http://achfa.catatanku.com, Http://blognaachmad.blogsome.com)

 
Mengenal catatanku.com

          gambar 0.1

Catatanku.com ialah sebuah wadah atau tempatdimana kita diajak untuk bergabung,manambah link atau sahabat melalui websitepribadi atau yang banyak orang katakan dunia blog.

Catatanku.comtidak jauh beda dengan blog-blog yang lain yang memberikan kita wadah atausebuah tempat untuk mencurahkan kehidupan sehari-hari,berbagi ilmu ataupunberbagi informasi.hanya saja, yang membedakan catatanku.com dgn tempatblog-blog yang lain ialah letak servernya diindonesia serta pembuatnya atauyang design catatanku.com ternyata orang Indonesia juga.

Catatanku.commemberi fasilitas pada setiap membernya.mengapa saya katakan demikian? Sebab,kita bias liat dari tampilannya yang begitu simple dan mempesona bagi yang barumembuka catatanku.com.dimana kita menggunakannya sangat gampang, dilengkapifitur-fitur seperti blog yang lain contohnya , editor WYSIWYG, Calender dkk.

Pembuatan blog
Daripada lama-lama ngomongnya,mending kita coba buat buat blog catatanku.com

Langkahpertama :
-        buka situs Http://catatanku.com
-   setelah situsnya terbuka seperti gambar diatas,tekan tombol register untuk memulai membuat blog baru.

 

-    Setelah menu register muncul seperti gambar disamping [gambar 0.2],masukkan data-data yang valid agar setelah pada saatpengiriman aktivasi blog itu, tidak ada hambatan atau istilahnya error J

-   Setelah kegiatan register dan mengisi data-datayang valid alias data-data yang benar tekan aja tombol submit, maka secaraotomatis informasi aktivasi blog catatanku.com akan dikirim ke email yang kitamasukkan.

-      Kemudian buka email anda, yang anda masukkansaat register tadi. Setalah email anda buka dan anda telah mendapatkan emailaktivasi dari catatanku.com. maka klik link aktivasi yang telah diberikan.Setelah anda sudah melakukan aktivasi maka blog yang anda buat, sudah bisadigunakan. Selamat yah��.!!! emoticon emoticon

-       Silahkan login untuk memulai mengatur sertamemasukkan tulisan anda diblog yang anda buat.

 

 

 

 

 

 

 

 

Gambar 0.3 tampilan utama.

setelah anda login, dan terbuka menu sepertigambar diatas [gambar 0.3]. setlah anda melihat-lihat semua dari beberapabagian atau menunya , pasti anda bingung dan bertanya-tanya��.apa sihkegunaan dan cara menggunakannya tuh menu-menunya?

 Saya akan menjelaskanfungsi dan cara menggunakan menu-menu yang disediakan oleh catatanku.com.yakni:

              [Gambar 0.4]            

 -   Artikel
    -   ArtikelBaru

    Menu ini merupakan tempat atau wadah, dimana kita akan memasukkan ataupun menulis sebuah artikel. Didalam menu ini,terdapat juga bagian-bagian atau istilah toolbar untuk merubah ukuran font ataupun merubahmodel font.sperti gambar diatas ini [gambar 0.4].

               Gambar0.5

-   Pengaturan Artikel

Menu ini merupakan tempat dimana kita untuk bisa mengaturbeberapa artikel ataupun artikel yang telah dibuat ingin kita edit.ataupunmenghapus artikel yang telah dibuat.terlebih dahulu klik checkbox.seperticontoh gambar diatas [gambar 0.5].


                Gambar0.6

-   PengaturanKategori
Menu ini merupakan tempat kita mengelompokkan jenistulisan.seprti gambar diatas [gambar 0.6]. apabila anda ingin menambah ataumembuat kategori, klik buat kategori baru.

-   Settingan

-   Ubah Profil

Menu ini merupakan tempat dimana kita bisa memberi sebuahtulisan atau pesan singkat mengenai diri pribadi dan apabila anda inginmemasukkan picture atau foto anda caranya sangat mudah, anda hanya tinggalmenekan menu browse, lalu cari dimana file picture atau foto yang anda inginpasang.seperti contoh dibawah ini[gambar 0.7]:
 
                      Gambar0.7

 
-   Settingan Blog

Menu ini merupakan tempat untuk mengatur segala tampilan blog.seperti  settingan untuk berapa artikel yang akantampil dihalaman indexnya, membuat catatan kecil pada headernya.dan lainsebagianya.lebih jelasnya seperti contoh dibawah ini[gambar 0.8] :

                    Gambar0.8

-   UbahLink

Menu ini merupakan menu untuk kita merubah ataupun menambahlink. Seperti halnya memasukkan link alamat blog teman kita.apa lagi blog kitayang sering dikunjungi.khan pastinya kurang enak kalau kita tidak memasukkanalamat blognya.

-   Ubah template

Menu ini merupakan menu yang susah. Sebab,disinilah tempatkita merubah, menambah serta memasukkan script yang kita inginkan . seperticheckbox atau kotak pesan[gambar 0.9 dan gambar 0.10].tapi jangan khawtatirbagi yang masih baru, karma sudah ada disediakan tutorial yang singkat untukmemudahkan kita untuk mengedit script programnya[gambar 0.11].seperti gambardibawah ini :

 

 

 

 

 

 

 

 

             Gambar 0.9 

 

                Gambar0.10

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
            Gambar0.11

-   Ubah CSS
Menu ini berfungsi untuk mengubah,mengedit ataupun mengganticss yang telah kita buat.
-   Gantidesain
Ganti desain merupakan menu untuk kita mengganti template,adabeberapa jenis template yang disediakan oleh catatanku.com.apabila anda inginmemasukkan template anda sendiri atau template buatan sendiri.sebaiknya andakomfirmasikan terlebih dahulu sama bapak adminnya.
-   Lainnya
-   PerbaharuiBlog

Menu ini merupakan menu remake.maksudnya, apabila anda telahmelakukan perubahan pada blog anda.sebaiknya tekan tombol perbaharui blog jikaingin melihat hasil perubahan.
-   LihatBlog
Tidak ada yang ng tahu fungsi dari tombol ini.dari namanyasaja orang sudah mengerti.apabila anda sudah menekan tombol perbaharuiblog,silahkan anda tekan tombol ini untuk melihat hasilnya.
-   Keluar
Untuk keluar dari segala aktivitas perubahan blog.ketika andaselesai merubah atau mengedit blog anda, sebaiknya anda tekan tombol ini, untukmencegah besar kemungkinan orang lain menggunakan account anda.

-   Hubungi kami
Menu ini berguna untuk kiat berhubungan dengan admincatatanku.com caranya, ketik pesan,saran ataupun kritik anda di kotaktersebut.subject sudah ada pilihannya.setahu aja anda bisa berkenalan langsungdengan bapak adminnya catatanku.com.seperti contoh dibawah ini [gambar 0.12],

                   Gambar0.12

Gambar diatas merupakan contoh kecil yang anda bisa aja lakukan dan barangkali
Salah satu adminya, juga teman ataupun senior anda saat sekolah.kayak mbak sari postingannya emoticon emoticon.yang beralamat Http://sari.catatanku.com

Sekian artikel ini saya buat semoga bermanfaat.mohon maafkalau ada kekurangan.karna manusia tidak luput dari kesalahan (apaansih��..emoticon).kalau kurang paham,silahkan anda berhubungan langsung dengansaya.ataupun berhubungan langsung dgn bapak Adminnya.


Bug Pada Kasperky versi 7

February 15, 2008

abis buka milis dari beberapa milis ada info penting yang saya dapat.semoga bermanfaat bagi yang make kasperky.

ada sebuah bug yg lumayan fatal pd update KAV/KIS ver. 7

kalian tau klo kita gunain key kita download terutama jika
illegal…saat update pasti akan blacklist karena pengaruh file BLACK.LST

Bug ini kita ketahui saat key legal kami`di blok oleh Kaspersky
dikarenakan hal yg kmi ga tau.

Berikut cara kmi bertahan menggunakan kaspersky yg di blok:

1. setting update ke tempat update yang telah diextract. Mis: D:\update
2. Update seperti biasa, pada langkah ini, kaspersky kami terblacklist.
3. hilangkan setting update, pindahkan ke tempat lain (dari D:\update
menjadi C:\program files)
4. Kami melakukan restart komputer
5. Kami masuk ke SAFE MODE
6. di safe mode, cari di seluruh Drive file "black.lst" dan hapus
7. restart kompie
8. masuk windows sperti biasa
9. install ulang Kaspersky (repair)
10. setelah repair,maka kaspersky akan berjalan normal 

semoga bermanfaat yah……..


belajar perl bagian Pertama

Iseng-iseng belajar bahasa pemrograman perl,karna yang waktu lalu sy sudah belajar bahasa pemrograman CSS.makanya sy beralih lagi belajar perl. walapun masih sedikit yang aku pahami tentang PERl, saya ingin berbagi sedikit dengan teman-teman ataupun sekedar numpang membaca. Referensi ini sy ambil dari milis Id-perl dan dari internet.langsung aja yah……

Pengertian CGI

CGI (Common Gateway Interface) merupakan suatu bentuk hubungan interaktif di mana client (browser) dapat mengirimkan suatu masukan kepada server, dan server mengolah masukan tersebut serta mengembalikannya kepada client (browser). Contoh sederhana adalah saat Anda menggunakan suatu search engine. Saat Anda menuliskan keyword dan menekan tombol Search maka browser akan mengirimkan keyword tersebut ke server. Keyword tersebut lalu diolah oleh server dan server mengirimkan data hasil pengolahan (yang sesuai dengan keyword yang kita masukkan) ke browser kita. Jadi yang kita lihat pada browser hanya data yang sesuai dengan keyword yang kita masukkan.


Program CGI ditulis dalam bahasa yang dapat dimengerti oleh sistem misalnya C/C++, Fortran, perl, Tcl, Visual Basic, dan lain-lain. Pemilihan bahasa yang digunakan tergantung dari sistem yang digunakan. Jika kita menggunakan bahasa pemrograman seperti C atau Fortran maka program-program yang kita buat harus dikompile terlebih dahulu sebelum dijalankan sehingga pada server akan terdapat source code dan program hasil kompilasi. Berbeda bila kita menggunakan bahasa script seperti perl, TCL, atau Unix Shell maka hanya akan terdapat script itu sendiri (tanpa ada source code). Banyak orang yang lebih suka memilih menggunakan script CGI dibandingkan dengan bahasa pemrograman karena lebih mudah untuk di-debug dan dimodifikasi. Dalam pembahasan kali ini kita akan menggunakan Perl sebagai bahasa script-nya.


Setelah kita mengetahui penjelasan diatas,maka mari kita coba buat sebuah tampilan sederhana yakni tampilan index.cgi yang isinya hello word.


Contoh program:


#!/usr/bin/perl
#contoh script sederhana
print"content-type:text/html\n\n";
print"<html><head><title>sekedar nyoba aja</title></head>\n";
print"<body>hello word…!!!\n\n";
print"</body></html>\n";
exit;


maka tampilan dibrowse seperti dibawah ini:

 

 


Gbr.tampilan dari hello world..!!!!. 


penjelasan dari beerapa script yang dianggap penting:


#!/usr/bin/perl


Baris ini memberitahu server letak interpreter yang diperlukan untuk mengeksekusi script kita.


#contoh script sederhana


baris menandakan tempat komentar. tiap komentar di awali dgn tanda “#”.


print"content-type:text/html\n\n";


Baris ini disebut MIME header yang fungsinya memberitahu server jenis informasi yang kita kirim. Dalam contoh ini informasinya berjenis HTML/Text.

print"<html><head><title>sekedar nyoba aja</title></head>\n";
print"<body>hello word…!!!\n\n";

print"</body></html>\n";


merupakan perintah untuk menuliskan string dan script html yang akan ditampilkan pada browse nantinya.


Exit;

merupakan perintah untuk menutup script yang telah dibuat. Boleh juga ditulis dan ng,asal ada yang menandakan bahwa script yang kita buat tertutup atau telah selesai.


Untuk sementara, barangkali cukup sampai disini dulu. semoga bermanfaat bagi yang baca. Tunggu artikel selanjutnya yakni tentang “membuat guestbook dari perl.”
makasih buat teman-teman dari Id-perl terutama mas zaka yang selalu membimbing saya.:)


BELAJAR MEMBUAT WEBSITE MENGGUNAKAN CSS….

January 25, 2008

BELAJAR MEMBUAT WEBSITE MENGGUNAKAN CSS.

Pengertian css.

CSS ( Cascading Style Sheets ) adalah bahasa yang digunakan untuk menentukan tampilan ( persentasi ) dari suatu website. CSS tidak hanya memberikan kontrol yang lebih baik kepada kita untuk mengatur tampilan, namun juga menghilangkan kaharusan menggunakan tag persentasi didalam website.

CSS merupakan teknologi internet yang direkomendasikan oleh World Wide Web Consortium (W3C) pada tahun 1996, CSS kini terdapat dua versi, yaitu CSS1 & CSS2.
CSS1 berpusat pada formating dokumen HTML, dan CSS2 untuk memenuhi kebutuhan format dokumen supaya bisa ditampilkan diprinter.

Keunggulan CSS

  1. Mempersingkat penulisan tag HTML.

  2. Mempercepat proses rendering atau pembacaan HTML karena tidak ada pengulangan penulisan Mudah dan cepat dalam me-maintenace.

  3. CSS bisa melakukan apa yang tidak bisa dilakukan HTML, seperti memberi warna pada input box atau scrollbar.

  4. Dapat melakukan berbagai konfigurasi terhadap tampilan

Penggunaan CSS Pada Situs

CSS lebih diminati untuk pengaturan tulisan dalam sebuah situs, beberapa situs terkenal menggunakan CSS seperti YAHOO!.

Aplikasi Open Source menggunakan CSS untuk memudahkan penggunanya dalam memodifikasi tampilan, contoh :
CMS : MAMBO, JOMLA
BLOG : WORDPRESS
IMAGE GALLERY : COPPERMINE
FORUM DISKUSI : PhpBB

Penulisan Script CSS dibagi menjadi empat :

  1. Inline Style Sheet

  2. Embedded Style Sheet

  3. Linked Style Sheet

  4. Multi Style Sheet

Inline Style Sheet

Penulisan CSS dengan aturan Inline Style Sheet ini dilakukan dalam elemen HTML. Metode ini jarang digunakan karena tidak efisien, fungsinya sendiri hampir sama dengan menuliskan poperti dalam HTML, tetapi penggunaannya bersifat khusus
Contoh :
<p style=“color : blue”>

Embedded Style Sheet

Penulisan Sintak CSS dalam dokumen HTML, dengan menggunakan tag <style> dan </style> Contoh :
<style type=“text/css”>
h1 {color: red}
</style>

Linked Style Sheet

Penulisan sintak CSS di dalam halaman yang berbeda atau terpisah dalam HTML, dengan menggunakan tag <link rel> yang ditempatkan pada bagian tag <HEAD>
Memiliki keuntungan kemudahan dalam mengedit script CSS karena hanya file CSS saja yang diubah.

Contoh :
<link rel=“stylesheet” type=“text/css” href=“http://domain.com/contoh.css”>

Multi Style Sheet

Biasanya menggunakan kombinasi antara Linked Style Sheet dan Embedded Style Sheet, nilai yang tidak terdefinisikan akan di turunkan dari style sheet yang lebih general.

Contoh :

<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“contoh.css”>
<style type=“text/css”>
h3 {
text-align : left;
font-size : 20pt;
}
</style>
</head>
<body>
<h3>Ini menggunakan Multi Style Sheet, dimana warna menggunakan LINKED STYLE SHEET</h3>
</body>
</html>

(sumber penjelasan singkat ini, diambil tempat kursus online saya
yang diberikan pada setiap member yakni:http://braintutor.brainmatics.com/)

diatas adalah beberapa penjelasan singkat mengenai CSS, sekarang mari kita buat contoh website yang menggunakan CSS.
Pertama kita siapkan software pendukung untuk membuat atau mendesign web.terserah anda mau make apa.tapi saya disini menggunakan dreamweaver 8 untuk membuatnya.jika perlengkapannya sudah ada,yuk….kita rame-rame belajar……

 

 

 

 

Gbr01.tampilan dreamveaver

jika dreamveaver sudah ada dan sudah siap seperti tampilan diatas,artinya kita sudah siap untuk memulainya.

  • klik menu file==>New==>General==>CSS,OK lalu tekan enter.sperti contoh dibawah ini

     

     

     

 

 

 

         Gbr02.membuka lembar CSS.

  • setelah memilih lembar CSS, artinya CSS siap kita buat.

    Ini ada contoh CSS yang abis saya buat,saya akan coba menjelaskan dari beberapa script CSS yang abis saya buat.

    Contoh:

body
{
width: 638px;
background: url(image/bg01.gif);
height: auto !important;
display: block;
margin: auto !important;
}

penjelasan:

body disini merupakan perintah yang berarti memulai memberikan style CSS.tag body tersebut memiliki pengertian bahwa halaman yang akan ditampilkan akan sesuai dengan parameter tersebut jika tak ada isi sedikitpun pada halaman tersebut.disini kita hanya menggunakan sistem perhitungan pixel agar lebih mudah mengaturnya.seperti width:638px; ,sedangkan background bisa kita menggunakan latar warna ataupun gambar.sy menggunakan tambahan !important seperti beberapa script yang kita jumpai nantinya,agar tampilan diweb kita nantinya,tampilannya akan sama dgn browse yang lain,seperti Firefox,IE dll.auto digunakan disini ukurannya sesuai dgn isi dari web kita.sedangkan perintah margin untuk menengahkan layout atau tampilan web kita.

#layout
{
background-color: #FFFFFF;
width: 638px !important;
border-left: #CCCCCC 2px solid;
border-right: #CCCCCC 2px solid;
border-bottom: #CCCCCC 2px solid;
margin: auto !important;
padding: 2px 0px 0px 2px;
color: #333333;
height: auto !important;
display: block;
}

penjelasan:

Layout,merupakan tampilan utama pada suatu web.

#snipet
{
background-color: #CCCCCC;
border: #0000FF 1px;
font-size: 10px;
width: 624px;
}

penjelasan:

snipet sama halnya sebuah catatan kecil pada lembar document.tapi catatan kecil ini terdapat dibagian atas.seperti halnya dengan header yang terdapat pada microsoft office.

#coloum
{
width: 590px !important;
height: auto !important;
padding-left: 10px;
padding-right: 10px;
}

#coloum_a
{
background-color: #CCCCCC;
width: 585px !important;
height: auto !important;
padding-left: 10px;
padding-right: 10px;
border: #CCCCCC 1px solid;
}


penjelasan:

colom dan coloum_a,merupakan kolom untuk menempatkan sebuah artikel nantinya.disini hanya membedakan ukurannya saja. Karna nantinya akan terbentuk atau kita buat yakni, kolom dalam kolom.

#broadcumb
{
width: 624px !important;
height: 25px !important;
}
#menu_horizontal ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
}

#menu_horizontal ul li
{
display: inline;
width: 560px;
}
#menu_horizontal ul li a
{
text-decoration: none;
padding: .1em 1em;
color: #6699FF;
background-color: #FFFFFF;
font-family : sans-serif;
font-size : 10pt;
font-weight : bold;
}

#menu_horizontal ul li a:hover
{
color: #FFFFFF;
background-color: #6699FF;
}

penjelasan:

broadcumb,adalah tempat meletekkan sebuah menu seperti menu home dll,yang terdapat pada header web. karna broadcumb dan snipet sudah termasuk dalam bagian header. Sedangkan, menu_horizontal_ul beserta kawan-kawannya hanya merupakaan tambahan agar ketika kita mengklik salah satu menu terlihat seperti timbul atau tombol itu hidup.

#header_banner_left
{
width: 441px;
height: 247px;
background-image: url(image/image01.jpg);
float: left;
}
#header_banner_right
{
height: 247px;
width: 180px;
background-image: url(image/bg_03.gif);
float: right;
}


BELAJAR MEMBUAT WEBSITE MENGGUNAKAN CSS.[bagian II]

penjelasan:
header_banner_left dan header_banner_right, merupakan perintah untuk membuat kolom header. Tetapi disini kita memisahkannya,ada yang kanan dan ada header sebelah kiri.fungsinya yaitu. Agar gambar yag nantinya yang kita masukkan ataupun kita selipkan dapat diatur atau dikelompokkan.


.cleardiv {
clear: both !important;
height: 10px !important;
}
penjelasan:
cleardiv,berfungsi untuk membersihkan div-div yang telah dibuat. Agar nantinya, apabila kita membuat fungsi div selanjutnya tidak saling menumpuk.

.menu_title
{
background-image: url(image/obj_ba_01.gif);
width: 175px;
height: 25px;
color: #208FFF;
border: medium;
font-weight: bold;
font-style:italic;
font-size: 18px;
float: left;
}


penjelasan:
menu_title, hanya berfungsi sebagai background. terserah anda mau memakainya atau tidak.


#div_kiri
{
float: left;
width: 624px;
height: auto !important;
padding-left: 5px;
padding-right: 5px;
margin: auto;
}


#div_kiri_kiri{
float: left;
width: 195px;
height: 350px !important;
background-color: #FFFFFF;
margin-left: 1px;
border-color:#CCCCCC;
border-style:solid;
}


penjelasan:
div_kiri dan div_kiri_kiri, berfungsi untuk membuat sebuah kolom yang nantinya terbentuk dalam 3[tiga] bagian.tapi sekali lagi terserah anda ingin memasangnya atau tidak.



.clear_all
{
clear: both !important;
}


penjelasan:
clear_all,fungsi samanya sama dgn cleardiv yakni membersihkan div-div yang telah dibuat. Agar nantinya, apabila kita membuat fungsi div selanjutnya tidak saling menumpuk.




#category
{
width: 195px;
height: 22px;
display: block;
background-image: url(image/obj_ba_02.gif);
margin: auto;
font-weight: bold;
color: #6699FF;
}
#category_a
{
width: 594px;
height: 22px;
background: url(image/bg_05.gif) repeat-x;
padding-left: 10px;
padding-right: 2px;
padding-top: 3px;
font-weight: bold;
font-size: 13px;
color: #6699ff;
float: center;
border: #CCCCCC 1px solid;
}


penjelasan:
category dan category_a,dari namanya kita sudah bisa tebak fungsinya. Yakni untuk membuat sebuah category atau kelompok. Artinya kita akan mengelompokkan sebuah pokok bahasan atau suatu topik.


#judul
{
background-image: url(image/bg_03.gif);
font-size: 12px;
padding: 15px 2px 5px 15px;
width: 490px;
color: #000000;
margin: auto !important;
height: auto !important;
}


penjelasan:
judul,berfungsi sebagai tag yang menampung isi dari artikel yang nantinya kita buat.


#next_link
{
font-size: 12px;
color: #0000FF;
margin: auto;
padding-left: 3px;
padding-right: 3px;
height: auto !important;
}


penjelasan:


next_link,berfungsi untuk memasangkan link pada sebuah tulisan yang menurut anda kepanjangan dan anda ingin singkat.




.footer
{
background-image: url(image/bg_02.gif);
width: 624px;
height: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #663333;
}


penjelasan:


footer, dari namanya kita tidak canggung lagi yakni sebagai catatan kaki yang biasa dan paling banyak digunakan dikalangan webmaster. Sekaligus penutup dari css yang kita buat.

Setelah CSS selasai kita buat maka kita akan membuat halaman index.html nya.

Contoh index.html nya:

<!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">
<head>
<link href="common02.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Anak Makassar</title>
</head>


<body>
<div id="layout">
<div id="snipet"></div>
   <div id="broadcumb">
          <div id="menu_horizontal">
          </div>
    </div>
    <div class="cleardiv"></div>
    <div id="header_banner_left"></div>
    <div id="header_banner_right"></div>
    <div class="cleardiv"></div>
    <div id="kolom">
           <div id="div_kiri">
              <div id="div_kiri_kiri">
            </div>
          </div>
    <div id="div_kiri">
        <div id="div_kiri_kiri">
        </div>
    </div>
       <div id="div_kiri">
            <div id="div_kiri_kiri">
            </div>
        </div>
    </div>
    <div class="cleardiv"></div>
    <div id="coloum">
        <div id="category_a"></div>
        <div id="coloum_a">
               <div id="judul">
                </div>
            </div>
    </div>
    <div class="cleardiv"></div>
    <div class="footer"></div>
</div>



</body>
</html>











 


 

 

 Gbr03.tampilan index.html.
Keterangan dari gambar:

  1. tampilan snipet.

  2. Tampilan broadcumb.

  3. Tampilan header banner left.

  4. Tampilan header banner right.

  5. Tampilan dari div_kiri dan div_kiri_kiri.

  6. Tampilan category.

  7. Tampilan dari colom dan coloum_a.

  8. Tampilan dari judul.

  9. Tampilan dari footer.


Barangkali sampai sini aja.artikelnya semoga bermanfaat dah….yang jelas…CSS itu ternyata enak dan menarik dipelajari….
- tak lupa saya ucapkan buat tutor aku yang setia mendampingi dikala aku membutuhkan.
- Tak lupa juga terima kasih buat teman-teman kantor yang selalu mendampingi aku sy mendapatkan kesulitan.


«« Previous Page