CSS BASIC (#14-CSS List Style)

---

List Style

Anda dapat mengatur tampilan yang diinginkan dalam seuatu daftar dengan ringkas menggunakan property list-style.

list-style: value value;

Values:

• image
• position
• type

Anda juga dapat mengaturnya secara individu.

List Style Image

Anda dapat menggunakan gambar sebagai pengganti point bullet pada list style yang anda gunakan.

list-style-image: url(url gambar);

List Style Position

Anda dapat mengatur posisi list style yang anda inginkan dengan menggunakan property list-style-position.

list-style-position: value;

Values:

• inside
• outside

List Style Type

Anda dapat mengatur tampilan point bullets dengan menggunakan property list-style-type.

list-style-type: value;

Values:

• disc
• circle
• square
• decimal
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• none

;)
#stupidJob

---

CSS BASIC (#13-CSS Borders)

---

Anda dapat memberi dan mengatur warna, style dak ukuran dari pembatas (border) pada suatu elemen dengan menyisipkan property border.

border: 1px solid #FF7600;

Values:

• width
• style
• color

Atau anda dapat mengatur setiap property secara individu.

Border Color

Anda dapat mengatur warna border secara individu dengan menyisipkan properti border-color.

border-color: value;

Values:

• color name
• hexadecimal number
• RGB color code
• transparent

Border Style

Anda dapat mengatur style dari border secara individu dengan menyisipkan property border-style.

border-style: value;

Values:

• dashed
• dotted
• double
• hidden
• none
• outset
• ridge
• solid

Border Width

Anda dapat mengatur style dari border secara individu dengan menggunakan property border-style.

border-width: value;

Values:

• Length
• Thin
• Medium
• Thick

Border Side

Anda juga dapat mengatur stye border dari setiap sisi dengan menggunan property border pada setiap sisi.

border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;

Untuk setiap sisi anda juga dapat mengatur ukuran, style dan warna seperti pengaturan border secara individu di atas.

border-top-color: value;
border-top-style: value;
border-top-width: value;
border-right-color: value;
border-right-style: value;
border-right-width: value;
border-bottom-color: value;
border-bottom-style: value;
border-bottom-width: value;
border-left-color: value;
border-left-style: value;
border-left-width: value;

;)
#stupidJob

---

CSS BASIC (#12-CSS Backgrounds)

---

Anda dapat mengatur tampilan background dari tiap elemen pada halaman anda dengan menggunakan property background.

background:#000000 url(url background) top left repeat fixed;

Values:

• attachment
• color
• image
• position
• repeat

Anda juga bisa mengatur setiap property secara individu.

Background Attachment

Anda dapat mengatur apakah background akan mengikuti gerakan ke bawah dan ke atas (scroll) dari halaman atau tetap pada posisinya.

background-attachment:value;

Values:

• scroll
• fixed

Background Color

Anda bisa secara khusus menetapkan warna dari background dengan menyisipkan property background-color.

background-color:value;

Values:

• color name
• hexadecimal number
• RGB color code
• transparent

Background Image

Anda dapat mengatur background menggunakan gambar.

background-image:url(url gambar);

Values:

• url
• none

Background Position

Anda dapat mengatur posisi gambar untuk background pada tiap elemen dengan menggunakan property background-position.

background-position:value;

Values:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x-% y-%
• x-pos y-pos

Background Repeat

Anda dapat mengatur background dari suatu elemen menjadi berulang vertikal, berulang horizontal ataupun tetep (tidak berulang).

background-repeat:value;

Values:

• no-repeat
• repeat (x+y)
• repeat-x (horizontal)
• repeat-y (vertical)

;)
#stupidJob

---

