Weblog Wawazawa Playground - gambar, animasi, download, skripsi, lagu-lagu, indonesia, terbaru, gratis, tutorial, flash, gif, lirik, chord, belajar, actionscript, background

Kadang agar tampilan blog kita terkesan lebih professional dan nyaman dilihat, alangkah baiknya kita meminimalkan emen-elemen blog yang berbau gratisan muncul di halaman blog kita. Nah bagaimana triknya agar elemen-elemen blog yang berbau gratisan tersebut terkesan “nggak gratisan”?

Saya sendiri biasanya memanfaatkan CSS overflow:hidden untuk menutupi/masking tampilan elemen blog gratisan yang kadang membuat tampilan blog kurang sedap dipandang mata.

Sebagai contoh, berikut saya akan masking tampilan Live Visitor dari Feedjit.com yang saya pasang di blog saya.

Tampilan asli :

Hasilnya setelah di-masking :

Pada contoh diatas, saya memanfaatkan CSS sbb:
<div style=”width:170px;height:155px;overflow:hidden;”>
<div style=”margin-top:-60px;margin-left:-1px;”>
<img src=”http://feedjit.com/b/3384657654e504e7.png” />
</div>
</div>

Penjelasan :
Pada kode warna biru terdapat properties CSS width:170px; height:155px; untuk membatasi tampilan dari object yang akan di-masking. Kemudian selanjutnya ditambahkan properties overflow:hidden; yang berfungsi untuk menyembunyikan tampilan object jika object tersebut melebihi batas width dan height yang telah ditentukan sebelumnya.

Pada kode warna merah terdapat properties CSS margin-top:-60px; margin-left:-1px;. Fungsi dari properties tersebut adalah untuk menggerakkan object yang akan di-masking. Margin-top untuk menggerakkan object ke atas, dan margin-left untuk menggerakkan object ke kiri. Semakin banyak nilai negatif dari masing-masing margin akan berakibat object bergerak ke atas dan ke kiri.

Yup, semoga bermanfaat. Selamat berkreasi :)

Salahsatu kendala cepat tidaknya website ditampilkan di browser selain koneksi internet adalah besar-kecilnya file dari halaman website itu sendiri. Termasuk beberapa elemen pendukung meliputi gambar, javascript, swf, css dll.

Nah kali ini kita akan bahas bagaimana cara file css agar lebih kecil ukurannya sehingga halaman website semakin cepat di-load oleh browser.

Contoh kecil sbb :

