headerphoto

Trial and Error, begitulah.
Seperti pada postingan sebelumnya teknik penulisan CSS Linked Style Sheet, gara-gara hasilnya gagal, setelah terbit terpaksa saya simpan dan sembunyikan. Hampir 24 jam bersama dengan tulisan ini, saya kemudian terbitkan kembali. Walaupun ada kegagalan, namun akan menjadi bahan perbandingan.

Lucunya, setelah kemarin terpaksa saya cabut penerbitannya, mbah Google masih menemukan postingan saya tersebut setelah saya coba nyari pemecahan masalah itu dengan kata kunci linked style sheet blog (jadi malu )

Error, isu, atau masalah penulisan CSS Linked Style Sheet, yaitu linked CSS atau external CSS tampaknya kurang bersahabat dengan blogspot, sehingga banyak web designer yang menemukan kegagalan, padahal teknik penulisannya sudah yakin benar. Seperti yang terjadi pada tulisan saya kemarin atau yang tersebar pada beberapa forum, contohnya:
Blog Post CSS Not working from external CSS file
...
And, what is really annoying is that any classes or ids I put on divs don't get matched in my CSS files in the browser. For example <div id="test"> the browser is not matching this to my style.css file. And I have double checked that the browser sees the right data in the css file and it is there. Also, when I apply the css to mcePaste it doesn't work either. Please help! All I want to do is add 10px below each paragraph and I can't insert blank lines or use divs with external CSS! What is the issue here?
...

Setelah melakukan percobaan lagi, saya menemukan bahwa file .css nya harus di hosting pada Google Sites, sehingga untuk memperbaiki error postingan kemarin, lihat Bagian Template, ganti
<link href='http://moalmules.googlecode.com/files/goodbox.css' media='all' rel='stylesheet' type='text/css'/>

menjadi
<link href='http://sites.google.com/site/kangcaang/style201/goodbox.css' media='all' rel='stylesheet' type='text/css'/>

dan tidak akan terjadi kegagalan pada hasil penulisan CSS Linked Style Sheet atau External CSS pada blog, seperti dibawah ini
Selanjutnya, kita gunakan semacam tautan menuju file CSS itu jika halaman web atau blog yang didesain akan dibuat seperti model yang ada di script tersebut.

Lanjut baca »»

Menakjubkan teknik Cascading Style Sheet (CSS) ini, banyak perubahan design web yang bisa dilakukan olehnya. Semula background web atau blog menggunakan gambar, bisa kita ganti dengan memakai efek gradient CSS. Contoh penggunaan CSS tersebut akan membuat ukuran blog lebih ringan dan loadingnya menjadi lebih cepat.

Menggunakan teknik CSS, kita harus mengerti tata cara penulisannya. Pada tulisan sebelumnya, telah saya bahas dua buah teknik penulisan CSS, yaitu Inline Style Sheet dan Embedded Style Sheet. Masih dari referensi yang sama, teknik ketiga atau yang terakhir cara penulisan CSS adalah Linked Style Sheet. Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style> ... </style> dibuat pada file terpisah dan disimpan dalam format .css.

Selanjutnya, kita gunakan semacam tautan menuju file CSS itu jika halaman web atau blog yang didesain akan dibuat seperti model yang ada di script tersebut.

Paragrap ketiga adalah contoh hasil dari cara penulisan CSS Linked Style Sheet. Kawan bisa menggunakan efek CSS tersebut pada postingan atau artikel yang kawan tulis, dengan cara
1) Bagian Template
  1. Sign In ke Blogger - Rancangan - Edit HTML
  2. Cari kode <b:skin>
  3. Copy paste kode berikut ini tepat diatasnya
    <link href='http://moalmules.googlecode.com/files/goodbox.css' media='all' rel='stylesheet' type='text/css'/>
  4. Simpan Template

2) Bagian Posting
  1. Klik tab Posting untuk membuat entri baru
  2. Dalam modus Edit HTML, paragrap yang akan diberi efek CSS terletak diantara kode <div class="box">...</div>
  3. Selesai menulis, Terbitkan Entri
  4. Lihat hasilnya

Bila menemukan error, solusinya baca Isu, Masalah, dan Solusi CSS Linked Style Sheet pada Blog

Lanjut baca »»

Sekalipun tersedia paket-paket yang cukup lengkap pada sistem operasi Linux Ubuntu, namun ada kalanya kita memerlukan sebuah paket tambahan. Untuk itu, alamat situs berikut ini bisa menjadi salah satu tujuannya.

