headerphoto

Bisakah kawan melihat huruf B sebagai huruf pertama tampak sangat besar? ukurannya lebih dari 6x ukuran huruf lainnya. Style membentuk huruf pertama terlihat sangat besar dinamakan dropcap. Dropcap ini bisa juga kita gunakan sebagai pengganti gambar yang biasanya disematkan pada pojok kiri awal postingan.

Membuat dropcap pada blogger cukup mudah, caranya kita bagi menjadi 2 bagian, yaitu:
1) Bagian Template
  1. Sign in ke Blogger - Rancangan - Edit HTML
  2. Cari kode blockquote
  3. Copy paste kode berikut ini di atasnya
    dropcap { color: #666; margin: 0 5px 5px 0; padding: 30px 0 10px 0; float: left; font-size: 650%; }
  4. Simpan Template

2) Bagian Posting
  1. Klik tab Posting untuk membuat entri baru
  2. Dalam modus Edit HTML, huruf pertama disisipkan antara kode <dropcap></dropcap>
  3. Contohnya seperti <dropcap>B</dropcap>isakah....
  4. Selesai menulis ya Terbitkan Entri dong
  5. Lihat hasilnya

Lanjut baca »»
3 Komentar Penulis: 00.05

Web browser Opera merupakan salah satu alat browsing terbesar saat ini, telah mencapai lebih dari 170 juta pemakai di seluruh dunia. Apakah kawan termasuk salah satu pemakai browser yang berslogan Menjelajah yang lebih cerdas tersebut?

Penasaran dengan browser Opera untuk dipasang pada OS Linux Mint, maka saya coba untuk menginstalnya, dan berikut langkahnya
  1. klik link ini Opera, secara otomatis mendeteksi OS yang digunakan
  2. Untuk memulai download klik Unduh Opera
  3. Otomatis mendeteksi OS yang digunakan, atau bisa dipilih opsi yang sesuai keinginan, lalu klik Download Opera
  4. Simpan dalam harddisk file sebesar 10 MB yang akan di download
  5. Untuk menginstal, cukup diekseskusi atau tekan tombol enter pada papan keyboard file hasil download tadi (misalnya: opera_11.10.2092_i386.deb)
  6. Opera berhasil dipasang pada Linux Mint Isadora


Mencoba Web Browser Opera di OS Linux Mint tidaklah sulit, bahkan sangat mudah bukan..?

Lanjut baca »»
1 Komentar Penulis: 21.25

Membahas CSS tidak ubahnya seperti belajar memodifikasi blog. Dengan bahasa HTML-nya, CSS bisa membuat blog tampil beda, sesuai yang kita inginkan. Sangat menarik membahasnya, apalagi bagi saya yang suka ngutak-atik blog dan sedikit banyak menulis tentang tutorial blog.

Bagaimana dengan kawan-kawan blogger? apa tertarik membahas CSS? apa kawan mengutak-atik blog tahu dasar-dasar CSS? atau apa kawan menulis tutorial blog hanya sekedar copy paste tanpa memiliki pengetahuan dasar HTML yang cukup?

