tag:blogger.com,1999:blog-85865943738006895082024-03-14T05:13:01.181-07:00Unlimited SharingSurya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.comBlogger15125tag:blogger.com,1999:blog-8586594373800689508.post-49549296723372933492012-08-05T13:57:00.000-07:002012-08-05T13:58:52.534-07:00Learning something from a “Super” Mario Teguh<div style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<br /></div>
<div style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small; line-height: 115%;">Mario Teguh, seorang motivator terkemuka yang sangat pupuler
di Indonesia. Siapa yang tidak mengenal pribadi ini? Jika anda adalah salah
satunya maka saya sangat menyarankan anda untuk menyaksikan salah satu diskusinya
di Mario Teguh the Golden Ways, yaitu salah satu acara favorit saya yang
ditayangkan oleh Metro TV, saya yakin anda akan mendapat banyak motivasi dan
pelajaran yang sangat berharga untuk menghadapi tantangan hidup ini.</span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small; line-height: 115%;">Tetapi, apakah yang membuat orang – orang begitu tertarik
pada beliau? Beliau adalah pribadi yang memiliki Interpersonal Skill yang
tinggi, oleh sebab itu saya ingin mengulas tentang bagaimana pribadi yang “super”
ini berbicara dan menjelaskan sesuatu di hadapan hadirinnya, sehingga tak
satupun hadirin yang sempat mengalihkan perhatiannya dari setiap wacana yang
beliau sampaikan. </span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small; line-height: 115%;">Senyum, salam, doa merupakan hal yang selalu beliau
persembahkan dan beliau tidak lupa untuk mengucap kata terimakasih saat
menerima sambutan hangat dari pesertanya.</span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="separator" style="clear: both; font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: center;">
<span style="font-size: small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPItR_9ciLk9X9zlqc50q_64X-ZZZxUDlnH4Aopsb2Rl8YXYK4UdiSALXfqhpmaP7FqsFI-a2_yOcRz0xmY9G1VgteMh1Wh6fPoTFwwH_e9smO2SDsaWkgH3N3VdyRxAyGounaW01-vtTv/s1600/m1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPItR_9ciLk9X9zlqc50q_64X-ZZZxUDlnH4Aopsb2Rl8YXYK4UdiSALXfqhpmaP7FqsFI-a2_yOcRz0xmY9G1VgteMh1Wh6fPoTFwwH_e9smO2SDsaWkgH3N3VdyRxAyGounaW01-vtTv/s200/m1.png" width="200" /></a></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"></span><br />
<a name='more'></a><span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<br />
<span style="font-size: small; line-height: 115%;">Beliau berbicara dengan penuh percaya diri, tegas dan murah
senyum sehingga para audience dapat mengikuti materi dengan santai tapi penuh
perhatian. Dari cara beliau berbicara, tak satupun audience yang mampu
memalingkan perhatiannya dari beliau, seakan – akan semua mata tertuju padanya.</span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small; line-height: 115%;">Untuk lebih jelasnya, saya akan memberi hasil analisa saya
baik dari sisi komunikasi verbal dan komunikasi non verbal:</span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><b><span style="line-height: 115%;">Komunikasi verbal</span></b></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small; line-height: 115%;">Cara berbicara : beliau memiliki cara berbicara yang sangat
baik, tidak terlalu cepat sehingga memudahkan untuk dimengerti.</span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small; line-height: 115%;">jarak : tidak hanya berdiam pada satu tempat saja, tetapi
beliau selalu memberi jarak yang dinamis, kadang jauh dari penonton dan kadang
dekat. Tetapi beliau cenderung lebih dekat dengan audience, maka audience dapat
merasa lebih akrab kepada beliau.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDf3n9BNbNqGbEA05hiDT-AMEgNSHYfs2bKIJFQu3X6_YOFTYNx5gaEBo02MujPW701a3LhAys5lv0-dQpBlD6_dtliQWIWzEFEcKLF6pTJ27qGXhj0Wv0751V2ILnEpQ9cJ-l3f8TBJ_/s1600/m4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDf3n9BNbNqGbEA05hiDT-AMEgNSHYfs2bKIJFQu3X6_YOFTYNx5gaEBo02MujPW701a3LhAys5lv0-dQpBlD6_dtliQWIWzEFEcKLF6pTJ27qGXhj0Wv0751V2ILnEpQ9cJ-l3f8TBJ_/s200/m4.jpg" width="200" /></a></div>
</div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="font-size: small; line-height: 115%;">Nada : beliau memiliki nada yang rendah dan sangat mendalam.</span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small; line-height: 115%;">Volume : volume suara beliau sangat menunjukan rasa percaya
dirinya yang tinggi, beliau selalu berbicara dengan keras dan jelas karena
beliau tahu, orang lain akan mendengarkan apa yang ia katakan. Kebanyakan orang
yang memiliki volume suara yang kecil, orang lain akan menganggap ada sesuatu
yang dia sembunyikan.</span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small; line-height: 115%;">Lafal : lafal berbicara yang sangat jelas. Dan jiwa seorang
motivator dapat kita lihat pada dirinya.</span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small; line-height: 115%;">Pengucapan : teknik pengucapan kata dan kalimat yang sangat
unik, jelas dan menyenangkan.</span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small; line-height: 115%;">Intonasi : beliau selalu mengatur tinggi rendahnya intonasi
sesuai dengan kondisi yang berlangsung. Sehingga ekspresi semangat, gairah, dsb dapat
terlihat dari intonasi.</span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><br /></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<span style="font-size: small;"><b><span style="line-height: 115%;">Komunikasi non verbal</span></b></span></div>
<ol style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">
</ol>
<ul style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">
<li><span style="font-size: small;"><b><span style="line-height: 115%;">Body language :<br /> </span></b></span></li>
</ul>
<ol style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;"><ul>
<li><span style="font-size: small; line-height: 115%;">Gerakan
wajah : menampilkan “affect display” yaitu gerakan – gerakan wajah yang
mengandung makna emosional seperti rasa takut, gembira, sedih, dsb. </span></li>
</ul>
</ol>
<ol style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;"><ul>
<li><span style="font-size: small; line-height: 115%;">Ekspresi wajah : </span><span style="font-size: small; line-height: 115%;">beliau
juga menggunakan ekspresi wajah untuk mendapat interaksi yang lebih baik kepada
audience, misalnya mengerutkan dahi untuk menyatakan “Oh ya?”. Dan banyak
ekspresi yang digunakan untuk memperjelas suatu emosi tertentu.</span></li>
</ul>
</ol>
<ol style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;"><ul>
<li><span style="font-size: small; line-height: 115%;">Gerakan
mata : gerakan atau kontak mata sangat beliau perhitungkan, karena dengan itu
audience dapat merasa dekat secara psikologis walaupun berada dalam jarak yang
cukup jauh. Dan beliau menggunakan perpindahan mata dari satu orang ke orang
lain untuk memberikan suatu pertanyaan kepada audience. Beliau selalu
menunjukan sikap “penuh perhatian” melalui kontak mata ini. </span></li>
</ul>
</ol>
<ol style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;"><ul>
<li><span style="font-size: small; line-height: 115%;">Gerakan
tubuh : beliau aktif menggunakan gerakan tangan untuk memperjelas suatu materi
dan mempergunakan gerakan tangan untuk berinteraksi dengan audience. Menggelengkan
kepala jika mendapat feedback dari audience yang beliau rasa kurang sesuai. Menganggukkan
kepala dengan lembut jika menyetujui feedback audience. </span></li>
</ul>
</ol>
<span style="font-size: small; line-height: 115%;"></span><br />
<ol style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZtEMm1eoJrMuKIIJQqlJfhVIoucGt2kLeM7CDJOSM8oiqml4TDF1kQqLA1qpB2lKrOUHyq4O1PZjvQYYmrsmk6Cqy-VhsS63rv2vzPcSgUWIW2CWpMzqN2sG4ci7yKSze2bpR1EloYWfg/s1600/m3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZtEMm1eoJrMuKIIJQqlJfhVIoucGt2kLeM7CDJOSM8oiqml4TDF1kQqLA1qpB2lKrOUHyq4O1PZjvQYYmrsmk6Cqy-VhsS63rv2vzPcSgUWIW2CWpMzqN2sG4ci7yKSze2bpR1EloYWfg/s200/m3.jpg" width="200" /></a></div>
<ul>
<li><span style="font-size: small; line-height: 115%;">Sentuhan
: beliau adalah orang yang sangat ramah, beliau bersedia mendekati audience dan
tidak sungkan untuk bersalaman dengan salah satu dari mereka, tidak lain adalah
untuk membuat audience merasa sangat dekat dan nyaman bersamanya. Sentuhan ini
dapat membuat suasana menjadi lebih kekeluargaan</span><span style="font-size: small; line-height: 115%;"> </span></li>
</ul>
</ol>
<ol style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipg82Lgn80UUAtATWGTn5oJ6kLtQMgN5SlKU7LwmI9W3W1gqhX8L7L2m0Xoe4PM9VtLQMULQz9GE7ncY5iA3PoL8OWdecZGZUQPc6VbWUi65k4jeDmUtz1OwBFImG_qWRligc8zDDpznTE/s1600/m5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipg82Lgn80UUAtATWGTn5oJ6kLtQMgN5SlKU7LwmI9W3W1gqhX8L7L2m0Xoe4PM9VtLQMULQz9GE7ncY5iA3PoL8OWdecZGZUQPc6VbWUi65k4jeDmUtz1OwBFImG_qWRligc8zDDpznTE/s200/m5.jpg" width="200" /></a></div>
<ul>
<li><span style="font-size: small; line-height: 115%;">Posisi : pandai dalam menentukan
posisi badan sesuai dengan keperluan. Badan membungkuk ketika memberi salam
kepada audience pada pembukaan acara, posisi tangan yang selalu berubah
sehingga tidak terlihat kaku.</span><span style="font-size: small;"> </span></li>
</ul>
</ol>
<span style="font-size: small; line-height: 115%;"> </span> <br />
<ul style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;">
<li><span style="font-size: small;"><b><span style="line-height: 115%;"> Komunikasi tertulis :</span></b></span></li>
</ul>
<ul style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-align: justify;"><ul>
<li><span style="font-size: small;"><span style="line-height: 115%;">Beliau
selalu menggukan media tulis (projector) untuk mengilustrasikan kata dan sebuah
kondisi, sehingga audience dapat menangkap informasi dengan tepat.</span></span></li>
</ul>
</ul>
<div style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">
<span style="font-size: small; line-height: 115%;"><br /></span></div>
<div style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">
</div>
<div class="MsoListParagraphCxSpFirst" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; margin-left: 0cm; text-align: justify;">
<span style="font-size: small;"><span style="line-height: 115%;">Demikianlah
serangkaian kata yang dapat saya ungkapkan mengenai cara berbicara Bapak Mario
Teguh yang “SUPER”, semoga evaluasi ini bermanfaat bagi anda yang ingin
meningkatkan Interpersonal skill. </span></span></div>
<div class="MsoListParagraphCxSpMiddle" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; margin-left: 0cm; text-align: justify;">
<br /></div>
<div class="MsoListParagraphCxSpLast" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; margin-left: 0cm; text-align: justify;">
<span style="font-size: small;"><span style="line-height: 115%;">Bapak Mario
Teguh memiliki keunikan, yaitu saat menanggapi pertanyaan dari audience dimana
beliau tidak memberi jawaban secara objektif, bisa saya katakan, kadang –
kadang jawaban beliau kurang relevan, tetapi jika kita amati dan hayati jawaban
beliau, maka banyak sekali makna yang terkandung di dalamnya dan jawaban beliau
sangat memuaskan. Banyak ilmu yang beliau sampaikan tanpa adanya penyembunyian
suatu informasi, beliau sangat terbuka dan baik hati untuk membagi ilmunya
kepada hadirin yang hadir. Jujur saja, setiap saya mengikuti acara beliau di TV
saya merasa terus termotivasi untuk meningkatkan diri untuk menjadi pribadi
yang lebih baik. </span></span></div>
<div class="MsoListParagraphCxSpLast" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; margin-left: 0cm; text-align: justify;">
<br /></div>
<div class="MsoListParagraphCxSpLast" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; margin-left: 0cm; text-align: justify;">
<span style="font-size: small;"><span style="line-height: 115%;">original author : I Gede Surya Udayana </span></span></div>
<div class="MsoNormal" style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;">
<br /></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com0tag:blogger.com,1999:blog-8586594373800689508.post-70043340349973247652011-11-13T07:56:00.000-08:002011-11-13T10:38:13.262-08:00Membuat Menu Vertikal sederhana dengan CSS<div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0mFDhS4_HQbnFkdjh4DGsHHDRHgVV9nhJgDagcvTkiitfZ-jgnj6hp5suHOKcJmrhX4O40aecMG3AlIGMZ_1gF-Zq2KAZz8b53GOxGPugpKNS6q8McFaNgdQzeyBHhnLGzzeuhiHbAweq/s1600/fin1.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0mFDhS4_HQbnFkdjh4DGsHHDRHgVV9nhJgDagcvTkiitfZ-jgnj6hp5suHOKcJmrhX4O40aecMG3AlIGMZ_1gF-Zq2KAZz8b53GOxGPugpKNS6q8McFaNgdQzeyBHhnLGzzeuhiHbAweq/s320/fin1.jpg" width="320" /></a><span style="font-family: inherit; font-size: small;">Judul diatas merupakan judul artikel pertama bagi saya, karena baru kali ini saya membuat artikel sendiri. Artikel ini akan membimbing anda untuk menciptakan sebuah menu vertical yang menarik untuk desain web anda. <br />
Saya menggunakan HTML + CSS untuk membuat menu ini.</span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;">Persiapan :<br />
Code Editor, program untuk mengedit file HTML dan CSS. </span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;">Seperti Notepad, Notepad++, Dreamveaver, dsb. Saya menyarankan untuk menggunkan Notepad, dan Notepad++ bila tersedia.<br />
<br />
Web browser, program untuk menampilkan halaman HTML yang telah anda buat. Saya yakin anda sudah memiliki Internet Explorer pada komputer anda. Firefox dan Google Chrome tentu saja dapat digunakan juga. </span></div><a name='more'></a><br />
<div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><b>Membuat kode HTML</b><br />
<br />
Buka notedpad anda, dan ketikan tag-tag dasar HTML. Yaitu :<br />
<br />
<html><br />
<head><br />
<title>Membuat Menu Vertikal dengan CSS</title><br />
</head><br />
<body><br />
</body><br />
</html><br />
<br />
<b>Merancang menu dengan list</b><br />
<br />
Ketikan kode dibawah ini diantar tag <body></body>. Dan pada artikel ini saya menggunakan list tanpa penomoran (unordered list).<br />
<br />
<body><br />
<h3>CSS Vertical Menu</h3><br />
<ul><br />
<li><a href="#">Menu 1</a></li><br />
<li><a href="#">Menu 2</a></li><br />
<li><a href="#">Menu 3</a></li> </span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"> <li><a href="#">Menu 4</a></li><br />
<li><a href="#">Menu 5</a></li><br />
</ul><br />
</body><br />
Setalah menambahkan kode diatas, lalu simpanlah dokumen ini dengan ekstensi .htm atau .html <br />
Contoh : menu.html<br />
Lalu eksekusi fine ini dengan double clik atau dengan klik kanan dan pilih open with Firefox atau browser yang tersedia.<br />
Perhatikan hasilnya :</span></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjtANVyS9YMbZh83WozMSZ8qdC6Tc8aHiTn-heK7FdfeaMo_viE-_4RYmvq1zH-f_FhH9glAUy4PhlgFw3FfMkDQ5dPgq9nVRMeJCjq9AMDgEZ2HAp25D79GmWOWxhArQy376PRqX13tbK/s1600/mywork1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjtANVyS9YMbZh83WozMSZ8qdC6Tc8aHiTn-heK7FdfeaMo_viE-_4RYmvq1zH-f_FhH9glAUy4PhlgFw3FfMkDQ5dPgq9nVRMeJCjq9AMDgEZ2HAp25D79GmWOWxhArQy376PRqX13tbK/s320/mywork1.jpg" width="320" /></a></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><b>Membuat kode CSS</b><br />
<br />
Kerena menu yang akan kita buat tidak memerlukan begitu banyak tambahan CSS. Maka saya akan menggunakan Internal CSS.<br />
<br />
Tambahkan kode ini diantara tag <head></head><br />
<br />
<head><br />
<title>Membuat Menu Vertikal dengan CSS</title><br />
<style type=”text/css”><br />
/* area kode css */<br />
</style></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"></head><b><br />
<br />
Membuat selector baru</b></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
Ada tiga tipe selector dalam css, yaitu selector standar html(body, p, h1, dll), id(#) dan class(.)<br />
Pada artikel ini saya menggunakan selector class, karena menu ini dapat digunakan secara berulang kali dan dapat diperbanyak dalam 1 halaman.<br />
<br />
Tambahkan koden ini di area CSS.<br />
.menuvert {<br />
width:200px;<br />
height:auto;<br />
margin:0;<br />
padding:0;<br />
}<br />
<br />
<b>Memanggil class CSS</b></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"> <br />
Tambahkan kode ini pada HTML, di antara tag <body></body><br />
<br />
<div class=”menuvert”><br />
</div><br />
<br />
Dan pindahkan kode menu yang telah kita buat ke dalam class ini.<br />
<br />
<body><br />
<div class=”menuvert”><br />
<h3>CSS Vertical Menu</h3> <br />
<ul><br />
<li><a href="#">Menu 1</a></li><br />
<li></span><span style="font-family: inherit; font-size: small;"><a href="#"></span><span style="font-family: inherit; font-size: small;">Menu 2</span><span style="font-family: inherit; font-size: small;"></a></span><span style="font-family: inherit; font-size: small;"></li><br />
<li></span><span style="font-family: inherit; font-size: small;"><a href="#"></span><span style="font-family: inherit; font-size: small;">Menu 3</span><span style="font-family: inherit; font-size: small;"></a></span><span style="font-family: inherit; font-size: small;"></li><br />
<li></span><span style="font-family: inherit; font-size: small;"><a href="#"></span><span style="font-family: inherit; font-size: small;">Menu 4</span><span style="font-family: inherit; font-size: small;"></a></span><span style="font-family: inherit; font-size: small;"></li><br />
<li></span><span style="font-family: inherit; font-size: small;"><a href="#"></span><span style="font-family: inherit; font-size: small;">Menu 5</span><span style="font-family: inherit; font-size: small;"></a></span><span style="font-family: inherit; font-size: small;"></li><br />
</ul><br />
</div><br />
</body></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
<b>Menghilangkan icon pada list</b></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
tambahkan kode dibawah ini pada css</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;">.menuvert ul {</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"> list-style:none;</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;">}</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"></span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
save pekerjaan anda, lalu perhatikan browser setelah di refresh, maka tanda bulat akan hilang.</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;">Menghilangkan garis bawah pada list</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;">jika ada garis bawah dan tanda telunjuk tangan pada teks, ini menandakan bahwa elemen tersebut berisi link, jadi kita harus mengganti properti pada tag <a></a> dan kita akan meru propertinya pada CSS.</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;">tambahkan kode berikut :</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;">.menuvert ul li a {</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"> text-decoration:none;</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;">}</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;">refresh browser anda dan perhatikan efeknya :</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizIQiXXsNLTpZ7uGxwHHZtM8f9WWEjXTp-AxDXC3dAnQtIVTbViqAjycauGEg7IQJHcKTHvQyQDmtUrARZ-aONUF_n14IiTeRcTSLFDZooy7f1CpyjO6-U_meZyF2WMPgFVLBln3GxhOmz/s1600/mywork2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizIQiXXsNLTpZ7uGxwHHZtM8f9WWEjXTp-AxDXC3dAnQtIVTbViqAjycauGEg7IQJHcKTHvQyQDmtUrARZ-aONUF_n14IiTeRcTSLFDZooy7f1CpyjO6-U_meZyF2WMPgFVLBln3GxhOmz/s320/mywork2.jpg" width="320" /></a></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><br />
</span></div><div style="text-align: justify;"><b><span style="font-family: inherit; font-size: small;"><br />
</span></b></div><div style="text-align: justify;"><span style="font-family: inherit; font-size: small;"><b>Memberi pengaturan menu</b> : rata kiri, font, warna, border, background, display.</span></div><div style="text-align: justify;"><br />
</div><span style="font-size: small;">.menuvert ul li a {<br />
text-decoration:none;<br />
text-align:left;<br />
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;<br />
color:#555;<br />
padding:10px; <br />
display:block;<br />
border-bottom:1px solid #CCC; <br />
margin:1px;<br />
background:#EEE;</span><br />
<span style="font-size: small;">}</span><br />
<br />
<span style="font-size: small;">dan yang terakhir memberi efek hover(efek yang terjadi ketika kursos berada di atas menu)</span><br />
<span style="font-size: small;"> </span><br />
<span style="font-size: small;">.menuvert ul li a:hover {<br />
background:#555;<br />
color:fff;<br />
text-align:right;</span><br />
<span style="font-size: small;">}</span><br />
<br />
<span style="font-size: small;">Nah, menu sudah selesai. jika ada beberapa hal yang belum sesuai anda dapat mengecheck pekerjaan anda dan menhyesuaikannya dengan kode akhir dari menu yang saya buat.</span><br />
<span style="font-size: small;"> </span><br />
<span style="font-size: small;"><html><br />
<head><br />
<title>Membuat Menu Vertikal dengan CSS</title><br />
<style type="text/css"><br />
.menuvert {<br />
width:200px;<br />
height:auto;<br />
margin:0;<br />
padding:0;<br />
}<br />
.menuvert h3 {<br />
font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;<br />
color:#FFF;<br />
background:#555;<br />
margin:1px;<br />
padding:10px;<br />
}<br />
.menuvert ul {<br />
list-style:none;<br />
margin:0;<br />
padding:0;<br />
}<br />
.menuvert ul li a {<br />
text-decoration:none;<br />
text-align:left;<br />
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;<br />
color:#555;<br />
padding:10px; <br />
display:block;<br />
border-bottom:1px solid #CCC; <br />
margin:1px;<br />
background:#EEE;<br />
}<br />
.menuvert ul li a:hover {<br />
background:#555;<br />
color:fff;<br />
text-align:right;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div class="menuvert"><br />
<h3>CSS Vertical Menu</h3><br />
<ul><br />
<li><a href="#">Menu 1</a></li><br />
<li><a href="#">Menu 2</a></li><br />
<li><a href="#">Menu 3</a></li><br />
<li><a href="#">Menu 4</a></li><br />
<li><a href="#">Menu 5</a></li><br />
</ul><br />
</div><br />
</body><br />
</html></span><br />
<span style="font-size: small;"><br />
</span><br />
<span style="font-size: small;">sekian, tutorial ini saya tulis. apakah ada pertanyaan??</span><br />
<span style="font-size: small;"><br />
</span><br />
<span style="font-size: small;">Article by : <a href="http://http/;//www.surya-udayana.blogspot.com/" target="_blank">I Gede Surya Udayana</a></span>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com6tag:blogger.com,1999:blog-8586594373800689508.post-20385076675663339172011-11-12T12:03:00.000-08:002011-11-12T12:13:21.024-08:00The modern browser wars: How well Firefox, IE and Chrome succeed in getting their users to upgrade<div class="fullpost" style="font-family: inherit; text-align: justify;"><div class="entry"><span style="font-size: small;"><img alt="Web browsers" class="alignnone" height="126" src="http://farm3.static.flickr.com/2747/4500179040_b3b48ff3cf_o.jpg" title="Web browsers" width="580" /></span><br />
<span style="font-size: small;">We all know the by now woeful tale of Internet Explorer 6, which close to a decade after its arrival still has a significant share of the web browser market. Its users have been extremely slow to abandon it in spite of there being two newer and much improved versions of Internet Explorer freely available. And this is with Microsoft actively encouraging an upgrade. You could even argue the same for Internet Explorer 7; why haven’t the vast majority of Internet Explorer users switched to version 8 by now?</span><br />
<span style="font-size: small;">This conundrum made us wonder how the other web browsers fare when it comes to getting their users to upgrade to newer versions. How quickly do Firefox, Safari, or Google Chrome users upgrade their browsers when new versions arrive?</span><br />
<span style="font-size: small;">We have studied the upgrade pattern for <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Internet Explorer</a>, <a href="http://www.mozilla.com/firefox/">Firefox</a>, <a href="http://www.google.com/chrome">Google Chrome</a>, <a href="http://www.apple.com/safari/">Safari</a> and <a href="http://www.opera.com/">Opera</a> and found some drastic and quite interesting differences.</span><br />
<span style="font-size: small;">Although we don’t have actual upgrade statistics, we can see how the market share for the various versions of a web browser changes, and that is good enough for our purposes. We used data from <a href="http://gs.statcounter.com/">StatCounter</a>, who provide browser statistics based on tracking of approximately three million websites globally.</span><br />
<a name='more'></a><br />
<span style="font-size: small;">Since we began this article with Internet Explorer, let’s now move on to a very different example: Google Chrome. (We’ll revisit IE a bit further down.)</span><br />
<h3><span style="font-size: small;">The upgrade pattern of Google Chrome</span></h3><span style="font-size: small;">What’s interesting about Google Chrome is that Google has taken a very different approach to upgrades compared to other browser makers. Their mantra: Don’t ask the user to upgrade, just do it.</span><br />
<span style="font-size: small;">Google Chrome handles its upgrades in a completely automated fashion, even for a completely new version of the browser. While other browsers will ask the user for approval to move from version 1 to version 2 (just an example), Chrome will just handle that in the background and move ahead with the upgrade.</span><br />
<span style="font-size: small;">If you think about it, this mirrors the way web apps work, i.e. updates go through to all users so everyone is using the same version of the software.</span><br />
<span style="font-size: small;">Chrome’s automated upgrade schedule becomes exceedingly obvious when you look at the chart here below, where you can see each new version replacing the one before it almost entirely within a month or two. (Presumably Google staggers the upgrades so they don’t all happen at once and overload their servers.)</span><br />
<span style="font-size: small;"><img alt="Google Chrome web browser market share" class="alignnone" height="400" src="http://farm5.static.flickr.com/4024/4499455073_a729acd621_o.png" title="Google Chrome web browser market share" width="580" /></span><br />
<span style="font-size: small;">The upside of Google’s automated upgrades is user convenience and that all users will actually be running the latest version of the software, which can have positive security implications as well.</span><br />
<span style="font-size: small;">The downside is that the user loses control over the upgrade process.</span><br />
<span style="font-size: small;">What is also apparent when looking at this chart is the rapid pace of upgrades to Google Chrome. It’s gone from version 1.0 to 4.0 in little over a year. No other browser we know of is even close to this pace.</span><br />
<h3><span style="font-size: small;">The upgrade pattern of Internet Explorer</span></h3><span style="font-size: small;">Microsoft, perhaps due to a combination of being the default browser in Windows and somewhat conservative company policies regarding browser usage, has an exceedingly slow rate of change when you compare it to the other browsers in this study.</span><br />
<span style="font-size: small;"><img alt="Internet Explorer web browser market share" class="alignnone" height="400" src="http://farm3.static.flickr.com/2734/4499455005_4d140b4b25_o.png" title="Internet Explorer web browser market share" width="580" /></span><br />
<span style="font-size: small;">IE 6 is the last of the old generation of browsers, and it’s not going away anyway near as fast as we’d all expect. The only good thing that can be said about it right now is that it is, as of September 2009, the least common version of Internet Explorer, since that is when version 8 passed it in popularity (ok, market share might be a better word than popularity here).</span><br />
<h3><span style="font-size: small;">The upgrade pattern of Firefox</span></h3><span style="font-size: small;">Compared to Chrome and IE, Firefox has managed to find some sort of middle ground in the way it handles upgrades. Upgrades are handled more aggressively than IE, but doesn’t go to the extremes of the fully automated Chrome. Minor upgrades (such as 3.6.1 to 3.6.2) are handled automatically, but the user has to approve any big upgrades (such as from 3.0 to 3.5).</span><br />
<span style="font-size: small;"><img alt="Firefox web browser market share" class="alignnone" height="400" src="http://farm5.static.flickr.com/4043/4500089918_60fc86f821_o.png" title="Firefox web browser market share" width="580" /></span><br />
<span style="font-size: small;">(Note: We didn’t include Firefox 1.5 in the chart since it was pretty much flatlined at the bottom.)</span><br />
<span style="font-size: small;">An interesting observation here is that it takes a new version of Firefox less than three months to overtake the previous version.</span><br />
<span style="font-size: small;">One way Mozilla goes about this is to give users who after a couple of months haven’t upgraded a gentle push in the right direction. Quoting from <a href="https://developer.mozilla.org/devnews/index.php/2010/03/11/upgrade-offer-to-be-issued-to-firefox-3-and-firefox-3-5-users/">Mozilla’s developer blog</a>:</span><br />
<blockquote><span style="font-size: small;">In the past 50 days, Firefox 3.6 has been downloaded over 100,000,000 times [...]</span><br />
<span style="font-size: small;">Starting today, users running older versions of Firefox will be offered the choice of upgrading to Firefox 3.6. We’re presenting this upgrade offer for our users who may not realize that a new version is available.</span></blockquote><span style="font-size: small;">The upgrade offer Mozilla started using looks like this:</span><br />
<span style="font-size: small;"><img alt="Firefox upgrade offer window" class="aligncenter" height="412" src="http://farm3.static.flickr.com/2745/4500161558_3a914b6325_o.png" title="Firefox upgrade offer window" width="467" /></span><br />
<span style="font-size: small;">That same blog post on the Mozilla developer blog goes on to note:</span><br />
<blockquote><span style="font-size: small;">The offer screen will only appear after 60 seconds of keyboard inactivity to ensure we don’t get in the way of anyone’s activities. If a user declines the offer and later regrets that choice, they’ll be able to get it again simply by selecting “Check for Updates” from the “Help” menu.</span></blockquote><h3><span style="font-size: small;">The upgrade pattern of Safari and Opera</span></h3><span style="font-size: small;">For the sake of completeness we have also included Safari and Opera, although we won’t go into similar detail here. We’ll let the charts speak for themselves.</span><br />
<span style="font-size: small;"><img alt="Safari web browser market share" class="alignnone" height="400" src="http://farm3.static.flickr.com/2737/4500089984_e2671e415b_o.png" title="Safari web browser market share" width="580" /></span><br />
<span style="font-size: small;">Please note that the below chart for Opera doesn’t include the newly released Opera 10.5. </span><br />
<span style="font-size: small;"><img alt="Opera web browser market share" class="alignnone" height="400" src="http://farm3.static.flickr.com/2725/4499455143_1437437ea3_o.png" title="Opera web browser market share" width="580" /></span><br />
<span style="font-size: small;">The dip for Opera 10.0 that you see at the end is most likely caused by its users migrating to Opera 10.5, although that version wasn’t included in the stats we downloaded from StatCounter. The <a href="http://www.opera.com/press/releases/2010/03/02/">release of Opera 10.5</a> matches the drop perfectly, since the beta was introduced in February and the final version in March.</span><br />
<span style="font-size: small;">That also means that Opera is doing a very good job in getting their users to upgrade rapidly.</span><br />
<h3><span style="font-size: small;">Conclusion</span></h3><span style="font-size: small;">The different patterns we’ve seen above indicate two things:</span><br />
<ul><li><span style="font-size: small;"><b>Different approaches to making users upgrade.</b> Completely automated, or aggressive promotion of new versions, or a more laid-back approach? These charts all tell a different story.</span></li>
<li><span style="font-size: small;"><b>These browsers have different types of users.</b> Upgrade behavior will in most cases be tied to the kind of users the browser has attracted, with IE’s slow upgrade rate partly being the effect of a user base that is what you might call technologically conservative. To name an example, only around 14% of Pingdom’s users access our control panel with IE, but Chrome accounts for 21% and Firefox for 51%. This is very different from the internet average, where IE has more than 50% market share and Firefox and Chrome significantly less, but it’s a reflection of the fact that our users consist largely of webmasters, sysadmins, web designers, and site owners. In this case, Firefox and Chrome has attracted a more tech savvy audience (on average), which may be more inclined to upgrade to the latest version quickly after it arrives. The share of technical users each browser has will affect the upgrade pattern.</span></li>
</ul><span style="font-size: small;">Web browsers are among the most widely used applications in the world and even those of more modest popularity like Opera have a huge user base. When it’s time to upgrade to a new version, they have to convince millions of people to do so.</span><br />
<span style="font-size: small;">Google is an extreme example of pushing upgrades out to everyone. Although there will be people who criticize their approach with automated upgrades, Google’s strategy has a lot of merit, and most users are bound to find it quite convenient.</span><br />
<span style="font-size: small;">Getting users to upgrade to the latest version isn’t just good for the users, it also has plenty of positive side effects for the browser developer. An obvious benefit is that with just one version out there, or close to it, the support burden should diminish significantly.</span><br />
<span style="font-size: small;">The future will tell if more developers switch to the approach Google is using with Chrome. It is obviously working very well for them.</span><br />
<span style="font-size: small;"><i><b>Suggested further reading:</b> <a href="http://royal.pingdom.com/2010/04/16/does-internet-explorer-have-more-than-a-billion-users/">Does Internet Explorer have more than a billion users?</a></i></span></div></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com2tag:blogger.com,1999:blog-8586594373800689508.post-29253398443616823572011-11-10T10:59:00.000-08:002011-11-12T02:04:55.218-08:00Tips dan Cara Memilih Nama Domain yang Bagus<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQSlVtsOKr5Rwi3l2pZyK-UhCKy7vmi5CNDaT0LaogCDLu4C-zyuvKabuy3iXOnBtBNfOBXR8beU0KH3B9IeSgTJ6DGZ5DQVUTk77KYquBELb6u-Jwk8Zz36cWgDN8HSFVh_Jg3F2Gcndb/s1600/nama-domain.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQSlVtsOKr5Rwi3l2pZyK-UhCKy7vmi5CNDaT0LaogCDLu4C-zyuvKabuy3iXOnBtBNfOBXR8beU0KH3B9IeSgTJ6DGZ5DQVUTk77KYquBELb6u-Jwk8Zz36cWgDN8HSFVh_Jg3F2Gcndb/s200/nama-domain.jpg" width="200" /></a></div><div class="fullpost" style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Memilih nama domain untuk situs web adalah salah satu langkah paling penting untuk menciptakan internet marketing yang sempurna. Jika Anda menjalankan bisnis online, memilih nama domain yang akan dipasarkan dan mencapai kesuksesan dalam penempatan mesin pencari (<i>Search Engine</i>) adalah yang terpenting. Banyak faktor yang harus dipertimbangkan ketika memilih nama domain yang bagus.</span> <span style="font-size: small;">Beberapa poin penting dalam memilih nama domain adalah :</span><br />
<br />
<br />
<br />
<ol><li><span style="font-size: small;">Mudah diingat oleh <i>users</i> atau pengunjung.</span></li>
<li><span style="font-size: small;">Menunjukkan suatu produk atau layanan jasa.</span></li>
<li><span style="font-size: small;">Berfungsi sebagai <i>branding</i> atau merek dagang suatu produk atau jasa.</span></li>
</ol><span style="font-size: small;">Berikut adalah cara memilih nama domain yang bagus :</span><br />
<a name='more'></a><br />
<span style="font-size: small;"><b>Ekstensi Nama Domain</b> </span><br />
<br />
<span style="font-size: small;">Ada kecenderungan yang sangat besar pada semua orang untuk mengingat suatu website dengan extension .com. Bahkan sering kita mendengar orang-orang bercanda dengan kata “dot com”. Kita sering mendengar suatu situs terkenal seperti facebook, twitter, atau youtube, dan ketika kita mengetik situs tersebut pada browser, yang dicoba pertama pasti .com.</span><br />
<br />
<span style="font-size: small;">Untuk itu jika Anda ingin memilih nama domain, sebisa mungkin Anda mencari dengan extension .com. Namun kadang kala extension lain bisa sangat menarik, seperti del.icio.us walaupun saat ini mereka menggunakan <a href="http://www.delicious.com/">delicious.com</a>.</span><br />
<br />
<span style="font-size: small;">Sedangkan jika website Anda nantinya akan digunakan untuk bisnis online atau toko online, lebih baik menggunakan extension .co.id karena lebih meyakinkan bagi calon klien Anda.</span><br />
<br />
<span style="font-size: small;"><b>Jumlah Karakter dan Suku Kata</b> </span><br />
<br />
<span style="font-size: small;">Agar nama domain mudah diingat oleh users, jumlah karakter jangan terlalu panjang. Dan jumlah suku kata jangan lebih dari 3 suku kata. Kebanyakan website terkenal menggunakan 2 suku kata, seperti google (go-gel), yahoo (ya-hu), facebook (fes-buk), twitter (twit-ter), youtube (yu-tub), dll.</span><br />
<br />
<span style="font-size: small;"><b>Mudah Diucapkan dan Dieja</b></span><br />
<br />
<span style="font-size: small;">Untuk test pengejaan, gunakan test telp. Caranya, telp teman Anda dan suruh mengeja huruf-huruf pada nama domain yang Anda sebutkan. Jika pengejaan salah pada kesempatan pertama, cari yang lain.<img alt=":)" class="wp-smiley" src="http://www.naufala.com/blog/wp-includes/images/smilies/icon_smile.gif" /></span> <br />
<br />
<span style="font-size: small;"><b>Kata Kunci dan Diskriptif</b></span><br />
<br />
Nama domain harus menjelaskan tentang isi web tersebut. Contoh, web lokal yaitu <a href="http://www.bekas.com/">bekas.com</a> yang berisi tentang jual-beli barang bekas. Namun hal ini tidak mutlak, karena saat ini untuk mencari nama domain yang mengandung kata kunci sangatlah susah, terutama untuk extension .com.<br />
<span style="font-size: small;"></span><br />
<span style="font-size: small;">Alternatif lain, Anda membuat dan membentuk sendiri merek dagang (<i>branding</i>). Jika Anda lihat 10 besar ranking website di <a href="http://www.alexa.com/">Alexa</a>, nama domain mereka tidak menggunakan kata kunci tetapi mereka membentuk sendiri merek dagang. Contoh : <a href="http://www.google.com/">Google</a>, <a href="http://www.facebook.com/">Facebook</a>, <a href="http://www.youtube.com/">Youtube</a>, <a href="http://www.yahoo.com/">Yahoo</a>, dll.</span><br />
<br />
<span style="font-size: small;">Untuk nge-cek apakah nama domain bidikan Anda sudah terpakai atau belum, gunakan tools <a href="http://www.naufala.com/tools/cek-nama-domain/">Cek Nama Domain</a>. Jika sudah terpakai, dan Anda ingin tahu siapa pemiliknya, gunakan tools <a href="http://www.naufala.com/tools/cek-whois-domain/">Cek Whois Domain</a>.</span><br />
<br />
<span style="font-size: small;">Sumber : <a href="http://www.naufala.com/" target="_blank">http://www.naufala.com/ </a></span></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com1tag:blogger.com,1999:blog-8586594373800689508.post-46778329907783433632011-11-10T10:51:00.000-08:002011-11-10T10:54:00.081-08:005 Kesalahan Desain Website Perusahaan<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYYttHrUq7eR4ZRnTM1s9r_frm-NCU_QbjONGXj0PfoQrYuYBD_TAPccb3qqVp3IKVarMCOg135WNdjjYq3ThdC_jFKEEHZMIgtezt1016F8AZm1y75m3ByOEmud3iHyrKQFa1wYk0wDEr/s1600/picture-11.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYYttHrUq7eR4ZRnTM1s9r_frm-NCU_QbjONGXj0PfoQrYuYBD_TAPccb3qqVp3IKVarMCOg135WNdjjYq3ThdC_jFKEEHZMIgtezt1016F8AZm1y75m3ByOEmud3iHyrKQFa1wYk0wDEr/s200/picture-11.jpg" width="200" /></a></div><div class="fullpost" style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Website merupakan salah satu bagian penting dari pemasaran dan branding bagi perusahaan, karena website merupakan sarana atau pusat informasi tentang perusahaan. Maka, desain dan pengolahan database dari sebuah website perusahaan harus benar-benar diperhatikan dalam proses pembuatannya. Jika salah dalam mendesain sebuah website maka akan berakibat negatif terhadap bisnis perusahaan tersebut.</span> <span style="font-size: small;">Berikut adalah 5 kesalahan umum desain web yang harus dihindari :</span><br />
<br />
<span style="font-size: small;"> </span><br />
<br />
<span style="font-size: small;"><b>1. Navigasi Jelek</b></span><br />
<span style="font-size: small;">Pengunjung mengakses website, karena satu hal yaitu kebutuhan informasi yang spesifik. Akan menjadikan para pengunjung frustasi dan segera meninggalkan website tersebut jika mereka tidak segera mendapatkan inti informasi dari website dan perusahaan tersebut.</span><br />
<a name='more'></a><br />
<span style="font-size: small;">Navigasi yang baik dari sebuah website akan menjadikan pengunjung nyaman untuk mengakses website tersebut dan mendapatkan banyak informasi dari tiap-tiap bagian halaman website. Tentu saja hal ini akan meningkatkan jumlah pengunjung potensial yang juga akan berpengaruh pada peningkatan penjualan, yang merupakan tujuan utama dari pembuatan website.</span><br />
<br />
<span style="font-size: small;">Navigasi website memiliki 2 pengaruh utama yaitu kegunaan dan aksesibilitas, maka navigasi merupakan bagian penting yang harus jadi perhatian. Inti dari navigasi adalah kemudahan pengunjung untuk berpindah dari satu halaman ke halaman yang lain. Jangan pernah membuat pengunjung bingung dia sedang berada pada bagian website mana, dan bingung harus kemana untuk memperoleh informasi produk / jasa yang lebih lengkap.</span><br />
<br />
<span style="font-size: small;"><b>2. Tidak Ada Kata Ajakan</b></span><br />
<span style="font-size: small;">Kesalahan mendasar dari banyak web perusahaan ataupun bisnis online adalah menggunakan banyak tulisan dan penjelasan yang berbelit-belit tanpa diakhiri dengan kalimat ajakan, seperti ajakan untuk mendaftar, membeli, menghubungi admin, dll. Mendatangkan banyak pengunjung ke website perusahaan memang sangat penting, tetapi hal itu akan jadi sia-sia jika pengunjung tidak melakukan suatu tindakan yang memberikan keuntungan untuk perusahaan.</span><br />
<br />
<span style="font-size: small;">Pertanyaan yang sering muncul pada pengunjung atau calon customer adalah “Apa untungnya buat saya?” dan “Apa yang harus saya lakukan?”. Maka untuk mengajak pengunjung website untuk segera membeli produk atau menggunakan jasa Anda, jelaskan terlebih dahulu kepada pengunjung, “Apa keuntungan jika membeli produk ataupun menggunakan jasa Anda” dan “Apa yang harus dilakukan jika memang pengunjung tertarik untuk membeli produk ataupun jasa”.</span><br />
<br />
<span style="font-size: small;"><b>3. Warna Dan Kontras Yang Buruk</b> </span><br />
<span style="font-size: small;">Pemilihan warna dan kontras pada website memang bukan prioritas utama, tetapi tetap harus diperhatikan. Karena jika warna teks tidak memiliki kontras yang cukup dengan warna background, maka teks tersebut susah untuk dibaca terutama bagi pengunjung yang memiliki gangguan penglihatan atau buta warna.</span><br />
<br />
<span style="font-size: small;">Warna standart yang biasa digunakan adalah warna hitam (#000000) untuk teks, dan putih (#FFFFFF) untuk background. Atau background bisa dikurangi sampai (#DDDDDD) supaya tidak terlalu menyilaukan. Untuk mencoba, ada tools menarik untuk menentukan warna kontras : <a href="http://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</a> (tunggu <a href="http://www.naufala.com/tools/">tools</a> sejenis versi kami <img alt=":)" class="wp-smiley" src="http://www.naufala.com/blog/wp-includes/images/smilies/icon_smile.gif" /> )</span><br />
<br />
<span style="font-size: small;"><b>4. Konten Tidak Jelas Dan Berbelit-Belit</b> </span><br />
<span style="font-size: small;">Berhubungan dengan poin 1 dan 2, yang dibutuhkan pengunjung adalah informasi yang singkat, padat dan jelas. Jika konten website perusahaan berisi tentang informasi yang tidak jelas, berbelit-belit, dan tidak ada link dari satu informasi ke informasi lain yang berhubungan, hal ini akan sangat membosankan bagi pengunjung.</span><br />
<br />
<span style="font-size: small;">Kebiasaan pengunjung ketika masuk suatu halaman website, mereka akan membaca secara cepat 1 – 2 paragraf awal. Jika merasa konten tersebut bukan yang mereka cari, maka pengunjung akan melihat sekilas keseluruhan tampilan website. Jika masih tidak ada sesuatu yang menarik, maka pengunjung akan segera pergi dari website tersebut.</span><br />
<br />
<span style="font-size: small;">Untuk menghindari hal tersebut, buat <i>hierarchy</i> daftar isi / konten ditempat dan ukuran yang mudah terlihat, sehingga memudahkan pengunjung untuk mencari informasi yang dibutuhkan. Jika jumlah konten website terlalu banyak, pilih sebagian yang penting bagi pengunjung.</span><br />
<br />
<span style="font-size: small;"><b>5. Tampilan Semrawut</b></span><br />
<span style="font-size: small;">Satu lagi kesalahan yang sering terjadi pada website perusahaan adalah tampilan website yang semrawut. Hal ini dikarenakan banyaknya informasi yang ingin ditampilkan dan dijejalkan pada satu halaman terutama pada halaman home. Belum lagi jika ditambah dengan iklan baik iklan gambar atau iklan teks di bagian header, sidebar, atau footer.</span><br />
<br />
<span style="font-size: small;">Hal tersebut mengakibatkan website jadi berat, semrawut, dan tidak terbaca atau inti informasi didalamnya tidak bisa dipahami oleh pengunjung. Akibat selanjutnya adalah pengunjung tidak akan lagi berkunjung ke website tersebut.</span><br />
<span style="font-size: small;">Untuk menghindarinya, ada beberapa poin penting yang perlu diperhatikan :</span><br />
<ul><li><span style="font-size: small;">Jangan menambahkan elemen website yang tidak penting bagi pengunjung. Penting bagi perusahaan belum tentu penting bagi pengunjung. Ingat, membuat website perusahaan untuk pengunjung bukan untuk pemilik perusahaan.</span></li>
<li><span style="font-size: small;">Jangan mencampur dua atau lebih bagian website pada satu halaman. Pisahkan mereka pada halaman tersendiri, misal info perusahaan, daftar produk / jasa, kontak perusahaan, dll. Yang perlu dicatumkan hanya link navigasi ke tiap-tiap halaman tersebut.</span></li>
<li><span style="font-size: small;">Hindari penggunaan file gambar dengan ukuran yang besar.</span></li>
<li><span style="font-size: small;">Inti dari desain adalah membantu pengunjung menemukan informasi yang mereka cari, jadi bedakan area untuk konten, promosi, dan iklan.</span></li>
</ul><span style="font-size: small;"> Sumber : <a href="http://www.naufala.com/" target="_blank">http://www.naufala.com/</a><span id="goog_271301307"></span><span id="goog_271301308"></span><a href="http://www.blogger.com/"></a></span></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com0tag:blogger.com,1999:blog-8586594373800689508.post-57714379643843054252011-11-10T10:44:00.000-08:002011-11-10T10:45:07.417-08:00Kualitas Situs Web dan Blog Menurut Google dan Yahoo<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmWgHn-KNwcu1PziwZZIU5RlITPbeaJNeazyNglvhohAnDyw21tWAmv3PtibH66QdACIZe9URsp3kBg33gNWGa3KIqEIi2ZZnH1Cf8I_g36KCW9ejLZfx_NJ50ZIS-oUExMCvA_dIZc-Hq/s1600/google-quality-score.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmWgHn-KNwcu1PziwZZIU5RlITPbeaJNeazyNglvhohAnDyw21tWAmv3PtibH66QdACIZe9URsp3kBg33gNWGa3KIqEIi2ZZnH1Cf8I_g36KCW9ejLZfx_NJ50ZIS-oUExMCvA_dIZc-Hq/s200/google-quality-score.gif" width="200" /></a></div><div style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Setiap orang yang memiliki situs website atau blog pasti ingin memiliki peringkat yang baik dalam hasil pencarian di <i>Search Engine</i> seperti <a href="http://www.google.com/">Google</a> dan <a href="http://www.yahoo.com/">Yahoo</a>. Karena SEO yang baik berarti banyak pengunjung, banyak pengunjung berarti banyak penjualan, banyak penjualan berarti banyak pendapatan.</span> </div><div style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Untuk itu biasanya para pemilik situs selalu berlomba-lomba untuk memperbaiki SEO dengan tujuan memperbaiki peringkat di hasil pencarian. Dan tidak sedikit yang menggunakan cara curang atau biasa disebut Black SEO.</span></div><div style="font-family: inherit; text-align: justify;"></div><div style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Banyak situs yang sukses dengan Black SEO, tetapi lebih banyak yang gagal. Akibatnya justru memperburuk peringkat situs web atau blog di Search Engine. Kalaupun ada yang sukses dengan Black SEO, itu hanya sementara saja. Percayalah, lambat laun situs mereka akan lenyap di hasil pencarian Search Engine.</span></div><div style="font-family: inherit; text-align: justify;"><br />
</div><div style="font-family: inherit; text-align: justify;"></div><div style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Seperti apa kata mbah Google, dalam membuat situs web atau blog, “<i>Focus on the user and all else will follow</i>” – utamakan pada kepentingan pengunjung. Semakin lama, algoritma Search Engine semakin baik. Situs website atau blog yang baik di mata pengunjung, baik juga di mata Search Engine, dan Black SEO semakin terkucilkan.</span></div><a name='more'></a><br />
<div style="font-family: inherit; text-align: justify;"></div><div style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Untuk itu, jika anda ingin membuat website atau blog, buat sebaik mungkin di mata pengunjung dan juga di mata SEO. Berikut beberapa pedoman untuk membuat situs website dan blog yang berkualitas menurut Google dan Yahoo :</span></div><div style="font-family: inherit; text-align: justify;"></div><ul style="font-family: inherit; text-align: justify;"><li><span style="font-size: small;">Menulis judul dalam tag <TITLE></TITLE> dalam setiap halaman, dan tag title tersebut menjelaskan secara akurat tentang isi dari halaman tersebut (maksimal 64 karakter).</span></li>
<li><span style="font-size: small;">Cobalah untuk membuat dua halaman baru setiap minggu. Jika tidak bisa, cobalah seminggu sekali. Minimal, buat halaman baru setiap sebulan sekali.</span></li>
<li><span style="font-size: small;">Usahakan konten halaman baru Anda adalah konten yang unik, menarik, dan berisi informasi yang berguna bagi pembaca.</span></li>
<li><span style="font-size: small;">Usahakan halaman website atau blog bisa di akses dengan cepat, tidak berat, tidak berisi file gambar yang besar, dan tidak ada <i>broken link</i> (link rusak).</span></li>
<li><span style="font-size: small;">Usahakan semua halaman website atau blog bisa diakses melalui kode link normal <A HREF> (bukan menggunakan Javascript ataupun Flash).</span></li>
<li><span style="font-size: small;">Memasang link ke situs web atau blog lain yang berkualitas dan relevan. Jangan memberikan link ke situs yang tidak relevan dan tidak berkualitas apalagi ke situs yang melanggar TOS.</span></li>
<li><span style="font-size: small;">Ikuti standart desain web sesuai dengan <a href="http://w3schools.com/">W3Schools</a> dan hindari kesalahan-kesalahan dalam mendesain website atau blog.</span></li>
<li><span style="font-size: small;">Jangan menghabiskan waktu anda untuk mencari trik agar peringkat di Search Engine meningkat. Percayalah, jika situs web dan blog Anda menarik bagi pengunjung Anda, peringkat akan terus meningkat. Hal ini dikarenakan Algoritma Search Engine selalu ada perbaikan disetiap waktu.</span></li>
<li><span style="font-size: small;">Jangan bersusah payah mencari backlink ke setiap halaman situs Anda. Jika konten halaman Anda menarik, backlink akan datang dengan sendirinya tanpa Anda mencari atau meminta.</span></li>
<li><span style="font-size: small;">Sebagai tambahan, tulis meta tag <i>description</i> dan <i>keywords</i> sesuai dengan konten halaman.</span></li>
<li><span style="font-size: small;">Jangan menggunakan program otomatis untuk men-<i>submit</i> situs Anda ke Search Engine.</span></li>
<li><span style="font-size: small;">Jangan menggunakan teks yang tersembunyi dari penglihatan pengunjung.</span></li>
<li><span style="font-size: small;">Jangan menggunakan program otomatis untuk membuat halaman web atau blog. Terlalu banyak halaman website atau blog tanpa diimbangi banyaknya pengunjung, dianggap buruk oleh Search Engine.</span></li>
</ul><div style="font-family: inherit; text-align: justify;"></div><div style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Ada tambahan dari Anda?</span></div><div style="font-family: inherit; text-align: justify;"><br />
</div><div style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Sumber : <a href="http://www.naufala.com/" target="_blank">http://www.naufala.com/ </a></span></div><div class="fullpost" style="font-family: inherit; text-align: justify;"></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com0tag:blogger.com,1999:blog-8586594373800689508.post-72164800667861992022011-11-10T10:40:00.000-08:002011-11-12T03:09:21.147-08:00On Page SEO – Cara Meningkatkan Traffic Web dan Blog<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSln5_KPiN5vtEZ4-cBUgSPa9WROjq0Z8vMCpY7nQi4n58gYBMM_15baPv1PFyHkI4FeInlQWw2CeggY7U8zy3JEtBMul7D3wv_C8adACKLfBsbJAwXwHa1IWVqkfSnEZ3NBmxTwpER4WS/s1600/traffic.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSln5_KPiN5vtEZ4-cBUgSPa9WROjq0Z8vMCpY7nQi4n58gYBMM_15baPv1PFyHkI4FeInlQWw2CeggY7U8zy3JEtBMul7D3wv_C8adACKLfBsbJAwXwHa1IWVqkfSnEZ3NBmxTwpER4WS/s200/traffic.gif" width="200" /></a></div><div class="fullpost" style="font-family: inherit; text-align: justify;"><span style="font-size: small;"><b>On Page SEO</b> (<i>Search Engine Optimization</i>) adalah pengoptimalan suatu konten website atau blog pada <i>Search Engine</i> menggunakan elemen-elemen dalam halaman web atau blog tersebut, seperti teks, image, meta tag, dan link. On Page SEO bukanlah suatu trik untuk memanipulasi Search Engine, melainkan hanya sarana untuk memudahkan Search Engine meng-indeks suatu halaman web atau blog.</span> <span style="font-size: small;">Berikut adalah cara-cara memaksimalkan SEO melalui On Page SEO :</span><br />
<span style="font-size: small;"><b>1. Atas ke bawah, kiri ke kanan</b></span><br />
<span style="font-size: small;">Aturan <i>Crawler</i> dari Search Engine membaca suatu halaman web atau blog adalah dari atas ke bawah dan dari kiri ke kanan. Jadi Anda harus mengatur halaman situs Anda sesuai dengan aturan ini. Yang harus dilakukan :</span><br />
<ul><li><span style="font-size: small;">Letakkan teks judul yang mengandung kata kunci di kiri atas.</span></li>
<li><span style="font-size: small;">Crawler menyukai konten. Jadi setelah header dan judul, disitulah konten halaman seharusnya diletakkan.</span></li>
<li><span style="font-size: small;">Setelah itu bagian lain yang kurang penting diletakkan di bagian kanan atau bawah.<a name='more'></a></span></li>
</ul><span style="font-size: small;"><b>2. Letakkan kata kunci di dalam nama domain</b></span><br />
<span style="font-size: small;">Crawler akan memberi nilai lebih pada suatu kata kunci yang diletakkan pada nama domain. Jadi sebisa mungkin Anda menggunakan target kata kunci ke dalam nama domain. Dan juga gunakan layanan hosting yang populer, yang memungkinkan web atau blog memperoleh <i>traffic</i> lebih.</span><br />
<br />
<span style="font-size: small;"><b>3. Prioritas letak kata kunci di halaman web atau blog</b></span><br />
<span style="font-size: small;">Ada prioritas letak kata kunci suatu halaman yang dibaca crawler, yaitu : <b>domain atau url > title tag > image tag > 200 kata pertama > kata-kata setelahnya</b>. Maka untuk mengoptimalkan suatu kata kunci, ikuti petunjuk tersebut. Tetapi Anda harus berhati-hati dan pertimbangkan <i>keyword density</i>, dan jangan coba-coba mencurangi Search Engine.</span><br />
<br />
<span style="font-size: small;"><b>4. Analisa kompetitor Anda dalam mengoptimalkan kata kunci</b></span><br />
<span style="font-size: small;">Coba Anda lihat dalam hasil pencarian suatu kata kunci di Seach Engine (<a href="http://www.google.com/">Google</a> atau <a href="http://www.yahoo.com/">Yahoo</a>). Pelajari bagaimana kompetitor Anda mengoptimalkan kata kunci tersebut. Lihat juga dari mana saja kompetitor memperoleh link. Tidak ada salahnya Anda mencobanya, asalkan tidak menggunakan cara-cara yang curang (<i>Black Hat SEO</i>).</span><br />
<br />
<span style="font-size: small;"><b>5. Gunakan HTML tag dan juga tag dalam image (gambar)</b></span><br />
<span style="font-size: small;">Ada beberapa jenis HTML tag yang bisa digunakan dalam halaman web atau blog, seperti meta tag, title tag, content tag, dll. Dan juga sangat penting untuk memberikan alt tag dan title tag pada image (gambar), karena crawler tidak bisa membaca grafik.</span><br />
<br />
<span style="font-size: small;"><b>6. Link-kan halaman utama (home page) ke setiap halaman web atau blog</b></span><br />
<span style="font-size: small;">Ketika pengunjung datang ke halaman web atau blog Anda melalui Search Enginge, tidak semua orang akan mencari halaman utama. Maka navigasi ke halaman utama sangat penting, supaya pengunjung lebih mudah mengingat nama situs web atau blog Anda.</span><br />
<br />
<span style="font-size: small;"><b>7. Buat sitemap</b></span><br />
<span style="font-size: small;"><i>Sitemap</i> memudahkan Search Engine meng-indeks tiap halaman web dan blog. Sehingga setiap Anda membuat halaman baru, kemungkinan halaman tersebut untuk cepat ter-indeks semakin besar. Untuk membuat sitemap, Anda bisa mencari di Google dengan kata kunci “XML Sitemap Generator”. Akan banyak tersedia layanan untuk membuat sitemap secara gratis.</span><br />
<br />
<span style="font-size: small;"><b>8. Sertakan file robots.txt ke folder utama dari hosting</b></span><br />
<span style="font-size: small;">File robots.txt ini akan dibaca pertama kali oleh setiap crawler Search Engine yang datang. Untuk petunjuk cara membuatnya, akan saya bahas di postingan berikutnya. Untuk sementara silahkan cari di Google.</span><br />
<br />
<span style="font-size: small;"><b>9. Usahakan konten web atau blog sesuai dengan judul</b></span><br />
<span style="font-size: small;">Hal ini berhubungan dengan <i>keyword density</i>. Jika Anda membuat judul yang heboh tetapi inti dari konten tidak sesuai judul, maka susah halaman tersebut bersaing di Search Engine. Usahakan kata kunci yang ada pada judul, juga sering ditulis dalam konten. Beberapa pendapat mengatakan keyword density yang terbaik sekitar 4%.</span><br />
<br />
<span style="font-size: small;">Sumber : <a href="http://www.naufala.com/" target="_blank">http://www.naufala.com/ </a></span></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com0tag:blogger.com,1999:blog-8586594373800689508.post-22739524215530245262011-11-10T10:36:00.000-08:002011-11-12T03:10:00.328-08:00Kelebihan Dan Kekurangan Website Menggunakan Teknologi Flash<div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRa2ayfTvUkpFHqQbHzPD-w2U0vdVi0RqL820_N_R8WNpTIxukE5nCp2HYrWh-w03k8xyEjWdabfx0e5uT9ysNHb1TsLK9cfkDBog3HF1nWWfSMLsUeoeuH42SY7JgETPy2VfAwy2fua_Q/s1600/flash-website-flowchart.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRa2ayfTvUkpFHqQbHzPD-w2U0vdVi0RqL820_N_R8WNpTIxukE5nCp2HYrWh-w03k8xyEjWdabfx0e5uT9ysNHb1TsLK9cfkDBog3HF1nWWfSMLsUeoeuH42SY7JgETPy2VfAwy2fua_Q/s200/flash-website-flowchart.gif" width="200" /></a></div><div class="fullpost" style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Apakah Anda sedang mempertimbangkan untuk membuat sebuah website berbasis flash? Akhir-akhir ini banyak perusahaan yang menginginkan sebuah website perusahaan yang menggunakan teknologi flash, tetapi mereka tidak tahu apa kelebihan dan kekurangan menggunakan flash untuk sebuah website.</span> <span style="font-size: small;">Secara tampilan, website flash sangat menarik karena penuh dengan animasi. Tetapi untuk SEO, website flash memiliki banyak kekurangan. Jadi sebelum Anda menentukan untuk membuat sebuah website flash atau website non-flash, ketahui dulu apa <b>Kelebihan dan Kekurangan Website Menggunakan Teknologi Flash</b>.</span><br />
<br />
<span style="font-size: small;"><b>Kelebihan / Keuntungan Menggunakan Flash</b></span><br />
<span style="font-size: small;">Kelebihan yang sangat menonjol dari teknologi flash adalah kemampuannya untuk membuat sebuah website yang interaktif dan ekspresif. Mulai dari membuat tampilan yang sederhana hingga membuat sebuah video bahkan sebuah game, website Anda akan terlihat sangat menarik bagi pengunjung situs web Anda.</span><br />
<span style="font-size: small;">Kelebihan lain dari menggunakan teknologi flash untuk website adalah tampilan flash kompatibel dengan semua browser (<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home">IE</a>, <a href="http://www.mozilla.com/en-US/products/download.html">Mozilla</a>, <a href="http://www.google.com/chrome">Google Chrome</a>, <a href="http://www.opera.com/download/">Opera</a>, dll), tidak seperti tampilan HTML dan CSS yang tiap browser kadang berbeda dalam menterjemahkan kode sebuah halaman web. Jadi tampilan website akan sama persis di semua browser internet kecuali ditentukan versi flash terbaru.</span><br />
<span style="font-size: small;"></span><br />
<a name='more'></a><br />
<span style="font-size: small;"><b>Kekurangan / Kerugian Menggunakan Flash</b></span><br />
<span style="font-size: small;">Kekurangan pertama yang mungkin pengunjung website Anda bisa langsung rasakan adalah waktu loading halaman yang sangat berat dan lambat, karena file flash memiliki ukuran yang besar. Hal ini akan mempengaruhi jumlah pengunjung website Anda. Tidak peduli semenarik apa website Anda, jika harus menunggu terlalu lama maka pengunjung akan segera menutupnya.</span><br />
<span style="font-size: small;">Kekurangan berikutnya, untuk bisa mengakses sebuah video di website flash, dibutuhkan software <a href="http://www.adobe.com/support/flashplayer/downloads.html">flash player</a>. Jika komputer pengunjung tidak memiliki flash player, maka muncul link untuk men-download software tersebut. Hal ini akan mengurangi kenyamanan pengunjung web Anda.</span><br />
<span style="font-size: small;">Masalah lain yang pasti merugikan adalah susahnya mengoptimalkan sebuah website flash pada Search Engine. Hal ini dikarenakan beberapa bahkan hampir semua Search Engine tidak dapat membaca teks yang ada dalam file flash. Akibatnya spider tidak akan mengindeks teks yang ada, dan peringkat search engine pasti rendah.</span><br />
<span style="font-size: small;">Kemajuan teknologi saat ini, memudahkan pengunjung mengakses internet melalui cellular phone / mobile phone. Sehingga terjadi peningkatan tajam pengguna internet mobile. Sayangnya untuk website flash, sebagian besar perangkat mobile seperti <a href="http://www.apple.com/iphone/">iPhone</a> dan <a href="http://www.blackberry.com/">BlackBerry</a> tidak dapat mengaksesnya.</span><br />
<span style="font-size: small;">Untuk itu jika Anda ingin membuat sebuah website, pertimbangkan apakah menggunakan flash atau tidak. Kalau Anda menginginkan sebuah tampilan yang menarik, ada pengganti flash yang tidak kalah menarik dan SEO friendly. Anda bisa menggunakan MooTools, jQuery, JavaScript, dan HTML5.</span><br />
<br />
<span style="font-size: small;">Sumber : <a href="http://www.naufala.com/" target="_blank">http://www.naufala.com/ </a></span></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com1tag:blogger.com,1999:blog-8586594373800689508.post-6444347363332269652011-11-10T10:31:00.000-08:002011-11-12T03:10:26.855-08:00WordPress Plugins Penting Untuk Blog Baru<div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8wcDwM6QqC9GDDyRFzePPJXYa4URIhaPOu-oxkUAQzy5jhFij7-vFlneqcFVPboqFN1Wi-GhnTjYNKwKZrPiKkqxD6D61bOW1q5AmzG_HwY-R28iRCY4SGToxNOzEhtkQwUDkhLmB-oxj/s1600/14-300x300.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8wcDwM6QqC9GDDyRFzePPJXYa4URIhaPOu-oxkUAQzy5jhFij7-vFlneqcFVPboqFN1Wi-GhnTjYNKwKZrPiKkqxD6D61bOW1q5AmzG_HwY-R28iRCY4SGToxNOzEhtkQwUDkhLmB-oxj/s200/14-300x300.jpg" width="200" /></a></div><div style="text-align: justify;">Tidak bisa dipungkiri, untuk saat ini <b><a href="http://wordpress.org/">WordPress</a></b> merupakan CMS yang paling populer untuk membuat blog. Setiap harinya muncul lebih dari puluhan ribu blog baru yang menggunakan wordpress. Dan dukungan plugins yang tersedia saat ini mencapai 14 ribu lebih. </div><div style="text-align: justify;">Tentu saja hal ini akan membuat kita bingung untuk memilih plugins yang penting untuk mendukung blog kita. Karena tidak mungkin kita mencoba satu persatu semua plugins yang tersedia.</div><div style="text-align: justify;">Namun ada beberapa plugins yang populer yang biasa digunakan oleh para blogger di seluruh dunia, terutama buat blog baru. Berikut adalah plugins yang wajib Anda gunakan untuk blog Anda :</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">1. <b><a href="http://wordpress.org/extend/plugins/wp-super-cache/">WP Super Cache</a></b></div><div style="text-align: justify;">Selain berguna untuk mempercepat akses halaman blog, plugins ini juga berfungsi untuk menghindari crash yang bisa terjadi akibat proses PHP pada server. Setiap halaman blog akan di-duplikasi dalam format html.</div><a name='more'></a><div style="text-align: justify;"></div><div style="text-align: justify;">2. <b><a href="http://wordpress.org/extend/plugins/bad-behavior/">Bad Behavior</a></b></div><div style="text-align: justify;">Secara default, wordpress telah menyediakan Akismet untuk mencegah dan mengatasi spam. Namun untuk saat ini akismet tidak lagi bisa digunakan secara gratis, dan Bad Behavior menjadi alternative yang terbaik.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">3. <b><a href="http://wordpress.org/extend/plugins/google-sitemap-generator/">Google XML Sitemaps</a></b></div><div style="text-align: justify;">Plugins ini membuat sitemap dari blog wordpress yang membantu Search Engine seperti Google, Bing, dan Yahoo bisa mengindeks lebih cepat dari setiap halaman blog. Dan plugins ini juga akan memberitahukan kepada Search Engine jika terdapat konten baru.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">4. <b><a href="http://wordpress.org/extend/plugins/all-in-one-seo-pack/" target="_blank">All in One SEO Pack</a></b></div><div style="text-align: justify;">Plugins ini merupakan salah satu solusi SEO terbaik pada website atau blog WordPress. Plugins ini memiliki banyak opsi yang sangat berguna untuk mengoptimalkan blog, termasuk mengatur tipe posting, canonical URL, dll.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"></div><div style="text-align: justify;">5. <b><a href="http://wordpress.org/extend/plugins/wp-dbmanager/" target="_blank">WP-DBManager</a></b></div><div style="text-align: justify;">Plugins ini sangat berguna dalam mengatur database yang ada, seperti backup database, memperbaiki, dan mengoptimalkan database sehingga blog Anda bisa berfungsi lebih optimal.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Sumber : <a href="http://www.naufala.com/" target="_blank">http://www.naufala.com/ </a></div><div class="fullpost" style="text-align: justify;"></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com1tag:blogger.com,1999:blog-8586594373800689508.post-14539547149463074082011-11-10T10:12:00.000-08:002011-11-12T03:12:56.980-08:00Jamu Sehat CSS Untuk Internet Explorer<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjUaUKElng-SVXPgGPKrNLUoGYEDgiFmg6OXOYFCEYCFp90L27gcMel1IZRW72e6JNpDDEeDXwbmBe9M0apJjGsYOmqp6LdL2gXpFJi7aQ4WFA1diZemchfffi4r3bbk-7rRG4BOC6DwvR/s1600/ie_logo_o.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjUaUKElng-SVXPgGPKrNLUoGYEDgiFmg6OXOYFCEYCFp90L27gcMel1IZRW72e6JNpDDEeDXwbmBe9M0apJjGsYOmqp6LdL2gXpFJi7aQ4WFA1diZemchfffi4r3bbk-7rRG4BOC6DwvR/s200/ie_logo_o.JPG" width="200" /></a></div><div class="fullpost" style="text-align: justify;">Dalam <a href="http://www.ilmuwebsite.com/tutorial-css">tutorial css</a> kali ini penulis akan membawakan <a href="http://www.ilmuwebsite.com/tutorial-css">Tips CSS</a> untuk Internet Explorer. Ya, sampai detik <a href="http://www.ilmuwebsite.com/tutorial-css">tutorial</a> ini dibuat pun penulis masih saja menemui para web developer yang kerap kali menggunakan Internet Explorer sebagai browser dasar ketika melakukan proses pembuatan interface untuk aplikasi berbasis webnya. Entah apa yang ada dalam pikiran pihak atasan hingga meminta sang developer untuk tetap menggunakan Internet Explorer. Tapi itu bukan inti permasalahannya.<span id="more-4144"></span>Permasalahannya adalah, bagaimana ketika seorang developer itu tetap bisa menjaga tampilan layout atau interfacenya jika ada user yang menggunakan browser lain selain dari pada Internet Explorer, misalkan menggunakan Chrome ataupun Mozilla Firefox. Oke, sebetulnya untuk menjaga agar tampilan di browser berbagai browser tetap sama, penulis telah menjelaskannya di artikel sebelum-sebelumnya. Yakni artikel berikut ini <a href="http://www.ilmuwebsite.com/tutorial-html/standards-compliance-quirks-mode-html">http://www.ilmuwebsite.com/tutorial-html/standards-compliance-quirks-mode-html</a>,<br />
<a name='more'></a><br />
dan<br />
<a href="http://www.ilmuwebsite.com/web-desain-development/tutorial-css/web-design-tips-css-reset">http://www.ilmuwebsite.com/web-desain-development/tutorial-css/web-design-tips-css-reset</a>. Tapi tetap saja ada yang kurang, karena pada dasarnya besarnya pixel di internet explorer agak sedikit berbeda dengan browser-browser yang lain, misalnya ketika kita memberikan height ataupun width pada firefox maupun chrome itu berbeda sekali ukurannya dengan Internet Explorer. Sehingga hal seperti inilah yang harus kita tangani.<br />
Jika sudah seperti ini rasanya mau tidak mau seorang developer harus memperlakukan IE secara khusus, tentunya buang-buang waktu, tapi demi membuat sang bos senang, lebih baik gunakan saja cara ini.<br />
Ketika masuk dalam tahapan proses styling menggunakan CSS, perlu ditambahkan barisan kode yang diletakkan di dalam tag <head> seperti ini :<br />
<span style="color: blue;"><head><br />
…<br />
<!–[if IE]><br />
<link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” /><br />
<![endif]–><br />
…<br />
</head></span><br />
<span style="color: black;">H</span>al ini digunakan untuk memperlakukan ie secara khusus, sehingga Anda membutuhkan 2 file css nantinya, satu untuk Internet Explorer, dan satu lagi untuk browser selain Internet Explorer,. Benar-benar membuang waktu bukan? Mau nggak mau… mau nggak mau.. mau nggak mau asal kumpul… :D (*slank mode). Barisan kode tersebut memiliki arti, jika yang digunakan adalah browser Internet Explorer maka style yang diapit itu yang akan digunakan oleh browser untuk menampilkan layout webnya. Ada juga jenis yang lain :<br />
<span style="color: blue;"><!–[if !IE]><!–><br />
<link rel=”stylesheet” type=”text/css” href=”not-ie.css” /><br />
<!–<![endif]–></span><br />
<span style="color: black;">M</span>emiliki arti jika user menggunakan browser selain dari IE, maka gunakanlah file css tersebut.<br />
Barisan kode tersebut digunakan didalam tag <html><head>. Ada pula bentuk lain, Anda bisa memasukkannya kedalam file cssnya langsung. Misalkan penulis memiliki kode seperti ini<br />
<span style="color: blue;"><div id=”head”><br />
<img src=”http://www.ilmuwebsite.com/logo.png” /><br />
</div></span><br />
Nah biasanya ketika akan memberikan style kepada <div id=”head”> kita cukup panggil id selectornya saja dalam file css-nya seperti ini :<br />
<span style="color: blue;">#head{<br />
height:200px;<br />
}</span><br />
Ketika memberikan style height kepada browser ie cukup tambahkan : <br />
<span style="color: blue;">_height:200px;</span><br />
Menjadi :<br />
<span style="color: blue;">#head{<br />
height:200px;<br />
_height:200px; <br />
}</span><br />
<br />
<br />
<span style="color: blue;"><span style="color: black;">Sumber : <a href="http://www.ilmuwebsite.com/" target="_blank">www.ilmuwebsite.com</a></span> </span></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com0tag:blogger.com,1999:blog-8586594373800689508.post-34881417766459273892011-11-10T10:08:00.000-08:002011-11-12T03:13:26.784-08:00Membuat Form Multi Submit Dengan Multi Link<div class="separator" style="clear: both; font-family: inherit; text-align: justify;"><span style="font-size: small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5yb1c9QfcrOuKtBXFSBJeJ7YLWGRw6u2Mry8Qc1CowgDTk24MX2Ci4CDb95kmQ92nkRRRK8e0dP1bQhpwRrJ924A6AiZD_EIVbJl6bung5q5lG95Q5MFXpoeC890c3duezOzzDeroeeW5/s1600/red-delete-button-green-submit-button-blue-signup-button-full.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5yb1c9QfcrOuKtBXFSBJeJ7YLWGRw6u2Mry8Qc1CowgDTk24MX2Ci4CDb95kmQ92nkRRRK8e0dP1bQhpwRrJ924A6AiZD_EIVbJl6bung5q5lG95Q5MFXpoeC890c3duezOzzDeroeeW5/s200/red-delete-button-green-submit-button-blue-signup-button-full.png" width="200" /></a></span></div><div class="fullpost" style="font-family: inherit; text-align: justify;"><span style="font-size: small;">Masing-masing developer memiliki cara-cara individu tersendiri dalam memproses suatu form, ada yang menggunakan button submit, ada yang menggunakan link, ada juga yang menggunakan image, atau bahkan tidak ada yang menggunakan button, biasanya yang terakhir ini menggunakan bantuan lain yakni ajax form submission dan metode-metode lain. Namun bagaimana caranya menggunakan multi link untuk memproses suatu form.</span></div><div class="fullpost" style="font-family: inherit; text-align: justify;"></div><div class="fullpost" style="font-family: inherit; text-align: justify;"><span style="font-size: small;"></span></div><div class="fullpost" style="font-family: inherit; text-align: justify;"><span style="font-size: small;"><span id="more-4285"></span></span> <span style="font-size: small;">Pada artikel sebelumnya penulis pernah membahas bagaimana <a href="http://www.ilmuwebsite.com/tutorial-html/trik-membuat-submit-button-dengan-image">membuat submit button dengan link image</a> . Pada tutorial kali ini penulis akan menjelaskan kepada Anda, bagaimana caranya Membuat Form Multi Submit Dengan Multi Link. Sebelum ke inti pembahasan, banyak sekali alasan mengapa developer menggunakan metode ini, salah satunya adalah faktor layout, dan keindahan. Dan lagi membuat submit button dengan link ini dimemerlukan si submit ini harus berada di dalam tag <form></form> melainkan bisa diletakkan di luarnya, cukup dipanggil saja form apa yang akan di kirimkan datanya, kurang lebih seperti itu.</span><br />
<a name='more'></a><br />
<span style="font-size: small;">Kita siapkan terlebih dahulu 1 buah form dalam 1 file, misalkan file tersebut adalah <b>form.php</b>. Isinya kurang lebih adalah seperti ini :</span><br />
<span style="font-size: small;"><span style="color: blue;"><html></span></span><br />
<span style="font-size: small;"><head><title>Multi Submit Link</title></head></span><br />
<span style="font-size: small;"><body></span><br />
<span style="font-size: small;"><form action=”cek.php” name=”form_cek” id=”form_cek”></span><br />
<span style="font-size: small;"><label for=”nama”>Nama:</label><input type=”text” name=”nama” id=”nama” /></span><br />
<span style="font-size: small;"></form></span><br />
<span style="font-size: small;"><a href=”" onclick=”document.form_cek.action = ‘cari.php’; document.form_cek.method=’get’; </span><br />
<span style="font-size: small;">document.form_cek.submit(); return false;”>Cari</a></span><br />
<span style="font-size: small;"><a href=”" onclick=”document.form_cek.action = ‘edit.php’; document.form_cek.submit(); return </span><br />
<span style="font-size: small;">false;”>Edit</a></span><br />
<span style="font-size: small;"></body></span><br />
<span style="font-size: small;"></html></span><br />
<span style="font-size: small;">kemudian yang kedua adalah file <b>cari.php</b> berisi :</span><br />
<span style="font-size: small;"><span style="color: blue;"><?php echo $_REQUEST['nama'];?></span></span><br />
<span style="font-size: small;">dan terakhir file <b>edit.php </b>berisi :</span><br />
<span style="font-size: small;"><span style="color: blue;"><?php echo $_GET['nama'];?></span></span><br />
<span style="font-size: small;">lihat kembali di form.php, di form tersebut tidak ada submit button sama sekali tapi sebagai gantinya, kita menggunakan link sebagai submit buttonnya.</span><br />
<span style="font-size: small;"><a href=”" onclick=”document.form_cek.action = ‘cari.php’; document.form_cek.method=’get’;</span><br />
<span style="font-size: small;"> document.form_cek.submit(); return false;”>Cari</a></span><br />
<span style="font-size: small;">Submit button dengan link ini bisa berjalan dengan mulus dengan catatan, si form harus memiliki id dan name tentunya sehingga javascript memanfaatkan link untuk memanggil id si form tersebut seperti ini</span><br />
<span style="font-size: small;"><b>document.form_cek.action = ‘cari.php’; document.form_cek.method=’get’;</b></span><br />
<span style="font-size: small;"><b> document.form_cek.submit(); return false</b></span><br />
<br />
<span style="font-size: small;">Sumber : <a href="http://www.ilmuwebsite.com/" target="_blank">http://www.ilmuwebsite.com/ </a><b><br />
</b></span></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com0tag:blogger.com,1999:blog-8586594373800689508.post-53268524640375803272011-11-10T09:18:00.000-08:002011-11-12T03:14:05.507-08:00Web Design Tips: Menggunakan CSS Reset<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKF5ksl9cGcyXjEyVH1fSMglB-SF2_IUmgwa-NGhe8wYswLVLSib-NqEJi3sCrmDf6AdBGncVKhIq9SlV8VpYYB7tScD3Ut3190xdj2lwhdLqUboqeQCYCcQ87Bvz-f0DFzhdLm99xSEd/s1600/fierfox_eating_ie_post.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKF5ksl9cGcyXjEyVH1fSMglB-SF2_IUmgwa-NGhe8wYswLVLSib-NqEJi3sCrmDf6AdBGncVKhIq9SlV8VpYYB7tScD3Ut3190xdj2lwhdLqUboqeQCYCcQ87Bvz-f0DFzhdLm99xSEd/s200/fierfox_eating_ie_post.jpg" width="200" /></a></div><div class="fullpost" style="text-align: justify;"><span style="font-size: small;">Pada <a href="http://www.ilmuwebsite.com/tutorial-css/">tutorial css</a> kali ini saya akan membahas <a href="http://www.ilmuwebsite.com/tutorial-css/web-design-tips-css-reset">Tips Desain Web</a>. Sudah menjadi pengetahuan yang umum jika masing-masing browser Internet memiliki style bawaan tersendiri, sebagai contohnya margin default atau padding default pada Internet Explorer itu memiliki nilai yang berbeda dengan Mozilla Firefox ataupun Chrome, contoh yang lain, unordered list default milik Internet Explorer memiliki style berbeda dengan style pada firefox. Sehingga seorang web designer seringkali direpotkan oleh hal ini, biasanya seorang web designer menggunakan javascript untuk mendeteksi user menggunakan browser apa, kemudian jika user menggunakan browser internet maka javascript mencocokkan stylenya dengan file berisi style khusus untuk internet explorer, begitu juga dengan mozilla firefox dan browser lain, file stylenya juga berbeda.<span id="more-1398"></span> Benar-benar merepotkan karena kita harus membuat style yang berbeda untuk browser yang berbeda. Tapi hasilnya sangat baik.</span></div><div class="fullpost" style="text-align: justify;"><span style="font-size: small;"></span><br />
<a name='more'></a></div><div class="fullpost" style="text-align: justify;"><span style="font-size: small;">Penulis sendiri awalnya memang seperti itu, memang merepotkan. Tapi belakangan penggunaan <a href="http://www.ilmuwebsite.com/tutorial-css/web-design-tips-css-reset">CSS Reseter</a> semakin populer digunakan, karena fungsinya sama baiknya dengan menggunakan file file yang berisi style yang berbeda menyesuaikan dengan browsernya. Dalam teknik pencocokan style, ketika user menggunakan internet explorer maka style yang digunakan pun biasanya dinamakan dengan ie.css, jika user menggunakan firefox maka style yang digunakan biasanya dinamakan dengan default.css, dan lain-lain sebagainya, dalam teknik css reset, kita cukup menggunakan satu buah file css saja, namun di tambahkan dengan barisan kode yang dapat mereset kondisi css, sehingga browser tidak memiliki nilai default dari style-style yang ada. Alias 0 (null).</span> <span style="font-size: small;">Berikut adalah <a href="http://www.ilmuwebsite.com/tutorial-css/web-design-tips-css-reset">css reset</a> yang biasa saya gunakan :</span><br />
<span style="font-size: small;">/* RESET */</span><br />
<span style="font-size: small;">html, body, div, span, applet, object, iframe,</span><br />
<span style="font-size: small;">h1, h2, h3, h4, h5, h6, p, blockquote, pre,</span><br />
<span style="font-size: small;">a, abbr, acronym, address, big, cite, code,</span><br />
<span style="font-size: small;">del, dfn, em, font, img, ins, kbd, q, s, samp,</span><br />
<span style="font-size: small;">small, strike, strong, sub, sup, tt, var,</span><br />
<span style="font-size: small;">b, u, i, center,</span><br />
<span style="font-size: small;">dl, dt, dd, ol, ul, li,</span><br />
<span style="font-size: small;">fieldset, form, label, legend,</span><br />
<span style="font-size: small;">table, caption, tbody, tfoot, thead, tr, th, td {</span><br />
<span style="font-size: small;"><span style="white-space: pre;"> </span>margin: 0;</span><br />
<span style="font-size: small;"><span style="white-space: pre;"> </span>padding: 0;</span><br />
<span style="font-size: small;"><span style="white-space: pre;"> </span>outline: 0;</span><br />
<span style="font-size: small;"><span style="white-space: pre;"> </span>font-size: 100%;</span><br />
<span style="font-size: small;"><span style="white-space: pre;"> </span>vertical-align: baseline;</span><br />
<span style="font-size: small;"><span style="white-space: pre;"> </span>background: transparent;</span><br />
<span style="font-size: small;"><span style="white-space: pre;"> </span>height: auto;</span><br />
<span style="font-size: small;"><span style="white-space: pre;"> </span>border-top-width: 0;</span><br />
<span style="font-size: small;"><span style="white-space: pre;"> </span>border-bottom-width: 0;</span><br />
<span style="font-size: small;"><span style="white-space: pre;"> </span>border-left-width: 0;</span><br />
<span style="font-size: small;">}</span><br />
<span style="font-size: small;">blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}</span><br />
<span style="font-size: small;">blockquote, q {quotes: none;}</span><br />
<span style="font-size: small;">:focus {outline: 0;}</span><br />
<span style="font-size: small;">.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}</span><br />
<span style="font-size: small;">ins {text-decoration: none;}</span><br />
<span style="font-size: small;">del {text-decoration: line-through;}</span><br />
<span style="font-size: small;">table {border-collapse: collapse;border-spacing: 0;}</span><br />
<span style="font-size: small;">ol, ul {list-style: none;}</span><br />
<span style="font-size: small;">body {background-color: white;background-position: center center;}</span><br />
<span style="font-size: small;">/* RESET */</span><br />
<span style="font-size: small;"> Sebenarnya ada beberapa teknik reset yang digunakan, tapi penulis sendiri cenderung menggunakan css reset yang di atas. Anda tidak lagi direpotkan oleh perbedaan tampilan layout antara Internet Explorer dengan Mozilla Firefox atau yang lainnya. Sehingga hasilnya nanti tampilan css di firefox juga mirip dengan tampilan menggunakan browser internet yang lain. Selamat Mencoba.</span></div><div class="fullpost" style="text-align: justify;"></div><div class="fullpost" style="text-align: justify;"><span style="font-size: small;">Sumber : <a href="http://www.ilmuwebsite.com/" target="_blank">http://www.ilmuwebsite.com/ </a></span></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com0tag:blogger.com,1999:blog-8586594373800689508.post-63573141952620740052011-11-09T03:54:00.000-08:002011-11-12T03:14:33.212-08:00Apa saja isi HTML 5 ?<div class="fullpost" style="font-family: inherit;"><div class="MsoNormal" style="line-height: normal;"><div style="text-align: left;"></div><span style="font-size: small;"><span id="goog_613534536"></span><span id="goog_613534537"></span>HTML 5 dirancang oleh W3C untuk meneruskan kesuksesan HTML 4 dan XHTML 1. Tampaknya HTML 5 akan menjadi favorit seperti yang terjadi pada DOCTYPE sejuta umat, XHTML 1.0 Transitional. </span><br />
<span style="font-size: small;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: left;"></div></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">Kelebihan dan kekurangan HTML 5</span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">Beberapa kelebihan yang dijanjikan pada HTML 5:</span></div><ol><li><span style="font-size: small;">Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.</span></li>
<li><span style="font-size: small;">Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.</span></li>
<li><span style="font-size: small;">Integrasi (‘inline’) MathML dan SVG dengan doctype yang lebih sederhana.</span></li>
<li><span style="font-size: small;">Penulisan kode yang lebih efisien.</span></li>
<li><span style="font-size: small;">Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.</span></li>
</ol><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">Yang masih diperdebatkan dalam pengembangan HTML 5:</span></div><ol><li><span style="font-size: small;">Makna semantik beberapa elemen presentasioal.</span></li>
<li><span style="font-size: small;">Fitur aksesibilitasnya. Seperti atribut alt dan summary.<a name='more'></a></span></li>
</ol><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><i></i></span><br />
<span style="font-size: small;"><i>Contoh HTML 5</i></span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">Kesederhanaan HTML 5:</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 5pt;"><span style="font-size: small;"><i><!doctype html></i></span><span style="font-size: small;"> <i><html></i> <i><head></i> <i><meta charset=”UTF-8″></i> <i><title>Contoh dokumen HTML 5</title></i> <i></head></i> <i><body></i> <i><p>Teks paragraf disini.</p></i> <i></body></i> <i></html></i></span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><br />
</span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">Yang menarik dari kesederhanaan kode di atas:</span></div><ol><li><span style="font-size: small;">Tidak perlu lagi memakai <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>. Walau tag meta tersebut masih diijinkan digunakan.</span></li>
<li><span style="font-size: small;">Deklarasi <!DOCTYPE html> adalah ‘case-insensitive’. Tidak harus huruf besar/kapital semua.</span></li>
</ol><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">Sebagai XML, dengan tipe media application/xhtml+xml atau application/xml, HTML 5 cukup dideklarasikan dengan format tambahan:</span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><br />
</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 5pt;"><span style="font-size: small;"><i><?xml version=”1.0″ encoding=”UTF-8″?></i></span><span style="font-size: small;"> <i><html xmlns=”http://www.w3.org/1999/xhtml”></i> <i><head></i></span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><br />
</span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><b>Elemen baru di HTML 5</b></span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:</span></div><ol><li><span style="font-size: small;">Section serupa seperti h1-h6.</span></li>
<li><span style="font-size: small;">Article bisa berupa entri blog atau tulisan konten.</span></li>
<li><span style="font-size: small;">Aside menyajikan konten pelengkap.</span></li>
<li><span style="font-size: small;">Header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.</span></li>
<li><span style="font-size: small;">Footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.</span></li>
<li><span style="font-size: small;">Yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.</span></li>
</ol><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><b>Atribut baru di HTML 5</b></span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">Dikenalkan beberapa atribut baru, seperti:</span></div><ol><li><span style="font-size: small;">atribut media, ping pada elemen pranala</span></li>
<li><span style="font-size: small;">autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input dan form</span></li>
<li><span style="font-size: small;">aeversed pada elemen ol untuk urutan besar ke kecil.</span></li>
</ol><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><b>Perubahan makna elemen</b></span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><b> </b></span><span style="font-size: small;">Ada beberapa elemen yang berubah makna, diantaranya:</span></div><ol><li><span style="font-size: small;">Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku untuk elemen i.</span></li>
<li><span style="font-size: small;">Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.</span></li>
<li><span style="font-size: small;">Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.</span></li>
<li><span style="font-size: small;">dan lain-lain.</span></li>
</ol><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><b>Elemen dan atribut yang tidak digunakan</b></span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><b> </b></span><span style="font-size: small;">Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5:</span></div><ul type="disc"><li class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">center,</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">font,</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">strike, u, big,</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">frame, frameset, noframes,</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">acronym,</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">longdesc,</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">scope pada td,</span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">dan sebagainya.</span></li>
</ul><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;"><br />
</span></div><div class="MsoNormal" style="line-height: normal;"><span style="font-size: small;">sumber : <a href="http://students.netindonesia.net/blogs/alfanpresekal/" target="_blank" title="Blog Microsoft Student Alfan Presekal"><span style="color: blue;">http://students.netindonesia.net/blogs/alfanpresekal/</span></a></span></div><div class="MsoNormal"><span style="font-size: small;"><br />
</span></div></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com9tag:blogger.com,1999:blog-8586594373800689508.post-45060811714758559712011-11-09T03:16:00.000-08:002011-11-12T03:15:19.257-08:00Manipulasi HTML dengan jQuery<div class="fullpost" style="font-family: inherit;"><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil atau</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">menambah konten, dan sebagainya terhadap HTML.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><b>html()</b></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Untuk me-set konten (biasanya kita sebut innerHTML) dari elemen HTML yang dipilih kita gunakan</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><i>$(selector).html(content)</i>. Apabila parameter content tidak kita tentukan maka fungsi</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">html() berguna untuk mendapatkan konten dari HTML.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Contoh :</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Kode 19. Contoh html()</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><html></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><head></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><script type="text/javascript" src="jquery.js"></script></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><script type="text/javascript"></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(function(){</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$("#lihat").click(function(){</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">var isinya = $("#paragraf").html();</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">alert(isinya);</span><br />
<a name='more'></a></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">});</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$("#isikan").click(function(){</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">var isilagi = $("#isi").val();</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">alert(isilagi);</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$("#paragraf").html(isilagi);</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">});</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">});</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></script></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><body></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><button id=lihat>Lihat</button></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><p id=paragraf></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi,</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">mengambil atau menambah konten, dan sebagainya terhadap HTML</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></p></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Teks :</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><input type=text id=isi></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><p></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><button id=isikan>Isikan</button></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></body></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></html></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><b>val()</b></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Pada contoh di atas kita lihat ada kode</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">var isilagi = $("#isi").val();</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Kode ini berarti kita mengambil nilai dari <input type=text id=isi> dan memasukkannya ke</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">variabel isilagi. Sama dengan fungsi html(), apabila kita masukkan nilai dari val(), maka</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">artinya kita me-set nilai dari elemen yang dipilih. Biasanya val() digunakan pada elemen-elemen</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">HTML <input>, contoh :</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(“#isi”).val(“hallo apa kabar”);</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Kode di atas berarti kita me-set nilai <input type=text id=isi> dengan “hallo apa kabar”.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><b>attr()</b></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Dengan menggunakan fungsi attr(), ini membuat mudah bagi kita untuk mendapatkan nilai dari</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">suatu properti elemen HTML yang kita pilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Sintaks :</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).attr(properties,nilai);</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Parameter properties adalah nama properti yang ingin kita ambil atau set. Contoh properti</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">misalnya : id, class, title, src, href dan sebagainya.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Parameter nilai, apabila kita isi artinya kita me-set nilai properti yang kita tetukan, apabila</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">kosong artinya kita mengambil nilai properti yang kita tentukan.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Contoh :</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Kode 20. Contoh attr()</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><html></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><head></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><script type="text/javascript" src="jquery.js"></script></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><script type="text/javascript"></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(function(){</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$('.link').click(function(){</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">var id=$(this).attr("id");</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">var class=$(this).attr("class");</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">var href=$(this).attr("href");</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">alert(id);</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">alert(class);</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">alert(href);</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">});</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">});</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></script></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><a href="http://www.desrizal.com" class="link" id="13">link</a></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></body></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></html></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><b>addClass()</b></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Berguna untuk menambahkan atau mengubah class untuk elemen yang dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Sintaks :</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).addClass(namakelas)</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Contoh :</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Kode 21. Contoh addClass()</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><html></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><head></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><style></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">.besar</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">{</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">font-size:106px;</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">}</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">.kecil</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">{</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">font-size:12px;</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">}</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></style></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><script type="text/javascript" src="jquery.js"></script></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><script type="text/javascript"></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(function(){</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$('.ubahclass').click(function(){</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(".besar").addClass("kecil");</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">});</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">});</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></script></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><a href="#" class="ubahclass" >Klik </a></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"><div class="besar">www.desrizal.com</div></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></body></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;"></html></span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Ada banyak fungsi-fungsi lainnya untuk memanipulasi HTML :</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Manipulasi Description</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).html(content) Set konten (inner HTML) dari elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).text(text) Sama seperti html(), tapi tag akan di-escape</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).attr(attr,value) Set atribut dan nilainya dari elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).val(value) Set nilai dari elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Getting Contents</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).html() Mengambil konten (inner HTML) dari elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).text() Mengambil konten teks dari elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).attr(attr) Mengambil nilai dari suatu atribut elemen yang dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).val() Mengambil nilai/value dari elemen yang dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Adding Content</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).after(content) Menambah konten setelah elemen dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).before(content) Menambah konten sebelum elemen dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).insertAfter(selector) Menambah elemen yang ditentukan setelah elemen yang</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).insertBefore(selector) Menambah elemen yang ditentukan sebelum elemen yang</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Manipulate CSS Description</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).addClass(content) Menambah atau mengubah class elemen yang dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).removeClass(content) Menghilangkan class dari elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).toggleClass(content) Toggle antara penambahan dan penghilangan class dari elemen</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">yang dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).hasClass(content) Cek apakah elemen memiliki class.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Adding Inner Content</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).append(content) Menambahkan konten ke dalam konten dar elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).prepend(content) "Prepend" konten ke dalam konten dar elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(content).appendTo(selector) Menambahkan elemen ke dalam konten dari elemen yang</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(content).prependTo(selector) "Prepend" elemen ke dalam konten dari elemen yang dipilih.</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Wrapping</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).wrap(content) Wrap elemen yang dipilih dalam sebuah konten</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).wrapAll(content) Wrap semua elemen yang dipilih menjadi satu konten</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).wrapinner(content) Wrap konten inner child yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).unwrap() Remove dan replace parents dari elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">Copy, Replace, Remove</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(content).replaceAll(selector) Menukar elemen yang dipilih dengan elemen yang ditentukan</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).replaceWith(content) Menukar elemen yang dipilih dengan konten yang baru</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).empty() Remove semua konten dan child elements dari elemen yang</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).remove() Remove elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).removeAttr(attr) Remove atribut yang ditentukan dari elemen yang dipilih</span></div><div class="MsoNormal" style="line-height: normal; margin-bottom: 0.0001pt;"><span style="font-size: small;">$(selector).clone() Clone elemen yang dipilih</span></div><div class="MsoNormal"><span style="font-size: small;">$(selector).detach() Remove elemen yang dipilih dari DOM</span></div><div class="MsoNormal"><span style="font-size: small;">Sumber : <a href="http://blog.codingwear.com/" target="_blank">http://blog.codingwear.com/ </a></span></div><span style="font-size: small;"> </span></div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com18tag:blogger.com,1999:blog-8586594373800689508.post-82441738852046773202011-11-08T07:19:00.000-08:002011-11-09T03:27:34.889-08:00Wellcome to my first blog<div style="text-align: justify;">This is for the first time i create a blog. in order to fulfill the assignment from my college. I got a class called "Perancangan Web" means that a web development. So this is the 3rd assignment from my teacher. The first one he ordered me to create a simple web layout based on Table. And secondly, he ordered me to build a web layout based on HTML and CSS.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Well, i would like to introduce my self first. My name is I Gede Surya Udayana. This name was given by my balinese parents. Surya means the Sun God. and Udayana means that i was born in Udayana Hospital in Denpasar - Bali. This time in my 19th age. And i go study to STMIK STIKOM Bali. It is my beloved campus. it also has a slogan : "Always the First". It is the 1st IT campus in Bali. now it has 3 divisions. they are :</div><ol><li>Computer System</li>
<li>Information Management</li>
<li>Information System</li>
</ol>And it also has a dual degree program for Computer System, called Internatinal Class. It cooperates with HELP UNIVERSITY Malaysia. So, STIKOM BALI is a international standard campus.<a name='more'></a><br />
<br />
This time is my 3rd semester in STIKOM BALI, but i keep enjoying to study here. I have a lot of friendly mates here. They are so funny, serious and talented. If you are a student then i suggest that you should have a pricipal in school.<br />
<blockquote class="tr_bq">"stay hungry, stay foolish" - Steve Job</blockquote><div style="text-align: justify;">I think this is the best principal. otherwise you will not progress. And this quotes helps me a lot, when i have to do my homework, sometimes i dont have any idea about it. I just ask my friend and they would tell me something. </div><br />
A lot of things to do in school. so now i don't have so much time to continue this <i>INTRODUCTION ARTICLE</i> because i am pursued by the others homework. And also i have to write more articles in this blog.<br />
<br />
So, i have an account in Scribd. if you would like to view my article you can clik on this link :<br />
<br />
<a href="http://www.scribd.com/surya_udayana92">http://www.scribd.com/surya_udayana92</a><br />
<br />
May this links helps you. I hope this blog will be usefull in the Future, as its slogan "UNLIMITED SHARING". This is the place where i will share everything i have, freely.<br />
<br />
See you :) Hare Krishna.<br />
<br />
<br />
<div style="text-align: justify;"><br />
</div>Surya Udayanahttp://www.blogger.com/profile/03125974168545589600noreply@blogger.com6