Implementasi & perancangan sebuah Web

MEMAHAMI TEKNIK IMPLEMENTASI SITUS WEB DASAR
Metodologi pembangunan situs WEB

Elemen dari metodologi pembangunan situs web adalah sebagai berikut:
· Informasi audience
Informasi-informasi ini termasuk latar belakang pengguna, minat, dan semua perincian yang membantu untuk mempertajam informasi untuk dicocokkan dengan kebutuhan audience.
· Proposal
Berisi tentang informasi yang jelas tentang alasan dan ruang lingkup dari existensi web.
· Pernyataan yang Objektif
Sebuah pernyataan objektif yang berdasarkan pada proposal
· Informasi Domain
Kumpulan pengetahuan dan informasi tentang subjek domain yang ada di cover web, yaitu informasi yang disediakan untuk audience web dan informasi yang dibutuhkan oleh perancang web.
· Spesifikasi Web
Adalah gambaran secara rinci dari batasan dan elemen yang akan ditampilkan di web.
· TampilanWeb
Adalah informasi yang akan dikirimkan kepada user. Tampilan tersebut adalah hasil dari rancangan dan proses implementasi pembangunan web.

Ada enam proses dari metodologi perancangan situs web berikut:
Ø Perencanaan
Antisipasi dan memutuskan target untuk audience, tujuan dan sasaran dari informasi. Perencanaan juga dilakukan untuk informasi domain melewati sebuah proses pendefinisian, spesifikasi informasi pendukung yang harus dikumpulkan,
bagaimana informasi dikumpulkan dan bagaimana informasi tersebut di up date.
Ø Analisis
Proses mengumpulkan dan membandingkan informasi tentang web dan pengoperasiannya dengan tujuan untuk memperbaiki kualitas web secara keseluruhan.
Ø Perancangan
Sebuah proses yang dilakukan oleh perancang web, mengerjakan spesifikasi web, membuat keputusan tentang bagaimana komponen web diaktualisasikan.
Ø Implementasi
Proses dibangunnya web menggunakan Hyper Text Markup Language (HTML), sehingga proses implementasi mungkin lebih mirip dengan pengembangan software sebab menggunakan syntax yang spesifik untuk pengkodean struktur web dalam sebuah bahasa formasi dalam file komputer.
Ø Promosi
Proses mengendalikan semua masalah promosi di web. Termasuk di dalamnya bagaimana web ini dikenal eksis oleh komunitas on line melewati publisitas, sebaik bisnis atau hubungan informasi lain dengan web yang lain.
Ø Inovasi
Proses pengembangan dan perbaikan secara terus menerus.

Teknologi Program
Seiring dengan perkembangan intemet, teknologi web dari waktu ke waktu juga mengalami perkembangan yang pesat.Web saat ini tidak hanya merupakan sebuah halaman on-line yang hanya dapat dibaca atau statis, namun telah berkembang menjadi web yang lebih dinamis dan interaktif, yang mampu
memberikan dan menerima respon dari dan ke pengakses.
Di dalam pembuatan web yang statis dan dinamis tersebut, web memiliki
Teknologi web yang dikenal sebagai web server dan web browser. Web server
berfungsi untuk melakukan service sedangkan web browser berfungsi untuk
memakai/meminta service.
Web server yang ada saat ini adalah Microsoft IIS (Internet Information Service), Apache, Microsoft PWS (Personal Web Server), dan lain-lain. Sedangkan untuk web browser, hanya ada dua yang mendominasi yaitu Microsofit IE (lnternet Explore) dan Netscape Navigator, selain beberapa nama seperti Opera, Magellan, dan lain-lain.
Karena web server dan juga web browser dapat diprogram, maka untuk
bahasa pemrograman web browser dikenal JavaScript, dan CSS yang dikeluarkan
oleh W3C {World Wide Web Consortium) dan untuk formatnya digunakan sudah
ada standar yang jelas yaitu HTML. Sedangkan untuk web server, tidak pernah
ada standar seperti itu. Sehingga, ada banyak bahasa pemrograman yang saling
bersaing. Di antaranya PHP, ASP, dan lain-lain.

Teknologi Client
Perancangan aplikasi client server harus mempertimbangkan hal-hal sebagai berikut:
1. Banyaknya client di dalam sistem.
2. Apakah sistem menggunakan lebih dari satu DBMS.
3. Kebutuhan update aplikasi di masa mendatang.
Saat ini arsitektur client-server yang banyak digunakan dalam industri disebut two-tier architecture. Pada arsitektur ini, server mengirim data dan client mengakses data. Server memainkan peranan yang dominan pada arsitektur ini. Keuntungan sistem ini adalah kesederhanaan dan kompatibilitas dengan sistem yang legal.
Arsitektur client-server yang dikembangkan kemudian adalah three-tier architecture. Pada model ini, layer direpresentasikan sebagai host, server dan client. Server memainkan peranan sebagai penengah dengan mengirim aturan bisnis (prosedur atau constraint) yang digunakan untuk mengakses data dari host.

Teknologi Server
Perkembangan teknologi Server memang tidak sepesat perkembangan perangkat komputer lain, mengingat market Server yang terbatas. Salah satu fungsionalitas dari server adalah sebagai web server yang memungkinkan server tersebut mengelola beberapa website dan melayani browser dari klien yang mengakses halaman yang terdapat dalam website tersebut. Sebuah web server mampu memberikan layanan halaman web, file, gambar, atau data kepada klien yang mengakses.Web server adalah fungsionalitas yang paling umum yang diimplementasikan dalam sebuah server. Sebuah web server dapat mengelola beberapa website dan setiap website dapat diakses oleh beberapa klien.
Dampak dari sentralisasi informasi ini adalah kebutuhan akan sistem server yang dituntut untuk mampu melayani sebanyak apapun klien yang mengakses. Selain itu sentralisasi ini menjadikan internet yang tanpa batas, diisi oleh penyedia informasi yang sifatnya masih terbatas.