CSS BASIC (#11-Anchors, Links and Pseudo Classes)

---

Berikut ini adalah berbagai contoh cara yang dapat anda gunakan untuk membentuk style dari link pada halaman anda.

• a:link {color:#1e90ff;}
• a:visited {color:#0069d1;}
• a:hover {color:#ffa500;}
• a:focus {color:#b37400;}
• a:active {color:#00b300;}

Sekarang mari kita lihat apa fungsi masing-masing pada setiap style link di atas.

a:link {color:#1e90ff;}
Berfungsi sebagai penetapan warna asli link atau ketika tidak terjadi apa-apa pada link.

a:visited {color:#0069d1;}
Berfungsi sebagai penetapan perubahan warna link ketika pengguna sudah mengunjungi url/alamat yang ada di dalam link.

a:hover {color:#ffa500;}
Berfungsi sebagi penetapan perubahan warna link ketika pengguna meletakkan pointer mouse di atas link.

a:focus {color:#b37400;}
Fungsinya hampir sama dengan hover, tapi ini ditujukan untuk pengguna yang tidak menggunakan mouse. Misalnya seperti tabbing (penggunaan tombol keyboard) atau touch.

a:active {color:#00b300;}
Berfungsi sebagai penetapan link saat ditekan.

Untuk lebih jelasnya silakan perhatikan perubahan-perubahan pada link di bawah ini.

#stupidJob

Pseudo Classes

Anda dapat mengatur link yang terdapat di berbagai bagian dari halaman web anda menjadi warna yang berbeda-beda dengan menggunakan Pseudo Class ini. Misalnya link pada #content dan #navigation, anda dapat melakukannya seperti berikut ini.

#content a:link {color:#1e90ff;}
#content a:visited {color:#0069d1;}
#content a:hover {color:#ffa500;}
#content a:focus {color:#b37400;}
#content a:active {color:#00b300;}

#navigation a:link {color:#ffa500;}
#navigation a:visited {color:#b37400;}
#navigation a:hover {color:#1e90ff;}
#navigation a:focus {color:#0069d1;}
#navigation a:active {color:#00ff00;}

Untuk penulisan pada file (X)HTML bisa seperti berikut ini.

Teks untuk link

;)
#stupidJob

---

MENGHAPUS FOTO/ALBUM PADA GALERI ANDROID - REMOVE PICASA ALBUMS

---

Berikut ini adalah bagaimana cara menghapus foto dari gallery Android (remove Picasa photo/album from Android galleries) . Tapi cara yang saya pakai ini 100% menggunakan hp/mobile/tablet atau tanpa terhubung ke PC/Computer (kecuali koneksi wifi). Sebagai contoh foto/album yang saya maksud adalah seperti di bawah ini.

Pertama-tama, saya disini menggunakan bantuan browser "Dolphin Mini" .

Setelah masuk di Dolphin Mini Browser, silakan masuk ke Google dan lakukan login. Pastikan pada menu setting broser, User Agent yang digunakan adalah "Android (Default)".

Setelah login, klik pada profil dan kemudian pilih "View Profile".

Setelah masuk pada halaman profil, scroll ke halaman paling bawah dan klik pada "Versi Desktop".

Sekarang anda berada pada profil dengan tampilan halaman versi desktop. Klik pada icon foto.

Pada halaman foto, pilih "Album".

Pilih album yang ingin anda hapus dari galeri hp/tablet Android anda.

Setelah album yang anda pilih terbuka dan terpampang foto-foto/gambar-gambar yang pernah anda unggah baik melalui Google+ maupun Blogspot, klik pada icon "Options". Kemudian pilih "Hapus/Delete Album" dan akan muncul pemberitahuan persetujuan gambar/foto album akan dihapus secara permanen, pilih "Hapus/Delete".
Misalnya anda hanya ingin menghapus beberapa foto/gambar, anda hanya tinggal memiluh satu-persatu gambar/foto yang akan anda hapus dan lakukan langkah yang sama dengan cara penghapusan album di atas.

Setelah anda selesai menghapus, keluar dari Dolphin Mini Browser dan "Restart" hp/tablet. Kemudian masuk pada menu "Setting" dan "Account and Sync".



Pada "Manage Accounts" pilih akun yang anda gunakan pada hp/tablet Android anda dan kemudian klik pada "Sync Picasa Web Albums". Tunggu sampai icon syncrone berhenti dan menghilang.

Sekarang coba cek pada gallery anda, apakah sudah terhapus album/foto yang tidak anda inginkan. Kalau belum, coba restart ulang dan syncrone lagi. Kalau masih belum, cek lagi mulai dari langkah pertama.

Atau jika tidak mau terlalu ribet, anda bisa menggunakan cara pintas. Yaitu dengan membuat e-mail baru di Hp/Tablet Android anda (setting » accounts & sync » add account). Waktu proses pembuatan e-mail (gmail) baru jangan centang pada opsi "Sync Picasa Web Albums". Kemudian hapus e-mail yang lama.

Iyo'i, sampai di sini dulu ya kali ini...
:)

#stupidJob

---

IMAGE DOWNLOAD BUTTON SCRIPT

---

Script ini biasa digunakan pada situs-situs penyedia gambar/foto atau web galleries yang bisa didownload secara gratis. Script ini mempunyai salah satu manfaat terpenting yaitu, pengunjung tidak perlu meninggalkan halaman ketika akan mendowload konten seperti halnya terlempar ke halaman save content (khususnya pengguna mobile phone).

Untuk membuatnya, pertama-tama buat sebuah file dengan memasukkan script berikut. <?php$file=$_GET['file'];$name=basename($file);if (!file){die ('file not found');}else{header("Cache-Control: public");header("Content-Description: File Transfer");header("Content-Disposition: attachment;filename=$name");header("Content-Type: image");header("Content-Transfer-Encoding: binary");readfile($file);}?>

Supaya mudah diingat, simpan file tersebut dengan nama download dan ekstensi php.

Berikutnya, masukkan script berikut sebagai fungsi button/tombol/link download. <a href="url file download.php?file=url gambar yang di download" > Download </a> | Build by <a href="http://chockyfj.mywapblog.com/"> #stupidJob </a>

Sebagai contoh jadi, begini. <a href="http://stupidjob.id1945.com/conima/download.php?file=http://stupidjob.id1945.com/images/home_conima.png" > Download </a>

Dan hasilnya seperti ini...

---

TIME TO LOAD PAGE SCRIPT

---

Dibacakali

---

Kali ini saya akan membagikan sebuah script untuk menampilkan info seberapa cepat halaman website anda dibuka. Istilah umum yang digunakan, biasa kita sebut "Time Web Load Page".

Pertama, copy dan pastekan script berikut di dalam tag pada website anda.
<script type="text/javascript">var startTime=new Date();function currentTime(){var a=Math.floor((new Date()-startTime)/10)/100;if (a%1==0) a+=".00";document.getElementById("endTime").innerHTML=a;}var loopTime=setInterval("currentTime()",100);window.onload=function(){clearTimeout(loopTime);}</script>

Selanjutnya, copy dan pastekan script berikut ini di dalam tag pada website anda. Terserah pada footer atau body content.
<script type="text/javascript">document.write('Time to load page » <font color="#ffa500"><b><span id="endTime">0.00</span></b></font> seconds');</script>|Time load page JavaScript © <a href="http://chockyfj.mywapblog.com/"><font color="#1e90ff"><b>#stupidJob Blog</b></font></a>

Di dalam script kedua ada teks "Time to load page &#187", itu bisa anda ganti dengan kalimat anda sendiri.

Cukup sampai disini dulu perjumpaan kali ini. Mudah-mudahan bermanfaat dan sampai jumpa...

---