Tata cara penulisan CSS <div style=" - - - "></div> seperti dalam beberapa kode yang saya contohkan disini, merupakan cara penulisan CSS dengan metode Inline Style Sheet[1]. Selain metode tersebut, ada metode kedua penulisan CSS yaitu Embedded Style Sheet, dimana penulisannya <style> - - - </style> yang saya contohkan seperti dibawah ini (kode CSS pada Belajar CSS -5- tentang Kombinasi Atribut atau Property CSS

Baris horizontal
<style>
.boxabi1 {
border-left: 6px solid #FBB784;
margin: 5px 10px 5px 25px;
padding: 10px;
background: #FFFFCE;
color: #A52A2A;
width: 450px;
font-size: 17px;
}
</style>

Baris vertikal (plus penggabungan dua buah style)
<style>
.boxabi2 { border-right: 3px solid #006600; border-bottom: 3px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width: 430px; -moz-border-radius: 0 15px; }
.boxabi3 { margin: 10px; padding: 10px; background: #EBF3FB; color: blue; font-size: 23px; width: 400px; height: 100px; overflow: auto; }
</style>


Untuk memanggil CSS diatas, kodenya adalah
  1. <div class="boxabi1">Tulis disini</div>
  2. <div class="boxabi2">Tulis disini</div>
  3. <div class="boxabi3">Tulis disini</div>


Adapun hasilnya
  1. Assalamu'alaikum warohmatullohi wabarokatuh
  2. Bismillaahirrahmaanirrahiim. Segala puji bagi Allah Tuhan semesta alam, Yang menggenggam kehidupan ini, Yang telah menganugerahkan kemampuan kepada penulis untuk bisa menyelesaikan penyusunan skripsi ini.
  3. Aksi Norman mulanya beredar dari HP ke HP di kalangan polisi di Gorontalo. Tetapi tanpa diduga gayanya itu menembus Youtube. Sampai sekitar pukul 17.30, hari Jumat, 8 Maret 2011, video Norman telah diunduh 1.035.359 kali. Sedangkan versi aslinya milik Shahrukh Khan dan Malaika Arora baru diunduh 113.016 kali. Luar biasa, kepupoleran Norman di Youtube dengan "Chaiyya Chaiyya"-nya jauh melebihi Shahrukh Khan.[2]


Referensi
[1] Wikipedia
[2] Kompas

Lanjut baca »»
4 Komentar Penulis: 23.32

Sampai posting ini diterbitkan, saya telah membahas atribut atau property CSS sebanyak tiga belas buah. Untuk mereviewnya kawan bisa lihat disini. Sebenarnya masih banyak atribut lain yang belum dibahas, namun kali ini saya tidak akan membahas atribut yang lainnya, dan akan fokus pada bagaimana cara mengkombinasikan atribut-atribut tersebut. Sehingga diperoleh suatu bentuk, aplikasi, atau style elemen seperti yang kita butuhkan.

Kombinasi atribut CSS tidak mutlak dipasang dalam jumlah yang banyak untuk sebuah elemen atau aplikasi. Kita bisa memasangnya, cukup yang kita perlukan saja. Contohnya seperti dibawah ini:

  • Aplikasi Blockquote (tujuh atribut) - Blockquote, Menggunakan Fasilitas Template Blogger untuk Membentuk Tulisan
    <div style="border-left: 6px solid #FBB784; margin: 5px 10px 5px 25px; padding: 10px; background: #FFFFCE; color: #A52A2A; width: 450px; font-size: 17px;">Tulis disini</div>

  • Aplikasi kotak pemberitahuan (delapan atribut)
    <div style="border-right: 3px solid #006600; border-bottom: 3px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width: 430px; -moz-border-radius: 0 15px;">Tulis disini</div>

  • Aplikasi Sroll bar untuk sebuah script (delapan atribut) - Script Posting Terbaru dan (atau) Recent Post
    <div style="margin: 10px; padding: 10px; background: #EBF3FB; color: blue; font-size: 23px; width: 400px; height: 100px; overflow: auto;">Tulis disini</div>


Bagaimana..? Cukup mudah bukan mengkombinasikan CSS?
Bila kawan ingin menggunakan CSS diatas, silahkan copy paste kodenya lalu ganti tulisan Tulis disini.

Lanjut baca »»
0 Komentar Penulis: 22.11

Melanjutkan materi pembahasan CSS, kali ini bagian ke-4 tentang Float, Height, dan Overflow. Sebelumnya saya berharap kawan memahami sepuluh buah atribut CSS yang telah dijelaskan pada Belajar CSS -1- tentang Border, Margin, Padding (tiga atribut), Belajar CSS -2- tentang Background, Color, Width, Border-radius (empat atribut), dan Belajar CSS -3- tentang Font size, Text align, Text transform (tiga atribut).

Fungsi dari masing-masing atribut CSS bagian ke-4 ini adalah
  1. Float: untuk menentukan di mana posisi suatu elemen (tulisan, gambar, script, kotak pemberitahuan, atau box informasi) relatif terhadap elemen lain
  2. Height: untuk menentukan tinggi elemen
  3. Overflow: untuk membuat scroll bar atau kotak gulir


Dibawah ini beberapa kode perintah sekaligus hasil yang ditampilkannya.

Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, dan TEXT TRANSFORM (sepuluh atribut)
<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase;">Tulis disini</div>


<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: left;">Tulis disini</div>

Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, TEXT TRANSFORM, dan FLOAT-LEFT (sebelas atribut)



<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: right;">Tulis disini</div>

Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, TEXT TRANSFORM, dan FLOAT-RIGHT (sebelas atribut)



<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: left; height: 180px;">Tulis disini</div>

Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, TEXT TRANSFORM, FLOAT, dan HEIGHT (duabelas atribut)



<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: left; height: 100px; overflow: auto;">Tulis disini</div>

Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, TEXT TRANSFORM, FLOAT, HEIGHT, dan OVER FLOW (tigabelas atribut)


Catatan:

Lanjut baca »»
1 Komentar Penulis: 21.51

Sebagian besar OS Linux memasang web browser Mozilla Firefox, seperti Ubuntu, Fedora, Open SUSE, Mandriva, Knoppix, atau Linux Mint. Firefox selain mendukung semangat open source, juga terkenal sebagai browser yang kaya akan add-ons. Salah satu add-ons Firefox yang perlu untuk dipasang di Linux adalah Add to Search Bar.

Add to Search Bar merupakan sebuah add-ons Firefox yang berguna untuk memasang search engine Google Indonesia (www.google.co.id) pada search bar atau kolom pencarian yang terletak dipojok kanan atas browser, karena secara default search engine Firefox-nya tertuju pada Google pusat (www.google.com).

Contoh default search engine Firefox terlihat pada gambar dibawah ini (OS yang digunakan Linux Mint 9 Isadora dengan Mozilla Firefox versi 3.6.3)


Langkah untuk memasang search engine Google Indonesia pada search bar Mozilla Firefox, yaitu:
  1. Klik tab Tools - Add ons
  2. Pada kolom pencarian ketik Add to Search Bar

  3. Klik Add to Firefox, lalu Install now
  4. Restart Mozilla Firefox
  5. Ketik www.google.co.id pada bar URL
  6. Setelah situs pencari Google Indonesia terbuka, klik kanan pada kolom pencarian, lalu klik Add to Search Bar

  7. Isi nama dengan Google Indonesia atau Google Id, klik Ok

  8. Tes keberhasilannya dengan mengisikan keyword yang kita tuju pada search bar Google Indonesia

Lanjut baca »»
3 Komentar Penulis: 21.51

Salah satu tips optimalisasi program periklanan jenis PPC (Pay per Click, seperti Google AdSense atau Kumpul Blogger) adalah penempatan iklan. Semakin baik posisi iklan ditempatkan pada blog kita, akan berakibat semakin baik pula penghasilan yang kita dapatkan. Salah satu posisi yang sangat baik untuk menempatkan iklan PPC ini adalah di bagian atas atau pada header blog. Namun pada beberapa template yang kita gunakan, menyembunyikan penambahan elemen (gadget) pada bagian ini.

Perhatikan gambar dibawah ini, dimana template blog tidak menyediakan penambahan gadget pada bagian header


Trik penambahan elemen (tambah gadget) pada bagian header blog terbilang cukup gampang. Langkahnya:
  1. Sign In ke Dasbor - Rancangan - Edit HTML
  2. Download Template Lengkap sebagai backup
  3. Cari kode dibawah ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1 showaddelement='no'>
    <b:widget id='Header1' locked='true' title='linuxvanbook (Header)' type='Header'/>
    </b:section>
  4. Ubah angka '1' menjadi '4' pada maxwidgets='1' dan ganti kata 'no' menjadi 'yes' pada showaddelement='no'
  5. Klik Simpan Template
  6. Lihat di tab Elemen Laman, bila berhasil akan terlihat seperti gambar dibawah ini



Posisi yang juga baik untuk menempatkan iklan PPC yaitu pada bagian posting blog, untuk yang satu ini silahkan baca di Penambahan Elemen (Tambah Gadget) diatas Kolom Posting

Lanjut baca »»
11 Komentar Penulis: 21.24

Materi belajar CSS bagian ke-3 ini berkaitan dengan huruf dan tulisan. Akan dijelaskan bagaimana merubah style ukuran huruf menjadi besar, menentukan perataan tulisan, dan membuat huruf-huruf dalam tulisan menjadi huruf besar (kapital) atau huruf kecil semuanya, tetep dalam bahasa HTML.

Saya harap kawan memahami tujuh buah atribut CSS yang telah disebutkan pada Belajar CSS -1- tentang Border, Margin, Padding (tiga atribut) dan Belajar CSS -2- tentang Background, Color, Width, Border-radius (empat atribut), karena disini saya akan menambahkan tiga buah atribut lagi, yaitu font size, text align, dan text transform.

Dibawah ini beberapa kode perintah dan hasil yang ditampilkannya.

Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, dan BORDER-RADIUS (tujuh atribut)
<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px;">Tulis disini</div>


Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, dan FONT SIZE (delapan atribut)
<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px;">Tulis disini</div>


Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, dan TEXT ALIGN (sembilan atribut)
<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: left;">Tulis disini</div>


<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: right;">Tulis disini</div>


<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: center;">Tulis disini</div>


<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: justify;">Tulis disini</div>


Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, dan TEXT TRANSFORM (sepuluh atribut)
<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: right; text-transform: uppercase;">Tulis disini</div>


<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: right; text-transform: lowercase;">Tulis disini</div>


Kawan bisa oge mengganti angka-angka yang terdapat didalamnya, mengganti dengan warna yang lain, atau juga mengkombinasikannya. Lalu, baca materi berikutnya Belajar CSS -4- tentang Float, Height, Overflow

Lanjut baca »»
1 Komentar Penulis: 01.08

Bila pada postingan sebelumnya (baca di Belajar CSS -1- tentang Border, Margin, Padding) menggunakan tiga buah atribut CSS, yaitu border, margin, dan padding, maka untuk materi belajar CSS kali ini ditambahkan empat buah atribut yaitu background, color, width, dan border-radius, yang akan membuat kotak pemberitahuan atau box informasi blog kita tambah cantik -ga kalah dengan selebritis tanah air- nan menarik.

Fungsi dari masing-masing atribut, yaitu:
  1. Background untuk memberikan warna pada kotak
  2. Color untuk memberikan warna pada tulisan
  3. Width untuk menentukan lebar kotak
  4. Border-radius untuk membuat sudut kotak nampak bulat
Dibawah ini beberapa kode perintah dan hasil yang ditampilkannya.

Kode BORDER dengan MARGIN dan PADDING (tiga atribut)
<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px;">edit disini</div>


Kode BORDER dengan MARGIN, PADDING, dan BACKGROUND (empat atribut)
<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background:#EBF3FB;">edit disini</div>


Kode BORDER dengan MARGIN, PADDING, BACKGROUND, dan COLOR (lima atribut)
<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue;">edit disini</div>


Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, dan WIDTH (enam atribut)
<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px;">edit disini</div>


Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, dan BORDER-RADIUS (tujuh atribut)
<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px; -moz-border-radius: 9px;">edit disini</div>


<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px; -moz-border-radius: 0 9px;">edit disini</div>


<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px; -moz-border-radius: 9px 0;">edit disini</div>


<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px; -moz-border-radius: 9px 9px 0 0;">edit disini</div>


<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px; -moz-border-radius: 0 0 9px 9px;">edit disini</div>


Kawan bisa mengganti angka-angka yang terdapat didalamnya, mengganti dengan warna yang lain, atau juga mengkombinasikannya. Dan jangan kemana-mana, lanjut pada materi Belajar CSS -3- tentang Font size, Text align, Text transform

Lanjut baca »»
0 Komentar Penulis: 00.40
Langganan: Postingan (Atom)