Teknologi Content
Jika Anda seorang webmaster yang mengelola sebuah situs maka sudah mengenal apa yang dinamakan dengan CMS. CMS merupakan singkatan dari Content Management System , suatu software yang berguna untuk memanipulasi content atau isi dari suatu situs web. Maksud dari memanipulasi disini adalah bisa menambah, mengedit atau menghapus isi dari suatu situs. Dengan CMS, semua itu bisa dilakukan tanpa pengguna harus belajar HTML atau bahasa pemrograman web.
Karena CMS adalah suatu software (perangkat lunak) maka CMS bisa berbasis web ataupun aplikasi desktop biasa. Saat ini CMS yang paling banyak adalah CMS yang berbasis web. Apa kelebihan dari CMS berbasis web? Kelebihannya adalah Anda bisa melakukan update (perubahan) isi situs dari mana saja selama Anda terhubung ke internet dan tool atau alat yang digunakan hanyalah web browser. Selain itu dengan CMS maka Anda bisa melakukan update atau perubahan isi situs tanpa harus mengutak-atik layout atau struktur dari situs Anda.
Ada lima fungsi yang dalam kenyataannya memang tidak dapat secara tegas dipisahkan satu terhadap yang lain yaitu bahwa mereka itu saling terkait dan bahkan pada aspek-aspek tertentu berimpitan seperti yang digambarkan pada gambar berikut.

Penjelasan dari kelima fungsi tersebut diuraikan berikut ini :
Ø Author
Yang membangun isi atau content adalah author dengan kedudukan yang cukup penting karena suatu intranet tanpa content tidak punyai nilai apa-apa.

Ø Administrator
Administrator adalah individu yang bertanggung jawab terhadap proses manajemen dan kebijaksanaan dari isi (content) serta untuk membangun halaman-halaman dari perantara jasa (broker pages) ditempat sendiri (on-site) maupun pada direktori ataupun melalui perangkat bantu navigasi dilokasi luarnya (off-site). Termasuk juga dalam tugas ini penetapan pagar-pagar pengaman (fire-walls) serta menyajikan kiat-kiat strategi pengamanan, serta berwenang menindak melalui penyidikan dimana perlu, atas ketidak taatan terhadap kebijaksanaan dan prosedur yang berkaitan dengan isi (content) dari kelompok serta lain-lain, termasuk yang kemunculan tidak secara formal.
Ø Webmaster
Peranannya dapat dikatakan sebagai komplimen dari seorang manajer jaringan. Tugas-tugas yang banyak ditemui, berkaitan dengan pendaftaran nama domain (domain name), penginstalasian dari Web servers bahkan sampai pada penyiapan konsep dari perjanjian kerja dengan penyedia layanan (service providers), pencatatan prestasi (performance monitoring), dan implementasi dari scripts khusus serta bermacam antar muka (intefaces), termasuk misalnya modul-modul pengamanan, akses pada basis data maupun antar muka e-mail.
Ø Publisher
Isi atau content formal dari Intranet menjadi tanggung jawab dari Publisher.
Ø Editor
Editor bertanggung jawab atas pembentukan dan perawatan content yang terkait dengan lingkup individual dari intranet.

Comments (115) Posted by kumala on Friday, August 15th, 2008

readmore...

Cara Membuat tombol icon Menu pada Frontpage Sreenshot

Cara Membuat Tombol PADA Frontpage Screenshots

Video Tutorial

Tombol Vista add-in untuk Expression Web dan Frontpage memungkinkan Anda untuk membuat menu yang kuat menu dropdown, langsung di Expression Web, FrontPage 2000 (versi 9), Microsoft FrontPage 2002 (versi 10), Microsoft Office FrontPage 2003 (versi 11). Sepenuhnya disesuaikan penampilan! Gunakan salah satu dari 500 + tombol web, 100 desain submenu, 6600 + ikon, 50 siap pakai sampel, atau membuat sendiri menggunakan editor tema. Dengan dukungan untuk gambar kustom, ikon, warna, gaya font, karena kemungkinan tidak terbatas. Anda akan membuat benar-benar baik mencari situs web menu dan tombol html html dengan kemampuan desain sedikit atau tidak ada sama sekali! Membuat, masukkan, memodifikasi menu website tanpa meninggalkan web favorit Anda lingkungan pengembangan!

Menu, Button, dan Icon Collection

Expression Web menyediakan menu koleksi 1400 tombol web, ikon 6600, 300 siap pakai sampel, sehingga Anda akan membuat menu tampak benar-benar baik dan tombol dengan keterampilan sedikit atau nodesign sama sekali! Web 2.0, Mac, iPhone, Aqua tombol, Vista, XP, transparan, bulat, mengkilap, logam, 3d, menu tab, menu drop-down akan menjadi angin! Button dan Icon Sampel

      

Beli Sekarang!    ::   Unduh Free Trial    ::   Info Lebih

Fitur

Simpan proyek. Simpan tombol gambar Anda sebagai html
Anda dapat menyimpan proyek saat ini dalam file proyek (*. XWB) atau ke dalam file HTML (*. html).menu berbasis teks Anda dapat membuat menu dengan berbasis teks item atas. Menu tersebut akan dimuat lebih cepat di website Anda (dibandingkan dengan gambar navigasi berbasis). Struktur Menu terdiri dari UL bersarang HTML dan tag LI. Standar compliant struktur menu sederhana untuk menyesuaikan dan memperbarui. Search Engine Friendly Expression Web menu menghasilkan kode html yang transparan untuk mencari laba-laba. Orientasi Menu Buat kedua menu horisontal dan vertikal dan submenu dengan jumlah menu pada satu halaman. Besar Mencari Web Navigasi dengan Upaya Minimum Expression Web menyediakan menu 500 + tombol web, 100 desain submenu, 6600 + ikon, 50 siap pakai sampel, sehingga Anda akan membuat menu situs benar-benar baik mencari html dan tombol html dengan kemampuan desain sedikit atau tidak ada sama sekali ! Vista, XP, Win98, Mac, Aqua tombol, bulat, mengkilap, logam, gaya 3d, menu tab, menu drop-down akan menjadi angin! Kualitas Tinggi dan Hasil profesional Anda tidak perlu tahu HTML, JavaScript, CSS atau bahasa coding lain untuk membuat multi-state tombol rollover web, profesional lintas-browser, mesin pencari ramah DHTML menu. Semua harus Anda lakukan adalah membuat beberapa klik dan menyesuaikan tombol yang Anda inginkan untuk mereka untuk tampil. Vista Web Buttons akan menghasilkan semua gambar yang diperlukan, html, javascripts, gaya css otomatis!

Beli Sekarang!    ::   Unduh Free Trial    ::   Info Lebih

Cara menggunakan Tombol Vista dengan FrontPage