Situs yang saya maksudkan adalah Repo UGM. Kelebihannya antara lain:
  • Situsnya sangat ringan untuk dibuka, bahkan bisa menggunakan browser dari HP/ponsel seperti Opera Mini
  • Tersedia paket untuk semua turunan Ubuntu, seperti:
    Ubuntu 10.10 "Maverick Meerkat"
    Ubuntu 10.04 "Lucid lynx"
    Ubuntu 9.10 "Karmic Koala"
    Ubuntu 9.4 "Jaunty Jackalope"
    Ubuntu 8.10 "Intrepid Ibex"
    Ubuntu 8.04 "Hardy Heron"
    Ubuntu 7.10 "Gutsy Gibbon"
    Ubuntu 7.04 "Feisty Fawn"
    Debian 4.0 "etch"
    Debian 5.02 "lenny"
  • Paket bisa digunakan untuk turunan tak resmi Ubuntu
  • File-file paketnya didownload gratis dan bisa disimpan di harddisk, sehingga bisa kita gunakan lagi paketnya apabila sistem Ubuntu kita bermasalah.

Berikut contoh paket yang saya perlukan untuk dipasang di sistem Isadora Linux Mint 9, yang merupakan turunan tak resmi Ubuntu 10.04 "Lucid lynx". Paket tersebut adalah GParted, paket yang berfungsi untuk membuat, mengedit, dan menghapus partisi. Langkahnya:
  1. Buka situs Repo UGM dengan alamat http://repo.ugm.ac.id/apt-web/ atau cukup klik disini
  2. Pilih turunan Ubuntu yang sesuai dengan sistem yang terpasang, pada Base distribution
  3. Masukkan nama paket yang diperlukan pada Packages, lalu klik Submit
  4. Muncul link URLs, klik dan simpan file-file paket yang diberikan.

Lanjut baca »»

Mouse cursor sparkles, cursor bertabur bintang, efek cursor bintang jatuh, warna-warni efek cursor, kursor berbintang atau apapun namanya, masih menarik saya untuk mempercantik blog. Kode scriptnya banyak tersedia dan telah beredar luas di antara para blogger. Jadi, sebagai alternatif bila sekarang atau suatu saat nanti kita perlukan, maka saya praktekkan dan saya tuliskan disini.

Efek cursor warna merah
<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/red_cstar.js"></script>

Efek cursor warna kuning
<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/yellow_cstar.js"></script>

Efek cursor warna biru
<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/blue_cstar.js"></script>

Efek cursor warna hijau
<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/green_cstar.js"></script>

Efek cursor warna hitam
<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/black_cstar.js"></script>


Lanjut baca »»

Tab view berfungsi untuk menghemat ruang atau halaman blog. Bila kita memiliki gadget di sidebar yang cukup banyak dan terlihat memanjang, maka dengan memasang tab view, gadget-gadget tersebut akan tersusun sejajar, sehingga tidak akan terlihat memanjang.

Pemasangan tab view pada blog ini, saya coba sajikan dengan teknik CSS yang cukup mudah. Hanya membutuhkan gadget HTML/JavaScript pada sidebar, header, ataupun footer blog kawan. Teknik ini pun bisa kita pasang pada gadget HTML/JavaScript yang telah ada, seperti yang pernah saya tulis di Tips Menghemat Gadget.

