tutorial blogger Indonesia

10 Temuan Terbaik Tahun 2012

on Minggu, 23 Desember 2012

Berikut Ini 10 Temuan Terbaik Tahun 2012


Perangkat untuk membungkam orang yang berisik. Pernah membayangkan remote control yang mampu mendiamkan orang? Berterimakasihlah kepada Kazutaka Kurihara dan Koji Tsukada yang menemukan senjata pembungkam ini. Perangkat ini akan membuat stres otak dan secara instan akan mendiamkan objeknya. Mesin ini bisa bekerja dari jarak 90 kaki.



Sarung tangan untuk orang bisu. Mahasiswa-mahasiswa di Ukraina mengembangkan sarung tangan dengan sensor elektronik yang dapat mengubah gerakan tangan menjadi audio vokal lewat ponsel cerdas. Perangkat bernama EnableTalk memiliki ongkos produksi sebesar £50, serta siap mengubah hidup 40 juta orang bisu di dunia.








Awan dalam ruangan. Menatap awan merupakan kegiatan "nggak penting" tapi menyenangkan. Sayangnya sampai saat ini hal itu hanya bisa dilakukan di luar ruangan. Untung saja, Berndnaut Smilde, dari Belanda, punya cara untuk mengontrol cuaca di dalam ruangan. Dengan mesin asap, dia mengakali temperatur dan intensitas cahaya sehingga terbentuklah awan di dalam ruangan.





"The eyephone". Teknologi layar sentuh bisa jadi sesuatu yang basi, karena teknologi asal Denmark bernama Eye Tribe ini memungkinkan Anda mengendalikan ponsel cerdas atau tablet melalui gerakan mata. Alat ini menggunakan cahaya infra merah yang dipantulkan dari pupil mata ke perangkat.





Semprotan mabuk. Kabar baik untuk para alkoholik. Wahh Quantum Sensations ini dapat dengan cepat membuat Anda mabuk, dengan sensasi sama seperti meminum alkohol. Semprotan yang dikembangkan Philippe Starck (Perancis) dan David Edwards (Amerika) ini akan menyemprotkan 0.075ml alkohol sekali tekan. Karena bentuk aerosolnya, alkohol tersebut dapat menyerap cepat. Kabar buruk--dan kabar baiknya pula--efek semprotan ini cuma berlangsung selama beberapa detik.













Printer cokelat 3D. Inilah perangkat yang paling ditunggu mereka yang suka cokelat. Sebuah tim dari Universitas Exeter mengembangkan printer pertama di dunia yang memungkinkan Anda mendesain cokelat Anda sendiri. Harga mesinnya £2,500 dan mampu mengeluarkan cokelat sesuai instruksi membentuknya sesuai desain yang Anda buat.





Papan catur jarak jauh. Saat ini Anda bisa bermain catur dengan orang nun jauh di sana melalui internet dan laptop. Tapi sudah mungkin saat ini untuk bermain catur dengan papan catur sesungguhnya, yang bidaknya dapat digerakkan dari jarak jauh.










Teman Jogging elektronis. Tidak ada teman yang menemani saat Anda berlari pagi/sore? Penemu dari Australia mengembangkan teman jogging elektronik yang akan mampu terbang di samping Anda. Sensor kamera di helikopter kecil Joggobot diprogram tetap pada kaos yang digunakan.

















Google Glass. Ini merupakan mimpi jadi nyata bagi para pencinta fiksi ilmiah. Sebuah komputer berprosesor canggih ditanamkan di dalam kacamata dengan lensa berfungsi sebagai monitor. Layar akan aktif saat penggunanya melihat ke arah kanan.











Charger ponsel bertenaga air. Ini benar-benar nyata. Perangkat berisi sodium ini akan mengubah air menjadi hidrogen serta menjadikannya tenaga melalui reaksi kimia. Tak perlu pusing mencari colokan listrik saat ponsel Anda mati. Cukup cari air bersih.
Tag :

Chating di FB dengan Gambar Sesuka Kita

on Minggu, 16 Desember 2012