Tombol vista tidak dikembangkan sebagai ekstensi Frontpage, tetapi Anda dapat menggunakannya sebagai file standar Javascript. Untuk menginstal menuinto halaman html Anda, Anda harus melakukan hal-hal berikut: 1).Membuat dan menyimpan tombol Anda dalam folder temp menggunakan Vista aplikasi Buttons. Anda CANUSE "Simpan sebagai HTML" fungsi.



Anda dapat memasukkan nama yang Anda suka, misalnya masukkan "menu":

Jadi Anda akan memiliki menu.html file dan "menu-file" folder dengan semua file menu.

2). Anda dapat menambahkan drop-down menu javascript ke halaman tunggal atau banyak halaman menggunakan Shared Borders, Sertakan Halaman atau Template Web Dinamis sehingga Anda tidak perlu menambahkannya ke dalam setiap halaman secara terpisa

readmore...

Manfaat Penggunaan CSS dalam Border

Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline

23^‘11

Febru

HTML & CSS Categories

Semua bentuk elemen di HTML seperti div, p, h, ul, li dan lain sebagainya pada dasarnya adalah sebuah kolom kotak yang membungkus isi (content) HTML. Ada beberapa property dalam box model CSS diantaranya Border, Padding, Margin dan content HTML itu sendiri. Setiap box model ini memungkinkan kita untuk membuat jarak antara yang satu dengan yang lainya, jadi dengan box model ini setiap kolom bisa di beri ukuran jarak antara satu dengan yang lainya sehingga kotak-kotak kolom tidak tampil menyatu dan tampak lebih bagus untuk di lihat.

Apabila box model kita gambarkan mungkin anda bisa lebih paham, berikut ini saya tampilkan sebuah illustrasi box model



penjelasan:

• Margin - memungkinkan kita untuk memberi jarak batas antara kolom kotak satu dengan yang lainya. margin tidak memiliki background warna (transparan)
• Border - sama halnya dengan border memungkinkan kita memberi jarak bedanya border kita bisa mendefinisikan warna background
• Padding - memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content
• Content - adalah isi seperti text dan gambar yang ada di kolom elemen HTML seperti div, p, h, dan lainnya

Bila anda menggunakan CSS box model untuk suatu elemen HTML maka aturan lebar dan tinggi dari content bisa berubah, misalnya anda menuliskan Kode CSS berikut pada sebuah div yang berukuran lebar 300px dan tinggi 200px

div.column {
 width:300px;
    height:200px;
    margin:10px;
    border:5px solid #000;
    padding:10px;
}

berdasarkan kode diatas maka lebar dan tinggi kotak div bukanlah 300 pixel x 200 pixel, melainkan 350 pixel x 250 pixel

• Lebar : 300 px + batas kiri (margin:10px + border:5px + padding:10px) + batas kanan (margin:10px + border:5px + padding:10px)
• Tinggi : 200 px + batas atas (margin:10px + border:5px + padding:10px) + batas bawah (margin:10px + border:5px + padding:10px)
• Total lebar 350px dan tinggi 250px

Maaf hanya untuk pecinta i.e ukurannya tidak akan 250 pixel, box model adalah apa yang menjadi sebuah dilema untuk banyak pengembang web mengenai kompatibiltas browser. Design CSS yang sudah mulus di browser lain banyak sekali berantakan di i.e dan sedikit yang tau untuk menyelesaikan masalah ini
i.e secara otomatis menyertakan lebar dan tinggi pada setiap elemen yang kita buat, supaya i.e tidak seenaknya menambah atau mengurangi komposisi lebar dan tinggi komposisi elemen maka tambahkan tag berikut di awal pembuatan HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div.column {
 width:300px;
    height:200px;
    margin:10px;
    border:5px solid #000;
    padding:10px;
}
</style>
</head>
<body>
<div class="column"> Test </div>
</body>
</html>

Penggunaan Border

Pada border terdapat property Border Width, Border Color, dan Border Style. Proprty border-width digunakan untuk menentukan lebar dari border, border-color untuk warna dan border-style digunakan untuk gaya borrder itu sendiri misalnya membentuk garis lurus, putus-putus, atau garis titik-titik.

Cara menuliskan border adalah sebagai berikut:

div.column {
 width:200px;
    height:20px;
    border-width:5px;
 border-color:#39F;
 border-style:solid;
}

/* CSS border diatas bisa juga dituliskan seperti ini*/

div.column {
 width:200px;
    height:20px;
    border:5px #39F solid;
}

Hasilnya dari penerapan border diatas :

Sample

Property dari border dan masing-masing nilainya dapat dilihat pada tabel di bawah

Property	Keterangan	Nilai
border	Menentukan semua gaya border dalam satu deklarasi	border-width border-style border-color
border-bottom	menentukan semua gaya border bawah dalam satu deklarasi	border-bottom-width border-bottom-style border-bottom-color
border-bottom-color	menentukan warna border bawah	border-color
border-bottom-style	menentukan gaya border bawah	border-style
border-bottom-width	menentukan lebar border bawah	border-width
border-color	menentukan warna kolom border	color_name hex_number rgb_number transparent inherit
border-left	menentukan semua gaya border kiri dalam satu deklarasi	border-left-width border-left-style border-left-color
border-left-color	menentukan warna border kiri	border-color
border-left-style	menentukan gaya border kiri	border-style
border-left-width	menentukan lebar border kiri	border-width
border-right	menentukan semua gaya border kanan dalam satu deklarasi	border-right-width border-right-style border-right-color
border-right-color	menentukan warna border kanan	border-color
border-right-style	menentukan gaya border kanan	border-style
border-right-width	menentukan lebar border kanan	border-width
border-style	menentukan gaya dari keseluruhan kolom border	none hidden dotted dashed solid double groove ridge inset outset inherit
border-top	menentukan semua gaya border atas dalam satu deklarasi	border-top-width border-top-style border-top-color
border-top-color	menentukan warna border kanan	border-color
border-top-style	menentukan gaya border kanan	border-style
border-top-width	menentukan lebar border kanan	border-width
border-width	menentukan lebar dari keseluruhan kolom border	thin medium thick length inherit

Penggunaan Outline

Outline jarang di gunakan tapi fungsinya untuk membuat elemen terlihat dan berada di luar garis border sangat tipis. Penulisan Outline tidak jauh berbeda dengan penulisan border, sedangkan property dari outline dapat dilihat pada tabel dibawah

	Keterangan	Nilai
outline	Menentukan semua opsi outline dalam satu deklarasi	outline-color outline-style outline-width inherit
outline-color	menentukan warna outline	color_name hex_number rgb_number invert inherit
outline-style	menentukan gaya outline	none dotted dashed solid double groove ridge inset outset inherit
outline-width	menentukan lebar outline	thin medium thick length inherit