Langkah membuat atau memasang tab view, yaitu:
  1. Copy paste kode berikut
    <style>
    .TabView .Tabs { overflow: hidden; }
    .Tabs a { float: left; text-align: center; padding: 5px 3px; text-decoration: none; border-bottom: none; }
    .Tabs a:hover, .Tabs a.Active { background: #fceabb; text-decoration: none; font-weight: bold; -moz-border-radius: 9px 9px 0 0; border-radius: 9px 9px 0 0; }
    .Pages { overflow: hidden; height: 535px; width: 100%; }
    .Page { background: #fceabb; padding: 10px 8px 8px 10px; }
    </style>
    <script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/tabview.js" type="text/javascript"></script>
    <div id="TabView" class="TabView">
    <div class="Tabs" >
    <a>Tab view 1</a>
    <a>Tab view 2</a>
    <a>Tab view 3</a>
    </div>
    <div class="Pages">
    <div class="Page">
    Isi Tab view 1
    </div>
    <div class="Page">
    Isi Tab view 2
    </div>
    <div class="Page">
    Isi Tab view 3
    </div>
    </div>
    </div>
    <script type="text/javascript">tabview_initialize('TabView');</script>
  2. Ganti Tab view 1, Tab view 2, dan Tab view 3 dengan judul gadget
  3. Ganti Isi Tab view 1, Isi Tab view 2, dan Isi Tab view 3 dengan kode-kode script atau HTML yang menjadi isi gadget.
  4. Bila berhasil, akan terlihat seperti gambar dibawah ini dan telah diterapkan pada sidebar blog yang kawan baca sekarang

Lanjut baca »»

Sudah punya akun email? Coba kawan gunakan satu lagi alamat email gratis, produk dari Microsoft, free MSN Hotmail e-mail address, The efficient way to do email.

Berikut langkah-langkah membuat email Hotmail
  1. Buka situs Windows Live atau klik disini
  2. Klik Sign Up untuk memulai pendaftaran

  3. Isi alamat Hotmail yang akan kita gunakan, tentukan password, dan berikan informasi-informasi yang dibutuhkan
  4. Masukkan karakter yang diminta, lalu klik I Accept
  5. Selamat, kawan telah mempunyai alamat email Hotmail. Untuk mengganti password, melihat kotak masuk dan pengaturan lainnya, klik Go to Inbox

Lanjut baca »»

Tanpa disadari oleh saya selaku blogger, bahwa pagerank blogger.com ternyata lebih kecil dari pada pageranknya facebook.com. Pagerank blogger mempunyai nilai 8, sementara facebook mempunyai nilai penuh alias 10. Hal ini bisa saya lihat melalui webrank toolbar browser firefox yang saya gunakan. Padahal pagerank ditemukan oleh pendiri Google selaku moyangnya blogger, yaitu kang Larry Page dan kang Sergey Brin, isn't it ironic..?

Pagerank sangat dipengaruhi oleh banyaknya situs lain yang meletakkan link yang mengarah ke situsnya. Besar kemungkinan dari segi popularitas, blogger kalah dari facebook, sehingga link menuju facebook akan lebih banyak dari pada link yang mengarah ke blogger. Karena banyak flatform situs atau web yang menulis tentang facebook, sedangkan sedikit flatform blogger yang menulis tentang blognya sendiri, kecuali tutorial. Parahnya lagi tutorial blogger yang ditulis, kebanyakan tidak memberikan link yang tertuju pada blogger itu sendiri.

Kawan, kenapa link orang lain kita pasang sedangkan link leluhur kita tidak? Apa tidak malu dengan fasilitas serba gratis yang diberikan olehnya?

Link yang paling baik adalah link yang dipasang pada halaman utama, dan terkait dengan halaman-halaman lainnya. Link blogger ini bisa kita pasang menggunakan gadget dari blogger (pada Rancangan - Tambah Gadget - Logo) hasilnya seperti link gambar diatas. Bila kawan adalah blogger pengguna Linux, bisa memasang logo atau link gambar dibawah ini
Blogger with Linux
Background gambarnya transparan, sehingga cocok untuk semua warna template, dan berikut kodenya
<a href="http://www.blogger.com" target="_blank"><img border="0" alt="Blogger with Linux" src="http://moalmules.googlecode.com/files/linux-inside-blogger.png"/></a>

Jadilah kita blogger yang peduli dengan blogger.

Lanjut baca »»

Secara default script recent post atau posting terbaru yang pernah saya tulis disini, menampilkan jumlah postingan maksimal 25 buah. Script tersebut ternyata bisa kita modifikasi menjadi lebih dari 25 buah artikel atau posting, maksimal yang ditampilkan 500 buah (wooow.. sebanyak itukah postingan kawan?) dan bisa kita gunakan untuk gadget daftar isi, menu artikel, atau site map yang dipasang pada sidebar blog.

Daftar-Isi-Menu-Artikel-Site-Map-Blog
Dengan tambahan style overflow, gadget daftar isi, menu artikel, atau site map ini, walaupun dengan jumlah postingan yang banyak tidak akan terlihat memanjang.

Berikut script modifikasi lengkapnya
<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; height: 250px; overflow: auto;"><ol><script style="text/javascript" src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/go.js"></script><script style="text/javascript">var numposts = 501;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://planetcaang.blogspot.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=showrecentposts"></script></ol></div>

Pasang script diatas pada gadget HTML/JavaScript template. Sebelum disimpan ganti http://planetcaang.blogspot.com/ dengan alamat blog kawan.
Semoga berhasil

Lanjut baca »»