Apa kabar sobat smile, semoga tetap dalam keadaan baik-baik saja..:D
Baik, kali ini saya akan memberikan sedikit trik bagaimana caranya chating di Facebook dengan gambar sesuka kita seperti emoticon namun yang ini adalah gambar yang kita mau. Jadi chating kita bisa sedikit lebih menarik.
Caranya mudah sekali kok. Langsung saja yuk kita simak.. ^^
kalo ga mau repot2 kesitusnya itu dibagian header juga ada kok... ^_^
Tag :

Recuva, Kembalikan File yang Terhapus dari Flash Disk

Pernah tidak Anda kehilangan data yang sangat penting dan Anda tidak punya salinannya??? Wahhh, itu musibah bagi Anda. Tapi jangan shock dulu..hehehe.. :D, karena ada banyak software/ freeware recovery atau pengembali data yang terdelete. Seperti yang akan saya bahas yaitu Recuva.

Tag :

7 Fungsi Conditional Statement b:if pada Blogspot

on Selasa, 11 Desember 2012


Jika anda adalah seorang programmer atau mengerti basic dari pemrograman pasti tidak asing dengan istilah conditional statement. Kode-kode yang menyusun tata letak desain dari halaman blogspot tidak hanya berisi HTML dan CSS semata, namun juga mengandung fungsi conditional statement yang memiliki awalan "b:if". Dengan memanfaatkan fungsi ini, kita dapat melakukan beragam perubahan tampilan pada blog, seperti menampilkan dan menyembunyikan widget dari halaman utama, halaman posting atau halaman tertentu, membuat halaman splash screen/welcome page/landing page dan masih banyak lagi. Bagi anda yang ingin mempelajari kustomisasi lebih lanjut pada blogspot, anda wajib mengetahui fungsi ini.
Baiklah kali ini saya akan share fungsi-fungsi tersebut beserta kode dan penggunaannya.
Mari kita klik 'Baca Selengkapnya' untuk menyimak lebih lanjut!


Berikut saya share 7 kode beserta fungsi penting conditional statement yang berguna untuk mengatur tata letak dan setiap elemen dari blogspot:

1) Tampil pada Home/Beranda/Halaman Utama Blog

<b:if cond="data:blog.url == data:blog.homepageUrl">
Sesuatu disini
</b:if>
Kode tersebut berfungsi untuk menampilkan sesuatu (widget, kode html, css) pada halaman utama blog saja. Artinya jika kita klik posting atau page yang ada di blog, maka sesuatu tsb tidak tampil. Kode ini berguna untuk anda yang ingin menempatkan widget tertentu pada halaman utama atau membuat splash page/landing page/welcome page pada blogspot.

2) Tampil pada Halaman Selain Home / Tampil pada Category-Post dan Single-Post/Halaman Posting
<b:if cond="data:blog.url != data:blog.homepageUrl">
Sesuatu disini
</b:if>
Kode kedua ('!=') ini merupakan kebalikan dari kode pertama ('==') yang artinya menampilkan sesuatu selain dari halaman utama blog. Dengan menggunakan kode ini anda dapat menampilkan widget, html atau style css tertentu pada halaman category-post (pada saat klik label posting), page-blog, dan single-post (pada saat klik artikel posting), misal seperti membuat tampilan style css isi yang berbeda dengan tampilan home.

3) Tampil Khusus pada Halaman Posting Artikel
<b:if cond="data:blog.pageType == &quot;item&quot;">
Sesuatu disini
</b:if>
Anda dapat menampilkan sesuatu saat visitor berada pada halaman posting di blogspot dengan kode diatas. Anda dapat menampilkan widget recent posts atau widget voting, contact form, dlsb sesuai dengan keperluan anda. Berkreasi tanpa batas untuk membuat blogspot lebih powerful.

4) Tampil pada Halaman Utama, Category-Post dan Page/Laman
<b:if cond="data:blog.pageType != &quot;item&quot;">
Sesuatu disini
</b:if>
atau
<b:if cond="data:blog.pageType == &quot;index&quot;">
Sesuatu disini
</b:if>
Kode ini kebalikan dari kode ketiga. Dengan kode ini anda dapat mengatur tampil pada selain halaman posting artikel, yakni hanya tampil pada halaman utama, category-post dan page-blog.