Penggunaan Margin

Margin memberikan ruang atau jarak di sekitar elemen HTML, apabila anda menguasai microsoft office atau open office pasti lah tau apa itu margin, prinsipnya sama saja. Penulisan margin sama saja seperti penulisan HTML lainnya sedangkan property margin pada CSS dapat di lihat pada tabel di bawah.

	Keterangan	Nilai
margin	digunakan untuk memnentukan jarak margin pada satu deklarasi	margin-top margin-right margin-bottom margin-left
margin-bottom	menentukan jarak margin bawah	auto length %
margin-left	menentukan jarak margin kiri	auto length %
margin-right	menentukan jarak margin kanan	auto length %
margin-top	menentukan jarak margin atas	auto length %

Penggunaan Padding

memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content berikut saya berikan sampel penggunaan padding dan border bersamaan:

div.column {
 width:200px;
    height:20px;
    padding 20px;
    border:5px #39F solid;
}

Hasilnya akan seperti kolom berikut, kalau anda bandingkan dengan contoh pada border diatas akan terlihat perbedaanya:

Sample

Property dari padding dan masing-masing nilainya dapat dilihat pada tabel di bawah

Property	Description	Values
padding	Menentukan keseluruhan opsi padding dalam satu deklarasi	padding-top padding-right padding-bottom padding-left
padding-bottom	menentukan lapisan padding bawah	length %
padding-left	menentukan lapisan padding kiri	length %
padding-right	menentukan lapisan padding kanan	length %
padding-top	menentukan lapisan padding atas	length %

readmore...

Cara mudah membuat Bloquete Dengan menambahkan tag CSS

Merubah Blockquote di Blog

Blockquote merupakan koding HTML yang biasanya digunakan untuk mengutip artikel atau postingan dari sumber-sumber lain. Biasanya dalam HTML blockquote biasa dipanggil dengan menggunakan tag <blockquote></blockquote>.Secara default hampir semua template baik itu berbayar ataupun gratis menyediakan atau telah memasang blockquote ini. Namun yang jadi masalah adalah apakah blockquote yang tersedia ini telah sesuai dengan selera kita.

[blockquote 1]

Tapi jangan khawatir karena blockquote ini dapat kita rubah semau kita dengan sedikit mengutak-atik bagian css dari blog kita. Modifikasi blockquote yang bisa kita lakukan adalah seperti penambahan background, membuat border, merubah ukuran font, merubah jenis font, merubah warna, dan masih banyak lagi.

[blockquote 2]

Ada yang perlu di ingat dalam merubah blockquote ini. Usahakan anda memilih blockquote yang sesuai dengan kebutuhan blog anda. Jika blog anda ber niche pendidikan misalnya, usahakan menggunakan blockquote yang sederhana dan memiliki gambar quote atau tanda petik. Berbeda jika blog anda ber niche tutorial blogging. Biasanya blogger yang membuat tutorial blogging menggunakan fungsi quote ini untuk menampilkan kode HTML atau CSS yang diberikan.

[blockquote 3]

Bagaimana tertarik untuk merubah blockquote seperti yang ada di postingan ini? Silahkan salin kode CSS di bawah ini dan gantikan pada bagian CSS blockquote anda. Biasanya blockquote dibagian CSS ditulis pada bagian awal, blockquote.

[blockquote 4]

KODE HTML 
Hanya cukup dengan membuat <blockquote>bla.. blaa... blaaa</blockquote>. KODE CSS blockquote 1