.kotak {font-size:11px;color:#333333;}
.bulat {font-size:11px;color:#333333;}
Karena kedua class tersebut memiliki properties yang sama sebaiknya tinggal digabung saja menjadi kayak gini :
.kotak,.bulat {font-size:11px;color:#333333;}

Hemat beberapa huruf kan :)

.hitam {color:#000000;}
.putih {color:#ffffff;}
Untuk warna dengan nilai hexadecimal sama, bisa ditulis sebagian aja. Hasilnya kayak gini :
.hitam {color:#000;}
.putih {color:#fff;}

Lumayan bisa mengurangi ukuran file css meskipun cuman beberapa byte aja :P

Apalagi yah… hmmm… hahahaha… lupa :D
Sementara sekian dulu sedikit tutorial css kali ini kapan-kapan nyambung lagi :)

Ada info bagus nih dari ID-webhost.com :
ID-webhost menghadirkan paket blog baru. Kini Anda bisa mempunyai blog dengan nama domain sendiri hanya dengan 110 ribu per tahun.

Apa keunggulan dari Paket Blogger/Blogspot With Your Domain?

Anda bisa memiliki blog dengan nama domain sendiri (namaanda.com dll) dengan harga murah serta fitur Blogger/Blogspot untuk mengatur dan meng-update blog Anda.

Bagaimana cara memiliki Paket Blogger/Blogspot ini?

1. Registrasi di ID-webhost.com

- Buka ID-webhost.com kemudian klik pada menu : “Order Now”, lalu pilih “Pendaftaran Nama Domain Baru” untuk “Daftar Domain Saja”.
- Pada langkah selanjutnya silakan isi data diri Anda, dan pada kolom catatan isi dengan alamat URL blog Blogger/Blogspot milik Anda. Misal : “Daftar Blogger/Blogspot With Your Domain : http://namabloganda.blogspot.com”.
- Lanjutkan registrasi sampai selesai, klik “Check Out”.

2. Setting di Account Blogger/Blogspot

Jika Anda belum mempunyai account Blogger/Blogspot, silakan buat account terlebih dahulu di https://www.blogger.com/start dimana alamat URL Blogger/Blogspot ini yang diisikan saat registrasi di ID-webhost.com. Setelah account Blogger/Blogspot Anda aktif, silakan login di account Blogger/Blogspot tersebut, lalu pada tab “Setting” pilih menu “Publishing” dan pada Blogspot Address isikan dengan nama domain Anda. Petunjuk selengkapnya bisa Anda baca di http://help.blogger.com/bin/answer.py?hl=en&answer=55373.

3. Setelah mengupdate Blogspot Address, silakan tunggu resolve DNS sekitar 12-48 jam sebelum blog Anda bisa diakses.

Secara default blog aktif Anda di alamat misal “http://namablog.blogspot.com” akan tetap bisa diakses meskipun Anda telah mengubah alamat tersebut dengan nama domain baru.
Salahsatu kelebihan menggunakan paket ini adalah Anda tidak perlu pusing kehabisan bandwidth hosting karena hosting ada di Blogger/Blogspot dan kita tidak mengeluarkan uang sepeserpun. Kita hanya beli nama domainnya saja. Selain itu blog kita akan terlihat professional dengan nama domain pribadi.

Anda tertarik? Segera pilih nama domain Anda untuk dijadikan alamat blog pribadimu :)

Setelah sebelumnya kita memanfaatkan free website thumbnailer dari beberapa situs macam websnapr.com dll, kini hadir lagi layanan situs pembuat thumbnail website yang menurut saya bagus banget. Yup, Bitpixels yang beralamat di http://www.bitpixels.com memberikan layanan ini dengan gratis, tanpa iklan, serta sangat mudah diintegrasikan dengan website milik Anda. Caranya cukup simple, daftar dengan account google kamu di situs tersebut. Dan selanjutnya tinggal di copypaste kode beserta url webiste/blog yang akan diambil thumbnailnya.

Berikut contoh hasilnya :

Source : http://zawa.blogsome.com

Source : http://wawazawa.blogspot.com

Source : http://unazzanu.blogspot.com

Yup, semoga bermanfaat :)

Setelah sebelumnya kita bereksperimen menampilkan emoticon yahoo messenger di blogsome memanfaatkan template engine smarty yang tertanam di blogsome, kali ini kita akan mencoba plugin math (operasi matematika) dimana bisa kita gunakan untuk membuat random image atau untuk membuat sesuatu yang lain yang berbau random/acak. :P

Berikut contoh script smarty yang saya buat :

{math equation="rand(1,3)" assign=acak}
{if $acak==1}
<img src="/images/gambar1.jpg" />
{elseif $acak==2}
<img src="/images/gambar2.jpg" />
{elseif $acak==3}
<img src="/images/gambar3.jpg" />
{else}
<img src="/images/gambar4.jpg" />
{/if}

Penjelasan :
Pada script diatas, {math equation="rand(1,3)" assign=acak} akan menghasilkan nilai random antara 1-3 kemudian nilai tersebut akan dimasukkan ke variabel acak. Nah jika ingin random angka banyak tinggal ditambahkan aja nilainya menjadi lebih besar. Misal {math equation="rand(1,25)" assign=acak} akan menghasilkan angka random antara 1-25.

Kemudian nilai variabel “acak” di cek jika nilainya 1 maka akan menampilkan file gambar “gambar1.jpg” dan seterusnya. Yup, selanjutnya tinggal berkreasi lagi sendiri memanfaatkan plugin math pada smarty di template blogsome milik kalian :)

Semoga bermanfaat…

Akhirnya setelah sekian lama bosan dengan ngeblog hari ini moodnya datang lagi… ngeblog lagi… sekalian nunggu pemilihan umum Indonesia 2009 hehehehe… yup kali ini kita akan membahas tentang pemanfaatan JavaScript di Blogsome. :) Sebenarnya di Blogsome kita diperbolehkan untuk langsung memasang JavaScript di template blog. Namun karena di sistem Blogsome menggunakan engine Smarty Code dimana menggunakan karakter kurung kurawal “{ }” untuk codingnya maka jika kita memasukkan JavaScript yang mengandung tanda kurung kurawal juga maka oleh Smarty Code akan dieksekusi. Dan akibatnya akan terjadi error.

Agar tidak terjadi salah penafsiran antara tanda kurung kurawal pada JavaScript dan Smarty Code maka harus digunakan kode Smarty {literal} untuk menandakan bahwa karakter kurung kurawal yang dimasukkan adalah untuk JavaScript bukan untuk Code Smarty.

Penggunaan {literal} adalah sbb :

{literal}
<script type="text/javascript">
function makan(){
document.write("Makan Soto Ayam");
}
</script>
{/literal}

Jangan lupa penutup batas akhirnya dikasih {/literal}
Yup, semoga bermanfaat :)

Search terms : tutorial javascript, download smarty bahasa indonesia, blogsome indonesia, ngeblog dapat duit, berkampanye dengan damai di pemilihan umum indonesia 2009, pemilu damai tahun 2009 indonesia.

Kemarin iseng utak-utik smarty code dan berhasil buat script mungil yang memanfaatkan plugin math (operasi matematika) di smarty code untuk menampilkan umur kamu pada "About Me" di sidebar. Caranya cukup mudah, masuk ke menu manage >> files.

Terus buat profil about me kamu di sidebar dan tambahkan smarty code berikut :