5) Tampil pada Halaman Tertentu di Blog
<b:if cond="data:blog.url == &quot;LINK_URL_TERTENTU&quot;">
Sesuatu disini
</b:if>
Anda dapat menggunakan kode tersebut agar sesuatu dapat tampil hanya pada link khusus yang sudah ditentukan. Penerapan dari kode ini yakni misal memasang widget pendaftaran acara, form order, dlsb pada sebuah halaman tertentu di blogspot anda.

6) Tidak Tampil pada Halaman Tertentu di Blog
<b:if cond="data:blog.url != &quot;LINK_URL_TERTENTU&quot;">
Sesuatu disini
</b:if>
Kode ini merupakan kebalikan dari kode kelima.

7) Fungsi <b:else>
Sama seperi bahasa pemrograman lainnya, fungsi conditional statement if di blogspot juga dilengkapi dengan fungsi else yang direpresentasikan dengan <b:else>. Agar lebih mudah memahaminya, saya akan langsung berikan contoh dalam bentuk struktur kode di bawah ini:
<b:if cond="data:blog.url == data:blog.homepageUrl">
Kode Widget1
<b:else>
Kode Widget2
</b:if>
Contoh kode diatas dapat diartikan: Pada halaman utama hanya tampil Kode Widget 1, selain (else) daripada halaman utama yang tampil ialah Kode Widget2. Anda dapat melakukan beragam tampilan dan trik dengan kode ini.

Tag :

Teka-teki Imam Ghazali rah.a

Suatu hari, Imam Al-Ghazali berkumpul dengan murid-muridnya lalu beliau bertanya (Teka Teki ) :
Imam Ghazali = ” Apakah yang paling dekat dengan diri kita di dunia ini ?
Tag :

Tips belajar agar cepat masuk ke otak

on Minggu, 09 Desember 2012

Tips Belajar - Sebagai seorang siswa atau mahasiswa maupun pembelajar lainnya tentunya terkadang mengalami kesulitan belajar. Tidak semua orang memiliki kesamaan dalam kemampuan menyerap materi ajar apalagi saat belajar secara mandiri. Kali ini akan diberikan beberapa tips belajar agar materi ajar cepat masuk ke otak
Tag :

CSS border - Membuat garis pembatas

Border adalah properti dari CSS untuk menciptakan garis tepi /garis pembatas pada suatu elemen blog.

Border termasuk properti CSS shorthan seperti margin dan padding.Shorthan adalah perintah yang ditulis lebih pendek/singkat.
Perintah panjang penulisan CSS border adalah seperti contoh;

.div{
border-right:1 px solid red;
border-left:1 px solid red;
border-bottom:1 px solid red;
border-top:1 px solid red;
}


Perintah CSS border Shorthan dipakai,jika border pada seluruh sisi elemen dibikin sama.Agar tidak terlalu panjang menuliskannya,Like this;

.div{
border:2 px solid red;
}



Contoh jika border hanya disebelah kanan saja;

.div{border-right: 1px solid blue}


Atau kiri saja;

.div{border-left: 1px solid blue}


Atau hanya kanan dan kiri saja;

.div{border-right: 1px solid blue;
border-left: 1px solid blue
}



Macam macam type border / value

1.Border style types

  • solid
  • double
  • groove
  • dotted
  • dashed
  • inset
  • outset
  • ridge

Ketebalan border

Umumnya dipakai dalam px (pixel)

Warna border

Berdasarkan tabel warna dalam HEX,RGB atau HURUF

Contoh penulisan perintah CSS untuk border secara keseluruhan;

CSS border Shorthan

#div{border: 1px solid red; }


CSS border Panjang

#div{border-top: 1px solid red;
border-bottom: 1px solid red;
}


Atau

#div{border: 1px dashed red; }

Dst...dst

Untuk lebih jelasnya,berikut contoh penulisan perintah CSS macam macam style dari   border;