blockquote style {font: 14px/20px italic Times, serif; padding-left: 70px; padding-top: 18px; padding-bottom: 18px; padding-right: 10px; background-color: #dadada; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url('http://css-tricks.com/examples/Blockquotes/images/openquote4.gif'); background-position: middle left; background-repeat: no-repeat; text-indent: 23px;}

blockquote 2

blockquote style {font: 18px/30px normal Tahoma, sans-serif; padding-top: 22px; margin: 5px; background-image: url('http://css-tricks.com/examples/Blockquotes/images/closequote3.gif'); background-position: top left; background-repeat: no-repeat; text-indent: 65px;}

blockquote 3

blockquote style {background-image: url('http://css-tricks.com/examples/Blockquotes/images/closequote1.gif'); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; font: 16px/25px centaur, serif; padding: 10px; border: 2px dotted #333;}

blockquote 4

blockquote style {font: 14px/22px normal helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc;}

  Cara penggunaan

• Buka edit HTML dan masuk ke bagian CSS (jika wordpress di file style.css).
• Cari bagian tag .blockquote atau sejenisnya. Biasanya kode akan seperti di bawah ini, bagian yang di blok adalah bagian yang bisa kita ganti sesuka kita.

• Selanjutnya ganti kode css yang berada di dalam kurung kurawal dengan kode CSS di atas.
• Save dan lihat hasilnya.

Blockquote berbeda di postingan Untuk membuat blockquote berbeda ini caranya mudah, hanya tinggal membuat tag CSS baru misal blockquote2 {} dan memanggilnya dengan tag HTML <blockquote2></blockquote2>. Namun jika anda kesulitan melakukan ini bisa juga menanamkan langsung CSS ke dalam tag div. Tag div yang dimasukkan CSS menjadi,

<div style="background-image: url('http://css-tricks.com/examples/Blockquotes/images/closequote1.gif'); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; font: 16px/25px centaur, serif; padding: 10px; border: 2px dotted #333;">artikel anda</div>

readmore...

Mengoptimalkan tombol pada keybord

Tombol Keyboard Shortcut Rahasia di Komputer Windows

Dulunya saat zaman DOS, dalam mengoperasikan komputer pc, laptop, atau sejenisnya, kita memang sangat memerlukan sebuah perangkat input seperti keyboard, dan tambahan mouse. Tanpa keyboard, komputer menjadi barang pajangan dan tidak berguna. Lalu sejak munculnya sistem operasi Windows, keyboard pun lebih jarang digunakan, karena mouse lebih sering digunakan karena mudah -nya ketika mengoperasikan Windows dibandingkan memakai keyboard. Namun, sebenarnya jalan rahasia termudah yang lebih mudah dan cepat dalam mengoperasikan sistem operasi Windows adalah dengan memanfaatkan tombol shortcut rahasia dari keyboard anda. Tombol keyboard shortcut umumnya adalah kombinasi 2 atau lebih tombol pada keyboard yang ditekan secara bersamaan, ketika kombinasi tombol ini ditekan maka sabuah jalan pintas rahasia kepada suatu proses atau program terbuka. Inilah yang dapat mempersingkat waktu anda dalam mengoperasikan sistem Windows, lebih cepat dari klik mouse anda.

Berikut ini daftar tombol-tombol keyboard shortcut rahasia yang tersedia di Windows XP.

Tombol Shortcut Umum pada Keyboard
Tombol CTRL + C (berguna untuk mengkopy atau menyalin item)
Tombol CTRL + X (Berguna untuk meng-Cut atau memotong item)
Tombol CTRL + V (Berguna untuk mem-Paste item)
Tombol CTRL + Z (Berguna untuk membatalkan suatu proses terakhir)
Tombol DELETE (Berguna untuk menghapus suatu item)
Tombol SHIFT + DELETE (Menghapus item yang dipilih secara permanen, item yang terhapus tidak dibuang ke dalam Recycle Bin)
Tombol CTRL sambil menyeret sebuah item (Menyalin item yang dipilih)
Tombol CTRL + SHIFT sambil menyeret item (Buat cara pintas ke item yang dipilih)
Tombol F2 key (Ubah nama item yang dipilih)
Tombol CTRL + RIGHT ARROW (Memindahkan titik penyisipan ke awal kata berikutnya)
Tombol CTRL + LEFT ARROW (Memindahkan titik penyisipan ke awal kata sebelumnya)
Tombol CTRL + DOWN ARROW (Memindahkan titik penyisipan ke awal paragraf berikutnya)
Tombol CTRL + UP ARROW (Memindahkan titik penyisipan ke awal paragraf sebelumnya)
Tombol CTRL + SHIFT dengan salah satuTombol panah (Sorot blok teks)
Tombol SHIFT dengan salah satu tombol panah (Pilih lebih dari satu item dalam sebuah jendela atau pada desktop, atau pilih teks dalam dokumen)
Tombol CTRL + A (Select all)
Tombol F3 key (Search for a file atau folder)
Tombol ALT + ENTER (View properti untuk item yang dipilih)
Tombol ALT + F4 (Menutup item aktif, atau keluar dari program aktif)
Tombol ALT + ENTER (Menampilkan properti dari objek yang dipilih)
Tombol ALT + Spacebar (Buka menu shortcut untuk jendela aktif)
Tombol CTRL + F4 (Close dokumen aktif dalam program-program yang memungkinkan Anda untuk memiliki beberapa dokumen yang terbuka secara bersamaan)
Tombol ALT + TAB (Switch antara item yang terbuka)
Tombol ALT + ESC (Cycle melalui item dalam urutan yang mereka telah dibuka)
Tombol F6 key (Cycle melalui elemen-elemen layar dalam jendela atau pada desktop)
Tombol F4 key (Menampilkan the Address bar list in My Computer atau Windows Explorer)
Tombol SHIFT + F10 (Menampilkan menu shortcut untuk item yang dipilih)
Tombol ALT + Spacebar (Menampilkan menu Sistem untuk jendela aktif)
Tombol CTRL + ESC (Menampilkan menu Start)
Tombol ALT + huruf digarisbawahi dalam nama menu (Menampilkan menu yang sesuai)
Tombol F10 key (Mengaktifkan menu bar dalam program aktif)
Tombol RIGHT ARROW (Buka menu berikutnya ke kanan, atau membuka submenu)
Tombol LEFT ARROW (Buka menu sebelah kiri, atau menutup submenu)
Tombol F5 key (Update jendela aktif)
Tombol BACKSPACE (View the folder one level up in My Computer atau Windows Explorer)
Tombol ESC (Membatalkan tugas sekarang)
Tombol SHIFT ketika Anda memasukkan CD-ROM ke dalam CD-ROM (Mencegah CD-ROM secara otomatis bermain)
Tombol CTRL + SHIFT + ESC (Membuka Task Manager)
Tombol PRT SCRN (Menyalin tampilan desktop ke clipboard)
Tombol ALT+PRT SCRN (Menyalin tampilan jendela aktif ke clipboard)

Tombol keyboard short pada Kotak dialog
Jika Anda menekan SHIFT + F8 di dalam kotak daftar seleksi tambahan, maka anda mengaktifkan modus seleksi tambahan. Dalam mode ini, Anda dapat menggunakan tombol panah untuk memindahkan kursor tanpa mengubah pilihan seleksi. Anda dapat menekan CTRL + Spacebar atau SHIFT + Spacebar untuk menyesuaikan pilihan seleksi. Untuk membatalkan pilihan diperpanjang siaga, tekan SHIFT + F8 lagi. Modus seleksi tambahan membatalkan sendiri ketika Anda memindahkan fokus ke kontrol lain.

Tombol CTRL + TAB (Bergerak maju melalui tab)
Tombol CTRL + SHIFT + TAB (Bergerak mundur melalui tab)
Tombol TAB (Bergerak maju melalui pilihan)
Tombol SHIFT + TAB (Bergerak mundur melalui pilihan)
Tombol ALT + huruf yang digarisbawahi (Tombol shortcut ini berguna Lakukan perintah yang sesuai atau pilih opsi yang sesuai)
Tombol ENTER (Lakukan perintah untuk opsi atau tombol aktif)
Tombol Spacebar (Pilih atau menghapus kotak centang jika pilihan yang aktif adalah check box)
Tombol Arrow keys (Pilih sebuah tombol jika pilihan aktif adalah group tombol pilihan)
Tombol F1 key (Display Help)
Tombol F4 key (Display the item dalam daftar aktif)
Tombol BACKSPACE (Open a folder satu tingkat jika folder dipilih dalam Simpan Sebagai atau Buka kotak dialog)

Tombol keyboard shortcut pada keyboard khusus Microsoft
Tombol Windows Logo (Menampilkan atau menyembunyikan menu di Start)
Tombol Windows Logo + BREAK (Menampilkan kotak dialog System Properties)
Tombol Windows Logo + D (Menampilkan penuh desktop)
Tombol Windows Logo + M (Meminimalkan semua jendela)
Tombol Windows Logo + SHIFT + M (Memulihkan jendela yang diminimalkan)
Tombol Windows Logo + E (Membuka My Computer)
Tombol Windows Logo + F (Membuka jendela pencari file dan folder)
Tombol CTRL + Windows Logo + F (Search for komputer)
Tombol Windows Logo + F1 (Menampilkan Windows Help)
Tombol Windows Logo + L (Mengunci keyboard)
Tombol Windows Logo + R (Membuka kotak dialog Run)
Tombol Windows Logo + U (Membuka Utility Manager)

Tombol keyboard shortcut yang berhubungan dengan Accessibility
Tombol Right SHIFT selama delapan detik (Switch FilterKeys on atau off)
Tombol Waktu ALT + left SHIFT + PRINT SCREEN (Switch High Contrast on atau off)
Tombol Waktu ALT + left SHIFT + NUM LOCK (Mengaktifkan MouseKeys on atau off)
Tombol SHIFT lima kali (Mengaktifkan StickyKeys on atau off)
Tombol NUM LOCK selama lima detik (Mengaktifkan ToggleKeys on atau off)
Tombol Windows Logo + U (Open Utility Manager)

Tombol keyboard shortcut di Windows Explorer
Tombol END (Menampilkan bagian bawah jendela aktif)
Tombol HOME (Menampilkan bagian atas jendela aktif)
Tombol NUM LOCK + Asterisk sign (*) (Menampilkan semua subfolder yang berada di bawah folder yang dipilih)
Tombol NUM LOCK + Plus sign (+) (Menampilkan isi dari folder yang dipilih)
Tombol NUM LOCK + Minus sign (-) (Menampilkan isi folder yang dipilih kembali ke folder sebelumnya)
Tombol LEFT ARROW (Memundurkan pilihan folder ke sebelumnya, atau pilih folder induk)
Tombol RIGHT ARROW (Menampilkan pilihan folder ke sub folder selanjutnya, atau pilih subfolder pertama)

Tombol keyboard shortcut pada Peta Karakter
Setelah Anda klik dua kali pada grid karakter karakter, Anda dapat bergerak melalui grid dengan menggunakan cara pintas keyboard:

Tombol RIGHT ARROW (Pindah ke kanan atau ke awal baris berikutnya)
Tombol LEFT ARROW (Pindah ke kiri atau ke akhir baris sebelumnya)
Tombol UP ARROW (Pindah ke atas satu baris)
Tombol DOWN ARROW (Pindah ke bawah satu baris)
Tombol PAGE UP (Pindah ke atas satu layar pada satu waktu)
Tombol PAGE DOWN (Pindah ke bawah satu layar pada satu waktu)
Tombol HOME (Pindah ke awal baris)
Tombol END (Pindah ke akhir baris)
Tombol CTRL + HOME (Pindah ke karakter pertama)
Tombol CTRL + END (Pindah ke karakter terakhir)
Tombol Spacebar (Beralih di antara modus yang membesar dan normal bila karakter dipilih)

Tombol keyboard shortcut pada Jendela utama Microsoft Management Console (MMC)
Tombol CTRL + O (Buka konsol yang disimpan )
Tombol CTRL + N (Buka konsol baru)
Tombol CTRL + S (Menyimpan konsol dibuka)
Tombol CTRL + M (Menambah atau menghapus item konsol)
Tombol CTRL + W (Buka jendela baru)
Tombol Tombol F5 (Memperbarui konten semua jendela konsol)
Tombol ALT + Spacebar (Menampilkan menu jendela MMC)
Tombol ALT + F4 (Menutup konsol)
Tombol ALT + A (Menampilkan menu Action)
Tombol ALT + V (Menampilkan menu View)
Tombol ALT + F (Menampilkan menu File)
Tombol ALT + O (Menampilkan menu Favorites)

Tombol keyboard shortcut pada Jendela konsol MMC
Tombol CTRL + P (Mencetak halaman aktif atau aktif pane)
Tombol ALT + Minus sign (-) (Menampilkan menu window untuk jendela konsol yang aktif)
Tombol SHIFT + F10 (Menampilkan shortcut menu Action untuk item yang dipilih)
Tombol Tombol F1 (Membuka topik Bantuan, jika ada, untuk item yang dipilih)
Tombol Tombol F5 (Memperbarui konten semua jendela konsol)
Tombol CTRL + F10 (Memaksimalkan jendela konsol yang aktif)
Tombol CTRL + F5 (Memulihkan jendela konsol yang aktif)
Tombol ALT + ENTER (Menampilkan kotak dialog Properties, jika ada, untuk item yang dipilih)
Tombol F2 key (Ubah nama item yang dipilih)
Tombol CTRL + F4 (Menutup jendela konsol yang aktif. Ketika sebuah konsol hanya memiliki satu jendela konsol, jalan pintas ini akan menutup konsol)

Tombol shortcut navigasi pada sambungan remote desktop
Tombol CTRL + ALT + END (Membuka kotak dialog Microsoft Windows NT Security)
Tombol ALT + PAGE UP (Berpindah antara program dari kiri ke kanan)
Tombol ALT + PAGE DOWN (Berpindah antara program dari kanan ke kiri)
Tombol ALT + INSERT (Cycle melalui program-program yang terakhir digunakan di sebagian besar order)
Tombol ALT + HOME (Menampilkan menu Start)
Tombol CTRL + ALT + BREAK (Berpindah klien komputer antara jendela dan layar penuh)
Tombol ALT + DELETE (Menampilkan menu Windows)
Tombol CTRL + ALT + Minus sign (-) (Menempatkan sebuah snapshot dari seluruh area jendela klien pada clipboard server Terminal dan menyediakan fungsi yang sama dengan menekan ALT + PRINT SCREEN pada komputer lokal.)
Tombol CTRL + ALT + Plus sign (+) (Menempatkan sebuah snapshot dari jendela aktif klien pada clipboard server Terminal dan menyediakan fungsi yang sama dengan menekan PRINT SCREEN pada komputer lokal.)

Tombol shortcut navigasi Microsoft Internet Explorer
Tombol CTRL + B (Membuka kotak dialog Organize Favorites)
Tombol CTRL + E (Membuka Search bar)
Tombol CTRL + F (Memulai utiliti Find)
Tombol CTRL + H (Membuka History bar)
Tombol CTRL + I (Membuka Favorites bar)
Tombol CTRL + L (Membuka kotak dialog Open)
Tombol CTRL + N (Membuka salinan jendela baru dari halaman browser sekarang dengan alamat Web yang sama)
Tombol CTRL + O (Membuka kotak dialog Buka, sama seperti CTRL + L)
Tombol CTRL + P (Membuka kotak dialog Print)
Tombol CTRL + R (Memperbarui halaman Web ini)
Tombol CTRL + W (Menutup jendela aktif)

readmore...

Cara menghacker Templete dengan Ctrl+U

Template adalah bagian terpenting dalam sebuah blog. Karna dengan adanya ini kita bisa membuat sesuatu yang terlihat indah dan mengagumkan. Kini saya akan memberi tahu kamu Rahasia Hack Template Web / Blog dengan CTRL + U. Bukannya saya mengajarkan tidak benar kepada anda, tapi ini adalah sesuatu pelajaran yang aku pelajari selama berbulan-bulan di internet.

Pertama yang harus kamu siapkan adalah Niat ( hehehe )

• Terus kita harus punya Template yang sama seperti Template yang kita mau hack
• Isinya Gak harus sama persis, yang penting template itu mirip cuma colomn,header,sidebar,footer sama.
• Setelah itu kamu harus belajar dulu Apa itu CSS .?
  

Cascading Style Sheets atau CSS adalah suatu bahasa lembar gaya yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa HTML dan XHTML.

• Suatu Css  dalam kode laman {CTRL + U } umumnya mempunyai tag <style>   diakhiri dengan tag </style> 
• Umumnya sebuah blogger mempunyai 2 style yaitu : id=page-skin-1 dan id=template-skin-1
• Buka Notepad dan coba anda praktekan CTRL + U  di Blog saya, ambil semua CSS dari tag <style>   sampai dengan tag   </style>
• Setelah itu pastekan di Notepad, Gabungkan style id=page-skin-1 dan id=template-skin-1  menjadi satu element Css (biar lebir irit..:D )    
•  Contoh awal:
  <style id='page-skin-1'>
  body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmwsAIbHT9yDG8Ikrrj5BYks58Mvg6BQVvSfIt5rr-RXhewVrFfja7r2ntCt7soVWFB26bE1yb8ViSWWV7WEpov_L6c4AkcfVG72r7bzXtVOsejIolTmlSYjeaZtqsFTz_u7JN8WIk4o/s1600/nyos.jpg);background-size:100%;background-position:center center;background-attachment:fixed;background-color:#010;overflow-x:hidden;}.buat-perhatian{overflow:hidden;width:100%;height:100%;top:0;left:0;margin:0;padding:0;min-width:900px;position:fixed;}
  </style>
  
  <style id='id=template-skin-1'>
  .buat-perhatian{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;color:#333;}.buat-perhatian a{color:#3b5998}.buat-perhatian .per-bawah{width:250px;margin:auto;position:fixed;top:20px;right:200px;z-index:600}.buat-perhatian .dalem-perhatian h2{text-transform:none;color:white;font-size:14px;font-weight:bold;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;background-color:rgba(109,132,180,0.7);border-color:rgba(59,89,152,0.7);border-width:1px 1px 0;border-style:solid;margin:0;padding:5px 10px;}.buat-perhatian .dalem-perhatian h2 a.ngaran-user{color:#ccc;}.buat-perhatian .dalem-perhatian .text-perhatian{color:#333;padding:10px;background-color:rgba(255,255,255,0.8);border:1px solid rgba(59,89,152,0.7);}.buat-perhatian .dalem-perhatian .bawah-pool{background-color:rgba(255,255,255,0.8);padding:8px 10px;margin-left:210px;margin-top:-2px;border:1px solid rgba(59,89,152,0.7);border-top:none;border-radius:0pt 0pt 100% 0pt;position:relative;text-align:right;display:inline-block;}.klos{float:right;z-index:5;cursor:pointer;width:15px;height:15px;background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/4WSewcWboV8.png) no-repeat scroll 0px -16px;}.klos:hover{background-position:0px -32px;}.klos:active,.klos:focus{background-position:0px -48px;}
  </style>
  
  Contoh akhir :
  <style>
  body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmwsAIbHT9yDG8Ikrrj5BYks58Mvg6BQVvSfIt5rr-RXhewVrFfja7r2ntCt7soVWFB26bE1yb8ViSWWV7WEpov_L6c4AkcfVG72r7bzXtVOsejIolTmlSYjeaZtqsFTz_u7JN8WIk4o/s1600/nyos.jpg);background-size:100%;background-position:center center;background-attachment:fixed;background-color:#010;overflow-x:hidden;}.buat-perhatian{overflow:hidden;width:100%;height:100%;top:0;left:0;margin:0;padding:0;min-width:900px;position:fixed;}.buat-perhatian{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;color:#333;}.buat-perhatian a{color:#3b5998}.buat-perhatian .per-bawah{width:250px;margin:auto;position:fixed;top:20px;right:200px;z-index:600}.buat-perhatian .dalem-perhatian h2{text-transform:none;color:white;font-size:14px;font-weight:bold;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;background-color:rgba(109,132,180,0.7);border-color:rgba(59,89,152,0.7);border-width:1px 1px 0;border-style:solid;margin:0;padding:5px 10px;}.buat-perhatian .dalem-perhatian h2 a.ngaran-user{color:#ccc;}.buat-perhatian .dalem-perhatian .text-perhatian{color:#333;padding:10px;background-color:rgba(255,255,255,0.8);border:1px solid rgba(59,89,152,0.7);}.buat-perhatian .dalem-perhatian .bawah-pool{background-color:rgba(255,255,255,0.8);padding:8px 10px;margin-left:210px;margin-top:-2px;border:1px solid rgba(59,89,152,0.7);border-top:none;border-radius:0pt 0pt 100% 0pt;position:relative;text-align:right;display:inline-block;}.klos{float:right;z-index:5;cursor:pointer;width:15px;height:15px;background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/4WSewcWboV8.png) no-repeat scroll 0px -16px;}.klos:hover{background-position:0px -32px;}.klos:active,.klos:focus{background-position:0px -48px;}
  </style>
•  Save as dengan nama saya-bisa.htm

Setelah belajar Css, kini saatnya kita belajar tag script.
Script adalah elemen animasi tambahan untuk membuat blog lebih rame dan mengagumkan.

• Umumnya Script itu harus di load dengan ajax jquery supaya dapat bekerja
• Pasang javascript ini di atas tag style di Saya-bisa.htm tadi
• <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'></script>
  <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'></script>
• Setelah itu CTRL + U lagi di blog saya, cari dengan CTRL + F tag script dan pastekan di file mu tadi
• Setelah ketemu , pilih dan pastekan di file kamu tadi
• Contoh akhir :
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'></script>
  <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'></script>
  <style>
  body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmwsAIbHT9yDG8Ikrrj5BYks58Mvg6BQVvSfIt5rr-RXhewVrFfja7r2ntCt7soVWFB26bE1yb8ViSWWV7WEpov_L6c4AkcfVG72r7bzXtVOsejIolTmlSYjeaZtqsFTz_u7JN8WIk4o/s1600/nyos.jpg);background-size:100%;background-position:center center;background-attachment:fixed;background-color:#010;overflow-x:hidden;}.buat-perhatian{overflow:hidden;width:100%;height:100%;top:0;left:0;margin:0;padding:0;min-width:900px;position:fixed;}.buat-perhatian{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;color:#333;}.buat-perhatian a{color:#3b5998}.buat-perhatian .per-bawah{width:250px;margin:auto;position:fixed;top:20px;right:200px;z-index:600}.buat-perhatian .dalem-perhatian h2{text-transform:none;color:white;font-size:14px;font-weight:bold;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;background-color:rgba(109,132,180,0.7);border-color:rgba(59,89,152,0.7);border-width:1px 1px 0;border-style:solid;margin:0;padding:5px 10px;}.buat-perhatian .dalem-perhatian h2 a.ngaran-user{color:#ccc;}.buat-perhatian .dalem-perhatian .text-perhatian{color:#333;padding:10px;background-color:rgba(255,255,255,0.8);border:1px solid rgba(59,89,152,0.7);}.buat-perhatian .dalem-perhatian .bawah-pool{background-color:rgba(255,255,255,0.8);padding:8px 10px;margin-left:210px;margin-top:-2px;border:1px solid rgba(59,89,152,0.7);border-top:none;border-radius:0pt 0pt 100% 0pt;position:relative;text-align:right;display:inline-block;}.klos{float:right;z-index:5;cursor:pointer;width:15px;height:15px;background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/4WSewcWboV8.png) no-repeat scroll 0px -16px;}.klos:hover{background-position:0px -32px;}.klos:active,.klos:focus{background-position:0px -48px;}
  </style>
  
  <script>
  var tekan="ctrl+u";
  ${'diblog:saya'};
  fuction.Cari="di{kode,laman,saya,donk}";
  </script>