{capture name=tahunskrg}{$smarty.now|date_format:"%Y"}{/capture}
{math equation=$smarty.capture.tahunskrg-1984 assign=umur}
<h2>About Me</h2>
<ul><li>
<img src="fotokamu.jpg" align="left" border="0"> Nama kamu. Female, {$umur} tahun. Penyuka kelinci. Suka makan sate ayam. Bla bla bla… isi about me nya diganti sendiri yah hehehehe…
</li></ul>

Cara kerja script diatas adalah pertama kita capture informasi tahun saat ini yang diambil dari server blogsome dan hasilnya dimasukkan ke variable "tahunskrg". Kemudian variable "tahunskrg" dikurangkan dengan tahun lahir kamu dan hasilnya dimasukkan ke variable "umur". Pada contoh diatas digunakan tahun 1984, untuk selanjutnya ganti dengan tahun lahir kamu yah hehehehe…

Untuk menampilkan hasilnya tinggal meletakkan {$umur} di teks about me yang telah kamu buat… :)

Yup semoga bermanfaat… kapan-kapan kalo ada waktu luang akan saya bahas lagi pemanfaatan plugin math pada smarty code lebih lanjut… :D tentunya dengan bahasa Indonesia hihihihi… btw pemilihan umum a.k.a pemilu 2009 kapan ya diadakan di Indonesia? Penasaran nih dengan pemenangnya nanti… :D

Search terms : smarty code tutorial, templates blogsome gratis, menampilkan umur pada blog, cara kerja smarty code, download smarty code terbaru, resep sate ayam, pemilu damai 2009, kampanye damai pemilihan umum 2009 di indonesia, pemilu indonesia 2009 berlangsung damai.

Bagi kawan-kawan pengguna free blog dari Blogsome dan pengin ganti themes/template-nya dengan themes yang lebih bagus, berikut ada salahsatu user Blogsome yang menyediakan Free Blogsome Themes yang dengan senang hati meluangkan waktunya untuk porting kode themes Wordpress menjadi kode themes Blogsome. Disana terdapat banyak pilihan desain themes Blogsome yang bisa kamu aplikasikan ke blog milikmu. Dan yang pasti lebih bagus dari themes-themes default dari Blogsome :)

Yup, bagi yang penasaran silakan main ke : http://citizenonmars.blogsome.com/category/blogsome-themes/

Hmmm… pengin desain themes Blogsome yang lebih bagus lagi??? hihihihi… cari desain free themes Wordpress yang kamu anggap desainnya bagus. Terus porting/ubah kodenya ke Blogsome. :)

Salahsatu kelebihan Blogsome adalah kita bisa bermain-main dengan Smarty Code dimana hal ini tidak dipunyai oleh penyedia free blog lainnya :D

Search terms : free blogsome themes, blogsome templates, template blog gratis untuk blogsome, smarty code for blogsome, free blog accessories.

Gak tau kenapa sejak Friendster berganti engine blognya dari Typepad menjadi Wordpress, banyak temen2 yang dulunya pake Blogger, WP.com, Blogsome atau fasilitas blog gratis lainnya jadi balik kucing memakai blog FS lagi :D

Mungkin bagi mereka praktis kali yah main FS sekalian ngeblog hanya sekali login pake account yang sama. Lagi pula blog Friendster kali ini juga gak ada (belum) iklannya kayak dulu. So, agak nyaman untuk digunakan ngeblog tanpa terganggu iklan lagi hehe…

Untuk templates blognya sendiri juga disediakan banyak pilihan layaknya blog gratisan lain yang menggunakan engine Wordpress Multiuser. Tapi sayang lagi2 editing templatenya ga diperbolehin huhuhu… :P Yah terpaksa main dengan templates yang seadanya…

Yup met bernostalgia dengan blog Friendster hihihi… ^^V

Kemarin salahsatu teman ada yang nanyain gimana caranya mengakses email yahoo ataupun gmail melalui handphone/ponsel. Hmmm… sebenarnya mudah banget. Kita tinggal buka browser web yang ada di handphone. Terus jika pengin mengakses email di yahoo mail masukkan alamat http://wap.yahoo.com Setelah muncul halaman depan yahoo mobile, klik menu “Mail”. Selanjutnya tinggal login menggunakan ID yahoo seperti biasa.

Untuk gmail mobile kita bisa akses melalui alamat http://m.gmail.com Cukup mudah bukan… :) Saran saya agar kegiatan browsing via handphone/ponsel bisa lebih menyenangkan coba deh handphone kamu di install OperaMini. Cari dan download aja aplikasi java OperaMini ini via http://wap.getjar.com Dengan tampilan browser yang mirip aslinya di browser komputer serta dilengkapi dengan tampilan cursor mouse dan pengaturan layar yang bisa di-costumize menjadi layar lebar ataupun standard menjadikan kegiatan browsing di handphone layaknya berada di depan komputer hehehehe… :)

Selamat mencoba, semoga bermanfaat.

Search terms : download aplikasi java untuk browsing, cara mengakses email yahoo dari handphone, mengakses gmail dari ponsel, daftar harga handphone nokia terbaru, download operamini untuk handphone, menjebol password yahoo mail, cara buka email yahoo dari handphone.