.ex1{border:3px double red; padding: 10px }
.ex2{border:3px groove blue; padding: 10px }
.ex3{border:3px dotted yellow; padding: 10px }
.ex4{border:3px inset darkred; padding: 10px }
.ex5{border:3px dashed orange; padding: 10px}
.ex6{border:3px outset purple; padding: 10px }
.ex7{border:3px ridge black; padding: 10px }
.ex8{border:3px solid aqua; padding: 10px }

Catatan: Jika menggunakan Value double,outset,inset ,groove dan ridge minimal nilainya adalah 3px supaya kelihatan efeknya.

Dan ini Demo penampakannya;


Ini adalah style double border

Ini adalah style groove border

Ini adalah style dotted border

This is a inset border

Ini adalah style dashed border

Ini adalah style outset border

Ini adalah style ridge border

Ini adalah style solid border


Segini saja tutorial dasar penggunaan CSS border,silahkan berimporvisasi sendiri.

Tag :

Properti CSS (background)

Properti CSS adalah syntax yang diperlukan untuk memanipulasi selector yang kita inginkan.

Nah berikut  properti CSS yang umum dipakai (dasar) dalam penggunaan properti "background"

background

background-color
background-image
background-repeat
background-position
background-attachment

Contoh penerapan

body{
background-color: white;
background-image: url(http://gambarku.com/image.jpg);
background-position: center;
background-repeat: repeat-x;
background-attachment: fixed;
}

Maksudnya  kita memakai warna latar belakang seluruh bagian blog kita (body) dengan warna putih dan menggunakan latar berupa gambar juga .Gambar tersebut  diulang menyamping (horisontal) dan berada ditengah,sekaligus  bersifat tetap (fixed) ketika halaman blog di scrool keatas atau bawah.

Karena penulisan syntax diatas terlalu banyak dan menyita waktu,maka bisa juga dipersingkat menjadi seperti berikut.

body{
background: white url(http://gambarku.com/image.jpg) repeat-x  center 30%;
background-attachment: fixed;
}

Kita bisa mengatur value dari properti background-repeat dan background-position untuk menentukan posisi background image sesuai yang kita inginkan.

background-repeat:
repeat : mengulang background gambar  kekanan sekaligus bawah
no-repeat: tidak mengulang background gambar
repeat-x: mengulang background gambar secara horizontal
repeat-y: mengulang background gambar secara vertical

background-position:
center : background gambar ditengah
top      : background gambar berada diatas
bottom:background gambar  berada dibawah
%(persen):background gambar berada berapa persen dari lebar selector

Contoh lain dengan background position
body{
background: white url(http://gambarku.com/image.jpg) no-repeat  center top;
}

Maksudnya,backgaround image tersebut  tidak diulang dan akan berada di paling atas dan  posisinya berada ditengah.

body{
background: white url(http://gambarku.com/image.jpg) no-repeat  center;
}

Maksudnya,backgaround image tersebut tidak diulang dan berada ditengah tengah.

Itulah dasar dari penggunaan syntax CSS untuk properti background,silahkan bereksplorasi untuk mengembangkannya.

Tag :

CSS Margin dan padding

Mengenai apa dan bagaimana CSS Margin dan padding ini, akan saya bahas secara singkat saja asalkan gampang dimengerti.Saya akan coba terangkan dengan gaya bahasa embongan saya semoga lebih mudah dimengerti.Wkwkwk...


Margin
Dalam CSS istilah margin adalah memberi jarak atau spasi ke arah luar sebuah  elemen/komponen.

Padding
Padding adalah memberi jarak atau spasi ke arah dalam  sebuah elemen/komponen.

Masih bingung maksudnya?.....coba lihat gambar berikut saja,barangkali lebih mudah untuk dipahami.

Perhatikan ,disana ada warna kuning,merah,silver,biru dan hijau.
Yang warna biru dan merah kita ibaratkan sebagai border,Baca: Border atau garis pembatas.
Yang warna kuning adalah sebuah ID atau elemen yang ada ditengah halaman blog/web.

Yang warna hijau itu merupakan margin dari ID yang berwarna silver dengan border warna biru.
Selanjutnya Jarak antara border warna biru kepada  border warna merah milik dari elemen kuning itu adalah padding.

Tapi Jarak antara  border warna merah dan border warna biru bagi elemen yang berwarna kuning adalah margin.

Masih bingung?....saya juga bingung,bagaimana mesti menerangkan ini,,, :D :D
Semoga saja paham ya?...

Apa gunanya margin dan padding?...
Agar tata letak antar elemen kelihatan lebih seragam dan rapi sehingga lebih enak untuk dipandang mata.

Sekarang saya terangkan mengenai penulisan syntax atau code CSS nya yang mengatur padding dan margin ini.

Penulisan syntaxnya,
Seperti pada CSS border,CSS margin dan padding  ini juga termasuk properti CSS shorthan atau penulisan kode yang singkat/pendek.
Misalnya kita menuliskan syntaxnya;

#elemen1{padding: 5px;margin: 5px}

Maksudnya kita menginginkan disemua sisi dari ID elemen1 memiliki margin dan padding sebesar 5 pixel(px).Disini yang kita atur lebarnya sesuai selera dengan memasukkan satuan lebar yaitu pixel,semakin tinggi nilainya tentu semakin lebar.

Bagaimana jika kita menginginkan padding atau margin disetiap sisi dari suatu ID elemen berbeda?...
Lain katanya  bagaimana kita memberi spasi luar atau dalam yang berbeda ukuran lebarnya dari sebuah elemen ?...

Kita beri saja nilai yang berbeda beda margin atau padding baik disebelah kanan,kiri,atas ataupun bawahnya.

Contoh syntax

#elemen1{padding-left:5px;
padding-right:5px;
padding-top: 10px;
padding-bottom10px
margin-left:5px;
margin-right:5px;
margin-top:10px;
margin-bottom:10px
}

Sehingga hasilnya nanti adalah bagian kiri dan kanan elemen memiliki padding dan margin selebar 5 pixel.
Akan tetapi  bagian sisi atas dan bawah elemen memiliki padding dan margin selebar 10 pixel.

Bisa juga kita singkat penulisan syntaxnya menjadi;

#elemen{padding: 10px  5px  10px 5px;
margin:10px  5px  10px 5px;
}




Contoh pemakaian margin atau padding pada suatu elemen/komponen.

Penulisan code CSSnya;


/*Dengan padding dan margin*/
.elemen{
border: 2px solid red;
}
.elemen2{
border: 2px solid darkblue;
padding: 10px;
margin: 20px
background: #ccc;
color: blue;
text-align:justify
}
/*Tanpa padding dan margin*/
.elemenb{
border: 2px solid red;
}
.elemen2b{
border: 2px solid darkblue;
background: #ccc;
color: blue;
text-align:justify
}


Penampakan jika pakai margin dan padding;
Ini adalah demo komponen dengan menggunakan margin dan padding.Coba bereksplorasi lebih jauh dengan menambahkan properti lain yang sudah dibahas di sesi CSS sebelumnya.

Penampakan jika tidak pakai margin dan padding;
Ini adalah demo komponen yang tidak menggunakan margin dan padding.Coba bereksplorasi lebih jauh dengan menambahkan properti lain yang sudah dibahas di sesi CSS sebelumnya.


Ternyata yang menggunakan padding dan margin tampak lebih bagus dan rapi.Nah sekarang sudah tahu kan apa itu margin dan padding sekaligus kegunaannya. :D

Sekian saja penjelasan dasar yang singkat ini,semoga gampang dipahami.Bagian terpenting dari sebuah belajar adalah praktek.Silahkan dipraktekkan sehingga nanti akan cepat bisa mengembangkan sendiri.Dan guru yang paling baik adalah pengalaman.
Selamat mencoba ^_^

Tag :

Efek Hover Gambar Dengan CSS



Effect Hover Gambar


Di sini saya menggunakan dua buah gambar yang berbeda. Gambar pertama nantinya akan digunakan sebagai gambar link sedangkan gambar kedua adalah gambar hover (ketika mouse mendekat).

Langkah pertama untuk membuat effect hover gambar dengan CSS adalah mempersiapkan dua buah gambar yang berbeda. Misalnya di sini saya membuat gambar 1 (LINK) dan gambar 2 (SUKSES). Keduanya bukan huruf tetapi gambar. Upload kedua gambar tersebut kemudian copy kedua URL gambar tersebut untuk ditempatkan pada kode CSS.

Di bawah ini saya coba memberi dua buah contoh kode CSS dan HTML yang berbeda untuk membuat effect hover gambar dengan CSS. Kedua cara tersebut akan menghasilkan tampilan yang sama.

Gambar-link :
Effect Hover Gambar






Gambar-hover :
Effect Hover Gambar






Kode CSS 1  
Kode HTML 1


Kode CSS 2  
Kode HTML 2

Tampilan setelah di-publish akan sepertidi bawah (coba Anda dekatkan mouse pada gambar tersebut!)








Pada Kode CSS di atas, Anda bisa merubah posisi, border, ukuran, dan outline image sesuai kebutuhan, namun pada intinya adalah seperti itu dimana gambar-link disimpan pada kode "a" dan gambar-hover disimpan pada kode "a:hover".

Selamat Mencoba ^_^

Tag :

Tentang Link CSS

Semua pelajari dalam pelajaran sebelumnya Anda dapat mengajukan permohonan untuk referensi / link (seperti mengubah font, warna, garis bawah dan sebagainya). Baru adalah bahwa dalam CSS, sifat ini dapat didefinisikan secara berbeda, tergantung pada sudah mengunjungi link, apakah itu aktif, apakah pointer mouse di atas link. Hal ini memungkinkan Anda untuk menambahkan efek menarik pada situs Anda. Untuk tujuan ini, pseudo disebut-kelas.

Apakah semu?

Pseudo-class memungkinkan Anda untuk mengambil berbagai mempertimbangkan kondisi atau peristiwa dalam menentukan sifat-sifat dari tag-HTM.

Pertimbangkan contoh. Seperti yang Anda ketahui, link yang ditentukan dalam <a> tag HTML. Pada CSS, kita juga dapat menggunakan 'a' sebagai selector:

a {
color: blue;
}


Link dapat memiliki negara bagian yang berbeda. Sebagai contoh, ia telah mengunjungi / visited atau tidak. Anda dapat menggunakan pseudo-kelas untuk memungkinkan gaya yang berbeda dari link dikunjungi dan belum dikunjungi.

a: link {
color: blue;
}

a: visited {
color: red;
}


Gunakan :
a: link dan a: visited untuk dan link yang belum dikunjungi, masing-masing. Link Aktif memiliki pseudo a: active, dan a: hover, saat pointer -pada link.

Kami menganggap masing-masing empat pseudo-on contoh dan penjelasan.

Pseudo-class: link

Pseudo-class : link yang digunakan untuk merujuk pada halaman yang pengguna tidak dikunjungi.

Dalam kode contoh link yang belum dikunjungi - biru.

a: link {
color: # 6699CC;
}


Pseudo: visited

Pseudo : visited digunakan untuk merujuk pada halaman yang telah dikunjungi pengguna. Dalam kode contoh mengunjungi link - ungu.

a: visited {
color: # 660099;
}


Pseudo-class: active

Pseudo-class : active digunakan untuk link aktif.

Dalam contoh tersebut, link aktif memiliki latar belakang kuning.

a: active {
background-color: # FFFF00;
}


Pseudo: hover

Pseudo-class : hover digunakan untuk menghubungkan dimana pointer mouse.

Hal ini dapat digunakan untuk menciptakan efek menarik. Sebagai contoh, jika kita ingin menghubungkan berubah oranye dan miring ketika melewati pointer atas mereka, kami CSS akan terlihat seperti:

a: hover {
color: orange;
font-style: italic;
}


Contoh 1: Pengaruh dalam mencari pointer di atas link

Pengaruh pointer mouse di atas link sudah menjadi tempat umum. Kami mempertimbangkan beberapa tambahan contoh untuk pseudo : hover.

Contoh 1a: Jarak antara huruf

Seperti yang Anda ingat dari Pelajaran 5, jarak antara karakter dapat mengatur properti letter-spacing. Hal ini dapat berlaku untuk link:

a: hover {
letter-spacing: 10px;
font-weight: bold;
color: red;
}


Contoh 1b: UPPERCASE dan lowercase
Dalam Bab 5 kita dianggap sebagai milik text-transform, yang dapat menghidupkan karakter dengan huruf besar untuk huruf kecil.

Hal ini juga dapat digunakan untuk menciptakan efek pada link di bawah ini:

a: hover {
text-transform: uppercase;
font-weight: bold;
color: blue;
background-color: yellow;
}


Kedua contoh ini menunjukkan kemungkinan hampir tak terbatas menggabungkan sifat yang berbeda. Anda dapat membuat sendiri efek sendiri - mencobanya!

Contoh 2: Menghapus menggarisbawahi links

Pertanyaan umum adalah - cara menghapus garis bawah dari link?

Anda harus menentukan apakah Anda ingin menghapus menggarisbawahi, karena dapat secara signifikan mengurangi penggunaan situs Anda. Orang-orang digunakan untuk melihat pada halaman link biru bergaris bawah dan tahu bahwa ia perlu untuk mengklik. Bahkan ibu saya tahu itu! Jika Anda menghapus bagian bawah dan mengubah warna link, kemungkinan bahwa hal ini akan membingungkan pengguna dan mereka tidak memiliki akses ke seluruh isi situs Anda.

Sebenarnya menghapus garis bawah dari link sangat sederhana. Seperti yang Anda ingat dari pelajaran 5, property text-decoration dapat digunakan untuk menentukan teks garis bawah. Untuk menghapus garis bawah hanya mengatur text-decoration - none.

a {
text-decoration: none;
}


Atau, Anda juga dapat mengatur text-decoration, bersama dengan sifat lain, untuk semua empat kelas pseudo.

a: link {
color: blue;
text-decoration: none;
}

a: visited {
color: purple;
text-decoration: none;
}

a: active {
background-color: kuning;
text-decoration: none;
}

a: hover {
color: merah;
text-decoration: none;
}

Tag :

Pengenalan CSS (Apa itu CSS)

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.

Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.

Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.

Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.
Tag :

Pure CSS Corner Ribbon

Kali ini saya akan mencoba menjelaskan cara membuat CSS Corner Ribbonyang pada dasarnya untuk memberikan tanda pada sebuah content atau widget tertentu. dalam hal ini saya hanya akan mempergunakan CSS3 sebagai basicnya tanpa menggunakan Image(gambar).

HTML

Banyak penyimpanan markup yang bisa di lakukan
<div class="wrapper">
  <div class="ribbon-wrapper-green">
     <div class="ribbon-green">UNDER</div>
  </div>
</div>

CSS Wrapper
Style warna hijau yang mungkin bisa anda kembangkan sendiri sesuai selera.
.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}
Content yang mencangkup keseluruhan isi. dengan penempatan ini bisa di lakukan di berbagai tempat seperti .post , .content-wrapper , #main-wrapper dan lain-lain . Yang perlu di perhatikan adalan position: relative;. Saya sarankan itu tidak perlu ada perubahan position. karena bila di ganti maka posisi bukan lagi di tempat yang sesuai. mungkin akan muncul di atas header atau di samping. tingkat lanjut tulis komentar.
CSS Corner-Ribbon Style
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}​
ket : tanpa harus ada perubahan .. kecuali background ,border dan box shadow yang bisa di kreasikan dengan tampilan yang anda inginkan.
Tag :