• Simpan file saya-bisa.htm tadi

Yang terakhir adalah kita harus bisa membedakan tag div yag penting dan tag div yang biasa. 
Div dalam blog umumnya adalah elemen untuk memangil suatu Css dan  Script. Tanpa tag div elemen Css dan Script tidak bekerja dan kelihatan kosong.

• Coba cari tag div yang sama dengan kode Css dan script yang kamu inginkan.
• Contoh awal :
  <div class="buat-perhatian">
    <div id="dialog-perhatian" class="per-bawah">
      <div class="dalem-perhatian">
        <h2>Woooowww...!!!<div class="klos" onClick="$('#dialog-perhatian').hide('slow');"></div></h2>
        <div class="text-element">
          <div class="text-perhatian">
  Trimakasih telah belajar... <br/>
  Ternyata kamu orang pintar
          </div>
          <div class="bawah-pool">
            <span></span>
          </div>
        </div>
      </div>
    </div>

• Contoh akhir:
• Contoh Lebih Lanjut Tentang Penggabungan templete

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'></script>

<style type="text/css"><!--
body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmwsAIbHT9yDG8Ikrrj5BYks58Mvg6BQVvSfIt5rr-RXhewVrFfja7r2ntCt7soVWFB26bE1yb8ViSWWV7WEpov_L6c4AkcfVG72r7bzXtVOsejIolTmlSYjeaZtqsFTz_u7JN8WIk4o/s1600/nyos.jpg);background-size:100%;background-position:center center;background-attachment:fixed;background-color:#010;overflow-x:hidden;}.buat-perhatian{overflow:hidden;width:100%;height:100%;top:0;left:0;margin:0;padding:0;min-width:900px;position:fixed;}.buat-perhatian{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:11px;color:#333;}.buat-perhatian a{color:#3b5998}.buat-perhatian .per-bawah{width:250px;margin:auto;position:fixed;top:20px;right:200px;z-index:600}.buat-perhatian .dalem-perhatian h2{text-transform:none;color:white;font-size:14px;font-weight:bold;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;background-color:rgba(109,132,180,0.7);border-color:rgba(59,89,152,0.7);border-width:1px 1px 0;border-style:solid;margin:0;padding:5px 10px;}.buat-perhatian .dalem-perhatian h2 a.ngaran-user{color:#ccc;}.buat-perhatian .dalem-perhatian .text-perhatian{color:#333;padding:10px;background-color:rgba(255,255,255,0.8);border:1px solid rgba(59,89,152,0.7);}.buat-perhatian .dalem-perhatian .bawah-pool{background-color:rgba(255,255,255,0.8);padding:8px 10px;margin-left:210px;margin-top:-2px;border:1px solid rgba(59,89,152,0.7);border-top:none;border-radius:0pt 0pt 100% 0pt;position:relative;text-align:right;display:inline-block;}.klos{float:right;z-index:5;cursor:pointer;width:15px;height:15px;background:transparent url(http://static.ak.fbcdn.net/rsrc.php/v1/yA/r/4WSewcWboV8.png) no-repeat scroll 0px -16px;}.klos:hover{background-position:0px -32px;}.klos:active,.klos:focus{background-position:0px -48px;}
--></style>

<script>
var tekan="ctrl+u";
${'diblog:saya'};
fuction.Cari="di{kode,laman,saya,donk}";
</script>

<div class="buat-perhatian">
  <div id="dialog-perhatian" class="per-bawah">
    <div class="dalem-perhatian">
      <h2>Woooowww...!!!<div class="klos" onClick="$('#dialog-perhatian').hide('slow');"></div></h2>
      <div class="text-element">
        <div class="text-perhatian">
Trimakasih telah belajar... <br/>
Ternyata kamu orang pintar
        </div>
        <div class="bawah-pool">
          <span></span>
        </div>
      </div>
    </div>
  </div>

<!------ Pelajaran hack from santa-mars.blogspot.com ------>
Coba di buka , Setelah itu Lihat Apa yang kamu pelajari tadi....asyikan belajar ngehack...

Notice!
Semua yang aku berikan adalah langkah-langkah awal caraHack Template Web / Blog dengan CTRL + U. Pelajari dan pahami makna turorial diatas. Coba anda praktekkan berulang kali di blog-blog lain. Pasti anda nanti akan jadi MR. HAck

readmore...