Memahami Dasar-dasar Code CSS

on Sabtu, 01 Desember 2012

Memahami Dasar-dasar Code CSS

Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).

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

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

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

1. Metode Table
2. Metode Div

Manfaat dari CSS:

  1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
  2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
  3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
  4. Dapat berkolaborasi dengan JavaScript.
  5. Digunakan dalam hampir semua web browser.

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

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

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:

  • Static –> posisi normal (default).
  • Relative –> posisi elemen tergantung dari elemen yang lain.
  • Absolute –> posisi elemen berpatokan pada jendela browser.
  • Fixed –> posisi elemen tetap walaupun digeser.

2. Float (Nempel)

Menggunakan properti float atau clear:

  • Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
  • Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
  • Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
  • Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
  • Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.

Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:

Margin –> jarak/batas elemen dengan elemen lain

Border –> border/gari tepi elemen

Padding–> jarak elemen dengan isi elemen (elemen anak)

Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:

contoh penulisan css :

<html>
<head>
<style type = "text/css">
#header {
width:900px;
height:50px;
border: 1px solid #640404;
}
#headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
#headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
<h1>Sample</h1>
<div id = "header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
</body>
</html>

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

  1. External Style Sheet (file CSS berbeda dari file HTML),
  2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
  3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:

Penempatan CSS dalam HTML

Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh:

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

Eksternal CSS

file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>

Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:

<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>

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

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

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

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

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

Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:

<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Link

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

Coba kode CSS berikut:

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

on Sabtu, 17 November 2012

1.. Nomor Darurat untuk telepon genggam adalah 112. Jika anda sedang di daerah yg tidak menerima sinyal HP & perlu memanggil pertolongan , silahkan tekan 112 , dan HP akan mencari otomatis network apapun yang ada untuk menyambungkan nomor darurat anda.Dan yg menarik, nomor 112 dapat ditekan biarpun keypad dalam kondisi lock. 2.. Kunci mobil anda ketinggalan di dalam mobil ? anda memakai Kunci remote ? kalau kunci anda ketinggalan dalam mobil & remote cadangannya ada dirumah , anda segera telpon orang rumah dengan HP , lalu dekatkan HP anda kurang lebih 30CM dari mobil & minta orang rumah untuk menekan tombol pembuka pada remote cadangan yang ada dirumah.pada waktu menekan tombol pembuka remote , minta orang rumah mendekatkan remotenya ke telepon yang dipakainya. 3.. Battery cadangan darurat khusus NOKIA , kalau batterai anda sudah sangat minim padahal anda sedang menunggu telpon penting atau sedang butuh menelfon dalam kondisi darurat , tapi karna telpon anda NOKIA , silahkan tekan *3370# , maka telpon anda otomatis restart dan baterai akan menambah 50% . 4.. Tips untuk menge - check keabsahan mobil/motor anda ( JAKARTA AREA ONLY ) . CONTOH KETIK : metro b8435yd(no plat mobil anda) Kirim ke 1717 , nanti akan ada balasan dari kepolisian mengenai data2 kendaraan anda , tips ini juga berguna mengetahui data2 mobil bekas yg hendak anda akan beli . 5.. jika anda terancam jiwa karna dirampok/ ditodong seseorang untuk mengeluarkan uang dari atm , maka anda bisa minta pertolongan diam2 dengan memberikan nomor pin SECARA TERBALIK , misal nomor asli pin anda 1254 , nah input 4521 di ATM maka mesin akan mengeluarkan uang anda juga tanda bahaya ke kantor polisi tanpa diketahui pencuri tsb
Tag :

Tutorial Mengetik 10 Jari

on Jumat, 09 November 2012


Tentunya anda orang yang bekerja di kantor, pelajar, atau bahkan mahasiswa tidak akan pernah lepas dari pekerjaan mengetik, sekarang ini mengetik sudah menjadi makanan sehari-hari bagi anda, bahkan dewasa ini lomba mengetik pun sudah banyak diadakan. Tak usah panjang lebar, berikut merupakan tips n trick dalam mengetik 10 jari buta dengan cepat, bahkan anda tidak perlu untuk kursus mengetik dalam menguasainya.
Tag :
 
© Pandu KM (INGIN BERBAGI) | All Rights Reserved
Bloggerized By Imuzcorner | Powered By Blogger | CoolBiz Blogger Template By Free Blogger Template